31:T88a,viewof options = Inputs.form({ options: Inputs.form({ width: Inputs.range([32, 2048], {label: "Width", step: 2, value: params.get("width") ?? 256}), height: Inputs.range([32, 2048], {label: "Height", step: 2, value: params.get("height") ?? 256}), chunkSize: Inputs.range([0, 1024], {label: "Chunk size", step: 2, value: 16}), noiseRadius: Inputs.range([0, 1024], {label: "Noise radius", step: 2, value: 64}), noiseOctaves: Inputs.range([1, 64], {label: "Noise octaves", step: 1, value: 12}), }), effects: Inputs.form({ mode: Inputs.radio(["glitch", "deep fry", "none"], {label: "Effect", value: "deep fry"}), _glitch: htl.html`

Glitch`, glitchQuality: Inputs.range([0, 99], {label: "Quality", step: 1, value: 50}), glitchAmount: Inputs.range([0, 99], {label: "Amount", step: 1, value: 0}), glitchIterations: Inputs.range([0, 99], {label: "Iterations", step: 1, value: 5}), _deepFry: htl.html`

Deep fry`, fryQuality: Inputs.range([0, 1], {label: "Quality", step: 0.01, value: 0.05}), fryIterations: Inputs.range([1, 300], {label: "Iterations", step: 1, value: 100}), fryJitterX: Inputs.range([0, 50], {label: "X jitter", step: 1, value: 2}), fryJitterY: Inputs.range([0, 50], {label: "Y jitter", step: 1, value: 10}), }), debug: Inputs.form({ animate: Inputs.toggle({label: "Animate", value: true}), dither: Inputs.toggle({label: "Dither", value: true}), reverseChunks: Inputs.toggle({label: "Reverse loop over chunk", value: true}), noiseColor: Inputs.radio(["color", "grayscale"], {label: "Noise", value: "grayscale"}), lighten: Inputs.toggle({label: "Lighten", value: true}), fadeEdges: Inputs.toggle({label: "Fade (top, right) edges", value: true}), chunkGrid: Inputs.toggle({label: "Chunk grid", value: false}), chunkTypes: Inputs.toggle({label: "Chunk types", value: false}), upscale: Inputs.toggle({label: "2x scale", value: true}) }) }, { template: ({options, effects, debug}) => tabbed(htl.html`

${[ details("Options", options), details("Effects", effects), details("Debug", debug), ]}`) })32:T31c3,async function* dreamscape() { const { options: { width, height, chunkSize: cs }, debug: { animate, ...debug }, effects } = options; const context = context2d(width, height, 1); context.canvas.style.setProperty("image-rendering", "pixelated"); if (debug.upscale) { context.canvas.style.setProperty("width", `${width * 2}px`); context.canvas.style.setProperty("height", `${height * 2}px`); } const xChunks = context.canvas.width / cs; const yChunks = context.canvas.height / cs; function* chunkLoop(func) { for (let chunkY = 0, i = 0; chunkY < yChunks; ++chunkY) { for (let chunkX = 0; chunkX < xChunks; ++chunkX, i++) { yield* func(i, chunkX, chunkY); } } } function* chunkReverseLoop(func) { const maxChunk = xChunks * yChunks - 1; for (let chunkY = yChunks - 1, i = maxChunk; chunkY >= 0; --chunkY) { for (let chunkX = xChunks - 1; chunkX >= 0; --chunkX, i--) { yield* func(i, chunkX, chunkY); } } } const maybeDither = (image) => debug.dither ? CanvasDither.atkinson(image) : image; // randomization utils const random = d3.randomUniform.source(d3.randomLcg(seed))(); const randomLoopedSquareSize = d3.randomInt.source(d3.randomLcg(seed))(Math.max(cs - 6, 10), cs - 2); const randomLoopedSquareRatio = d3.randomUniform.source(d3.randomLcg(seed))(0.22, 0.55); const shuffleRank = d3.shuffler(d3.randomLcg(seed)); const shuffleQuadrant = d3.shuffler(d3.randomLcg(seed)); const maxCumulativeWeight = cumulativeSparkleWeights[cumulativeSparkleWeights.length - 1]; const randomSparkleWeight = d3.randomUniform.source(d3.randomLcg(seed))(0, maxCumulativeWeight); // perlin noise context.putImageData(noiseData(context, seed, 1), 0, 0); if (debug.fadeEdges) { const cornerFade = context.createRadialGradient(width, 0, 0, width - Math.min(width, height), Math.min(width, height), Math.min(width, height)); cornerFade.addColorStop(0, "white"); cornerFade.addColorStop(0.55, "rgba(255, 255, 255, 0)"); context.fillStyle = cornerFade; context.globalCompositeOperation = "source-over"; context.fillRect(0, 0, width, height); const topFade = context.createLinearGradient(width / 2, 0, width / 2, height); topFade.addColorStop(0, "rgba(255, 255, 255, 0.75)"); topFade.addColorStop((1 / yChunks).toFixed(2), "rgba(255, 255, 255, 0)"); context.fillStyle = topFade; context.globalCompositeOperation = "source-over"; context.fillRect(0, 0, width, height); const rightFade = context.createLinearGradient(width, height / 2, 0, height / 2); rightFade.addColorStop(0, "rgba(255, 255, 255, 0.75)"); rightFade.addColorStop((1 / xChunks).toFixed(2), "rgba(255, 255, 255, 0)"); context.fillStyle = rightFade; context.globalCompositeOperation = "source-over"; context.fillRect(0, 0, width, height); } if (animate) yield context; // mean darkness in chunks const chunks = [...chunkLoop(function* (i, cx, cy) { const image = context.getImageData(cx * cs, cy * cs, cs, cs); let black = 0; for (let i = 0; i < image.data.length; i += 4) { black += image.data[i]; } const mean = Math.floor(black / (image.data.length / 4)); yield mean; })]; // EFFECTS // fade white if (debug.lighten) { const gradient = context.createLinearGradient(width, 0, 0, height); gradient.addColorStop(0, "rgba(255, 255, 255, 0.9)"); gradient.addColorStop(1, "rgba(255, 255, 255, 0.1)"); context.fillStyle = gradient; context.globalCompositeOperation = "overlay"; context.fillRect(0, 0, width, height); if (animate) yield Promises.delay(100, context); } // contrast-y overlay if (debug.lighten) { context.globalCompositeOperation = "overlay"; context.fillStyle = "rgba(255, 255, 255, 0.5)"; context.fillRect(0, 0, width, height); if (animate) yield Promises.delay(100, context); } // baseLayer: artifacts (glitch OR deep fry) const baseLayer = context2d(width, height, 1); const baseImage = context.getImageData(0, 0, context.canvas.width, context.canvas.height); if (effects.mode === "glitch") { const glitchedImage = await glitch({ seed: d3.randomInt.source(d3.randomLcg(seed))(1, 99), quality: effects.glitchQuality, amount: effects.glitchAmount, iterations: effects.glitchIterations }).fromImageData(baseImage).toImageData(); const glitchedLayer = context2d(width, height, 1); glitchedLayer.putImageData(glitchedImage, 0, 0); context.globalCompositeOperation = "source-over"; context.drawImage(glitchedLayer.canvas, 0, 0); baseLayer.putImageData(maybeDither(glitchedImage), 0, 0); if (animate) yield Promises.delay(100, baseLayer); } else if (effects.mode === "deep fry") { context.putImageData(baseImage, 0, 0); context.globalCompositeOperation = "source-over"; // await deepFry(context, seed, fryOptions.quality, fryOptions.iterations, fryOptions.jitterX, fryOptions.jitterY); const deepFrySteps = deepFryGenerator(context, seed, effects.fryQuality, effects.fryIterations, effects.fryJitterX, effects.fryJitterY); for await (const frame of deepFrySteps) { if (debug.dither && animate) { const friedFrame = maybeDither(frame.getImageData(0, 0, context.canvas.width, context.canvas.height)); baseLayer.putImageData(friedFrame, 0, 0); yield Promises.delay(0, baseLayer); } } const friedImage = maybeDither(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); baseLayer.putImageData(friedImage, 0, 0); if (animate) yield Promises.delay(100, baseLayer); } else { baseLayer.putImageData(maybeDither(baseImage), 0, 0); } // lighterLayer: lighten if (debug.lighten) { context.globalCompositeOperation = "source-over"; context.fillStyle = "rgba(255, 255, 255, 0.2)"; context.fillRect(0, 0, width, height); } const lighterLayer = context2d(width, height, 1); const lighterImage = context.getImageData(0, 0, context.canvas.width, context.canvas.height); lighterLayer.putImageData(maybeDither(lighterImage), 0, 0); if (animate) yield Promises.delay(100, lighterLayer); // lightestLayer: lighten more if (debug.lighten) { context.globalCompositeOperation = "source-over"; context.fillStyle = "rgba(255, 255, 255, 0.3)"; context.fillRect(0, 0, width, height); } const lightestImage = context.getImageData(0, 0, context.canvas.width, context.canvas.height); const lightestLayer = context2d(width, height, 1); lightestLayer.putImageData(maybeDither(lightestImage), 0, 0); context.drawImage(lightestLayer.canvas, 0, 0); if (animate) yield Promises.delay(100, lightestLayer); // reset blending context.globalCompositeOperation = "source-over"; const loopFn = debug.reverseChunks ? chunkReverseLoop : chunkLoop; // categorize each chunk const minValue = d3.min(chunks); const ranks = d3.rank(chunks); const categorizedChunks = [...chunkLoop(function* (i, cx, cy) { const x = cx * cs; const y = cy * cs; const value = chunks[i]; const rank = ranks[i]; const indicies = surroundingChunkIndicies(i); const compareAdjacent = (method, compare) => ["north", "east", "south", "west"][method]((dir) => { const index = indicies[dir]; return index !== undefined ? compare(chunks[index], ranks[index]) : compare(255, undefined); }); let category = Infinity; if (rank === 0) { category = 0; } else if (value < 70 && compareAdjacent("every", v => v >= 70 || value <= v)) { category = 1; } else if (value < 80 && compareAdjacent("every", (_v, r) => r !== 0)) { category = 2; } else if (value < 80) { category = 3; } else if (compareAdjacent("some", v => v < 70)) { category = 4; } else if (value < 128) { category = 5; } else if (debug.fadeEdges && (indicies.north === undefined || indicies.east === undefined || (cx >= xChunks - 3 && cy < 3))) { category = 6; } else { category = 7; } yield { i, x, y, value, rank, indicies, category }; }, false)]; // rank within categories const categoryRanks = d3.rollup(categorizedChunks, g => ({ chunks: new d3.InternMap(g.map((d, i) => [d.i, i])), ranks: d3.rank(g, (a, b) => (d3.ascending(a.value, b.value) || 1)) }), d => d.category); const shuffled2Ranks = shuffleRank(categoryRanks.get(2)?.ranks ?? []); // render chunks yield* loopFn(function* (i) { const { x, y, category } = categorizedChunks[i]; const copyChunk = (fromCtx) => context.drawImage(fromCtx.canvas, x, y, cs, cs, x, y, cs, cs); switch (category) { case 0: { copyChunk(lighterLayer); debugHighlightChunk(context, x, y, "Lime"); break; } case 1: { copyChunk(lighterLayer); debugHighlightChunk(context, x, y, "DeepSkyBlue"); break; } case 2: { copyChunk(baseLayer); debugHighlightChunk(context, x, y, "Turquoise"); break; } case 3: { copyChunk(baseLayer); debugHighlightChunk(context, x, y, "Yellow"); break; } case 4: { copyChunk(lighterLayer); debugHighlightChunk(context, x, y, "HotPink"); break; } case 5: { copyChunk(lightestLayer); break; } case 6: { copyChunk(lighterLayer); debugHighlightChunk(context, x, y, "Red"); break; } case 7: { copyChunk(lighterLayer); break; } } if (animate) yield Promises.delay(0, context); }); yield* loopFn(function* (i) { const { x, y, value, rank, indicies, category } = categorizedChunks[i]; const cr = categoryRanks.get(category); const categoryRank = cr.ranks[cr.chunks.get(i)]; switch (category) { case 0: { fillChunkLoopedSquare(context, x, y, Math.max(cs - 2, 10), 0.25); break; } case 1: { if (rank < 7) { const ratio = ranks[i] < 2 ? 0.2 : randomLoopedSquareRatio(); fillChunkLoopedSquare(context, x, y, randomLoopedSquareSize(), ratio); } else { fillChunkSparkles(context, x, y, 1); } break; } case 2: { if (categoryRank === shuffled2Ranks[0]) { const offset = Math.ceil((cs - 9) / 2); drawHappyMac(context, x + offset, y + offset); } else if (categoryRank === shuffled2Ranks[1]) { const offset = Math.ceil((cs - 12) / 2); drawCairoFlower(context, x + offset, y + offset); } else { const count = Math.ceil((value - minValue) / (80 - minValue) * 2); fillChunkSparkles(context, x, y, count); } break; } case 3: { const count = Math.ceil((value - minValue) / (80 - minValue) * 2); fillChunkSparkles(context, x, y, count); break; } case 4: { const scatter = random(); if (scatter > 0.5) { fillChunkSparkles(context, x, y, 1); } break; } case 5: case 6: { // empty break; } case 7: { const scatter = random(); console.log("chunk type 7", value, scatter) if ((value > 200 && scatter > 0.4) || scatter > 0.95) { fillChunkSparkles(context, x, y, 1); } break; } } if (animate) yield Promises.delay(0, context); }); debugGrid(context); // TODO dispose of layers? if necessary yield context; // chunk fill helpers function fillChunkLoopedSquare(context, x, y, size, loopRatio) { const loopSize = Math.round(size * loopRatio); const offset = Math.ceil((cs - size) / 2); drawLoopedSquare(context, x + offset, y + offset, size, loopSize); } function weightedRandomSparkle() { const n = randomSparkleWeight(); for (let i = 0; i < sparkles.length; i++) { if (cumulativeSparkleWeights[i] >= n) return i; } } function fillChunkSparkles(context, x, y, count) { const quadSize = cs / 2; const quadrants = shuffleQuadrant([...Array.from({length: 4}, (_, j) => j < count)]); quadrants.forEach((enabled, j) => { if (!enabled) return; const {draw, size} = sparkles[weightedRandomSparkle()]; const quadX = x + (Math.floor(j / 2) * quadSize); const quadY = y + ((j % 2) * quadSize); const offsetX = Math.floor((quadSize - size) * random()); const offsetY = Math.floor((quadSize - size) * random()); draw(context, quadX + offsetX, quadY + offsetY); }); } }33:T40d,function drawHappyMac(context, x = 0, y = 0) { context.fillStyle = "white"; // context.fillRect(x - 1, y - 1, 10, 11); context.fillRect(x - 1, y - 1, 10, 4); context.fillRect(x + 2, y - 1, 4, 8); context.fillRect(x , y + 6, 8, 4); // context.fillRect(x - 1, y , 3, 2); // context.fillRect(x , y - 1, 1, 4); // context.fillRect(x + 6, y , 3, 2); // context.fillRect(x + 7, y - 1, 1, 4); // context.fillRect(x + 3, y , 3, 6); // context.fillRect(x + 4, y - 1, 1, 1); // context.fillRect(x + 2, y + 5, 1, 1); // context.fillRect(x + 3, y + 6, 2, 1); // context.fillRect(x + 1, y + 7, 6, 2); // context.fillRect(x , y + 7, 8, 1); // context.fillRect(x + 2, y + 9, 4, 1); context.fillStyle = "black"; context.fillRect(x , y , 1, 2); context.fillRect(x + 4, y , 1, 6); context.fillRect(x + 3, y + 5, 2, 1); context.fillRect(x + 7, y , 1, 2); context.fillRect(x + 1, y + 7, 1, 1); context.fillRect(x + 6, y + 7, 1, 1); context.fillRect(x + 2, y + 8, 4, 1); }34:T4d5,function drawLoopedSquare(context, xPos = 0, yPos = 0, size = 14, loopSize = 4) { context.fillStyle = "white"; context.fillRect(xPos, yPos, size, size); context.fillRect(xPos + 1, yPos - 1, size - 2, size + 2); context.fillRect(xPos - 1, yPos + 1, size + 2, size - 2); context.beginPath(); context.strokeStyle = "black"; context.strokeWidth = 1; context.translate(0.5, 0.5); const delta = 0.5; let pos = {x: xPos + delta, y: yPos + delta}; for (let i = 0; i < 4; i++) { const long = i % 2 === 0 ? "y" : "x"; const short = i % 2 === 0 ? "x" : "y"; const dirLong = i < 2 ? 1 : -1; const dirShort = (i % 3) === 0 ? 1 : -1; const dl = delta * dirLong; const ds = delta * dirShort; pos[long] -= dl; context.moveTo(pos.x, pos.y); pos[short] += loopSize * dirShort; context.lineTo(pos.x, pos.y); pos[short] += ds; pos[long] += dl; context.moveTo(pos.x, pos.y); pos[long] += (size - 2) * dirLong; context.lineTo(pos.x, pos.y); pos[long] += dl; pos[short] -= ds; context.moveTo(pos.x, pos.y); pos[short] -= loopSize * dirShort; context.lineTo(pos.x, pos.y); pos[long] -= dl; } context.stroke(); context.translate(-0.5, -0.5); }35:T44a,// there's gotta be a more algorithmic way to draw both this and the looped square. rotationally // flower from Susan Kare's Cairo dingbat font, updated version found on throw blanket function drawCairoFlower(context, x, y) { context.fillStyle = "white"; context.fillRect(x + 4, y , 4, 12); context.fillRect(x , y + 4, 12, 4); context.fillRect(x + 1, y + 1, 10, 10); context.fillStyle = "black"; context.fillRect(x + 4, y + 1 , 4, 10); context.fillRect(x + 5, y , 2, 1); context.fillRect(x + 5, y + 11, 2, 1) context.fillRect(x + 1 , y + 4, 10, 4); context.fillRect(x , y + 5, 1, 2); context.fillRect(x + 11, y + 5, 1, 2); context.fillStyle = "white"; context.fillRect(x + 5, y + 1, 2, 10); context.fillRect(x + 1, y + 5, 10, 2); context.fillRect(x + 4, y + 4, 4, 4); context.fillStyle = "black"; context.fillRect(x + 5, y + 4, 2, 4); context.fillRect(x + 4, y + 5, 4, 2); context.fillRect(x + 2, y + 2, 1, 1); context.fillRect(x + 9, y + 2, 1, 1); context.fillRect(x + 2, y + 9, 1, 1); context.fillRect(x + 9, y + 9, 1, 1); }36:Td17,sparkles = ([ { draw(context, x = 0, y = 0) { context.fillStyle = "white"; context.fillRect(x, y, 3, 3); context.fillStyle = "black"; context.fillRect(x , y , 1, 1); context.fillRect(x + 2, y , 1, 1); context.fillRect(x + 1, y + 1, 1, 1); context.fillRect(x , y + 2, 1, 1); context.fillRect(x + 2, y + 2, 1, 1); }, size: 3 }, { draw(context, x = 0, y = 0) { context.fillStyle = "white"; context.fillRect(x, y, 3, 3); context.fillStyle = "black"; context.fillRect(x + 1, y , 1, 1); context.fillRect(x , y + 1, 1, 1); context.fillRect(x + 2, y + 1, 1, 1); context.fillRect(x + 1, y + 2, 1, 1); }, size: 3 }, { draw(context, x = 0, y = 0) { context.fillStyle = "white"; context.fillRect(x + 1, y + 1, 3, 3); context.fillStyle = "black"; context.fillRect(x + 2, y , 1, 2); context.fillRect(x , y + 2, 2, 1); context.fillRect(x + 3, y + 2, 2, 1); context.fillRect(x + 2, y + 3, 1, 2); }, size: 5 }, { draw(context, x = 0, y = 0) { context.fillStyle = "white"; context.fillRect(x, y, 3, 3); context.fillStyle = "black"; context.fillRect(x + 1, y , 1, 3); context.fillRect(x , y + 1, 3, 1); }, size: 3, }, { draw(context, x = 0, y = 0) { context.fillStyle = "black"; context.fillRect(x, y, 3, 3); context.fillStyle = "white"; context.fillRect(x + 1, y , 1, 3); context.fillRect(x , y + 1, 3, 1); }, size: 3, }, { draw(context, x, y) { context.fillStyle = "white"; context.fillRect(x + 5, y , 1, 4); context.fillRect(x , y + 5, 4, 1); context.fillRect(x + 5, y + 7, 1, 4); context.fillRect(x + 7, y + 5, 4, 1); context.fillStyle = "black"; context.fillRect(x + 5, y + 1, 1, 2); context.fillRect(x + 1, y + 5, 2, 1); context.fillRect(x + 5, y + 8, 1, 2); context.fillRect(x + 8, y + 5, 2, 1); }, size: 11, weight: 0.3 }, { draw(context, x, y) { context.fillStyle = "white"; context.fillRect(x + 1, y , 3, 5); context.fillRect(x , y + 1, 5, 3); context.fillStyle = "black"; context.fillRect(x + 2, y , 1, 1); context.fillRect(x + 1, y + 1, 1, 1); context.fillRect(x + 3, y + 1, 1, 1); context.fillRect(x , y + 2, 1, 1); context.fillRect(x + 4, y + 2, 1, 1); context.fillRect(x + 1, y + 3, 1, 1); context.fillRect(x + 3, y + 3, 1, 1); context.fillRect(x + 2, y + 4, 1, 1); }, size: 5, weight: 0.3 }, { draw(context, x, y) { context.fillStyle = "white"; context.fillRect(x + 2, y + 1, 3, 5); context.fillRect(x + 1, y + 2, 5, 3); context.fillStyle = "black"; context.fillRect(x + 3, y , 1, 2); context.fillRect(x + 2, y + 2, 1, 1); context.fillRect(x + 4, y + 2, 1, 1); context.fillRect(x , y + 3, 2, 1); context.fillRect(x + 5, y + 3, 2, 1); context.fillRect(x + 2, y + 4, 1, 1); context.fillRect(x + 4, y + 4, 1, 1); context.fillRect(x + 3, y + 5, 1, 2); }, size: 7, weight: 0.1 }, { // blank draw(context, x, y) {}, size: 0, weight: 1 } ])37:[] 2f:{"title":"procgen 1-bit dreamscape","cells":[{"id":0,"value":"# procgen 1-bit dreamscape\n[land|web|dream|bit]scape","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"viewof seed = seedButton()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"{\n const label = htl.html`

seed: ${seed}

`;\n if (!options.debug.animate) {\n yield htl.html`

${label}

`\n }\n const dream = dreamscape();\n for await (const frame of dream) {\n yield htl.html`

${label}${frame.canvas}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1958,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2034,"value":"{\n const { \n options: { width, height }, \n } = options;\n const context = context2d(width, height, 1);\n\n context.putImageData(noiseData(context, seed, 1), 0, 0);\n \n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"function noiseData(context, z, dpi = window.devicePixelRatio) {\n const { width, height } = context.canvas;\n const { options: { noiseRadius, noiseOctaves }, debug: { noiseColor } } = options;\n const radius = noiseRadius * dpi;\n const image = context.createImageData(width, height);\n const noise = octave(perlin3, noiseOctaves);\n for (let y = 0, i = 0; y < height; ++y) {\n for (let x = 0; x < width; ++x, i += 4) {\n if (noiseColor === \"color\") {\n const r = 128 + (noise(x / radius, y / radius, z ) * 256);\n const g = 128 + (noise(x / radius, y / radius, z + 1) * 256);\n const b = 128 + (noise(x / radius, y / radius, z + 2) * 256);\n image.data[i ] = r;\n image.data[i + 1] = g;\n image.data[i + 2] = b;\n image.data[i + 3] = 255; // alpha\n } else {\n const c = 128 + (noise(x / radius, y / radius, z) * 256);\n image.data.fill(255 - c, i, i + 3);\n image.data[i + 3] = 255; // alpha \n }\n }\n }\n return image;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"{\n const context = context2d(160, 48);\n\n context.fillStyle = \"gray\"; // \"black\"\n context.fillRect(0, 0, context.canvas.width, context.canvas.height);\n\n // left to right\n drawLoopedSquare(context, 5, 5, 14, 4);\n\n let x = 24;\n const pad = 4;\n for (let i = 0; i < 9; i++) {\n const {draw, size} = sparkles[i];\n draw(context, x + pad, 12 - Math.floor(size / 2));\n x += size + (pad * 2);\n }\n\n drawHappyMac(context, 6, 24);\n drawCairoFlower(context, 24, 22);\n\n context.canvas.style.setProperty(\"image-rendering\", \"pixelated\");\n context.canvas.style.setProperty(\"width\", `${context.canvas.width * dpi * 1.5}px`);\n context.canvas.style.setProperty(\"height\", `${context.canvas.height * dpi * 1.5}px`);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1636,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1838,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":973,"value":"cumulativeSparkleWeights = sparkles.reduce((acc, value, index) => {\n acc[index] = (value.weight ?? 1) + (acc[index - 1] ?? 0);\n return acc;\n}, []);","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"function debugGrid(context) {\n const { options: { width, height, chunkSize }, debug: { chunkGrid } } = options;\n if (!chunkGrid) return;\n context.translate(0.5, 0.5);\n context.beginPath();\n for (let y = chunkSize; y < height; y += chunkSize) {\n context.moveTo(0, y);\n context.lineTo(width, y);\n }\n for (let x = chunkSize; x < width; x += chunkSize) {\n context.moveTo(x, 0);\n context.lineTo(x, height);\n }\n context.strokeStyle = \"red\";\n context.stroke();\n context.translate(-0.5, -0.5);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1274,"value":"function debugHighlightChunk(context, x, y, color) {\n if (!options.debug.chunkTypes) return;\n const { chunkSize } = options.options;\n const c = d3.color(color);\n c.opacity = 0.5;\n context.fillStyle = c.formatRgb();\n context.fillRect(x, y, chunkSize, chunkSize);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"function surroundingChunks(chunks, i) {\n const { width, height, chunkSize } = options.options;\n const xChunks = width / chunkSize;\n const yChunks = height / chunkSize;\n const hasEast = (i + 1) % xChunks > 0;\n const hasWest = i % xChunks > 0;\n \n return {\n self: chunks[i],\n north: chunks[i - xChunks],\n northEast: hasEast ? chunks[i - xChunks + 1] : undefined,\n east: hasEast ? chunks[i + 1] : undefined, \n southEast: hasEast ? chunks[i + xChunks + 1] : undefined,\n south: chunks[i + xChunks],\n southWest: hasWest ? chunks[i + xChunks - 1] : undefined,\n west: hasWest ? chunks[i - 1] : undefined,\n northWest: hasWest ? chunks[i - xChunks - 1] : undefined\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1691,"value":"function surroundingChunkIndicies(i) {\n const { width, height, chunkSize } = options.options;\n const xChunks = width / chunkSize;\n const yChunks = height / chunkSize;\n const hasNorth = i >= xChunks;\n const hasEast = (i + 1) % xChunks > 0;\n const hasSouth = i < (xChunks * (yChunks - 1));\n const hasWest = i % xChunks > 0;\n \n return {\n self: i,\n north: hasNorth ? i - xChunks : undefined,\n northEast: hasNorth && hasEast ? i - xChunks + 1 : undefined,\n east: hasEast ? i + 1 : undefined, \n southEast: hasSouth && hasEast ? i + xChunks + 1 : undefined,\n south: hasSouth ? i + xChunks : undefined,\n southWest: hasSouth && hasWest ? i + xChunks - 1 : undefined,\n west: hasWest ? i - 1 : undefined,\n northWest: hasNorth && hasWest ? i - xChunks - 1 : undefined\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1421,"value":"function context2d(width, height, dpi = window.devicePixelRatio) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = width * dpi;\n canvas.height = height * dpi;\n canvas.style.setProperty(\"width\", (options.debug.upscale ? width * 2 : width) + \"px\");\n canvas.style.setProperty(\"image-rendering\", \"pixelated\");\n var context = canvas.getContext(\"2d\", { willReadFrequently: true });\n context.scale(dpi, dpi);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"dpi = window.devicePixelRatio","pinned":true,"hidden":false,"mode":"ojs"},{"id":1797,"value":"params = new URLSearchParams(location.search)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {seedButton} from \"@saneef/seed-button\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1955,"value":"import {details, tabbed} from \"@mootari/tabs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {octave, perlin2, perlin3} from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1613,"value":"deepFryMozjpeg = deepFryFactory(context2d, toJpegMozjpeg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1623,"value":"deepFry = deepFryFactory(context2d, toJpegCanvas)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1677,"value":"async function* deepFryGenerator(context, seed = 42, quality = 0.1, iterations = 50, jitterX = 10, jitterY = jitterX) {\n const {width, height} = context.canvas;\n const context2 = context2d(width + jitterX * 2, height + jitterY * 2, 1);\n context2.fillStyle = \"white\";\n context2.fillRect(0, 0, width + jitterX * 2, height + jitterY * 2);\n const random = d3.randomUniform.source(d3.randomLcg(seed))(0, 1);\n\n for (let i = 0; i < iterations; i++) {\n const x = random() * jitterX | 0;\n const y = random() * jitterY | 0;\n \n context2.drawImage(context.canvas, x, y, width, height);\n const image = await toJpegCanvas(context2, quality);\n context.drawImage(image, x, y, width, height, 0, 0, width, height);\n URL.revokeObjectURL(image.src);\n yield context;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1327,"value":"import {deepFryFactory, toJpegCanvas, toJpegTurbo} from \"@cubeghost/canvas-jpeg-deep-fryer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1608,"value":"async function toJpegMozjpeg(context, quality) {\n return new Promise((resolve, reject) => {\n const {width, height} = context.canvas;\n const data = context.getImageData(0, 0, width, height);\n mozjpeg.encode(data, {\n quality: quality * 100,\n // baseline: true,\n progressive: false,\n optimize_coding: false,\n color_space: 1, // grayscale\n quant_table: 1,\n trellis_multipass: true,\n // trellis_opt_zero: true,\n // trellis_opt_table: true,\n // trellis_loops: 3,\n // auto_subsample: false,\n // chroma_subsample: 1,\n // separate_chroma_quality: false,\n // chroma_quality: 75,\n }).then((buffer) => {\n const blob = new Blob([buffer], { type: \"image/jpeg\" });\n const image = new Image;\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = URL.createObjectURL(blob);\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1610,"value":"mozjpeg = (await import(\"https://esm.sh/@jsquash/jpeg\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1192,"value":"glitch = (await import(\"https://esm.sh/glitch-canvas\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"CanvasDither = (await import(\"https://esm.sh/canvas-dither\")).default","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}