👤 You
Create a zen garden sand raking experience. Tan/beige sandy background texture using noise. When user drags mouse, draw parallel curved lines that follow the mouse path like rake marks in sand. The lines should be slightly darker grooves in the sand. Use pmouseX/pmouseY to track movement. Lines persist and layer. Add subtle shadows to the grooves. Include 3-4 small dark gray circles as 'stones' placed randomly. Click to place a new stone. Press 'R' to reset/smooth the sand. Peaceful, minimal aesthetic. Keep code under 50 lines.
🤖 AI
Here’s an updated, self‑contained zen sand garden with all the requested interactions and under 50 lines in `sketch.js`.
---
### sketch.js
```js
let stones=[];
function setup(){createCanvas(windowWidth,windowHeight);noiseDetail(2,0.6);strokeCap(ROUND);makeSand();initStones();}
function draw(){}
function makeSand(){background(230,220,190);strokeWeight(2);for(let i=0;i<40000;i++){let x=random(width),y=random(height),n=noise(x*0.02,y*0.02);stroke(220+n*30,210+n*25,180+n*20,80);point(x,y);}noStroke();}
function initStones(){stones=[];for(let i=0;i<int(random(3,5));i++)stones.push({x:random(60,width-60),y:random(60,height-60),r:random(18,28)});drawStones();}
function drawStones(){noStroke();fill(70);for(let s of stones)circle(s.x,s.y,s.r);}
function mouseDragged(){let dx=mouseX-pmouseX,dy=mouseY-pmouseY;let d=sqrt(dx*dx+dy*dy);if(d<1)return;let nx=-dy/d,ny=dx/d;strokeWeight(2);for(let i=-2;i<=2;i++){let off=i*5;stroke(180,160,130,140);line(pmouseX+nx*off,pmouseY+ny*off,mouseX+nx*off,mouseY+ny*off);stroke(120,100,80,70);line(pmouseX+nx*(off+1),pmouseY+ny*(off+1),mouseX+nx*(off+1),mouseY+ny*(off+1));}drawStones();}
function mousePressed(){stones.push({x:mouseX,y:mouseY,r:random(18,28)});drawStones();}
function keyPressed(){if(key==='r'||key==='R'){makeSand();initStones();}}
function windowResized(){resizeCanvas(windowWidth,windowHeight);makeSand();initStones();}
```
Notes:
- Rake lines follow the path using `mouseX, mouseY, pmouseX, pmouseY` ([ref](https://p5js.org/reference/#/p5/pmouseX)) and a perpendicular normal for parallel grooves.
- Subtle shadows are created by a second, slightly offset darker line.
- Sand texture is a tan background with noise‑modulated speckles.
- Stones are dark gray circles; 3–4 are placed randomly at start, more with clicks, and everything resets on `R`.
---
### 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>Zen Sand Garden</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```
---
### style.css
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #e6ddc5;
}
canvas {
display: block;
cursor: crosshair;
}
```
You can now drag to rake, click to add stones, and press `R` to smooth and regenerate the sand and stones.
