32: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), ]}`) })33:T31da,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: 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); }); } }34:T40f,function noiseData(context: CanvasRenderingContext2D, z: number, dpi = window.devicePixelRatio) { const { width, height } = context.canvas; const { options: { noiseRadius, noiseOctaves }, debug: { noiseColor } } = options; const radius = noiseRadius * dpi; const image = context.createImageData(width, height); const noise = octave(perlin3, noiseOctaves); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < 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; }35: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); }36: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); }37: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); }38: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 } ])39:T4d5,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 } }3a: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);3b:[] 30:{"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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ts"},{"id":2034,"value":"const { options: { width, height } } = options;\nconst noiseContext = context2d(width, height, 1);\n\nnoiseContext.putImageData(noiseData(noiseContext, seed, 1), 0, 0);\n\ndisplay(noiseContext.canvas);","pinned":true,"hidden":false,"mode":"ts"},{"id":4,"value":"import {octave, perlin2, perlin3} from \"observable:@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ts"},{"id":210,"value":"$34","pinned":true,"hidden":false,"mode":"ts"},{"id":315,"value":"const sparkleContext = context2d(160, 48);\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);\n\nlet x = 24;\nconst pad = 4;\nfor (let i = 0; i < 9; i++) {\n const {draw, size} = sparkles[i];\n draw(sparkleContext, x + pad, 12 - Math.floor(size / 2));\n x += size + (pad * 2);\n}\n\ndrawHappyMac(sparkleContext, 6, 24);\ndrawCairoFlower(sparkleContext, 24, 22);\n\nsparkleContext.canvas.style.setProperty(\"image-rendering\", \"pixelated\");\nsparkleContext.canvas.style.setProperty(\"width\", `${sparkleContext.canvas.width * dpi * 2}px`);\nsparkleContext.canvas.style.setProperty(\"height\", `${sparkleContext.canvas.height * dpi * 2}px`);\n\ndisplay(sparkleContext.canvas);","pinned":true,"hidden":false,"mode":"ts"},{"id":1636,"value":"$35","pinned":true,"hidden":false,"mode":"ts"},{"id":306,"value":"$36","pinned":true,"hidden":false,"mode":"ts"},{"id":1838,"value":"$37","pinned":true,"hidden":false,"mode":"ts"},{"id":545,"value":"$38","pinned":true,"hidden":false,"mode":"ts"},{"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"},{"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"},{"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, chunkSize, chunkSize);\n}","pinned":true,"hidden":false,"mode":"ts"},{"id":1691,"value":"$39","pinned":true,"hidden":false,"mode":"ts"},{"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"},{"id":334,"value":"const dpi = window.devicePixelRatio;","pinned":true,"hidden":false,"mode":"ts"},{"id":1797,"value":"const params = new URLSearchParams(location.search);","pinned":true,"hidden":false,"mode":"ts"},{"id":31,"value":"import {seedButton} from \"observable:@saneef/seed-button\";\nimport {details, tabbed} from \"observable:@mootari/tabs\";","pinned":true,"hidden":false,"mode":"ts"},{"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"},{"id":1623,"value":"$3a","pinned":true,"hidden":false,"mode":"ts"},{"id":1192,"value":"import glitch from \"npm:glitch-canvas\";\nimport CanvasDither from \"npm:canvas-dither\";","pinned":true,"hidden":false,"mode":"ts"}],"files":"$W3b","stdlib":"2","titling":"auto"}