π€ You
Create calming ocean waves. Sky blue gradient at top, darker blue at bottom. Draw 3-4 overlapping sine waves at bottom third of screen using bezier or sin curves. Waves move slowly left to right, each at slightly different speeds. Colors: light blue, medium blue, dark blue layered. Very peaceful, slow animation. No text needed. Simple and calming. Under 30 lines.
π€ AI
Hereβs a compact, calming ocean scene with slow, layered waves, all under 30 lines.
### sketch.js
```js
function setup(){createCanvas(windowWidth,windowHeight);}
function draw(){
let g=drawingContext.createLinearGradient(0,0,0,height);
g.addColorStop(0,'#87cefa');g.addColorStop(1,'#004f7a');
drawingContext.fillStyle=g;drawingContext.fillRect(0,0,width,height);
noStroke();let t=frameCount*0.02;
wave(height*0.7,20,color('#a7d8ff'),0.6,t);
wave(height*0.73,25,color('#64b5f6'),0.4,t);
wave(height*0.76,30,color('#1e88e5'),0.25,t);
}
function wave(yBase,amp,col,s,t){
fill(col);beginShape();
for(let x=0;x<=width+20;x+=20){
let a=0.01,y=yBase+sin(x*a-t*s)*amp;
vertex(x,y);
}
vertex(width,height);vertex(0,height);endShape(CLOSE);
}
function windowResized(){resizeCanvas(windowWidth,windowHeight);}
```
Key APIs used: [`beginShape`/`vertex`](https://p5js.org/reference/#/p5/beginShape), [`windowResized`](https://p5js.org/reference/#/p5/windowResized), and the canvas [`drawingContext`](https://p5js.org/reference/#/p5/drawingContext) for the vertical gradient.
---
### 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>Calming Ocean Waves</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;
}
canvas {
display: block;
}
```
Apply these files and youβll get a slow, peaceful ocean with 3 overlapping sine-wave layers near the bottom third of the screen.
