// Title: Heavy Neon Counter Lenses — Clean Fade Reset // Heavy numerals share uniform opacity across their filled shapes and thickened edges. // The counter advances from one to twenty-five inside moving rainbow lenses. // The final three seconds fade the entire scene before a clean thirty-second reset. const LENS_COUNT=12; const GRID_DIVISIONS=8; const TARGET_FRAME_RATE=28; const COUNT_MIN=1; const COUNT_MAX=25; const COUNT_STEP_SECONDS=1; const COUNT_HOLD_SECONDS=5; const COUNT_FADE_SECONDS=0.25; const SCENE_FADE_SECONDS=3; const COUNT_CYCLE_SECONDS=(COUNT_MAX-COUNT_MIN+1)*COUNT_STEP_SECONDS+COUNT_HOLD_SECONDS; const FONT_STACK='"Arial Black",Impact,"Helvetica Neue",Arial,sans-serif'; const TEXT_THICKEN=12; const FONT_REFERENCE_SIZE=280; const NUMBER_IMAGE_WIDTH=256; const NUMBER_IMAGE_HEIGHT=192; let gridSize; let lenses=[]; let cellAngles=[]; let cellSpeeds=[]; let cellNoiseOffsets=[]; let cols=0,rows=0; let startMilliseconds=0; let previousCycle=-1; let numberImages=[]; let trailLayer; function setup(){ createCanvas(windowWidth,windowHeight); frameRate(TARGET_FRAME_RATE); colorMode(HSB,360,100,100,255); makeNumberImages(); makeTrailLayer(); resetScene(); startMilliseconds=performance.now(); } // 数字を不透明な白で合成し、縁と内部の透明度差をなくす function makeNumberImages(){ const source=createGraphics(NUMBER_IMAGE_WIDTH,NUMBER_IMAGE_HEIGHT); source.pixelDensity(1); const ctx=source.drawingContext; const layouts=[]; ctx.font=`900 ${FONT_REFERENCE_SIZE}px ${FONT_STACK}`; ctx.textAlign="left"; ctx.textBaseline="alphabetic"; let maxWidth=0,maxHeight=0; for(let value=COUNT_MIN;value<=COUNT_MAX;value++){ const label=String(value); const m=ctx.measureText(label); const left=m.actualBoundingBoxLeft??0; const right=m.actualBoundingBoxRight??m.width; const ascent=m.actualBoundingBoxAscent??210; const descent=m.actualBoundingBoxDescent??0; layouts[value]={ label, x:(left-right)*0.5, y:(ascent-descent)*0.5 }; maxWidth=Math.max(maxWidth,left+right); maxHeight=Math.max(maxHeight,ascent+descent); } const padding=12; const fit=Math.min( (NUMBER_IMAGE_WIDTH-padding*2)/(maxWidth+TEXT_THICKEN), (NUMBER_IMAGE_HEIGHT-padding*2)/(maxHeight+TEXT_THICKEN) ); for(let value=COUNT_MIN;value<=COUNT_MAX;value++){ source.clear(); const layout=layouts[value]; ctx.save(); ctx.font=`900 ${FONT_REFERENCE_SIZE}px ${FONT_STACK}`; ctx.textAlign="left"; ctx.textBaseline="alphabetic"; ctx.fillStyle="#ffffff"; ctx.strokeStyle="#ffffff"; ctx.globalAlpha=1; ctx.lineJoin="round"; ctx.lineWidth=TEXT_THICKEN; ctx.translate(NUMBER_IMAGE_WIDTH/2,NUMBER_IMAGE_HEIGHT/2); ctx.scale(fit,fit); if(TEXT_THICKEN>0){ ctx.strokeText(layout.label,layout.x,layout.y); } ctx.fillText(layout.label,layout.x,layout.y); ctx.restore(); numberImages[value]=source.get(); } source.remove(); } // 残像を専用画面へ描き、最後に画面全体の透明度を制御する function makeTrailLayer(){ if(trailLayer) trailLayer.remove(); trailLayer=createGraphics(width,height); trailLayer.pixelDensity(1); trailLayer.colorMode(HSB,360,100,100,255); trailLayer.imageMode(CENTER); trailLayer.background(0); } function resetScene(){ lenses=[]; cellAngles=[]; cellSpeeds=[]; cellNoiseOffsets=[]; calculateGridParams(); for(let i=0;i=0) resetScene(); previousCycle=cycle; } const state=countState(localSeconds); const elapsedMillis=millis(); // 元の残像を維持する trailLayer.background(0,10); for(let i=0;i=cols||r<0||r>=rows) continue; const index=r*cols+c; const cx=c*gridSize+gridSize/2; const cy=r*gridSize+gridSize/2; const distortedCenter=getDistortedPosition(cx,cy); if(Math.hypot( distortedCenter.x-lens.pos.x, distortedCenter.y-lens.pos.y )>lens.radius+gridSize) continue; const offsetP=getDistortedPosition(cx+1,cy); const scaleFactor=Math.hypot( distortedCenter.x-offsetP.x, distortedCenter.y-offsetP.y ); const txtSize=gridSize*0.9*scaleFactor; const n=noise(cellNoiseOffsets[index],noiseStep); const alphaVal=map(n,0,1,30,200); const hueVal=(elapsedMillis*0.05+index*0.5)%360; trailLayer.push(); trailLayer.translate(distortedCenter.x,distortedCenter.y); trailLayer.rotate(cellAngles[index]); drawHeavyNumber( state.current,txtSize,hueVal,alphaVal*(1-state.blend) ); if(state.blend>0){ drawHeavyNumber( state.next,txtSize,hueVal,alphaVal*state.blend ); } trailLayer.pop(); } } ctx.restore(); trailLayer.pop(); } // 27〜30秒で数字と残像をまとめて黒へフェードする const fadeStart=COUNT_CYCLE_SECONDS-SCENE_FADE_SECONDS; const sceneOpacity=1-smoothBlend( (localSeconds-fadeStart)/SCENE_FADE_SECONDS ); background(0); push(); tint(0,0,100,255*sceneOpacity); image(trailLayer,0,0,width,height); pop(); } function generateGridData(totalCells){ while(cellAngles.length0){ const strength=1-d/lens.radius; const distortion=Math.sin(strength*Math.PI*0.5)*lens.mag; finalX+=dx/d*distortion; finalY+=dy/d*distortion; } } return {x:finalX,y:finalY}; } function windowResized(){ resizeCanvas(windowWidth,windowHeight); makeTrailLayer(); resetScene(); startMilliseconds=performance.now(); previousCycle=-1; } class Lens{ constructor(){ this.radius=random(Math.min(width,height)*0.05,Math.min(width,height)*0.3); this.mag=random(60,120); this.pos=createVector( random(this.radius,width-this.radius), random(this.radius,height-this.radius) ); this.velocity=p5.Vector.random2D(); this.velocity.setMag(random(8,16)); } update(){ this.pos.add(this.velocity); let hitX=false,hitY=false; if(this.pos.xwidth-this.radius){ this.pos.x=width-this.radius; hitX=true; } if(this.pos.yheight-this.radius){ this.pos.y=height-this.radius; hitY=true; } if(hitX||hitY){ this.velocity=p5.Vector.random2D(); this.velocity.setMag(random(8,16)); if(hitX){ this.velocity.x=this.pos.x<=this.radius? Math.abs(this.velocity.x):-Math.abs(this.velocity.x); } if(hitY){ this.velocity.y=this.pos.y<=this.radius? Math.abs(this.velocity.y):-Math.abs(this.velocity.y); } } } }