See what you can create with loops, trigonometry, and animations!
Each example below demonstrates a different algorithmic pattern. Click Play to see the animation in action, Stop to pause it, and Reset to start over.
Try modifying the code concepts and functions listed below each example to learn how changes affect the visual output!
Nested loops with time-based color animation
function animateExample1() {
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
let angle = animations[1]?.angle || 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const x = 200 + (i - 1) * 80;
const y = 150 + (j - 1) * 80;
const hue = (angle + i * 30 + j * 30) % 360;
drawSquare(ctx, x - 20, y - 20, 40, `hsl(${hue}, 100%, 50%)`);
}
}
angle += 2;
if (animations[1]) animations[1].angle = angle;
if (animations[1]?.running) animations[1].id = requestAnimationFrame(animateExample1);
}Trigonometric functions in motion
function animateExample2() {
const canvas = document.getElementById('canvas2');
const ctx = canvas.getContext('2d');
let time = animations[2]?.time || 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 30; i++) {
const baseAngle = i * 0.4;
const orbitAngle = time * 0.01;
const r = 50 + i * 4;
const x = 200 + (r * Math.cos(baseAngle + orbitAngle));
const y = 150 + (r * Math.sin(baseAngle + orbitAngle));
const size = 2 + (i * 0.3);
drawCircle(ctx, x, y, size, randomColor());
}
time++;
if (animations[2]) animations[2].time = time;
if (animations[2]?.running) animations[2].id = requestAnimationFrame(animateExample2);
}Sine wave animation with color gradients
function animateExample3() {
const canvas = document.getElementById('canvas3');
const ctx = canvas.getContext('2d');
let pulse = animations[3]?.pulse || 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const x = 200 + i * 80;
const y = 150 + j * 80;
const size = 20 + Math.sin(pulse + i + j) * 10;
const hue = (i + j) * 60;
drawHexagon(ctx, x, y, size, `hsl(${hue}, 70%, 50%)`);
}
}
pulse += 0.05;
if (animations[3]) animations[3].pulse = pulse;
if (animations[3]?.running) animations[3].id = requestAnimationFrame(animateExample3);
}Circular motion with shape variety
function animateExample4() {
const canvas = document.getElementById('canvas4');
const ctx = canvas.getContext('2d');
let t = animations[4]?.t || 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 8; i++) {
const angle = (i / 8) * Math.PI * 2;
const r = 70 + Math.sin(t + i) * 30;
const x = 200 + r * Math.cos(angle);
const y = 150 + r * Math.sin(angle);
const hue = i * 45;
drawStar(ctx, x, y, 5, 15, 8, `hsl(${hue}, 100%, 50%)`);
}
t += 0.05;
if (animations[4]) animations[4].t = t;
if (animations[4]?.running) animations[4].id = requestAnimationFrame(animateExample4);
}If/else conditions in animation
function animateExample5() {
const canvas = document.getElementById('canvas5');
const ctx = canvas.getContext('2d');
let frame = animations[5]?.frame || 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 20; i++) {
const angle = frame * 0.05 + i * 0.3;
const x = 200 + Math.cos(angle) * (100 - i * 2);
const y = 150 + Math.sin(angle) * (100 - i * 2);
if (i % 3 === 0) {
drawCircle(ctx, x, y, 6, 'red');
} else if (i % 3 === 1) {
drawSquare(ctx, x - 4, y - 4, 8, 'blue');
} else {
drawStar(ctx, x, y, 4, 8, 4, 'yellow');
}
}
frame++;
if (frame > 200) frame = 0;
if (animations[5]) animations[5].frame = frame;
if (animations[5]?.running) animations[5].id = requestAnimationFrame(animateExample5);
}