let progress = -1; let currentUnix; let genes; let previousUnix; let bloomStarTime; let bloomValue; let fallingPetals = []; let particles = []; let BLOOM_DURATION = 60*1000; function setup(){ createCanvas(windowWidth,windowHeight); frameRate(60); colorMode(HSB, 360, 100, 100, 100); currentUnix = Math.floor(Date.now() / 1000); previousUnix = Math.floor(Date.now() / 1000) - 1; createNewBloom(); createParticles(); // 毎分00秒に更新する bloomStarTime -= second()*1000; } function draw(){ background(0); progress = constrain((Date.now() - bloomStarTime)/BLOOM_DURATION,0,1); if(progress >=1){ previousUnix = currentUnix; createNewBloom(); } updateParticles(progress); drawPerticles(); drawUnixWave(); drawStem(progress) drawBloom(width*0.5,height*0.5,bloomValue,progress) updateFallingPetals(progress); drawFallingPetals(); //drawDebugInformation(); drawProgres(progress) textFont("Verdana"); textSize(height*0.05); textAlign(CENTER, TOP) stroke(50,100); strokeWeight(2) fill(50,10) var h = hour().toString().padStart(2,"0"); var m = minute().toString().padStart(2,"0"); var s = second().toString().padStart(2,"0"); //text(`${h}:${m}:${s}`,width/2,height*0.8); } function windowResized(){ resizeCanvas(windowWidth, windowHeight); createParticles(); } //====================================== // DRAW //====================================== function drawBloom(x,y,bloom,progress){ push(); translate(x,y); const baseSize = min(width,height)*0.9; const bloomProgress = smoothstep(0,0.65,progress); const decayProgress= smoothstep(0.7,0.98,progress); const scaleValue = bloomProgress*(1-decayProgress); scale(scaleValue); const rotation = frameCount*lerp(0.0005,0.006,bloom.motion); rotate(rotation); drawBloomGlow(baseSize, bloom, bloomProgress, decayProgress); for(var layer = 0; layer < bloom.layerCount; layer++){ const layerRatio = layer/max(1,bloom.layerCount-1); const count = bloom.outerPetalCount; const layerGrowth = constrain(map(bloomProgress, layerRatio * 0.18, 1, 0, 1), 0, 1); for(let i = 0; i < count;i++){ const dnaIndex = (i + layer * count) % genes.geneSequence.length; const dnaBase = genes.geneSequence[dnaIndex]; const dnaValue = baseToNumber(dnaBase); const angle = i / count * TWO_PI + layer * PI / bloom.symmetry; const variation = map(dnaValue, 0, 3, 0.84, 1.18); const length = baseSize * bloom.petalLength * (1 - layerRatio * 0.35) * variation; const petalWidth = baseSize * bloom.petalWidth * (1 - layerRatio * 0.2); const hue = (bloom.baseHue + layerRatio * 75 + dnaValue * 12) % 360; const decayAmount = decayProgress * map(noise(i * 0.2, layer * 0.4), 0, 1, 0.05, 1); push(); rotate(angle); translate(baseSize *(0.05 +layerRatio * 0.07),0); scale(layerGrowth*(1-decayAmount*0.25)); fill(hue,65,93,35); noStroke(); drawPetal(length, petalWidth, hue, layerRatio, decayAmount); pop(); } } drawFlowerCenter(baseSize, bloom,bloomProgress, decayProgress); pop(); } function drawPetal(length, petalWidth, hue, layerRatio, decay){ push(); blendMode(ADD); noStroke(); fill(hue, 70, 100, 5 * (1 - decay)); ellipse(length * 0.48, 0, length * 1.3, petalWidth * 2.8); blendMode(BLEND); fill(hue, 58 + layerRatio * 18, 98, 24 + layerRatio * 13); noStroke(); beginShape(); vertex(0, 0); bezierVertex(length * 0.14, -petalWidth * 0.9, length * 0.68, -petalWidth * 1.2, length, 0); bezierVertex(length * 0.7, petalWidth * 1.05, length * 0.16, petalWidth * 0.9, 0, 0); endShape(CLOSE); fill((hue + 18) % 360, 35, 100, 13); beginShape(); vertex(length * 0.05, 0); bezierVertex(length * 0.25, -petalWidth * 0.3, length * 0.72, -petalWidth * 0.32, length * 0.91, 0); bezierVertex(length * 0.7, petalWidth * 0.3, length * 0.25, petalWidth * 0.25, length * 0.05, 0); endShape(CLOSE); noFill(); stroke((hue + 30) % 360, 20, 100, 25); strokeWeight(max(0.4, length * 0.006)); bezier(0, 0, length * 0.3, 0, length * 0.65, 0, length * 0.93, 0); pop(); } function drawBloomGlow(baseSize, bloom, bloomProgress, decayProgress){ const alpha = bloomProgress * (1 - decayProgress); push(); blendMode(ADD); noFill(); for(let i = 0; i < 7; i++){ const pulse = sin(frameCount * 0.009 + i * 0.8) * baseSize * 0.012; stroke((bloom.baseHue + i * 13) % 360, 55, 100, alpha * (8 - i * 0.8)); strokeWeight(max(1, baseSize * 0.003)); circle(0, 0, baseSize * (1 + i * 0.15) + pulse); } noStroke(); fill(bloom.baseHue, 55, 100, alpha ); circle(0, 0, baseSize * 1.45); blendMode(BLEND); pop(); } function drawFlowerCenter(baseSize, bloom, bloomProgress, decayProgress){ const count = Math.round(lerp(45, 260, bloom.centerComplexity)); const alpha = bloomProgress * (1 - decayProgress); push(); blendMode(ADD); noStroke(); for(let i = 6; i >= 1; i--){ fill((bloom.baseHue + 140 + i * 8) % 360, 65, 100, alpha * (3 + i * 1.2)); circle(0, 0, baseSize * (0.13 + i * 0.045)); } blendMode(BLEND); for(let i = 0; i < count; i++){ const angle = i * 2.399963; const radius = sqrt(i / count) * baseSize * 0.115; const x = cos(angle) * radius; const y = sin(angle) * radius; const hue = (bloom.baseHue + 125 + i * 0.65) % 360; const size = baseSize * map(i, 0, count, 0.015, 0.006); noStroke(); fill(hue, 70, 100, 75 * alpha); circle(x, y, size); } blendMode(ADD); fill((bloom.baseHue + 170) % 360, 30, 100, alpha*45); circle(0, 0, baseSize * 0.055); blendMode(BLEND); pop(); } function drawDebugInformation() { push(); fill(255); noStroke(); textFont("monospace"); textSize(13); textAlign(LEFT, TOP); const margin = 20; text( `PREV UNIX ${previousUnix}`, margin, margin ); text( `NOW UNIX ${currentUnix}`, margin, margin + 20 ); text( `PREV DNA ${genes.previousDNA}`, margin, margin + 50 ); text( `NOW DNA ${genes.currentDNA}`, margin, margin + 70 ); text( `GENES ${genes.geneSequence}`, margin, margin + 100 ); for (let i = 0; i < genes.codons.length; i++) { text( `${i}: ${genes.codons[i]} = ${codonToValue(genes.codons[i])}`, margin, margin + 130 + i * 18 ); } textAlign(RIGHT, TOP); text( `${nf(progress * 60, 2, 1)} / 60 sec`, width - margin, margin ); pop(); } function drawProgres(process){ // push(); blendMode(ADD) stroke(0,10,90,70); strokeWeight(2); line(width*0.1,height*0.9, width*0.9,height*0.9,); strokeWeight(5); line(width*0.1,height*0.9, width*(0.8*process+0.1),height*0.9); textSize(height*0.04); noStroke(); fill(0,10,90,70); /* var h = hour().toString().padStart(2,"0"); var m = minute().toString().padStart(2,"0"); var nextm = ( minute()+1).toString().padStart(2,"0"); text(`${h}:${m}`, width*0.1,height*0.82); text(`${h}:${nextm}`, width*0.9,height*0.85); */ pop() } function updateFallingPetals(progress){ const decay = smoothstep(0.7, 0.8, progress); if(decay > 0 && progress < 0.95 && frameCount % 10 === 0){ const count = floor(lerp(1,4, decay)); for(let i = 0; i < count; i++){ createFallingPetal(decay); } } for(let i = fallingPetals.length - 1; i >= 0; i--){ const p = fallingPetals[i]; p.vy += 0.015; p.vx += sin(frameCount * 0.01 + p.phase) * 0.05; p.x += p.vx; p.y += p.vy; p.rotation += p.rotationSpeed; p.life -= 0.006; if(p.life <= 0 || p.y > height + 100) fallingPetals.splice(i, 1); } } function createFallingPetal(decay){ const angle = random(TWO_PI); const baseSize = min(width, height) * 0.32; const radius = random(baseSize * 0.15, baseSize ); const x = width * 0.5 + cos(angle) * radius; const y = height * 0.5 + sin(angle) * radius; fallingPetals.push({ x, y, vx: cos(angle) * random(0.3, 1.4) + random(-0.3, 0.3), vy: sin(angle) * random(0.2, 0.8) - random(0.2, 0.8), rotation: random(TWO_PI), rotationSpeed: random(-0.05, 0.05), length: random(10, 28), width: random(4, 10), hue: (bloomValue.baseHue + random(-30, 60) + 360) % 360, alpha: random(25, 65), life: random(0.6, 1), phase: random(TWO_PI), decay }); } function drawFallingPetals(){ push(); noStroke(); for(const p of fallingPetals){ push(); translate(p.x, p.y); rotate(p.rotation); fill(p.hue, 60, 100, p.alpha * p.life); beginShape(); vertex(0, 0); bezierVertex(p.length * 0.25, -p.width, p.length * 0.8, -p.width * 0.7, p.length, 0); bezierVertex(p.length * 0.8, p.width * 0.7, p.length * 0.25, p.width, 0, 0); endShape(CLOSE); pop(); } pop(); } function drawStem(progress){ const t = smoothstep(0.0,0.16,progress); // 約10秒 if(t<=0) return; push(); translate(width*0.5,height*0.5); var alpha = progress < 0.6?80:80*(0.8-progress)/(0.8-0.6); stroke((bloomValue.baseHue+10)%360,60,90,alpha); strokeWeight(3); noFill(); const stemLength=min(width,height)*0.3; const startY = min(width,height)*0.4; const swing = height*0.03; beginShape(); vertex(0,startY) curveVertex(0,startY) curveVertex(-swing*cos(frameCount*0.01),(startY + startY - stemLength*t)*0.5); curveVertex(0, startY - stemLength*t) vertex(0, startY - stemLength*t) endShape(); if(progress > 0.1){ var leafscale= min((progress -0.1)*10,1); fill((bloomValue.baseHue+90)%360,60,90,alpha); for(var i=0 ; i < bloomValue.leaf; i++){ push(); var x = (i%2)==0?-height*0.1:height*0.1 translate(-swing*sin(frameCount*0.01) + x,startY-stemLength*0.2*(0.5+i)); rotate(-PI/4+PI/2*(i%2)-i*0.2); scale(leafscale,leafscale); beginShape(); vertex(-height*0.12,0); bezierVertex( -height*0.06, height*0.04, height*0.06, height*0.04, height*0.12,0); bezierVertex( height*0.06, -height*0.04, -height*0.06, -height*0.04, -height*0.12,0); endShape(CLOSE); //ellipse(0,0,height*0.25,height*0.08); pop(); } } pop(); } //====================================== // BACKGROUND DRAW //====================================== function createParticles(){ particles.length = 0; const count = constrain(floor(width*height/6500),130,600); for(let i = 0; i< count; i++){ particles.push({ angle:random(TWO_PI), radians:random(min(width, height) * 0.08,max(width, height) * 0.5), verticalScale:random(0.25,0.8), speed: random(-0.0025, 0.0025), size: random(0.8, 5), alpha: random(15, 50), hueOffset: random(-80, 80), pulseOffset: random(TWO_PI) }) } } function updateParticles(progress){ for(const p of particles){ p.angle += p.speed * lerp(0.5,3,bloomValue.motion); p.radians += sin(frameCount*0.06 + p.pulseOffset)*0.03; } } function drawPerticles(){ push(); translate(width/2,height/2); blendMode(ADD); noStroke(); for(const particle of particles){ const x = cos(particle.angle)*particle.radians; const y = sin(particle.angle)*particle.radians*particle.verticalScale; const pulse = 0.6 + sin(particle.pulseOffset + frameCount*0.018)*0.4; fill((bloomValue.baseHue + particle.hueOffset + 360) % 360,55,100,particle.alpha * pulse); circle(x,y,particle.size*(0.7+pulse)) } blendMode(BLEND); pop(); } function drawUnixWave(){ const unix = Math.floor(Date.now() / 1000); const range = 10; const spacing = max(80, width / (range * 2 + 1)); push(); translate(width/2,height/2); rotate(TAU/60*second()-PI/2) textFont("monospace"); textSize(10); textAlign(CENTER, CENTER); noStroke(); for(let row = -35; row <= 35; row++){ const baseY = map(row, 0, 9, height * 0.12, height * 0.88); const direction = row % 2 === 0 ? 1 : -1; for(let i = -range; i <= range; i++){ const value = unix + i; const offset = (frameCount *0.1 * direction) % spacing; const x = i * spacing + offset; const y = baseY + sin(i * 0.55 + row * 0.8 + frameCount * 0.012) * 10; const aplph = 12 + 10 *sin(frameCount*0.01+i+row); fill(bloomValue.baseHue, 10, 100, aplph); text(value, x, y); } } pop(); } //====================================== // BLOOM //====================================== function createNewBloom(){ currentUnix = Math.floor(Date.now() / 1000); // unix to genes genes = unixPairToCodons(previousUnix, currentUnix); // codon to bloom const offset = currentUnix % 8; const rotatedCodons = rotateCodons(genes.codons, offset); bloomValue = codonToBloom(rotatedCodons); bloomStarTime = Date.now(); progress = 0; } function unixPairToCodons(previousUnix, currentUnix) { const previousDNA = unixToDNA32(previousUnix); const currentDNA = unixToDNA32(currentUnix); let interleaved = ""; for (let i = 0; i < 16; i++) { interleaved += previousDNA[i]; interleaved += currentDNA[i]; } /* 9コドン = 27塩基だけ使う */ const geneSequence = interleaved.slice(-27); const codons = []; for (let i = 0; i < 27; i += 3) { codons.push( geneSequence.slice(i, i + 3) ); } return { previousDNA, currentDNA, geneSequence, codons }; } function unixToDNA32(unixTime) { const bases = ["A", "T", "G", "C"]; /* 32bit符号なし整数として扱う */ const value = unixTime >>> 0; let dna = ""; /* 上位bitから2bitずつ読む */ for (let shift = 30; shift >= 0; shift -= 2) { const pair = (value >>> shift) & 3; dna += bases[pair]; } return dna; } function codonToBloom(codons){ /* codon 0 → 花弁数 codon 1 → 花弁長 codon 2 → 花弁幅 codon 3 → 層数 codon 4 → 対称性 codon 5 → 基調色 codon 6 → 花芯 codon 7 → 動き codon 8 → 葉の数 */ return { outerPetalCount: mapCodonInt(codons[0], 7, 24), petalLength: mapCodon(codons[1], 0.18, 0.42), petalWidth: mapCodon(codons[2], 0.04, 0.17), layerCount: mapCodonInt(codons[3], 2, 7), symmetry: mapCodonInt(codons[4], 3, 12), baseHue: mapCodon(codons[5], 0, 360), centerComplexity: mapCodon(codons[6], 0, 1), motion: mapCodon(codons[7], 0, 1), leaf: mapCodonInt(codons[8], 1,3), }; } function codonToValue(codon) { const values = { A: 0, T: 1, G: 2, C: 3 }; return ( values[codon[0]] * 16 + values[codon[1]] * 4 + values[codon[2]] ); } function mapCodon( codon, minValue, maxValue ) { return ( minValue + codonToValue(codon) / 63 * (maxValue - minValue) ); } function mapCodonInt(codon, minValue, maxValue) { return Math.round( mapCodon(codon, minValue, maxValue) ); } function rotateCodons(codons, offset) { return codons.map((_, i) => { return codons[(i + offset) % codons.length]; }); } //====================================== // Utility //====================================== function smoothstep(e0,e1,value){ const x = constrain((value - e0)/(e1-e0),0,1); return x*x*(3-2*x); } function baseToNumber(base){ return { A: 0, T: 1, G: 2, C: 3 }[base] ?? 0; } function easeOutBack(value){ const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * pow(value - 1, 3) + c1 * pow(value - 1, 2); }

Epoch Flowers