๐ค You
Create a simple rotating rainbow color wheel. Draw a circle divided into 6 colored wedges (red, orange, yellow, green, blue, purple). The wheel should rotate slowly and continuously. Use basic p5.js arc() function. Center the wheel on the canvas. Black background.
๐ค AI
Update your files as follows.
---
```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>Rotating Rainbow Wheel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Load p5.js first -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- Then your sketch -->
<script src="sketch.js"></script>
</body>
</html>
```
```css
/* style.css */
body {
margin: 0;
padding: 0;
overflow: hidden;
background: black; /* ensure page background is black too */
}
canvas {
display: block;
}
```
```js
// sketch.js
// Rotating rainbow color wheel using p5.js arc()
// arc reference: https://p5js.org/reference/#/p5/arc
let rotationAngle = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(RADIANS); // default, but set explicitly for clarity
noStroke();
}
function draw() {
background(0); // black background
// Center of canvas
translate(width / 2, height / 2);
// Slow continuous rotation
rotate(rotationAngle);
// Wheel size: 60% of the smaller canvas dimension
const wheelDiameter = min(width, height) * 0.6;
// 6 wedges: red, orange, yellow, green, blue, purple
const colors = [
color(255, 0, 0), // red
color(255, 127, 0), // orange
color(255, 255, 0), // yellow
color(0, 255, 0), // green
color(0, 0, 255), // blue
color(153, 0, 255) // purple
];
const wedgeCount = colors.length;
const step = TWO_PI / wedgeCount;
for (let i = 0; i < wedgeCount; i++) {
fill(colors[i]);
// Draw each wedge as a pie slice from center
arc(
0, 0, // centered at origin (already translated)
wheelDiameter, wheelDiameter,
i * step, (i + 1) * step,
PIE // use PIE mode for wedge
);
}
// Increment rotation angle for next frame
rotationAngle += 0.01; // smaller = slower
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
