💻 Open Codebase
Source Code
Every line of code from every Code Clash — documented, archived, and open for you to study and fork.
Clash #001
Physics Simulation
Newton's Cradle
Four models build a realistic Newton's Cradle with Matter.js — metallic sphere rendering, elastic collision physics, and interactive controls.
📄 HTML/JS
ChatGPT
Claude
Gemini
DeepSeek
// Matter.js — Newton's Cradle
const { Engine, Bodies, Constraint } = Matter;
const engine = Engine.create({ gravity: { y: 1 } });
const bob = Bodies.circle(x, y, BALL_RADIUS, {
restitution: 1, friction: 0
const { Engine, Bodies, Constraint } = Matter;
const engine = Engine.create({ gravity: { y: 1 } });
const bob = Bodies.circle(x, y, BALL_RADIUS, {
restitution: 1, friction: 0
4 Solutions
View Code →
Clash #002
Mathematical Art
Phyllotaxis Spiral
Mesmerizing golden-angle spirals — the pattern found in sunflowers and pinecones. Real-time animated mathematical beauty on Canvas.
📄 HTML/JS
ChatGPT
Claude
DeepSeek
Gemini
// Phyllotaxis — Golden Angle Spiral
const goldenAngle = 137.5 * Math.PI / 180;
const radius = c * Math.sqrt(n) * 18;
const x = cx + Math.cos(angle) * radius;
const goldenAngle = 137.5 * Math.PI / 180;
const radius = c * Math.sqrt(n) * 18;
const x = cx + Math.cos(angle) * radius;
4 Solutions
View Code →
Clash #003
Math Visualization
Pi Constellation
The digits of Pi become a constellation map — each digit determines the direction of a neon line segment, creating glowing pathways that wrap around the screen.
📄 HTML/JS
ChatGPT
Claude
Gemini
Kimi
// Pi Constellation — digit walker
const digit = pi.charCodeAt(i) - 48;
const angle = digit * Math.PI * 2 / 10;
const nx = x + Math.cos(angle) * STEP;
const digit = pi.charCodeAt(i) - 48;
const angle = digit * Math.PI * 2 / 10;
const nx = x + Math.cos(angle) * STEP;
4 Solutions
View Code →
Clash #004
Wave Physics
Harmonic Spring Wave
A seamless 10-second loop of harmonic spring physics — masses connected by springs oscillating between sync and chaos. Pure mathematical motion art.
📄 HTML/JS
ChatGPT
DeepSeek
Gemini
Kimi
// Harmonic Spring — seamless 10s loop
function drawSpring(x1, y1, x2, y2, coils, amp) {
const wave = Math.sin(t * Math.PI * coils * 2);
const bend = amp * wave;
function drawSpring(x1, y1, x2, y2, coils, amp) {
const wave = Math.sin(t * Math.PI * coils * 2);
const bend = amp * wave;
4 Solutions
View Code →
Clash #005
Creative Animation
Beating Heart Animation
A 10-second seamless beating heart loop — anatomical detail with aorta, vessels, inner pulse glow, ECG ambient waves, and thump squash dynamics.
📄 HTML/JS
ChatGPT
Claude
DeepSeek
Gemini
// Beating Heart — p5.js seamless loop
const thump = pow(max(0, beatWave), 8.5);
const bodyScale = 1 + breath + 0.055 * thump;
drawHeartSilhouette(0, 0, bodyScale);
const thump = pow(max(0, beatWave), 8.5);
const bodyScale = 1 + breath + 0.055 * thump;
drawHeartSilhouette(0, 0, bodyScale);
4 Solutions
View Code →