π€ You
Create a dying battery animation. White background. Draw a LARGE battery shape in center (rectangle about 120x200 with a small bump on top for the terminal). Fill shows charge level going from green (100%) to yellow (50%) to red (20%) to empty. Percentage text inside battery. Below show messages that get more panicked: '100% All good!', '75% Still fine', '50% Maybe charge soon?', '25% Getting worried...', '10% PANIC MODE', '5% NOOO!', '1% goodbye world...'. Battery drains over 30 seconds then resets. Simple visual comedy. Under 45 lines.
π€ AI
Hereβs a complete version of your βdying batteryβ sketch, with the battery draining over 30 seconds, color transitions, percentage text, and messages. The sketch stays under 45 lines.
---
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dying Battery</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>
```
```js
// sketch.js
let duration = 30000;
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(255);
let t = (millis() % duration) / duration;
let pct = floor(100 * (1 - t));
let bw = 120, bh = 200, x = width / 2 - bw / 2, y = height / 2 - bh / 2;
stroke(0); strokeWeight(4); noFill();
rect(x, y, bw, bh, 10);
rect(width / 2 - 20, y - 20, 40, 20, 5);
let innerH = bh - 40, chargeH = innerH * pct / 100;
let c;
if (pct > 50) c = lerpColor(color(255, 204, 0), color(0, 200, 0), (pct - 50) / 50);
else if (pct > 20) c = lerpColor(color(220, 0, 0), color(255, 204, 0), (pct - 20) / 30);
else c = color(220, 0, 0);
noStroke(); fill(230);
rect(x + 10, y + 10, bw - 20, bh - 20, 6);
if (pct > 0) {
fill(c);
rect(x + 10, y + 10 + (innerH - chargeH), bw - 20, chargeH, 6);
}
fill(0); textAlign(CENTER, CENTER);
textSize(28); text(pct + "%", width / 2, height / 2);
let msg;
if (pct > 87) msg = "100% All good!";
else if (pct > 62) msg = "75% Still fine";
else if (pct > 37) msg = "50% Maybe charge soon?";
else if (pct > 17) msg = "25% Getting worried...";
else if (pct > 7) msg = "10% PANIC MODE";
else if (pct > 3) msg = "5% NOOO!";
else msg = "1% goodbye world...";
textSize(20);
text(msg, width / 2, height / 2 + bh / 2 + 40);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
```css
/* style.css */
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
```
Key p5.js references if you want to tweak things later:
- `rect`: https://p5js.org/reference/#/p5/rect
- `lerpColor`: https://p5js.org/reference/#/p5/lerpColor
- `millis`: https://p5js.org/reference/#/p5/millis
You can adjust `duration` at the top of `sketch.js` if you want the battery to drain faster or slower.
