/* * IDD / AFTERIMAGE CRYSTAL * * A new work built only from the mechanisms in the supplied references: * seeded randomness, star-like particle trails, recursive triangle division, * accumulated texture, and a finite 250-frame growth period. * * MOVE POINTER : change afterimage duration and gently bend trajectories * HOVER IDD : disturb the crystallized particle field * R : regenerate with a new seed * S : save PNG */ const TOTAL_PARTICLES = 5200; const PARTICLES_PER_FRAME = 42; const FINAL_FRAME = 250; const PALETTE = { background: [11, 11, 13], white: [235, 239, 247], cold: [155, 183, 255], accent: [255, 76, 111], }; let seed = Math.floor(Math.random() * 9999); let artSize; let margin; let centerX; let centerY; let diagonal; let trailLayer; let settledLayer; let crystalLayer; let textureLayer; let iddMask; let targetPoints = []; let particles = []; let targetCursor = 0; let artFrame = 0; let completed = false; let staticPreview = false; let pointerActive = false; let pointerStrength = 0; let hoverX; let hoverY; let pointerTargetX; let pointerTargetY; function setup() { artSize = min(windowWidth, windowHeight); const canvas = createCanvas(artSize, artSize); canvas.parent("canvas-wrap"); bindPointerEvents(canvas.elt); pixelDensity(min(window.devicePixelRatio || 1, 2)); frameRate(25); noStroke(); staticPreview = new URLSearchParams(window.location.search).get("still") === "1"; resetArtwork(seed); } function resetArtwork(nextSeed) { seed = Math.floor(nextSeed); randomSeed(seed); noiseSeed(seed); margin = artSize / 38; centerX = width / 2; centerY = height / 2; diagonal = dist(0, 0, centerX, centerY); hoverX = centerX; hoverY = centerY; pointerTargetX = centerX; pointerTargetY = centerY; pointerStrength = 0; trailLayer = createGraphics(width, height); settledLayer = createGraphics(width, height); crystalLayer = createGraphics(width, height); textureLayer = createGraphics(width, height); iddMask = createGraphics(width, height); for (const layer of [ trailLayer, settledLayer, crystalLayer, textureLayer, iddMask, ]) { layer.pixelDensity(1); } buildIddMask(); targetPoints = sampleMaskPoints(TOTAL_PARTICLES); buildTexture(); particles = []; targetCursor = 0; artFrame = 0; completed = false; if (staticPreview) { completeArtwork(); } loop(); } function draw() { artFrame += 1; updatePointerField(); if (!completed) { updateTrailFade(); spawnParticles(); updateParticles(); if (artFrame >= FINAL_FRAME) { completeArtwork(); } } background(...PALETTE.background); blendMode(ADD); image(trailLayer, 0, 0); image(settledLayer, 0, 0); image(crystalLayer, 0, 0); if (completed) { drawHoverField(); } blendMode(BLEND); image(textureLayer, 0, 0); drawFrameAndLabels(); } function buildIddMask() { iddMask.clear(); iddMask.push(); iddMask.textAlign(CENTER, CENTER); iddMask.textStyle(BOLD); iddMask.textFont("Arial Black"); iddMask.textSize(width * 0.39); iddMask.noStroke(); iddMask.fill(255); iddMask.text("IDD", width / 2, height * 0.505); iddMask.pop(); iddMask.loadPixels(); } function sampleMaskPoints(amount) { randomSeed(seed + 101); const points = []; const left = width * 0.08; const right = width * 0.92; const top = height * 0.25; const bottom = height * 0.75; let attempts = 0; const maxAttempts = amount * 80; while (points.length < amount && attempts < maxAttempts) { attempts += 1; const x = random(left, right); const y = random(top, bottom); if (maskAlphaAt(x, y) > 90) { points.push({ x, y, size: random(0.55, 1.8), emphasis: random() < 0.075, phase: random(TWO_PI), drift: random(0.76, 1.24), }); } } return shuffle(points, true); } function maskAlphaAt(x, y) { const px = constrain(floor(x), 0, iddMask.width - 1); const py = constrain(floor(y), 0, iddMask.height - 1); const index = 4 * (py * iddMask.width + px) + 3; return iddMask.pixels[index] || 0; } function buildTexture() { randomSeed(seed + 202); textureLayer.clear(); textureLayer.noStroke(); const grainCount = floor(width * height * 0.024); for (let index = 0; index < grainCount; index++) { const x = random(width); const y = random(height); const value = random(170, 255); const alpha = random(2, 10); textureLayer.fill(value, value, value, alpha); textureLayer.circle(x, y, random(0.25, 1.05)); } for (let index = 0; index < 110; index++) { textureLayer.stroke(255, random(2, 7)); textureLayer.strokeWeight(random(0.15, 0.45)); const y = random(height); textureLayer.line(random(width * 0.05), y, random(width * 0.95), y); } } function updateTrailFade() { const mouseDistance = pointerActive ? dist(hoverX, hoverY, centerX, centerY) : diagonal * 0.58; const fade = constrain(map(mouseDistance, 0, diagonal, 15, 1.2), 1.2, 15); trailLayer.noStroke(); trailLayer.fill( PALETTE.background[0], PALETTE.background[1], PALETTE.background[2], fade, ); trailLayer.rect(0, 0, width, height); } function updatePointerField() { const targetStrength = pointerActive ? 1 : 0; pointerStrength = lerp(pointerStrength, targetStrength, 0.11); if (pointerActive) { hoverX = lerp(hoverX, pointerTargetX, 0.18); hoverY = lerp(hoverY, pointerTargetY, 0.18); } } function bindPointerEvents(element) { const updateTarget = (event) => { const bounds = element.getBoundingClientRect(); pointerTargetX = constrain( ((event.clientX - bounds.left) / bounds.width) * width, 0, width, ); pointerTargetY = constrain( ((event.clientY - bounds.top) / bounds.height) * height, 0, height, ); pointerActive = true; }; element.addEventListener("pointerenter", updateTarget); element.addEventListener("pointermove", updateTarget); element.addEventListener("pointerdown", updateTarget); element.addEventListener("pointerleave", () => { pointerActive = false; }); element.addEventListener("pointerup", (event) => { if (event.pointerType !== "mouse") { pointerActive = false; } }); element.addEventListener("pointercancel", () => { pointerActive = false; }); } function drawHoverField() { if (pointerStrength < 0.008) return; const radius = width * 0.185; const radiusSquared = radius * radius; const maximumPush = width * 0.0075; noStroke(); for (const point of targetPoints) { const dx = point.x - hoverX; const dy = point.y - hoverY; if (abs(dx) > radius || abs(dy) > radius) continue; const distanceSquared = dx * dx + dy * dy; if (distanceSquared >= radiusSquared) continue; const pointDistance = sqrt(max(distanceSquared, 0.001)); const proximity = 1 - pointDistance / radius; const influence = proximity * proximity * pointerStrength; const normalX = dx / pointDistance; const normalY = dy / pointDistance; const shimmer = 0.82 + 0.18 * sin(frameCount * 0.075 + point.phase); const outwardPush = maximumPush * influence * shimmer * point.drift; const sidewaysPush = width * 0.0012 * influence * sin(frameCount * 0.045 + point.phase); const displacedX = point.x + normalX * outwardPush - normalY * sidewaysPush; const displacedY = point.y + normalY * outwardPush + normalX * sidewaysPush; const palette = point.emphasis ? PALETTE.accent : PALETTE.cold; fill( palette[0], palette[1], palette[2], 16 + influence * (point.emphasis ? 118 : 82), ); circle( displacedX, displacedY, point.size * (1.05 + influence * 1.75), ); } } function spawnParticles() { if (targetCursor >= targetPoints.length) return; const amount = min( PARTICLES_PER_FRAME, targetPoints.length - targetCursor, ); for (let index = 0; index < amount; index++) { particles.push( new StarParticle(targetPoints[targetCursor], targetCursor), ); targetCursor += 1; } } function updateParticles() { for (let index = particles.length - 1; index >= 0; index--) { const particle = particles[index]; particle.move(); particle.render(trailLayer); if (particle.finished) { particle.settle(settledLayer); particles.splice(index, 1); } } } function completeArtwork() { if (completed) return; randomSeed(seed + 303); settledLayer.clear(); settledLayer.noStroke(); settledLayer.blendMode(ADD); for (const point of targetPoints) { const palette = point.emphasis ? PALETTE.accent : PALETTE.white; const glowPalette = point.emphasis ? PALETTE.accent : PALETTE.cold; settledLayer.fill( glowPalette[0], glowPalette[1], glowPalette[2], point.emphasis ? 26 : random(9, 22), ); settledLayer.circle(point.x, point.y, point.size * 3.3); settledLayer.fill( palette[0], palette[1], palette[2], point.emphasis ? 132 : random(70, 142), ); settledLayer.circle(point.x, point.y, point.size); } settledLayer.blendMode(BLEND); particles = []; targetCursor = targetPoints.length; buildCrystalLayer(); artFrame = max(artFrame, FINAL_FRAME); completed = true; } function buildCrystalLayer() { randomSeed(seed + 404); crystalLayer.clear(); const cell = width / 16; const left = width * 0.075; const right = width * 0.925; const top = height * 0.24; const bottom = height * 0.76; for (let y = top; y < bottom; y += cell) { for (let x = left; x < right; x += cell) { const triangles = [ [ [x, y], [x + cell, y], [x, y + cell], ], [ [x + cell, y], [x + cell, y + cell], [x, y + cell], ], ]; for (const trianglePoints of triangles) { const centroidX = (trianglePoints[0][0] + trianglePoints[1][0] + trianglePoints[2][0]) / 3; const centroidY = (trianglePoints[0][1] + trianglePoints[1][1] + trianglePoints[2][1]) / 3; if (maskAlphaAt(centroidX, centroidY) > 100) { divideCrystal( trianglePoints[0], trianglePoints[1], trianglePoints[2], 2, ); } } } } // Keep the recursive structure strictly inside the IDD letterforms. const context = crystalLayer.drawingContext; context.save(); context.globalCompositeOperation = "destination-in"; crystalLayer.image(iddMask, 0, 0); context.restore(); } function divideCrystal(v1, v2, v3, depth) { if (depth <= 0) { drawCrystalTriangle(v1, v2, v3); return; } const a = interpolatePoint(v1, v2, 1 / 3); const b = interpolatePoint(v1, v2, 2 / 3); const c = interpolatePoint(v2, v3, 1 / 3); const d = interpolatePoint(v2, v3, 2 / 3); const e = interpolatePoint(v3, v1, 1 / 3); const f = interpolatePoint(v3, v1, 2 / 3); const g = interpolatePoint(f, c, 1 / 2); divideCrystal(v1, a, f, depth - 1); divideCrystal(a, b, g, depth - 1); divideCrystal(b, v2, c, depth - 1); divideCrystal(g, f, a, depth - 1); divideCrystal(c, g, b, depth - 1); divideCrystal(f, g, e, depth - 1); divideCrystal(g, c, d, depth - 1); divideCrystal(d, e, g, depth - 1); divideCrystal(e, d, v3, depth - 1); } function interpolatePoint(a, b, amount) { return [ lerp(a[0], b[0], amount), lerp(a[1], b[1], amount), ]; } function drawCrystalTriangle(v1, v2, v3) { const accent = random() < 0.045; const alpha = accent ? random(32, 72) : random(18, 48); const palette = accent ? PALETTE.accent : PALETTE.cold; if (random() < 0.09) { crystalLayer.noStroke(); crystalLayer.fill(palette[0], palette[1], palette[2], alpha * 0.45); } else { crystalLayer.noFill(); crystalLayer.stroke(palette[0], palette[1], palette[2], alpha); crystalLayer.strokeWeight(random(0.24, 0.82)); } crystalLayer.triangle( v1[0], v1[1], v2[0], v2[1], v3[0], v3[1], ); } function drawFrameAndLabels() { noFill(); stroke(234, 238, 246, 34); strokeWeight(max(0.7, margin * 0.055)); rect(margin, margin, width - margin * 2, height - margin * 2); noStroke(); fill(235, 239, 247, 160); textFont("Arial"); textStyle(BOLD); textAlign(LEFT, TOP); textSize(max(9, width * 0.013)); text("IDD / AFTERIMAGE CRYSTAL", margin * 1.55, margin * 1.45); textAlign(RIGHT, TOP); textStyle(NORMAL); textSize(max(7, width * 0.009)); text( "SEED " + nf(seed, 4) + " / FRAME " + nf(min(artFrame, FINAL_FRAME), 3), width - margin * 1.55, margin * 1.55, ); textAlign(LEFT, BOTTOM); text( completed ? "HOVER = FIELD R = REGENERATE S = SAVE" : "MOVE = MEMORY R = REGENERATE S = SAVE", margin * 1.55, height - margin * 1.42, ); textAlign(RIGHT, BOTTOM); text( completed ? "STATE / CRYSTALLIZED" : "STATE / IN MOTION", width - margin * 1.55, height - margin * 1.42, ); } class StarParticle { constructor(target, index) { this.target = target; this.index = index; this.startX = centerX + randomGaussian() * width * 0.004; this.startY = centerY + randomGaussian() * height * 0.004; const dx = target.x - this.startX; const dy = target.y - this.startY; const length = max(1, sqrt(dx * dx + dy * dy)); const normalX = -dy / length; const normalY = dx / length; const bend = random(-width * 0.14, width * 0.14); this.controlX = lerp(this.startX, target.x, random(0.34, 0.66)) + normalX * bend; this.controlY = lerp(this.startY, target.y, random(0.34, 0.66)) + normalY * bend; this.duration = random(62, 158); this.age = -random(0, 38); this.x = this.startX; this.y = this.startY; this.previousX = this.x; this.previousY = this.y; this.finished = false; this.emphasis = target.emphasis; this.weight = random(0.3, 1.15); } move() { this.age += 1; if (this.age <= 0) return; this.previousX = this.x; this.previousY = this.y; const amount = constrain(this.age / this.duration, 0, 1); const eased = 1 - pow(1 - amount, 3); const inverse = 1 - eased; const pointerBendX = (hoverX - centerX) * 0.035 * pointerStrength * sin(PI * eased); const pointerBendY = (hoverY - centerY) * 0.035 * pointerStrength * sin(PI * eased); this.x = inverse * inverse * this.startX + 2 * inverse * eased * this.controlX + eased * eased * this.target.x + pointerBendX; this.y = inverse * inverse * this.startY + 2 * inverse * eased * this.controlY + eased * eased * this.target.y + pointerBendY; if (amount >= 1) { this.x = this.target.x; this.y = this.target.y; this.finished = true; } } render(graphics) { if (this.age <= 0) return; const palette = this.emphasis ? PALETTE.accent : PALETTE.cold; graphics.stroke( palette[0], palette[1], palette[2], this.emphasis ? 38 : 22, ); graphics.strokeWeight(this.weight); graphics.line(this.previousX, this.previousY, this.x, this.y); graphics.noStroke(); graphics.fill( palette[0], palette[1], palette[2], this.emphasis ? 105 : 70, ); graphics.circle(this.x, this.y, this.emphasis ? 1.7 : 0.9); } settle(graphics) { const palette = this.emphasis ? PALETTE.accent : PALETTE.white; graphics.noStroke(); graphics.fill( palette[0], palette[1], palette[2], this.emphasis ? 90 : 52, ); graphics.circle(this.target.x, this.target.y, this.target.size); } } function keyTyped() { if (key === "s" || key === "S") { saveCanvas("IDD_AFTERIMAGE_CRYSTAL_" + nf(seed, 4), "png"); } if (key === "r" || key === "R") { staticPreview = false; resetArtwork(Math.random() * 9999); } } function windowResized() { const nextSize = min(windowWidth, windowHeight); if (nextSize === artSize) return; artSize = nextSize; resizeCanvas(artSize, artSize); resetArtwork(seed); }