let srcImg; let W = 560, H = 560; let cols, rows; const FIELD_MAX = 160; let woodImg; let burnBuf; let textMask; let dist; let burnDelay; let maxDelay = 0; const LOCAL_BURN = 160; // was 65 - slower per-cell char transition const SPREAD = 650; // was 300 - slower overall spread across the board const HOLD_BLACK = 100; const RESET_FADE = 90; let cycleLength; let burnPhaseEnd; // p5.js 2.x removed preload() in favor of loading assets with // await directly inside an async setup(). (In 1.x this file used // a separate preload() function instead - see the compatibility // notes at https://github.com/processing/p5.js-compatibility if // you need to support both versions.) async function setup() { // Change 'wood.jpg' to match the filename you uploaded in the // Sketch Files panel if it's different. srcImg = await loadImage('https://stat.neort.io/externalResource/d9la287jl1sb0ob4jldg.jpeg'); W = 560; H = Math.round(560 * (srcImg.height / srcImg.width)); createCanvas(W, H); pixelDensity(1); frameRate(60); drawingContext.imageSmoothingEnabled = true; if ('imageSmoothingQuality' in drawingContext) { drawingContext.imageSmoothingQuality = 'high'; } if (W >= H) { cols = FIELD_MAX; rows = max(2, round(FIELD_MAX * (H / W))); } else { rows = FIELD_MAX; cols = max(2, round(FIELD_MAX * (W / H))); } woodImg = createGraphics(W, H); woodImg.image(srcImg, 0, 0, W, H); burnBuf = createGraphics(cols, rows); burnBuf.pixelDensity(1); burnBuf.noSmooth(); buildTextMask(); buildDistanceField(); buildBurnDelays(); burnPhaseEnd = maxDelay + LOCAL_BURN; cycleLength = burnPhaseEnd + HOLD_BLACK + RESET_FADE; noStroke(); } function buildTextMask() { const big = createGraphics(W, H); big.background(0); big.fill(255); big.textAlign(CENTER, CENTER); big.textStyle(NORMAL); big.textFont('Georgia'); big.textSize(W * 0.32); big.text('i d d', W / 2, H / 2); const small = createGraphics(cols, rows); small.pixelDensity(1); small.image(big, 0, 0, cols, rows); small.loadPixels(); textMask = []; for (let j = 0; j < rows; j++) { textMask[j] = []; for (let i = 0; i < cols; i++) { const idx = 4 * (j * cols + i); const bright = small.pixels[idx] / 255; textMask[j][i] = bright > 0.55; } } // Erode the mask a couple of times to thin the strokes further, // independent of whatever font is available in the browser. const ERODE_PASSES = 1; for (let pass = 0; pass < ERODE_PASSES; pass++) { const eroded = []; for (let j = 0; j < rows; j++) { eroded[j] = []; for (let i = 0; i < cols; i++) { if (!textMask[j][i]) { eroded[j][i] = false; continue; } let keep = true; for (let dy = -1; dy <= 1 && keep; dy++) { for (let dx = -1; dx <= 1 && keep; dx++) { const ni = i + dx, nj = j + dy; if (ni < 0 || ni >= cols || nj < 0 || nj >= rows || !textMask[nj][ni]) { keep = false; } } } eroded[j][i] = keep; } } textMask = eroded; } big.remove(); small.remove(); } function buildDistanceField() { const rawDist = []; for (let j = 0; j < rows; j++) rawDist[j] = new Array(cols).fill(-1); const queue = []; for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { if (textMask[j][i]) { rawDist[j][i] = 0; queue.push([i, j]); } } } let head = 0; const dirs = [[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]; while (head < queue.length) { const [ci, cj] = queue[head++]; const d = rawDist[cj][ci]; for (const [dx, dy] of dirs) { const ni = ci + dx, nj = cj + dy; if (ni >= 0 && ni < cols && nj >= 0 && nj < rows && rawDist[nj][ni] === -1) { rawDist[nj][ni] = d + 1; queue.push([ni, nj]); } } } dist = []; for (let j = 0; j < rows; j++) { dist[j] = []; for (let i = 0; i < cols; i++) { let sum = 0, n = 0; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const ni = i + dx, nj = j + dy; if (ni >= 0 && ni < cols && nj >= 0 && nj < rows) { sum += rawDist[nj][ni]; n++; } } } dist[j][i] = sum / n; } } } function buildBurnDelays() { burnDelay = []; let rawMax = 0; for (let j = 0; j < rows; j++) { burnDelay[j] = []; for (let i = 0; i < cols; i++) { const n1 = noise(i * 0.10, j * 0.10, 5) - 0.5; const n2 = noise(i * 0.28, j * 0.28, 50) - 0.5; const n = n1 * 0.75 + n2 * 0.35; const val = dist[j][i] * (SPREAD / max(cols, rows)) + n * 26; burnDelay[j][i] = val; if (val > rawMax) rawMax = val; } } const scale = SPREAD / rawMax; for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { burnDelay[j][i] = max(0, burnDelay[j][i] * scale); if (burnDelay[j][i] > maxDelay) maxDelay = burnDelay[j][i]; } } } function charColorRGBA(prog) { if (prog <= 0.003) return null; const s = prog * prog * (3 - 2 * prog); // No orange/red ember stage - fades straight from the wood // through mid-brown into a fully charred black. let r, g, b, a; if (s < 0.3) { const t = s / 0.3; r = lerp(150, 105, t); g = lerp(95, 62, t); b = lerp(55, 33, t); a = lerp(0, 235, t); } else if (s < 0.65) { const t = (s - 0.3) / 0.35; r = lerp(105, 45, t); g = lerp(62, 28, t); b = lerp(33, 18, t); a = lerp(235, 250, t); } else { const t = (s - 0.65) / 0.35; r = lerp(45, 8, t); g = lerp(28, 7, t); b = lerp(18, 7, t); a = lerp(250, 255, t); } return [r, g, b, a]; } function draw() { const t = frameCount % cycleLength; const resetStart = burnPhaseEnd + HOLD_BLACK; burnBuf.loadPixels(); const bp = burnBuf.pixels; for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { let prog; if (t < resetStart) { const localT = t - burnDelay[j][i]; prog = constrain(map(localT, 0, LOCAL_BURN, 0, 1), 0, 1); } else { const rt = t - resetStart; const fadeBack = constrain(rt / RESET_FADE, 0, 1); prog = 1 - fadeBack; } const idx = 4 * (j * cols + i); const rgba = charColorRGBA(prog); if (rgba) { bp[idx] = rgba[0]; bp[idx + 1] = rgba[1]; bp[idx + 2] = rgba[2]; bp[idx + 3] = rgba[3]; } else { bp[idx] = 0; bp[idx + 1] = 0; bp[idx + 2] = 0; bp[idx + 3] = 0; } } } burnBuf.updatePixels(); image(woodImg, 0, 0); image(burnBuf, 0, 0, W, H); }

炭化/その一過的状態