π€ You
Create an emoji rain animation. Random emojis fall from the top of the screen like raindrops. Use text() to draw emojis. Each emoji has gravity and bounces once when hitting the bottom. Use an array of common emojis like heart, star, sun, moon, fire, rainbow, etc. Emojis spawn at random x positions at the top. About 2-3 new emojis spawn per second. Emojis fade out after bouncing. Click to spawn a burst of 10 emojis at mouse position. Light blue sky gradient background. Fun and colorful. Keep code under 50 lines.
π€ AI
Hereβs a compact emoji-rain sketch that fits in under 50 lines.
### sketch.js
```js
let emojis=[],chars=['β€οΈ','β','βοΈ','π','π₯','π','π§','π','πΈ','π'],g=0.3,c1,c2;
function setup(){
createCanvas(windowWidth,windowHeight);
textAlign(CENTER,CENTER);
c1=color(135,206,250);c2=color(180,228,255);
}
function spawn(x,y){
emojis.push({x,y,vy:random(1,3),vx:random(-0.5,0.5),s:random(32,56),ch:random(chars),b:false,a:255});
}
function draw(){
for(let y=0;y<height;y++)stroke(lerpColor(c1,c2,y/height)),line(0,y,width,y);
if(random()<0.04)spawn(random(width),-20);
noStroke();
for(let i=emojis.length-1;i>=0;i--){
let e=emojis[i];
e.vy+=g;e.x+=e.vx;e.y+=e.vy;
if(e.y+e.s/2>height){
e.y=height-e.s/2;
if(!e.b){e.vy*=-0.6;e.b=true;}else e.vy=0;
}
if(e.b)e.a-=4;
if(e.a<=0){emojis.splice(i,1);continue;}
fill(0,0,0,e.a);textSize(e.s);text(e.ch,e.x,e.y);
}
}
function mousePressed(){for(let i=0;i<10;i++)spawn(mouseX,mouseY);}
function windowResized(){resizeCanvas(windowWidth,windowHeight);}
```
- Uses `text()` to draw emojis: https://p5js.org/reference/#/p5/text
- Spawns ~2β3 emojis/sec via `if (random() < 0.04)` (at 60 FPS): https://p5js.org/reference/#/p5/random
- Light blue gradient via `lerpColor`: https://p5js.org/reference/#/p5/lerpColor
### 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>Emoji Rain</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 file as-is.)
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
```
Click anywhere to spawn a burst of 10 emojis at the mouse position.
