๐ค AI
Hereโs a complete surreal โmelting clockโ sketch that meets your constraints and uses < 60 lines in `sketch.js`.
---
### index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Melting Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- p5.js core library -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- your sketch -->
<script src="sketch.js"></script>
</body>
</html>
```
---
### style.css
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
canvas {
display: block;
}
```
---
### sketch.js (22 lines)
```js
let drops=[];function setup(){createCanvas(windowWidth,windowHeight);textAlign(CENTER,CENTER);noStroke();}
function wob(a){return map(noise(a,frameCount*0.02),0,1,-1.5,1.5);}
function drawBg(){for(let y=0;y<height;y++){let n=y/height;let c=lerpColor(color(255,140,80),color(130,70,180),n);stroke(c);line(0,y,width,y);}noStroke();}
function hand(len,ang,s,col,w){stroke(col);strokeWeight(w);noFill();let x=cos(ang)*len,y=sin(ang)*len;let c1x=cos(ang-0.5)*len*0.3+wob(s)*10,c1y=sin(ang-0.5)*len*0.3+wob(s+10)*10,c2x=cos(ang+0.4)*len*0.7+wob(s+20)*10,c2y=sin(ang+0.4)*len*0.7+wob(s+30)*10;bezier(0,0,c1x,c1y,c2x,c2y,x,y);}
function drawClock(){push();translate(width/2+wob(1)*15,height/2-40+wob(2)*8);scale(1.2,1.1);fill(255,235,210,235);stroke(255,220,190);strokeWeight(2);
beginShape();
vertex(-140,-80);
bezierVertex(0+wob(3)*20,-120,140+wob(4)*10,-90,150,-30);
bezierVertex(170+wob(5)*15,40,40+wob(6)*10,80,10,150);
bezierVertex(-30+wob(7)*10,190,-130+wob(8)*15,120,-150,-40);
endShape(CLOSE);
noStroke();fill(240,220,210);ellipse(0,0,220,150);
fill(80,20,40);for(let i=1;i<=12;i++){let a=TWO_PI*i/12-HALF_PI;let sl=wob(20+i)*18;let r=70+sl;let x=cos(a)*r,y=sin(a)*(60+sl*0.4);push();translate(x,y+max(0,sl));scale(1,1+abs(sl)/30);textSize(20);text(i,0,0);pop();}
let s=second(),m=minute(),h=hour()%12;
let sa=TWO_PI*s/60-HALF_PI,ma=TWO_PI*(m/60+s/3600)-HALF_PI,ha=TWO_PI*((h+m/60)/12)-HALF_PI;
hand(90,sa,40,color(220,80,90),2);hand(80,ma,60,color(130,40,70),4);hand(55,ha,80,color(90,30,60),5);
fill(80,20,40);noStroke();ellipse(0,0,10,10);pop();}
function updateDrops(){let sec=second();if(random()<map(sec,0,59,0.01,0.4)){drops.push({x:width/2+wob(100)*40+random(-20,20),y:height/2+40,v:random(1,3),r:random(5,10)});}
for(let d of drops){d.y+=d.v;d.v+=0.15;d.x+=wob(d.y*0.02)*0.5;if(d.y>height-15){d.y=height-15;d.v*=-0.3;d.x+=random(-1,1);}fill(250,200,210,220);noStroke();ellipse(d.x,d.y,d.r*1.4,d.r);}
drops=drops.filter(d=>d.y<height+40);}
function draw(){drawBg();drawClock();updateDrops();}
function windowResized(){resizeCanvas(windowWidth,windowHeight);}
```
---
Notes (for understanding / tweaking):
- The melted clock body uses `beginShape()` + [`bezierVertex()`](https://p5js.org/reference/#/p5/bezierVertex) to create a droopy, dripping silhouette.
- Noise-based wobble is applied via `wob()` using [`noise()`](https://p5js.org/reference/#/p5/noise) to the clock position, outline, numbers, hands, and drops.
- Time drops spawn in `updateDrops()` with a probability mapped from `second()`โthey fall with gravity and collect near the bottom.
- Current time comes from [`hour()`](https://p5js.org/reference/#/p5/hour), [`minute()`](https://p5js.org/reference/#/p5/minute), and [`second()`](https://p5js.org/reference/#/p5/second), driving the angles of the three wobbly bezier hands.
Apply these files and you should get a Dali-inspired, animated melting clock.
