p5.disableFriendlyErrors=true; let neonShader,numberAtlas,startMilliseconds; const vertexSource=` precision highp float; attribute vec3 aPosition; varying vec2 vScreen; void main(){vScreen=aPosition.xy*0.5+0.5;gl_Position=vec4(aPosition,1.0);} `; const fragmentSource=` precision highp float; varying vec2 vScreen; uniform sampler2D uNumbers; uniform vec2 uResolution; uniform float uTime; const float LOOP_SECONDS=60.0,COUNT_MIN=1.0,COUNT_MAX=25.0,COUNT_STEP_SECONDS=1.0,COUNT_HOLD_SECONDS=5.0,COUNT_FADE_SECONDS=0.25; const float DETAIL_MIN=4.0,VIEW_SCALE=2.7,ZOOM_OUT_MAGNIFICATION=0.5,ZOOM_IN_MAGNIFICATION=10.0; const float NUMBER_SIZE=1.20,MOTION=0.48,BRIGHTNESS=1.65,NEON_GLOW=0.24,COLOR_CYCLES=1.0; const int MAX_DETAIL=14; vec2 cycle; float numberA,numberB,numberBlend,detail,colorPhase; mat2 rotation(float a){float c=cos(a),s=sin(a);return mat2(c,s,-s,c);} float digitMask(vec2 uv,float value){ float index=value-1.0; vec2 cell=vec2(mod(index,5.0),floor(index/5.0)); return texture2D(uNumbers,(cell+clamp(uv,0.0,1.0))/5.0).r; } float numberMask(vec2 uv){ float inside=step(0.0,uv.x)*step(uv.x,1.0)*step(0.0,uv.y)*step(uv.y,1.0); float a=digitMask(uv,numberA); if(numberBlend<=0.0)return a*inside; return mix(a,digitMask(uv,numberB),numberBlend)*inside; } vec3 neonPalette(float value){ float h=fract(value)*6.0,b=fract(h);b=b*b*(3.0-2.0*b); vec3 pink=vec3(1.0,0.015,0.38),violet=vec3(0.52,0.015,1.0),cyan=vec3(0.015,0.90,1.0); vec3 lime=vec3(0.36,1.0,0.015),yellow=vec3(1.0,0.90,0.015),orange=vec3(1.0,0.12,0.015); if(h<1.0)return mix(pink,violet,b); if(h<2.0)return mix(violet,cyan,b); if(h<3.0)return mix(cyan,lime,b); if(h<4.0)return mix(lime,yellow,b); if(h<5.0)return mix(yellow,orange,b); return mix(orange,pink,b); } vec3 filigree(vec2 p,float pixelSize){ vec2 z=p,shift=vec2(1.18,0.73)+MOTION*vec2(cycle.x,cycle.y*0.65); float derivativeScale=1.0; vec3 coverage=vec3(0.0),halo=vec3(0.0); mat2 turn=rotation(0.63+MOTION*cycle.y); for(int i=0;i=COUNT_MAX?COUNT_MIN:numberA+1.0; float end=numberA>=COUNT_MAX?total:(index+1.0)*COUNT_STEP_SECONDS; float fade=max(0.001,min(COUNT_FADE_SECONDS,COUNT_STEP_SECONDS)); numberBlend=smoothstep(end-fade,end,local); float shortSide=min(uResolution.x,uResolution.y),scale=VIEW_SCALE/zoomMagnification(phase); vec2 p=(vScreen-0.5)*(uResolution/shortSide)*scale; p=rotation(angle)*p;p=rotation(0.16)*p+vec2(0.13,-0.08); vec3 color=filigree(p,scale/shortSide); vec2 frame=vScreen*2.0-1.0; color*=(1.0-0.32*pow(clamp(dot(frame,frame)*0.5,0.0,1.0),1.4))*BRIGHTNESS; float peak=max(color.r,max(color.g,color.b)); color*=(1.0-exp(-peak))/max(peak,0.00001); gl_FragColor=vec4(pow(max(color,vec3(0.0)),vec3(0.95)),1.0); } `; function numberMetrics(ctx,label){ const m=ctx.measureText(label); return {left:m.actualBoundingBoxLeft??0,right:m.actualBoundingBoxRight??m.width,ascent:m.actualBoundingBoxAscent??210,descent:m.actualBoundingBoxDescent??0}; } function makeNumberAtlas(){ numberAtlas=createGraphics(2560,1920);numberAtlas.pixelDensity(1);numberAtlas.background(0); const ctx=numberAtlas.drawingContext; ctx.font='900 280px "Arial Black",Impact,"Helvetica Neue",Arial,sans-serif'; ctx.textAlign="left";ctx.textBaseline="alphabetic";ctx.fillStyle="#fff";ctx.strokeStyle="#fff";ctx.lineJoin="round";ctx.lineWidth=25; let maxWidth=0,maxHeight=0; for(let n=1;n<=25;n++){ const m=numberMetrics(ctx,String(n)); maxWidth=Math.max(maxWidth,m.left+m.right);maxHeight=Math.max(maxHeight,m.ascent+m.descent); } const fit=Math.min(456/(maxWidth+25),328/(maxHeight+25)); for(let n=1;n<=25;n++){ const label=String(n),m=numberMetrics(ctx,label),x=(m.left-m.right)*0.5,y=(m.ascent-m.descent)*0.5; ctx.save();ctx.translate(((n-1)%5)*512+256,Math.floor((n-1)/5)*384+192);ctx.scale(fit,fit); ctx.strokeText(label,x,y);ctx.fillText(label,x,y);ctx.restore(); } } function setup(){ const style=document.createElement("style"); style.textContent="html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000}canvas#mainCanvas{display:block;position:fixed;inset:0;width:100%;height:100%}"; document.head.appendChild(style); pixelDensity(Math.min(window.devicePixelRatio||1,1.25)); createCanvas(windowWidth,windowHeight,WEBGL).id("mainCanvas"); noStroke();frameRate(30);makeNumberAtlas(); neonShader=createShader(vertexSource,fragmentSource);startMilliseconds=performance.now(); } function draw(){ shader(neonShader); neonShader.setUniform("uNumbers",numberAtlas); neonShader.setUniform("uResolution",[drawingContext.drawingBufferWidth,drawingContext.drawingBufferHeight]); neonShader.setUniform("uTime",(performance.now()-startMilliseconds)*0.001); beginShape(TRIANGLE_STRIP);vertex(-1,-1,0);vertex(1,-1,0);vertex(-1,1,0);vertex(1,1,0);endShape(); resetShader(); } function windowResized(){resizeCanvas(windowWidth,windowHeight);}

Psychedelic Neon Counter — Crossfade Cycle