- +

- +

recursion

- +

layers

- +

perlin

From adf93c988ceef23c6d1aa690a8801d2bb70fbdca Mon Sep 17 00:00:00 2001 From: plusk Date: Sat, 31 Oct 2020 16:25:58 +0000 Subject: [PATCH 05/21] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@?= =?UTF-8?q?=2031ec76c76df02780b8c24522e2c2fa0f2f24a083=20[formerly=20a0bae?= =?UTF-8?q?ebf96cbebb511c151af5b124baf9cad59ef]=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 77db755ab6cb6796b2f9ca0ab44334c4ba77cb14 --- workshop/chords.js | 132 ++++++++++++++++++++++++ workshop/layers.js | 144 ++++++++++++++++++++++++++ workshop/perlin.js | 234 ++++++++++++++++++++++++++++++++++++++++++ workshop/recursion.js | 169 ++++++++++++++++++++++++++++++ 4 files changed, 679 insertions(+) create mode 100644 workshop/chords.js create mode 100644 workshop/layers.js create mode 100644 workshop/perlin.js create mode 100644 workshop/recursion.js diff --git a/workshop/chords.js b/workshop/chords.js new file mode 100644 index 0000000..98ac21f --- /dev/null +++ b/workshop/chords.js @@ -0,0 +1,132 @@ +let PALETTES, COLORS, STROKE, BG; + +/* Enable to make a canvas suitable for A2 paper */ +const PRINT_MODE = false; + +/* Get a random palette or choose a specific one from palettes.json */ +const RANDOM_PALETTE = false; +const PALETTE_NAME = "mono"; + +/* Choose a random color from the palette for each line */ +const RANDOM_STROKE = false; + +/* Each line has its own color from the palette */ +const PALETTED_STROKE = false; + +/* How big the circle will be */ +const RADIUS = 400; + +/* How many independent lines will be drawn each frame */ +const LINE_COUNT = 10; + +/* How swiftly the lines will move around (lower is slower) */ +const NOISE_SPEED = 0.05; + +/* How opaque the lines will be, lower means more transparent */ +/* Lower will be smoother, but also takes longer to fill the circle */ +const OPACITY = 0.05; +const STROKE_WEIGHT = 1; + +/* Enable to use randomness instead of noise to select line locations */ +/* This effectively overrides the remaining config */ +const IS_RANDOM = false; + +/* Experimental: mirrors lines through the center */ +const IS_SYMMETRICAL = false; + +/* If not IS_RANDOM: noise will naturally lean towards an angle */ +/* Enable this to vary where the angle is, or disable and specify your own */ +const RANDOM_BIASED_ANGLE = true; +let BIASED_ANGLE = Math.PI / 2; + +/* If not IS_RANDOM: this value effectively says how strong the bias is */ +/* A lower value means the bias is strong, higher means near-random lines */ +const NOISE_RANDOMNESS = 0.75; + +/* + + CONFIG END + +*/ + +function preload() { + PALETTES = loadJSON("/palettes.json"); +} + +function setup() { + const cnv = PRINT_MODE ? createCanvas(4960, 7016) : createCanvas(1080, 1350); + cnv.mouseClicked(clickOnSave); + pixelDensity(1); + + /* Get colors from the palettes */ + const PALETTE_KEYS = Object.keys(PALETTES); + const RANDOM_PALETTE_NAME = + PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]; + const PALETTE = !RANDOM_PALETTE + ? PALETTES[PALETTE_NAME] + : PALETTES[RANDOM_PALETTE_NAME]; + console.log("Palette name: ", RANDOM_PALETTE_NAME); + + colorMode(HSL); + COLORS = PALETTE["colors"].map((col) => color(col)); + BG = color(PALETTE.bg); + + /* Sketch-specific setup */ + strokeWeight(STROKE_WEIGHT); + STROKE = random(COLORS); + STROKE.setAlpha(OPACITY); + stroke(STROKE); + background(BG); + + RANDOM_BIASED_ANGLE && (BIASED_ANGLE = random(TWO_PI)); + noiseDetail(4, NOISE_RANDOMNESS); +} + +function draw() { + /* Moves the origin of the coordinate system to the center of the canvas */ + /* Rotate based on the bias angle, be that random or not */ + translate(width / 2, height / 2); + rotate(BIASED_ANGLE); + + /* For every line to be rendered each frame */ + for (let i = 0; i < LINE_COUNT; i++) { + /* Select two random or noised angles on the circle */ + let a1, a2; + if (IS_RANDOM) { + a1 = random(TWO_PI); + a2 = random(TWO_PI); + } else if (IS_SYMMETRICAL) { + a1 = + TWO_PI * noise(0, frameCount * NOISE_SPEED) + (i * TWO_PI) / LINE_COUNT; + a2 = + TWO_PI * noise(1, frameCount * NOISE_SPEED) + (i * TWO_PI) / LINE_COUNT; + } else { + a1 = TWO_PI * noise(i, frameCount * NOISE_SPEED); + a2 = TWO_PI * noise(i + LINE_COUNT, frameCount * NOISE_SPEED); + } + + /* Use the two angles to determine two points on the circle */ + const x1 = RADIUS * cos(a1); + const y1 = RADIUS * sin(a1); + const x2 = RADIUS * cos(a2); + const y2 = RADIUS * sin(a2); + + /* If random, choose a new color for each line */ + if (RANDOM_STROKE) { + const randomColor = random(COLORS); + randomColor.setAlpha(OPACITY); + stroke(randomColor); + } else if (PALETTED_STROKE) { + const palettedColor = COLORS[i % COLORS.length]; + palettedColor.setAlpha(OPACITY); + stroke(palettedColor); + } + + /* Draw a line between the two points */ + line(x1, y1, x2, y2); + } +} + +function clickOnSave() { + saveCanvas(); +} diff --git a/workshop/layers.js b/workshop/layers.js new file mode 100644 index 0000000..9f52a29 --- /dev/null +++ b/workshop/layers.js @@ -0,0 +1,144 @@ +let PALETTES, COLORS, FILL, BG; + +/* Enable to make a canvas suitable for A2 paper */ +const PRINT_MODE = false; + +/* Get a random palette or choose a specific one from palettes.json */ +const RANDOM_PALETTE = false; +const PALETTE_NAME = "genesis"; + +const LAYER_COUNT = 10; + +/* The average radius of the full shape */ +const MEAN_RADIUS = 500; + +/* Enable strokes on the border of each layer, specify weight if enabled */ +const HAS_STROKE = false; +const STROKE_WEIGHT = 1; + +/* Layers are light to dark (from the center), enable to reverse it */ +const INVERTED_GRADIENT = false; + +/* Instead of gradient from light to dark, go from the fill color to dark */ +const CAP_LIGHTNESS = false; + +/* The degree to which noise affects the layers */ +/* Low values are blobby, high values are spikey */ +const NOISE_MULTIPLIER = 0.2; + +/* The speed at which the layers */ +const NOISE_SPEED = 0.005; + +/* Mirror the layers on either axis */ +const SYMMETRICAL_X = false; +const SYMMETRICAL_Y = false; + +/* Background is determined by the gradient, but these flags may override it */ +/* If both flags are true, palette background will be used */ +const USE_FILL_AS_BACKGROUND = true; +const USE_PALETTE_BACKGROUND = false; + +/* The amount of points that make up each layer, lower means "pointier" */ +/* For example 3 points mean triangular layers, 4 means squares */ +/* Higher might not be noticable, but will make for smoother borders */ +const POINT_COUNT = 500; + +/* Mild rotation, negative speed rotates counter-clockwise */ +const ROTATION_SPEED = 0.001; + +/* + + CONFIG END + +*/ + +function preload() { + PALETTES = loadJSON("/palettes.json"); +} + +function setup() { + const cnv = PRINT_MODE ? createCanvas(4960, 7016) : createCanvas(1080, 1350); + cnv.mouseClicked(clickOnSave); + pixelDensity(1); + + /* Get colors from the palettes */ + const PALETTE_KEYS = Object.keys(PALETTES); + const RANDOM_PALETTE_NAME = + PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]; + const PALETTE = !RANDOM_PALETTE + ? PALETTES[PALETTE_NAME] + : PALETTES[RANDOM_PALETTE_NAME]; + console.log("Palette name: ", RANDOM_PALETTE_NAME); + + colorMode(HSL); + COLORS = PALETTE["colors"].map((col) => color(col)); + BG = color(PALETTE.bg); + + /* Sketch-specific setup */ + strokeWeight(STROKE_WEIGHT); + FILL = random(COLORS); + HAS_STROKE ? stroke(FILL) : noStroke(); +} + +function draw() { + /* Move coordinate system to center of canvas for easier trigonometry */ + translate(width / 2, height / 2); + + /* Home-made helper function to select background based on config */ + drawBackground(); + + /* Because layers are drawn in sequence, draw large layers on bottom first */ + for (let i = LAYER_COUNT; i > 0; i--) { + drawLayer((MEAN_RADIUS / LAYER_COUNT) * i, i); + } +} + +function drawBackground() { + if (INVERTED_GRADIENT) { + CAP_LIGHTNESS ? background(FILL) : background(255); + } else { + background(0); + } + USE_FILL_AS_BACKGROUND && background(FILL); + USE_PALETTE_BACKGROUND && background(BG); +} + +function drawLayer(r, i) { + /* A number from 0 to 1, where the middle layer would have 0.5 */ + const layerColorFactor = INVERTED_GRADIENT + ? i / LAYER_COUNT + : 1 - i / LAYER_COUNT; + + /* Adjust saturation and lightness based on the layer factor */ + const fillColor = color( + hue(FILL), + layerColorFactor * saturation(FILL), + layerColorFactor * (CAP_LIGHTNESS ? lightness(FILL) : 100) + ); + fill(fillColor); + + /* Iterate through a full circle of angles to make a layer */ + beginShape(); + for (let a = 0; a < TWO_PI; a += TWO_PI / POINT_COUNT) { + /* Maybe overcomplicated way of getting x and y coordinate in noise field */ + const xOff = SYMMETRICAL_Y + ? cos(a) + : map(i * cos(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); + const yOff = SYMMETRICAL_X + ? sin(a) + : map(i * sin(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); + + /* Get noise based on x, y, and the "time" */ + const noised = noise(xOff, yOff, frameCount * NOISE_SPEED); + + /* Compute the final x and y and set a vertex there for the shape */ + const x = noised * r * cos(a + frameCount * ROTATION_SPEED); + const y = noised * r * sin(a + frameCount * ROTATION_SPEED); + vertex(x, y); + } + endShape(CLOSE); +} + +function clickOnSave() { + saveCanvas(); +} diff --git a/workshop/perlin.js b/workshop/perlin.js new file mode 100644 index 0000000..fdbacff --- /dev/null +++ b/workshop/perlin.js @@ -0,0 +1,234 @@ +let PALETTES, COLORS, STROKE, BG; + +/* Enable to make a canvas suitable for A2 paper */ +const PRINT_MODE = false; + +/* Get a random palette or choose a specific one from palettes.json */ +const RANDOM_PALETTE = false; +const PALETTE_NAME = "symmeblu"; + +const STROKE_WEIGHT = 2; +const OPACITY = 1; + +/* The amount of walkers that will be actively drawing each frame */ +/* Reducing increases performance, while increasing will fill in faster */ +const WALKER_COUNT = 500; + +/* The smoothness of the noise, makes a big difference */ +/* Lower values result in more gradual angle adjustments, a bit like zooming in */ +/* Higher values will lead to often more jagged lines, walkers gathering up more */ +const NOISE_ZOOM = 0.002; + +/* Disabling means every walker will have its own color */ +/* Enable to color the walkers based on their location / angle */ +/* Matching the stroke noise with the noise zoom make them mostly aligned */ +/* However, making the noise zooms slightly different offer more layered textures */ +const NOISED_STROKE = true; +const STROKE_NOISE_ZOOM = 0.0025; + +/* The amount of steps a walker will take before being respawned */ +/* Longer steps will often lead to being able to gather more */ +/* Shorter steps will give a rougher or more hairy texture */ +/* A wider range also means more random respawns, and a more textured look */ +const MIN_STEPS = 50; +const MAX_STEPS = 100; +/* Shorter steps make smoother lines, while longer ones may be more jagged */ +const STEP_SIZE = STROKE_WEIGHT + 1; + +/* Enable to clip the flow field by adding a big circle on it */ +/* Disabling reveals the flow field of the full canvas */ +const CLIP_CONTENT = true; +const CLIP_RADIUS = 400; + +/* Enable to round angles to their nearest ANGLE_STEP */ +/* This effectively divides the flow field into angles based */ +const ROUNDED_ANGLES = false; +const ANGLE_STEP = Math.PI / 3; + +/* Noise will naturally lean towards an angle */ +/* Enable this to vary where the angle is, or disable and specify your own */ +const RANDOM_ANGLE_BIAS = true; +let ANGLE_BIAS = Math.PI / 2; + +/* Enable for adding "erasers" that draw more background on the noise */ +/* Disabling or reducing will likely lead to a less textured result*/ +const ERASERS_ENABLED = true; +const ERASER_SPAWN_CHANCE = 0.5; + +/* Instead of lines, draw strings of dots */ +/* Works well with very high step sizes */ +const DOT_LINES = false; + +/* + + CONFIG END + +*/ + +const ACTIVE_WALKERS = []; + +function preload() { + PALETTES = loadJSON("/palettes.json"); +} + +function setup() { + const cnv = PRINT_MODE ? createCanvas(4960, 7016) : createCanvas(1080, 1350); + cnv.mouseClicked(clickOnSave); + pixelDensity(1); + + /* Get colors from the palettes */ + const PALETTE_KEYS = Object.keys(PALETTES); + const RANDOM_PALETTE_NAME = + PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]; + const PALETTE = !RANDOM_PALETTE + ? PALETTES[PALETTE_NAME] + : PALETTES[RANDOM_PALETTE_NAME]; + console.log("Palette name: ", RANDOM_PALETTE_NAME); + + colorMode(HSL); + COLORS = PALETTE["colors"].map((col) => color(col)); + BG = color(PALETTE.bg); + + /* Sketch-specific setup */ + strokeWeight(STROKE_WEIGHT); + STROKE = random(COLORS); + background(BG); + + for (let c = 0; c < COLORS.length; c++) { + COLORS[c].setAlpha(OPACITY); + } + + /* Randomize the order of the colors so they equate to different angles each run */ + for (let i = COLORS.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; + } + + /* Not really meant for configration as it is real confusing */ + /* Determines the amount of noise layers and their effect on the final field */ + noiseDetail(3, 0.75); + + if (RANDOM_ANGLE_BIAS) ANGLE_BIAS = random(TWO_PI); + + /* Intiialize all walkers into the ACTIVE_WALKER list */ + for (let i = 0; i < WALKER_COUNT; i++) { + respawnWalker(i); + } +} + +function draw() { + /* Iterate through all walkers */ + for (let i = 0; i < WALKER_COUNT; i++) { + /* If on the first frame, initialize all walkers (happens only once) */ + const walker = ACTIVE_WALKERS[i]; + + /* If the walker has met the end of its lifespawn, respawn it */ + /* If not, have the walker take another step */ + if (walker.steps > walker.step_cap) { + respawnWalker(i); + } else { + /* Determine angle based on noise at its current point in the field */ + let a = noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * TWO_PI; + + if (ROUNDED_ANGLES) a = round(a / ANGLE_STEP) * ANGLE_STEP; + + /* Effectively rotate the canvas to the angle bias */ + a += PI + ANGLE_BIAS; + + stroke(walker.color); + const x2 = walker.x + STEP_SIZE * cos(a); + const y2 = walker.y + STEP_SIZE * sin(a); + + /* Draw a line from the old to the new point, signifying a step */ + if (DOT_LINES) point(walker.x, walker.y); + else line(walker.x, walker.y, x2, y2); + walker.steps++; + + /* Update the walker coordinates */ + walker.x = x2; + walker.y = y2; + + /* A dumb amount of code that basically says one single thing: */ + /* If the walker hits an edge, loop to the other side of the screen */ + if (!CLIP_CONTENT) { + if (walker.x > width) walker.x = 0 - STEP_SIZE; + if (walker.x < 0) walker.x = width + STEP_SIZE; + if (walker.y > height) walker.y = 0 - STEP_SIZE; + if (walker.y < 0) walker.y = height + STEP_SIZE; + } else { + /* Constraint start and end of screen to be the clipped field */ + const xStart = width / 2 - CLIP_RADIUS; + const xEnd = width / 2 + CLIP_RADIUS; + const yStart = height / 2 - CLIP_RADIUS; + const yEnd = height / 2 + CLIP_RADIUS; + + /* Walkers can get stuck, so hide them just out of view */ + if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; + if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; + if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; + if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; + } + } + } + /* After all walkers have been drawn for the frame, add a clipping circle if desired */ + if (CLIP_CONTENT) drawClipCircle(); +} + +/* Set new coordinates, a random amount of steps, and a color for the walker */ +function respawnWalker(i) { + let x = CLIP_CONTENT + ? random(width / 2 - CLIP_RADIUS, width / 2 + CLIP_RADIUS) + : random(0, width); + let y = CLIP_CONTENT + ? random(height / 2 - CLIP_RADIUS, height / 2 + CLIP_RADIUS) + : random(0, height); + + ACTIVE_WALKERS[i] = { + x: x, + y: y, + steps: 0, + step_cap: random(MIN_STEPS, MAX_STEPS), + color: selectWalkerColor(x, y), + }; +} + +/* Set the color of a walker based on their location, or just randomly */ +function selectWalkerColor(x, y) { + /* If erasers are enabled, determine if the walker will become an eraser */ + if (ERASERS_ENABLED && random() < ERASER_SPAWN_CHANCE) { + return BG; + } + if (NOISED_STROKE) { + /* Set walker color based on the noise value at its coordinates, meaning the angle */ + const colorNoise = noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); + + /* Limit the color selection to the size of the given palette */ + const maxIndex = COLORS.length - 1; + let noisedIndex = round(colorNoise * maxIndex); + if (noisedIndex > maxIndex) { + noisedIndex = maxIndex; + } + return COLORS[noisedIndex]; + } else { + return random(COLORS); + } +} + +function drawClipCircle() { + /* Stroke grows in both directions, leading to some wonky diameter calculation */ + const CLIP_STROKE = width + CLIP_RADIUS * 2; + const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; + + /* Make the circle content transparent so the flow field is visible through the clip */ + noFill(); + + /* Set stroke, draw circle, and reset the stroke weight back to normal */ + stroke(BG); + strokeWeight(CLIP_STROKE); + circle(width / 2, height / 2, CLIP_DIAMETER); + strokeWeight(STROKE_WEIGHT); +} + +function clickOnSave() { + saveCanvas(); +} diff --git a/workshop/recursion.js b/workshop/recursion.js new file mode 100644 index 0000000..8d8a053 --- /dev/null +++ b/workshop/recursion.js @@ -0,0 +1,169 @@ +let PALETTES, COLORS, STROKE, BG; + +/* Enable to make a canvas suitable for A2 paper */ +const PRINT_MODE = false; + +/* Get a random palette or choose a specific one from palettes.json */ +const RANDOM_PALETTE = false; +const PALETTE_NAME = "symmeblu"; + +/* The size of the recursion field */ +const SIZE = 800; + +/* In addition to the thickness of spacing, adjusts maximum recursion depth */ +/* Scaling up the stroke weight would result in larger shapes overall */ +const STROKE_WEIGHT = 4; + +/* Enable to set a stroke on each shape based on the background color */ +const HAS_STROKE = true; + +/* Keep in mind that spawning shape means no subdivision/recursion in the slot */ +const SHAPE_CHANCE = 0.2; + +/* Lower chance means more empty space in the field */ +const BACKGROUND_CHANCE = 0.5; + +/* Will clear the canvas each frame if enabled, disabling leads to overlap */ +const CLEAR_EACH_FRAME = true; + +/* The shape will be randomly selected from the following object */ +/* The random selection is weighted based on the integer values */ +/* Example: 1 is a normal amount, 2 is double, 0 would be none of that type */ +/* The values are weighed in relation to each other, so 1 2 3 4 = 2 4 6 8 */ +const SHAPE_WEIGHTS = [ + { type: "SQUARE", weight: 1 }, + { type: "DIAMOND", weight: 1 }, + { type: "TRIANGLE", weight: 1 }, + { type: "CIRCLE", weight: 1 }, +]; +const WEIGHTED_SHAPES = []; + +/* + + CONFIG END + +*/ + +function preload() { + PALETTES = loadJSON("/palettes.json"); +} + +function setup() { + const cnv = PRINT_MODE ? createCanvas(4960, 7016) : createCanvas(1080, 1350); + cnv.mouseClicked(clickOnSave); + pixelDensity(1); + frameRate(1); + + /* Get colors from the palettes */ + const PALETTE_KEYS = Object.keys(PALETTES); + const RANDOM_PALETTE_NAME = + PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]; + const PALETTE = !RANDOM_PALETTE + ? PALETTES[PALETTE_NAME] + : PALETTES[RANDOM_PALETTE_NAME]; + console.log("Palette name: ", RANDOM_PALETTE_NAME); + + colorMode(HSL); + COLORS = PALETTE["colors"].map((col) => color(col)); + BG = color(PALETTE.bg); + + /* Sketch-specific setup */ + strokeWeight(STROKE_WEIGHT); + STROKE = random(COLORS); + strokeJoin(BEVEL); + HAS_STROKE ? stroke(BG) : noStroke(); + + background(BG); + rectMode(CENTER); + + /* Initialize weighted shapes */ + for (let s = 0; s < SHAPE_WEIGHTS.length; s++) { + const shape = SHAPE_WEIGHTS[s]; + for (let w = 0; w < shape.weight; w++) { + WEIGHTED_SHAPES.push(shape.type); + } + } +} + +function draw() { + CLEAR_EACH_FRAME && background(BG); + + /* Start the recursion field */ + /* More fields can be placed by duplicating this line and changing positions */ + step(0, width / 2, height / 2, SIZE); +} + +function step(currentDepth, x, y, r) { + /* Based on chance to spawn shape, stop recursion for the tile */ + /* If the max depth has been met, all tiles will draw a shape */ + if ( + currentDepth != 0 && + (random() < SHAPE_CHANCE || r <= STROKE_WEIGHT * 8) + ) { + drawRandomShape(x, y, r); + return; + } + + /* If no shape this tile, divide recursion field into four smaller tiles */ + const r2 = r / 2; + step(currentDepth + 1, x - r2 / 2, y - r2 / 2, r2); + step(currentDepth + 1, x + r2 / 2, y - r2 / 2, r2); + step(currentDepth + 1, x - r2 / 2, y + r2 / 2, r2); + step(currentDepth + 1, x + r2 / 2, y + r2 / 2, r2); +} + +function drawRandomShape(x, y, r) { + drawBackgroundOrDont(x, y, r); + + /* Select a shape based on shape weights, then draw it */ + const shape = random(WEIGHTED_SHAPES); + if (shape == "DIAMOND") { + drawDiamond(x, y, r); + } else if (shape == "CIRCLE") { + circle(x, y, r); + } else if (shape == "TRIANGLE") { + drawTriangle(x, y, r); + } else if (shape == "SQUARE") { + /* Drawing a background draws a square already */ + /* In other words, do nothing */ + } +} + +/* Set a random background and foreground color for new shape */ +function drawBackgroundOrDont(x, y, r) { + fill(random(COLORS)); + if (random() < BACKGROUND_CHANCE) { + rect(x, y, r); + fill(random(COLORS)); + } +} + +/* Draw what is basically a rotated square */ +function drawDiamond(x, y, r) { + const r2 = r / 2; + beginShape(); + vertex(x + r2, y); + vertex(x, y + r2); + vertex(x - r2, y); + vertex(x, y - r2); + endShape(CLOSE); +} + +/* Draw a triangle in one of the four possible orientations*/ +function drawTriangle(x, y, r) { + const r2 = r / 2; + const excludedCorner = random(["TOPLEFT", "TOPRIGHT", "BOTLEFT", "BOTRIGHT"]); + if (excludedCorner == "TOPLEFT") { + triangle(x - r2, y + r2, x + r2, y - r2, x + r2, y + r2); + } else if (excludedCorner == "TOPRIGHT") { + triangle(x - r2, y - r2, x + r2, y + r2, x - r2, y + r2); + } else if (excludedCorner == "BOTLEFT") { + triangle(x - r2, y - r2, x + r2, y + r2, x + r2, y - r2); + } else if (excludedCorner == "BOTRIGHT") { + triangle(x - r2, y - r2, x - r2, y + r2, x + r2, y - r2); + } +} + +function clickOnSave() { + saveCanvas(); +} From fc2ffcc305ccd616f8e23c4c8428aedb0f4bff2e Mon Sep 17 00:00:00 2001 From: plusk Date: Sat, 31 Oct 2020 16:33:37 +0000 Subject: [PATCH 06/21] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@?= =?UTF-8?q?=207e0aa8bf79a4912e342b2cf4e3b3624d236e0394=20[formerly=20ca794?= =?UTF-8?q?4767bb099495c78f080f6b853960c18bdd6]=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 9d507228073fa06f0c38c4c22861b8b7ec820d81 --- index.html | 5 ++ workshop/bokeh.html | 34 ++++++++++++++ workshop/bokeh.js | 111 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 150 insertions(+) create mode 100644 workshop/bokeh.html create mode 100644 workshop/bokeh.js diff --git a/index.html b/index.html index b885f0a..a65179b 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,11 @@

Big text

+ +

bokeh

+ +

chords

Big text

perlin

- + falsefalse