👤 You
Create a calming breathing exercise visualization. A soft glowing circle in the center that smoothly expands over 4 seconds (inhale), holds for 2 seconds, contracts over 4 seconds (exhale), holds for 2 seconds, then repeats. Use sin() for smooth easing. Display text instructions: 'Breathe In', 'Hold', 'Breathe Out', 'Hold' that change with the phase. Soft gradient background (dark blue to purple). The circle has a gentle glow effect (draw multiple transparent circles). Add subtle particle dust that floats slowly. Peaceful color palette: soft blue/teal circle on dark background. Keep code under 50 lines.
🤖 AI
Here’s a complete breathing visualization that matches your specs and keeps `sketch.js` under 50 lines.
### sketch.js
```js
let phaseDur=[4000,2000,4000,2000],totalDur,minR,maxR,particles=[],c1,c2; // ms: in, hold, out, hold
function setup(){
createCanvas(windowWidth,windowHeight);textAlign(CENTER,CENTER);
c1=color(5,10,40);c2=color(60,20,90);
totalDur=phaseDur.reduce((a,b)=>a+b);
minR=60;maxR=min(width,height)*0.25;
for(let i=0;i<80;i++)particles.push({x:random(width),y:random(height),s:random(1,3),a:random(40,100),spd:random(0.05,0.3)});
}
function draw(){
setGradient();
let t=millis()%totalDur,phase=0;
while(t>phaseDur[phase]){t-=phaseDur[phase];phase++;}
let r=minR,msg='';
if(phase===0){let u=t/phaseDur[0];r=lerp(minR,maxR,sin(u*HALF_PI));msg='Breathe In';}
else if(phase===1){r=maxR;msg='Hold';}
else if(phase===2){let u=t/phaseDur[2];r=lerp(maxR,minR,sin(u*HALF_PI));msg='Breathe Out';}
else{r=minR;msg='Hold';}
drawParticles();drawGlow(r);
fill(255);noStroke();textSize(32);
text(msg,width/2,height*0.18);
}
function setGradient(){ // soft dark blue → purple
noFill();
for(let y=0;y<height;y++){
let inter=y/height;
stroke(lerpColor(c1,c2,inter));line(0,y,width,y);
}
}
function drawGlow(r){
push();translate(width/2,height/2);noStroke();
for(let i=4;i>0;i--){fill(0,200,255,20*i);circle(0,0,r*2+i*25);}
fill(120,240,255);circle(0,0,r*2);
pop();
}
function drawParticles(){
noStroke();
for(let p of particles){
fill(255,255,255,p.a);circle(p.x,p.y,p.s);
p.y-=p.spd;
if(p.y<-10){p.y=height+10;p.x=random(width);}
}
}
function windowResized(){resizeCanvas(windowWidth,windowHeight);maxR=min(width,height)*0.25;}
```
Key p5.js references used:
- [`createCanvas`](https://p5js.org/reference/#/p5/createCanvas)
- [`millis`](https://p5js.org/reference/#/p5/millis) for timing phases
- [`circle`](https://p5js.org/reference/#/p5/circle) for the glowing orb
- [`lerpColor`](https://p5js.org/reference/#/p5/lerpColor) for the gradient
- [`sin`](https://p5js.org/reference/#/p5/sin) easing via `sin(u*HALF_PI)`
### index.html
Be sure to load p5.js before `sketch.js` (your original file was missing the p5 library, which causes `createCanvas is not defined` errors):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calming Breathing Exercise</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
You can keep your existing CSS; it already works well for a full-screen calm canvas:
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #050a28; /* fallback behind canvas */
}
canvas {
display: block;
}
```
This will give you:
- 12-second breathing cycle: 4s inhale → 2s hold → 4s exhale → 2s hold
- Smooth size changes using `sin()` easing
- Soft blue/teal glowing circle with multi-layer glow
- Dark blue-to-purple gradient background
- Slow, subtle floating dust particles
- Phase text: “Breathe In”, “Hold”, “Breathe Out”, “Hold” at the top center.
