41:null 42:["$","title",null,{"children":"procgen 1-bit dreamscape | cubeghost | Observable"}] 48:T88b,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 chunks", 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), ]}`) })49:T3c5f,async function* dreamscape() { const context = context2d(width, height, 1); const resolve = async (generator) => (await generator.next()).value; if (debug.animate) { await resolve(await applyNoise(context)); yield context; const chunks = categorizeChunks(getChunkValues(context)); await resolve(await applyPreFilter(context)); const effectsDitherContext = context2d(width, height, 1); for await (const frame of applyEffects(context)) { yield maybeDitherContext(frame, effectsDitherContext); } const defaultContext = await resolve(await copyContext(context, applyEffects)); yield maybeDitherContext(defaultContext, context); const lighterContext = await resolve(await copyContext(defaultContext, applyLighter)); yield maybeDitherContext(lighterContext, context); const lightestContext = await resolve(await copyContext(lighterContext, applyLightest)); yield maybeDitherContext(lightestContext, context); yield* applyBackgroundChunks(chunks, { default: maybeDitherContext(defaultContext), lighter: maybeDitherContext(lighterContext), lightest: context })(context); yield* applyChunks(chunks)(context); } else { console.time("no animation") await resolve(await applyNoise(context)); const chunks = categorizeChunks(getChunkValues(context)); await resolve(await applyPreFilter(context)); const defaultContext = await resolve(await copyContext(context, applyEffects)); const lighterContext = await resolve(await copyContext(defaultContext, applyLighter)); const lightestContext = await resolve(await copyContext(lighterContext, applyLightest)); await resolve(await applyBackgroundChunks(chunks, { default: maybeDitherContext(defaultContext), lighter: maybeDitherContext(lighterContext), lightest: maybeDitherContext(lightestContext, context) })(context)); await resolve(await applyChunks(chunks)(context)); yield context; console.timeEnd("no animation") } } // async function* dreamscape() { // const { // options: { width, height, chunkSize: cs }, // debug: { animate, ...debug }, // effects // } = options; // const context = context2d(width, height, 1); // 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(); // 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: CanvasRenderingContext2D, x: number, y: number, size: number, loopRatio: number) { // 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: CanvasRenderingContext2D, x: number, y: number, count: number) { // 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); // }); // } // }4a:T9b2,function noiseData(context: CanvasRenderingContext2D, z: number, dpi = window.devicePixelRatio) { const { options: { noiseRadius, noiseOctaves }, debug: { noiseColor } } = options; const radius = noiseRadius * dpi; const image = context.createImageData(context.canvas.width, context.canvas.height); const noise = octave(perlin3, noiseOctaves); for (let y = 0, i = 0; y < context.canvas.height; ++y) { for (let x = 0; x < context.canvas.width; ++x, i += 4) { if (noiseColor === "color") { const r = 128 + (noise(x / radius, y / radius, z ) * 256); const g = 128 + (noise(x / radius, y / radius, z + 1) * 256); const b = 128 + (noise(x / radius, y / radius, z + 2) * 256); image.data[i ] = r; image.data[i + 1] = g; image.data[i + 2] = b; image.data[i + 3] = 255; // alpha } else { const c = 128 + (noise(x / radius, y / radius, z) * 256); image.data.fill(255 - c, i, i + 3); image.data[i + 3] = 255; // alpha } } } return image; } function* applyNoise(context: CanvasRenderingContext2D) { context.putImageData(noiseData(context, seed, 1), 0, 0); // fade out top right edges for use as background if (options.debug.fadeEdges) { const edgeFadeAmount = 1; // divided by x or y chunks const cornerFadeAmount = 0.55; const minDimension = Math.min(width, height); const cornerFade = context.createRadialGradient(width, 0, 0, width - minDimension, minDimension, minDimension); cornerFade.addColorStop(0, "white"); cornerFade.addColorStop(cornerFadeAmount, "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((edgeFadeAmount / 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((edgeFadeAmount / xChunks).toFixed(2), "rgba(255, 255, 255, 0)"); context.fillStyle = rightFade; context.globalCompositeOperation = "source-over"; } yield context; }4b:T49f,async function* applyEffects(context) { if (effects.mode === "glitch") { // glitch artifacts const baseImage = context.getImageData(0, 0, context.canvas.width, context.canvas.height); 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(); context.putImageData(glitchedImage, 0, 0); yield context; } else if (effects.mode === "deep fry") { // jpeg deep fry const deepFrySteps = deepFryGenerator(context, seed, effects.fryQuality, effects.fryIterations, effects.fryJitterX, effects.fryJitterY); for await (const frame of deepFrySteps) { if (debug.animate) { const friedFrame = frame.getImageData(0, 0, context.canvas.width, context.canvas.height); context.putImageData(friedFrame, 0, 0); yield context; } } const friedImage = context.getImageData(0, 0, context.canvas.width, context.canvas.height); context.putImageData(friedImage, 0, 0); yield context; } else { yield context; } }4c:T529,// categorize each chunk based on overall rank, value (darkness), and values of adjacent chunks function categorizeChunks(chunkValues: number[]) { const chunkRanks = d3.rank(chunkValues); const adjacent = compareAdjacentFactory(chunkValues, chunkRanks); return [...chunkLoop(function* (i, cx, cy): Generator { const x = cx * cs; const y = cy * cs; const value = chunkValues[i]; const rank = chunkRanks[i]; const indicies = surroundingChunkIndicies(i); let category: ChunkMeta["category"]; if (rank === 0) { category = 0; } else if ( value < 70 && adjacent.every(indicies, (v) => v >= 70 || value <= v) ) { category = 1; } else if (value < 80 && adjacent.every(indicies, (_v, r) => r !== 0)) { category = 2; } else if (value < 80) { category = 3; } else if (adjacent.some(indicies, (v) => v < 70)) { category = 4; } else if (value < 128) { category = 5; } else if ( indicies.north === undefined || indicies.east === undefined || (cx >= xChunks - 3 && cy < 3) // top right corner ) { category = 6; } else { category = 7; } yield { i, x, y, value, rank, indicies, category }; })]; } display(categorizeChunks(getChunkValues(noiseContext)));4d:Tf47,// render chunk decorations function applyChunks(chunks: ChunkMeta[]) { const { categoryRanks, category2Ranks, random2Ranks } = rankChunks(chunks); const minValue = d3.min(chunks.map(d => d.value))!; // 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 shuffleQuadrant = d3.shuffler(d3.randomLcg(seed)); const randomSparkleWeight = d3.randomUniform.source(d3.randomLcg(seed))(0, cumulativeSparkleWeights[cumulativeSparkleWeights.length - 1]); function fillChunkLoopedSquare( context: CanvasRenderingContext2D, x: number, y: number, size: number, loopRatio: number, ) { const loopSize = Math.round(size * loopRatio); const offset = Math.ceil((cs - size) / 2); drawLoopedSquare(context, x + offset, y + offset, size, loopSize); } function weightedRandomSparkle(): number { const n = randomSparkleWeight(); for (let i = 0; i < sparkles.length; i++) { if (cumulativeSparkleWeights[i] >= n) return i; } return sparkles.length - 1; } function fillChunkSparkles( context: CanvasRenderingContext2D, x: number, y: number, count: number, ) { 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); }); } return function* (context) { yield* loopFn(function* (i) { const { x, y, value, rank, indicies, category } = chunks[i]; const cr = categoryRanks.get(category); const categoryRank = cr.ranks[cr.indicies.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 = rank < 2 ? 0.25 : randomLoopedSquareRatio(); fillChunkLoopedSquare(context, x, y, randomLoopedSquareSize(), ratio); } else { fillChunkSparkles(context, x, y, 1); } break; } case 2: { if (categoryRank === random2Ranks[0]) { const offset = Math.ceil((cs - 9) / 2); drawHappyMac(context, x + offset, y + offset); } else if (categoryRank === random2Ranks[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: // no decorations case 6: // no decorations on faded edges break; case 7: { const scatter = random(); if ((value > 200 && scatter > 0.4) || scatter > 0.95) { fillChunkSparkles(context, x, y, 1); } break; } } if (debug.animate) yield context; }); if (!debug.animate) yield context; } }4e:T41d,const drawHappyMac: SparkleDrawFunc = (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); }4f:T4ed,function drawLoopedSquare(context: CanvasRenderingContext2D, 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); }50:T454,// 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 const drawCairoFlower: SparkleDrawFunc = (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); }51:Tdd7,type SparkleDrawFunc = (context: CanvasRenderingContext2D, x: number, y: number) => void; interface SparkleDef { draw: SparkleDrawFunc; size: number; weight?: number; } const sparkles: SparkleDef[] = ([ { 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 } ])52:T6fd,type Direction = | "north" | "northEast" | "east" | "southEast" | "south" | "southWest" | "west" | "northWest"; const CARDINAL_DIRECTIONS = ["north", "east", "south", "west"] as const; type SurroundingChunkIndicies = { [key in Direction]: number | undefined; }; function surroundingChunkIndicies(i: number): SurroundingChunkIndicies { const { width, height, chunkSize } = options.options; const xChunks = width / chunkSize; const yChunks = height / chunkSize; const hasNorth = i >= xChunks; const hasEast = (i + 1) % xChunks > 0; const hasSouth = i < (xChunks * (yChunks - 1)); const hasWest = i % xChunks > 0; return { self: i, north: hasNorth ? i - xChunks : undefined, northEast: hasNorth && hasEast ? i - xChunks + 1 : undefined, east: hasEast ? i + 1 : undefined, southEast: hasSouth && hasEast ? i + xChunks + 1 : undefined, south: hasSouth ? i + xChunks : undefined, southWest: hasSouth && hasWest ? i + xChunks - 1 : undefined, west: hasWest ? i - 1 : undefined, northWest: hasNorth && hasWest ? i - xChunks - 1 : undefined } } function compareAdjacentFactory( chunkValues: number[], chunkRanks: Float64Array, ) { const fn = (method: "some" | "every") => ( indicies: SurroundingChunkIndicies, compare: (value: number, rank: number | undefined) => boolean, ) => CARDINAL_DIRECTIONS[method]((dir) => { const index = indicies[dir]; return index !== undefined ? compare(chunkValues[index], chunkRanks[index]) : compare(255, undefined); }); return { some: fn("some"), every: fn("every"), }; }53:T7ce,async function* deepFryGenerator(context: CanvasRenderingContext2D, seed = 42, quality = 0.1, iterations = 50, jitterX = 10, jitterY = jitterX) { const {width, height} = context.canvas; const context2 = context2d(width + jitterX * 2, height + jitterY * 2, 1); context2.fillStyle = "white"; context2.fillRect(0, 0, width + jitterX * 2, height + jitterY * 2); const random = d3.randomUniform.source(d3.randomLcg(seed))(0, 1); for (let i = 0; i < iterations; i++) { const x = random() * jitterX | 0; const y = random() * jitterY | 0; context2.drawImage(context.canvas, x, y, width, height); const image = await toJpegCanvas(context2, quality); context.drawImage(image, x, y, width, height, 0, 0, width, height); URL.revokeObjectURL(image.src); yield context; } } // async function toJpegMozjpeg(context: CanvasRenderingContext2D, quality: number) { // return new Promise((resolve, reject) => { // const {width, height} = context.canvas; // const data = context.getImageData(0, 0, width, height); // mozjpeg.encode(data, { // quality: quality * 100, // // baseline: true, // progressive: false, // optimize_coding: false, // color_space: 1, // grayscale // quant_table: 1, // trellis_multipass: true, // // trellis_opt_zero: true, // // trellis_opt_table: true, // // trellis_loops: 3, // // auto_subsample: false, // // chroma_subsample: 1, // // separate_chroma_quality: false, // // chroma_quality: 75, // }).then((buffer) => { // const blob = new Blob([buffer], { type: "image/jpeg" }); // const image = new Image; // image.onload = () => resolve(image); // image.onerror = reject; // image.src = URL.createObjectURL(blob); // }); // }); // } // const deepFryMozjpeg = deepFryFactory(context2d, toJpegMozjpeg); // const deepFry = deepFryFactory(context2d, toJpegCanvas);54:[] 46:{"id":"36c0a39fcc06928b","slug":"procgen-dreamscape","title":"procgen 1-bit dreamscape","thumbnail":"079c22380b5ae321adbd85f36883ca85f79b2a6d36d9dd0865675037e72c2e3c","access_level":"public","create_time":"$D2026-05-12T21:25:52.004Z","update_time":"$D2026-09-14T02:24:01.645Z","view_time":null,"first_public_time":"$D2026-05-13T18:43:51.944Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9435857216f1efa3","login":"cubeghost","name":"cubeghost","avatar_url":"https://avatars-next.observableusercontent.com/e8eaf0776e0a5b0cf9547a05956120ccd6b7da27026923c2052c1c952848fc5f","tier":"starter_2024","bio":"code wizard ⟡ level 3000 cyberwitch ⟡ computer artist","following":false},"version":2967,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ded3a32198797764","login":"cubeghost","name":"cubeghost","avatar_url":"https://avatars-next.observableusercontent.com/6474c8b9f1f54942dd00287295432b9f35c38c834f3fd2d9fd1276fb1accec28","tier":null,"bio":"code wizard ⟡ level 3000 cyberwitch ⟡ computer artist","following":false}],"members":[{"type":"team","id":"9435857216f1efa3","login":"cubeghost","name":"cubeghost","avatar_url":"https://avatars-next.observableusercontent.com/e8eaf0776e0a5b0cf9547a05956120ccd6b7da27026923c2052c1c952848fc5f","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ded3a32198797764","login":"cubeghost","name":"cubeghost","avatar_url":"https://avatars-next.observableusercontent.com/6474c8b9f1f54942dd00287295432b9f35c38c834f3fd2d9fd1276fb1accec28","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"viewof seed = seedButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1945,"value":"{\n const label = htl.html`

seed: ${seed}

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

${label}

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

${label}${frame.canvas}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1958,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"const {\n options: { width, height, chunkSize: cs },\n debug,\n effects\n} = options;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"const xChunks = width / cs;\nconst yChunks = height / cs;\n\nfunction* chunkLoop(func) {\n for (let chunkY = 0, i = 0; chunkY < yChunks; ++chunkY) {\n for (let chunkX = 0; chunkX < xChunks; ++chunkX, i++) {\n yield* func(i, chunkX, chunkY);\n }\n }\n}\nfunction* chunkReverseLoop(func) {\n const maxChunk = xChunks * yChunks - 1;\n for (let chunkY = yChunks - 1, i = maxChunk; chunkY >= 0; --chunkY) {\n for (let chunkX = xChunks - 1; chunkX >= 0; --chunkX, i--) {\n yield* func(i, chunkX, chunkY);\n }\n }\n}\n\nconst loopFn = debug.reverseChunks ? chunkReverseLoop : chunkLoop;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2046,"value":"const maybeDither = (image) => options.debug.dither ? CanvasDither.atkinson(image) : image;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"const maybeDitherContext = (sourceContext: CanvasRenderingContext2D, ditherContext?: CanvasRenderingContext2D) => {\n if (options.debug.dither) {\n let context = ditherContext ?? context2d(width, height, 1);\n const image = sourceContext.getImageData(0, 0, sourceContext.canvas.width, sourceContext.canvas.height);\n context.putImageData(CanvasDither.atkinson(image), 0, 0);\n return context;\n } else {\n return sourceContext;\n }\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"### source layers\nstarting with perlin noise ([Mike Bostock's implementation](@mbostock/perlin-noise))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"noiseContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2088,"value":"const noiseContext = (function* () {\n const context = context2d(width, height, 1);\n yield* applyNoise(context);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2051,"value":"import {octave, perlin2, perlin3} from \"observable:@mbostock/perlin-noise\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2034,"value":"$4a","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2057,"value":"preFilterContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2087,"value":"const preFilterContext = await copyContext(noiseContext, applyPreFilter);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"function* applyPreFilter(context) {\n if (!debug.lighten) {\n yield context;\n return;\n };\n\n // fade white\n const gradient = context.createLinearGradient(width, 0, 0, height);\n gradient.addColorStop(0, \"rgba(255, 255, 255, 0.9)\");\n gradient.addColorStop(1, \"rgba(255, 255, 255, 0.1)\");\n context.fillStyle = gradient;\n context.globalCompositeOperation = \"overlay\";\n context.fillRect(0, 0, width, height);\n\n // contrast-y overlay\n context.globalCompositeOperation = \"overlay\";\n context.fillStyle = \"rgba(255, 255, 255, 0.5)\";\n context.fillRect(0, 0, width, height);\n\n // reset blending\n context.globalCompositeOperation = \"source-over\";\n\n yield context;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2065,"value":"### output layers\neach chunk type uses one of these 3 layers (`default`, `lighter`, and `lightest`) as a base. `default` is where we apply effects such as `glitch` or `deep fry`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2070,"value":"defaultContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"const defaultContext = maybeDitherContext(baseDefaultContext, context2d(width, height, 1));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"const baseDefaultContext = await copyContext(preFilterContext, applyEffects);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2068,"value":"lighterContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2060,"value":"const lighterContext = maybeDitherContext(baseLighterContext, context2d(width, height, 1));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2090,"value":"const baseLighterContext = await copyContext(baseDefaultContext, applyLighter);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"function* applyLighter(context) {\n context.globalCompositeOperation = \"source-over\";\n context.fillStyle = \"rgba(255, 255, 255, 0.2)\";\n context.fillRect(0, 0, width, height);\n yield context;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2066,"value":"lightestContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2063,"value":"function* applyLightest(context) {\n context.globalCompositeOperation = \"source-over\";\n context.fillStyle = \"rgba(255, 255, 255, 0.3)\";\n context.fillRect(0, 0, width, height);\n yield context;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2092,"value":"const baseLightestContext = await copyContext(baseLighterContext, applyLightest);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2067,"value":"const lightestContext = maybeDitherContext(baseLightestContext, context2d(width, height, 1));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"### chunk analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"display(getChunkValues(noiseContext));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2093,"value":"// get mean darkness in each chunk\nfunction getChunkValues(context: CanvasRenderingContext2D) {\n return [...chunkLoop(function* (i, cx, cy) {\n const image = context.getImageData(cx * cs, cy * cs, cs, cs);\n let black = 0;\n for (let i = 0; i < image.data.length; i += 4) {\n black += image.data[i];\n }\n const mean = Math.floor(black / (image.data.length / 4));\n yield mean;\n })];\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"categoriesContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"const categoriesContext = await copyContext(noiseContext, applyDebugColors(\n categorizeChunks(getChunkValues(noiseContext))\n));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2079,"value":"const categoryDebugColors = {\n 0: \"Lime\",\n 1: \"DeepSkyBlue\",\n 2: \"Turquoise\",\n 3: \"Yellow\",\n 4: \"HotPink\",\n 5: undefined,\n 6: \"Red\",\n 7: undefined\n};\n\nfunction applyDebugColors(chunks: ChunkMeta[]) {\n return function* (context) {\n yield* loopFn(function* (i) {\n const { x, y, category } = chunks[i];\n\n const color = categoryDebugColors[category];\n if (color) {\n debugHighlightChunk(context, x, y, color);\n }\n\n if (debug.animate) yield context;\n });\n\n if (!debug.animate) yield context;\n }\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"// rank within categories\nfunction rankChunks(chunks: ChunkMeta[]) {\n const shuffleRank = d3.shuffler(d3.randomLcg(seed));\n\n const categoryRanks = d3.rollup(\n chunks,\n (g) => ({\n indicies: new d3.InternMap(g.map((d, i) => [d.i, i])),\n ranks: d3.rank(g, (a: ChunkMeta, b: ChunkMeta) => d3.ascending(a.value, b.value) || 1),\n }),\n (d) => d.category,\n );\n const category2Ranks = categoryRanks.get(2)?.ranks;\n const random2Ranks = category2Ranks ? shuffleRank(category2Ranks) : [];\n\n return { categoryRanks, category2Ranks, random2Ranks };\n}\n\ndisplay(rankChunks(categorizeChunks(getChunkValues(noiseContext))));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2083,"value":"### render chunks\nfirst the background layer, then optional symbols (\"sparkles\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"backgroundChunksContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2095,"value":"const backgroundChunksContext = await copyContext(lightestContext, applyBackgroundChunks(\n categorizeChunks(getChunkValues(noiseContext)),\n {\n default: defaultContext,\n lighter: lighterContext,\n lightest: lightestContext\n }\n));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2081,"value":"// render chunk backgrounds\nfunction applyBackgroundChunks(\n chunks: ChunkMeta[],\n contexts: Record<\"default\" | \"lighter\" | \"lightest\", CanvasRenderingContext2D>\n) {\n const contextsByCategory = new Map([\n [0, contexts.lighter],\n [1, contexts.lighter],\n [2, contexts.default],\n [3, contexts.default],\n [4, contexts.lighter],\n [5, contexts.lightest],\n [6, contexts.lighter],\n [7, contexts.lighter],\n ]);\n\n return function* (context) {\n yield* loopFn(function* (i) {\n const { x, y, category } = chunks[i];\n\n const fromContext = contextsByCategory.get(category)!;\n context.drawImage(fromContext.canvas, x, y, cs, cs, x, y, cs, cs);\n\n if (debug.animate) {\n yield context;\n }\n });\n\n yield context;\n }\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"chunksContext.canvas","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2097,"value":"const chunksContext = await copyContext(backgroundChunksContext, applyChunks(\n categorizeChunks(getChunkValues(noiseContext))\n));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2039,"value":"## sparkles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"const sparkleContext = context2d(160, 40, 1);\n\nsparkleContext.fillStyle = \"gray\";\nsparkleContext.fillRect(0, 0, sparkleContext.canvas.width, sparkleContext.canvas.height);\n\n// left to right\ndrawLoopedSquare(sparkleContext, 5, 5, 14, 4);\ndrawCairoFlower(sparkleContext, 24, 6);\ndrawHappyMac(sparkleContext, 41, 8);\n\nlet x = 4;\nconst pad = 4;\nfor (let i = 0; i < 9; i++) {\n const {draw, size} = sparkles[i];\n draw(sparkleContext, x + pad, 28 - Math.floor(size / 2));\n x += size + (pad * 2);\n}\n\nsparkleContext.canvas.style.setProperty(\"image-rendering\", \"pixelated\");\nsparkleContext.canvas.style.setProperty(\"width\", `${sparkleContext.canvas.width * 2}px`);\nsparkleContext.canvas.style.setProperty(\"height\", `${sparkleContext.canvas.height * 2}px`);\n\ndisplay(sparkleContext.canvas);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"$50","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"$51","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"const cumulativeSparkleWeights = sparkles.reduce((acc, value, index) => {\n acc[index] = (value.weight ?? 1) + (acc[index - 1] ?? 0);\n return acc;\n}, [] as number[]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2040,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"const compose = (...generators) => [...generators.reduce((acc, value) => value([...acc]))];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"function debugGrid(context: CanvasRenderingContext2D) {\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":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"function debugHighlightChunk(context: CanvasRenderingContext2D, x: number, y: number, color: string) {\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, cs, cs);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"$52","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1421,"value":"function context2d(width: number, height: number, dpi: number = window.devicePixelRatio): CanvasRenderingContext2D {\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":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2042,"value":"async function* copyContext(sourceContext: CanvasRenderingContext2D, func?: (context: CanvasRenderingContext2D) => Generator) {\n const context = context2d(width, height, 1);\n context.drawImage(sourceContext.canvas, 0, 0);\n\n if (func) {\n yield* await func(context);\n }\n\n return context;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"const dpi = window.devicePixelRatio;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"const params = new URLSearchParams(location.search);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {seedButton} from \"observable:@saneef/seed-button\";\nimport {details, tabbed} from \"observable:@mootari/tabs\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"import {deepFryFactory, toJpegCanvas, toJpegTurbo} from \"observable:@cubeghost/canvas-jpeg-deep-fryer\";\n// import * as mozjpeg from \"npm:@jsquash/jpeg\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1623,"value":"$53","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"import glitch from \"npm:glitch-canvas\";\nimport CanvasDither from \"npm:canvas-dither\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"2"}} 47:"$46:body"