π€ You
Create a clock that visualizes the day as a pie chart. Light background. Large pie chart in center shows how much of the day is gone (dark slice) vs remaining (light slice). The dark slice grows as the day progresses. Show current time in center of pie. Display 'X hours until midnight' below. Add motivational urgency - when past 6pm the remaining slice turns orange, past 9pm turns red. Simple, useful perspective on time passing. Under 50 lines.
π€ AI
Hereβs a complete version of your project with the βday as a pie chartβ clock, under 50 lines in `sketch.js`.
---
### `index.html`
Make sure p5.js is loaded before `sketch.js`:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day Pie Clock</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: #f5f5f5;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
canvas {
display: block;
}
```
---
### `sketch.js` *(32 lines)*
```js
function setup() {
createCanvas(windowWidth, windowHeight);
textAlign(CENTER, CENTER);
}
function draw() {
background(245);
let h = hour(), m = minute(), s = second();
let total = h * 3600 + m * 60 + s;
let frac = total / 86400;
let start = -HALF_PI, ang = frac * TWO_PI;
let d = min(width, height) * 0.6;
let cx = width / 2, cy = height / 2;
let remainingCol = color(235);
if (h >= 21) remainingCol = color(255, 80, 80);
else if (h >= 18) remainingCol = color(255, 160, 60);
noStroke();
fill(remainingCol); arc(cx, cy, d, d, start, start + TWO_PI, PIE);
fill(40); arc(cx, cy, d, d, start, start + ang, PIE);
fill(20);
textSize(d * 0.12);
let hh = nf(h, 2), mm = nf(m, 2), ss = nf(s, 2);
text(hh + ":" + mm + ":" + ss, cx, cy);
textSize(d * 0.06);
let hrsLeft = 24 - (h + m / 60 + s / 3600);
hrsLeft = max(0, hrsLeft);
text("Only " + hrsLeft.toFixed(1) + " hours until midnight", cx, cy + d * 0.35);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
---
**How it works (brief):**
- Uses `hour()`, `minute()`, `second()` from p5.js ([docs](https://p5js.org/reference/#/p5/hour)) to get current time.
- Converts to seconds since midnight, then to a fraction of the 24βhour day.
- Draws a big circle at the center:
- Remaining time slice: light (turns orange after 18:00, red after 21:00).
- Elapsed time slice: dark wedge that grows as the day passes.
- Shows `HH:MM:SS` in the center and
`"Only X hours until midnight"` below, with one decimal place for urgency.
