π€ You
Create a simple stopwatch. White background. Large digital-style numbers in center showing MM:SS.mm (minutes, seconds, milliseconds). Numbers should be BLACK and LARGE (at least 48px font). Below the time show two buttons as rectangles: green 'START' and red 'STOP'. Click START to begin counting up. Click STOP to pause. Show 'Click START to begin' message initially. Timer updates in real-time showing elapsed time. Simple, clean, useful utility. Under 40 lines.
π€ AI
Hereβs a self-contained stopwatch sketch that meets your requirements and keeps `sketch.js` under 40 lines.
### sketch.js
```js
let running = false, startTime = 0, elapsed = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
textAlign(CENTER, CENTER);
textFont('monospace');
}
function draw() {
background(255);
let t = running ? millis() - startTime : elapsed;
let m=floor(t/60000),s=floor(t/1000)%60,cs=floor((t%1000)/10);
textSize(72);
fill(0);
text(nf(m,2)+":"+nf(s,2)+"."+nf(cs,2), width/2, height/2-40);
let bw=140,bh=50,y=height/2+40,off=90;
rectMode(CENTER);
fill(0,200,0);
rect(width/2-off,y,bw,bh,8);
fill(255);
textSize(20);
text("START",width/2-off,y);
fill(200,0,0);
rect(width/2+off,y,bw,bh,8);
fill(255);
text("STOP",width/2+off,y);
if(!running&&elapsed===0){
fill(0);
textSize(18);
text("Click START to begin",width/2,y+60);
}
}
function mousePressed() {
let bw=140,bh=50,y=height/2+40,off=90;
if(!running&&mouseX>width/2-off-bw/2&&mouseX<width/2-off+bw/2&&
mouseY>y-bh/2&&mouseY<y+bh/2){running=true;startTime=millis()-elapsed;}
if(running&&mouseX>width/2+off-bw/2&&mouseX<width/2+off+bw/2&&
mouseY>y-bh/2&&mouseY<y+bh/2){running=false;elapsed=millis()-startTime;}
}
function windowResized(){resizeCanvas(windowWidth,windowHeight);}
```
### 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>p5.js Stopwatch</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: #ffffff;
}
canvas {
display: block;
}
```
Behavior:
- White background.
- Large black digital-style numbers (monospace font) in `MM:SS.mm` format.
- Green START and red STOP rectangular buttons below the time.
- Click START to begin/resume, STOP to pause.
- βClick START to beginβ message shows initially until first start.
