Colorful Orbits
About This Sketch
Multiple circles orbit around a central point at different speeds and radii. The parametric equations for circular motion create perfectly smooth orbital paths. The transparency effect leaves elegant trails showing the motion history.
This is a classic example of using trigonometric functions to create organic, mesmerizing motion in generative art.
Algorithm
This sketch demonstrates circular motion using trigonometric functions. Each circle follows a perfect circular path around the center point.
**Key Concepts:**
- **Parametric Equations**: Using sine and cosine to create circular motion
- **Angular Velocity**: Each circle has its own rotation speed
- **Layered Transparency**: Low alpha values create beautiful trails
**How it works:**
1. Initialize multiple circles with random orbital radii and speeds
2. For each frame, increment each circle's angle by its speed
3. Calculate position using: `x = centerX + cos(angle) × radius`
4. Calculate position using: `y = centerY + sin(angle) × radius`
5. Draw circles with transparency to create motion blur effect
Pseudocode
SETUP:
FOR i = 0 to 8:
CREATE circle with:
radius = random(50, 150)
angle = random(0, 2π)
speed = random(0.01, 0.05)
size = random(10, 30)
color = random theme color
DRAW (every frame):
CLEAR background with transparency
FOR EACH circle:
angle = angle + speed
x = canvas_center_x + cos(angle) × radius
y = canvas_center_y + sin(angle) × radius
DRAW circle at (x, y) with size and color
Source Code
let sketch = function(p) {
let circles = [];
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
for (let i = 0; i < 8; i++) {
circles.push({
radius: p.random(50, 150),
angle: p.random(p.TWO_PI),
speed: p.random(0.002, 0.01),
size: p.random(10, 30),
colorIndex: p.floor(p.random(3))
});
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg, 25);
for (let circle of circles) {
circle.angle += circle.speed;
let x = p.width/2 + p.cos(circle.angle) * circle.radius;
let y = p.height/2 + p.sin(circle.angle) * circle.radius;
let colorChoice = circle.colorIndex === 0 ? colors.accent1 :
circle.colorIndex === 1 ? colors.accent2 : colors.accent3;
p.fill(...colorChoice, 200);
p.noStroke();
p.circle(x, y, circle.size);
}
};
};