AI Reaction Time Test - Speed Challenge Game Test your reflexes! Wait for the circle to turn green,

Here’s a complete reaction-time game implementation with clean UI, stats, and a bar chart.

---

### sketch.js
```js
// Reaction Time Test
// p5.js 1.11.3

let state = 'idle'; // 'idle' | 'waiting' | 'green' | 'too-early' | 'show-result'

let targetChangeTime = 0; // when red will turn green (in millis)
let greenStartTime = null; // when green actually appeared
let lastReactionTime = null; // last valid reaction time
let bestTime = null; // best (lowest) reaction time
let attempts = []; // all valid reaction times (we'll use last 10 for average & chart)

let tooEarlyStart = 0; // when "Too Early!" started showing
let resultStart = 0; // when result started showing

function setup() {
// Full-window canvas: https://p5js.org/reference/#/p5/createCanvas
createCanvas(windowWidth, windowHeight);
textFont('sans-serif');
}

function draw() {
background(18); // dark modern background

const centerX = width / 2;
const centerY = height * 0.4;
const circleDiameter = min(width, height) * 0.35;

// Determine circle color based on state
let circleCol;
if (state === 'idle') {
circleCol = color(70, 80, 90);
} else if (state === 'waiting') {
circleCol = color(230, 76, 101); // red
} else if (state === 'green' || state === 'show-result') {
circleCol = color(46, 204, 113); // green
} else if (state === 'too-early') {
circleCol = color(241, 196, 15); // yellow
}

// Subtle shadow behind circle
noStroke();
fill(0, 0, 0, 60);
circle(centerX + circleDiameter * 0.02, centerY + circleDiameter * 0.04, circleDiameter * 1.02);

// Main circle
fill(circleCol);
circle(centerX, centerY, circleDiameter); // https://p5js.org/reference/#/p5/circle

// Handle timed state transitions
handleStateTimers();

// Text inside circle
drawCircleLabel(centerX, centerY, circleDiameter);

// Title & instructions at top
drawHeader();

// Stats below circle
const statsY = centerY + circleDiameter / 2 + 30;
drawStats(statsY);

// Bar chart of last 10 attempts at bottom
const chartMargin = 60;
const chartTop = statsY + 40;
const chartHeight = height - chartTop - chartMargin;

if (chartHeight > 80) {
drawChart(chartMargin, chartTop, width - chartMargin * 2, chartHeight);
}
}

// Handle automatic transitions between states based on time
function handleStateTimers() {
const now = millis(); // https://p5js.org/reference/#/p5/millis

if (state === 'waiting' && now >= targetChangeTime) {
// Time to turn green
state = 'green';
greenStartTime = now;
}

if (state === 'too-early' && now - tooEarlyStart > 1500) {
// After showing "Too Early!" for 1.5s, start a new trial
startWaitingState();
}

if (state === 'show-result' && now - resultStart > 1500) {
// After showing result for 1.5s, start a new trial
startWaitingState();
}
}

// Draw label inside the circle depending on state
function drawCircleLabel(cx, cy, d) {
fill(255);
noStroke();
textAlign(CENTER, CENTER);
textSize(d * 0.14);

let label = '';

if (state === 'idle') {
label = 'Click to start';
} else if (state === 'waiting') {
label = 'Wait for GREEN';
} else if (state === 'green') {
label = 'CLICK!';
} else if (state === 'too-early') {
label = 'Too early!';
} else if (state === 'show-result') {
// Show measured reaction time in the circle
if (lastReactionTime != null) {
label = nf(floor(lastReactionTime), 1) + ' ms';
}
}

text(label, cx, cy);
}

// Title & instruction text
function drawHeader() {
fill(240);
textAlign(CENTER, TOP);
textSize(26);
text('AI Reaction Time Test', width / 2, 24);

textSize(14);
fill(180);
let instruction =
'Wait until the circle turns green, then click as fast as you can.\n' +
'Clicking while red triggers a "Too Early!" penalty.';
text(instruction, width / 2, 56);
}

// Stats: current, best, and avg of last 10 attempts
function drawStats(y) {
const avg10 = getAverageLastN(10);

const currentStr =
lastReactionTime != null ? floor(lastReactionTime) + ' ms' : '—';
const bestStr =
bestTime != null ? floor(bestTime) + ' ms' : '—';
const avgStr =
avg10 != null ? floor(avg10) + ' ms' : '—';

textAlign(CENTER, TOP);
textSize(16);
fill(220);
text(
`Current: ${currentStr} | Best: ${bestStr} | Avg (last 10): ${avgStr}`,
width / 2,
y
);
}

// Draw bar chart of last 10 reaction times
function drawChart(x, y, w, h) {
const data = attempts.slice(-10);
if (data.length === 0) return;

// Determine vertical scale
const maxInData = max(data); // https://p5js.org/reference/#/p5/max
const maxTime = max(maxInData, 300); // at least 300ms for stability
const minInData = min(data); // used to highlight best

// Chart frame
stroke(70);
noFill();
rect(x, y, w, h, 8);

const barCount = data.length;
const slotWidth = w / barCount;
const barWidth = slotWidth * 0.6;
const gap = slotWidth * 0.4;

for (let i = 0; i < barCount; i++) {
const t = data[i];
const barHeight = map(t, 0, maxTime, 0, h); // https://p5js.org/reference/#/p5/map
const bx = x + i * slotWidth + gap / 2;
const by = y + h - barHeight;

noStroke();
// Highlight the best (lowest) time in green, others blue
if (t === minInData) {
fill(46, 204, 113);
} else {
fill(52, 152, 219);
}

rect(bx, by, barWidth, barHeight, 4);

// Numeric label above each bar
fill(220);
textAlign(CENTER, BOTTOM);
textSize(12);
text(floor(t), bx + barWidth / 2, by - 4);
}

// Axis label
fill(180);
textAlign(LEFT, BOTTOM);
textSize(14);
text('Last 10 reaction times (ms)', x, y - 8);
}

// Compute average of last N reaction times
function getAverageLastN(n) {
const data = attempts.slice(-n);
if (data.length === 0) return null;
const sum = data.reduce((acc, v) => acc + v, 0);
return sum / data.length;
}

// Start a new waiting (red) period with random delay 1–5 seconds
function startWaitingState() {
state = 'waiting';
const delayMs = random(1000, 5000); // https://p5js.org/reference/#/p5/random
targetChangeTime = millis() + delayMs;
greenStartTime = null;
}

// Mouse / touch input
// https://p5js.org/reference/#/p5/mousePressed
function mousePressed() {
if (state === 'idle') {
// First click starts the test
startWaitingState();
} else if (state === 'waiting') {
// Clicked too early during red
state = 'too-early';
tooEarlyStart = millis();
} else if (state === 'green') {
// Valid reaction
const rt = millis() - greenStartTime;
lastReactionTime = rt;

attempts.push(rt);
if (attempts.length > 100) {
attempts.shift(); // avoid unbounded growth
}

if (bestTime === null || rt < bestTime) {
bestTime = rt;
}

state = 'show-result';
resultStart = millis();
}

// Ignore clicks in 'too-early' and 'show-result' states;
// they auto-advance after a short delay.
}

// Keep canvas full-window and responsive
// https://p5js.org/reference/#/p5/windowResized
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>AI Reaction Time Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- p5.js core library (v1.11.3) -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>

<!-- Your sketch -->
<script src="sketch.js"></script>
</body>
</html>
```

---

### style.css
```css
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
background: radial-gradient(circle at top, #202733 0, #0d1016 55%, #050608 100%);
color: #f5f5f5;
}

/* p5 canvas fills the window */
canvas {
display: block;
}
```

You can now hit “Apply”, then click anywhere to start.
Flow recap:
- Circle is gray: “Click to start”.
- Circle turns red: wait.
- After a random 1–5 s, it turns green.
- Click as soon as it’s green.
- Clicking red shows “Too early!” and restarts after a short penalty.
- Stats and the last-10 bar chart update automatically.