From 1970fd99bc617608c067515b91ced98bea628afe Mon Sep 17 00:00:00 2001 From: zzstoatzz Date: Sun, 20 Sep 2026 20:15:11 -0500 Subject: [PATCH] site: temper glass detail and protect foreground contrast --- deploy/site/ambient.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/deploy/site/ambient.js b/deploy/site/ambient.js index 23931ee..f8640e9 100644 --- a/deploy/site/ambient.js +++ b/deploy/site/ambient.js @@ -88,7 +88,7 @@ const x=a[0]+u*(b[0]-a[0])+v*(c[0]-a[0]); const y=a[1]+u*(b[1]-a[1])+v*(c[1]-a[1]); const theta=angle+Math.sin(x/190+y/260)*.35+(random()-.5)*.22; - const length=.9+random()**3*6, breadth=.25+random()*.7; + const length=1.1+random()**3*5.4, breadth=.12+random()*.36; return {x,y,dx:Math.cos(theta)*length,dy:Math.sin(theta)*length, nx:-Math.sin(theta)*breadth,ny:Math.cos(theta)*breadth}; }); @@ -109,7 +109,7 @@ let width = 0, height = 0, frame = 0, last = 0, entropy = 0; let socket, retry; const material = new WeakMap(); - const pigments = ['65,163,133','74,163,192','131,113,185','184,158,101']; + const pigments = ['72,117,101','76,112,142','111,96,135','141,120,79','139,74,82']; function texture(shard) { if (material.has(shard)) return material.get(shard); const points = shard.points.map(([x,y]) => [x*width,y*height]); @@ -117,9 +117,10 @@ const faces = new Path2D(), edges = new Path2D(), shadows = new Path2D(); const flecks=grainFrom(current.seed+BigInt(Math.round(shard.tint*1e9)),points,shard.tint); for (const {x,y,dx,dy,nx,ny} of flecks) { - faces.moveTo(x-dx*.5,y-dy*.5);faces.lineTo(x+nx,y+ny);faces.lineTo(x+dx*.5,y+dy*.5);faces.closePath(); - shadows.moveTo(x-dx*.5,y-dy*.5);shadows.lineTo(x-nx,y-ny);shadows.lineTo(x+dx*.5,y+dy*.5);shadows.closePath(); - edges.moveTo(x-dx*.5,y-dy*.5);edges.lineTo(x+dx*.5,y+dy*.5); + faces.moveTo(x-dx*.5,y-dy*.5);faces.lineTo(x-dx*.12+nx,y-dy*.12+ny);faces.lineTo(x+dx*.5,y+dy*.5);faces.closePath(); + shadows.moveTo(x-dx*.5,y-dy*.5);shadows.lineTo(x+dx*.18-nx*.6,y+dy*.18-ny*.6);shadows.lineTo(x+dx*.5,y+dy*.5);shadows.closePath(); + edges.moveTo(x-dx*.5,y-dy*.5);edges.lineTo(x-dx*.12+nx*.35,y-dy*.12+ny*.35); + edges.moveTo(x+dx*.08,y+dy*.08);edges.lineTo(x+dx*.5,y+dy*.5); } const result={faces,edges,shadows,cx:(a[0]+b[0]+c[0])/3,cy:(a[1]+b[1]+c[1])/3}; material.set(shard,result);return result; @@ -148,17 +149,18 @@ const light=lightAt(shard,t); const bend=Math.sin(surface.cx/340-phase*5)*65+Math.sin(surface.cx/150-phase*2)*18; const stream=.5+.5*Math.sin((surface.cy-bend)/130+phase*3); - const illumination=.10+stream**5*(.12+light*.55); - const pigment= pigments[shard.tint<.38?0:shard.tint<.72?1:shard.tint<.93?2:3]; + const margin=Math.min(1,Math.abs(surface.cx-width/2)/(width*.46)); + const illumination=(.085+stream**5*(.10+light*.46))*(.65+.35*margin**1.4); + const pigment= pigments[shard.tint<.35?0:shard.tint<.70?1:shard.tint<.90?2:shard.tint<.97?3:4]; const [a,b,c]=shard.points.map(([x,y])=>[x*width,y*height]); context.beginPath();context.moveTo(...a);context.lineTo(...b);context.lineTo(...c);context.closePath(); context.fillStyle=`rgba(${pigment},${illumination*.022})`;context.fill(); context.save();context.clip(); - context.fillStyle=`rgba(${pigment},${illumination*.70})`;context.fill(surface.faces); - context.fillStyle=`rgba(${pigment},${illumination*.18})`;context.fill(surface.shadows); + context.fillStyle=`rgba(${pigment},${illumination*.40})`;context.fill(surface.faces); + context.fillStyle=`rgba(${pigment},${illumination*.12})`;context.fill(surface.shadows); context.strokeStyle=`rgba(${pigment},${illumination})`; - context.lineWidth=.30;context.stroke(surface.edges); - context.strokeStyle=`rgba(170,205,212,${illumination*light*.12})`; + context.lineWidth=.26;context.stroke(surface.edges); + context.strokeStyle=`rgba(170,205,212,${illumination*light*.09})`; context.lineWidth=.18;context.stroke(surface.edges); context.restore(); context.beginPath();context.moveTo(...a);context.lineTo(...b); -- 2.51.2