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); // }); // } // }