Coding Challenges

Starting from a sphere floating in mid-air, add a gravity force that accelerates the ball downward each frame. When it hits the floor, apply an energy-absorbing bounce so it eventually comes to rest. Learn Euler integration, velocity accumulation and coefficient of restitution.

• Ball falls with vy += g * dt applied every frame
• Ball bounces off the floor plane with vy *= -restitution
• Ball slows down and settles (restitution < 1)
• Controls: slider for gravity strength (0 → 30 m/s²)

// Three.js r160 is already loaded
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 100);
camera.position.set(0, 2, 8);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// Ball
const ball = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 32, 32),
  new THREE.MeshStandardMaterial({ color: 0x3b82f6 })
);
ball.position.y = 5;
scene.add(ball);

// Floor
scene.add(new THREE.Mesh(
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshStandardMaterial({ color: 0x1e293b })
).rotateX(-Math.PI / 2));

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
scene.add(Object.assign(new THREE.DirectionalLight(0xffffff, 1), { position: { set: (x,y,z) => { } } }));

// TODO: add gravity physics here
let vy = 0;
const GRAVITY = 9.8;        // m/s²
const RESTITUTION = 0.7;    // bounciness
const FLOOR_Y = 0.5;        // ball radius

let last = performance.now();
function animate() {
  requestAnimationFrame(animate);
  const now = performance.now();
  const dt = Math.min((now - last) / 1000, 0.05);
  last = now;

  // ← Your code goes here

  renderer.render(scene, camera);
}
animate();

vy -= GRAVITY * dt;
ball.position.y += vy * dt;

if (ball.position.y < FLOOR_Y) {
  ball.position.y = FLOOR_Y;
  vy = Math.abs(vy) * RESTITUTION;
  if (vy < 0.05) vy = 0;
}

Create a smooth animated sine wave using a THREE.BufferGeometry line. The wave should travel in time (phase shift every frame) and respond to sliders for amplitude, frequency and speed. This is the foundation of many wave-physics visualisations.

• Render a smooth line using THREE.Line with BufferGeometry
• Animate the wave: y = A * sin(f*x - speed*t)
• Update vertex positions each frame (reuse buffer — no re-allocation)
• HUD sliders: Amplitude (0.1 → 3), Frequency (0.5 → 10), Speed (0 → 5)

const NUM_POINTS = 512;
const X_RANGE = 20; // wave spans -10 to +10

// Build geometry once
const positions = new Float32Array(NUM_POINTS * 3);
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const wave = new THREE.Line(
  geometry,
  new THREE.LineBasicMaterial({ color: 0x38bdf8, linewidth: 2 })
);
scene.add(wave);

let t = 0;
function updateWave(amplitude, frequency, speed) {
  // TODO: fill positions[] with sine wave data
  // x goes from -X_RANGE/2 to +X_RANGE/2
  // y = amplitude * Math.sin(frequency * x - speed * t)
  // z = 0
  geometry.attributes.position.needsUpdate = true;
}

function updateWave(amplitude, frequency, speed) {
  for (let i = 0; i < NUM_POINTS; i++) {
    const x = (i / (NUM_POINTS - 1)) * X_RANGE - X_RANGE / 2;
    const y = amplitude * Math.sin(frequency * x - speed * t);
    positions[i * 3]     = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = 0;
  }
  geometry.attributes.position.needsUpdate = true;
}

Implement Craig Reynolds' Boids algorithm: 100 agents that flock together through only three local rules. Each boid looks at neighbours within a perception radius and steers to separate, align and cohere. Emergent flocking behaviour appears with no global coordination.

• Separation: steer away from boids that are too close
• Alignment: steer toward the average heading of nearby boids
• Cohesion: steer toward the average position of nearby boids
• Wrap-around boundaries (boids teleport across edges)
• HUD sliders for perception radius and the 3 rule weights

function applyBoidRules(boids, wSep, wAli, wCoh, perception, sepDist) {
  const steer = new THREE.Vector3();
  boids.forEach((b, i) => {
    const sep = new THREE.Vector3();
    const ali = new THREE.Vector3();
    const coh = new THREE.Vector3();
    let nAli = 0, nCoh = 0;
    boids.forEach((o, j) => {
      if (i === j) return;
      const d = b.pos.distanceTo(o.pos);
      if (d < sepDist) {
        sep.add(b.pos.clone().sub(o.pos).divideScalar(d * d));
      }
      if (d < perception) {
        ali.add(o.vel); nAli++;
        coh.add(o.pos); nCoh++;
      }
    });
    if (nAli) ali.divideScalar(nAli).sub(b.vel).multiplyScalar(wAli);
    if (nCoh) coh.divideScalar(nCoh).sub(b.pos).multiplyScalar(wCoh);
    sep.multiplyScalar(wSep);
    b.vel.add(sep).add(ali).add(coh);
    if (b.vel.length() > MAX_SPEED) b.vel.setLength(MAX_SPEED);
  });
}

The Gerstner wave model moves vertices both vertically and horizontally, producing the iconic peaked crests of ocean waves. Implement it as a GLSL vertex shader using Three.js ShaderMaterial. Superimpose 4 wave trains with different directions and frequencies for a realistic sea surface.

• Vertex shader computes Gerstner displacement for each grid vertex
• Superimpose at least 4 wave trains (vary direction, frequency, amplitude)
• Fragment shader uses normals for Phong/Blinn lighting with a sky reflection
• HUD: wind speed slider that scales wave amplitudes & steepness

// GLSL Vertex Shader (simplified single wave)
vec3 gerstner(vec3 pos, vec2 D, float amp, float freq, float steep, float t) {
  float phase = freq * dot(D, pos.xz) - freq * 1.5 * t;
  return vec3(
    steep * amp * D.x * cos(phase),
    amp * sin(phase),
    steep * amp * D.y * cos(phase)
  );
}

// In main():
vec3 displaced = position;
for (int i = 0; i < 4; i++) {
  vec4 wp = waveParams[i]; // x=amp, y=freq, z=dirX, w=dirZ
  displaced += gerstner(position, vec2(wp.z, wp.w), wp.x, wp.y, 0.5, time);
}

Smoothed Particle Hydrodynamics (SPH) treats fluid as a cloud of particles that exert pressure and viscosity forces on each other. Implement the Müller et al. SPH formulation with 200 particles in 2D, including density estimation, pressure and viscosity forces, and wall boundary conditions.

• Density estimation via poly6 kernel: ρᵢ = Σ m · W_poly6(rᵢⱼ, h)
• Pressure force via spiky gradient kernel
• Viscosity force via Laplacian kernel
• Box boundary with damping (particles bounce off walls)
• Render with instanced spheres coloured by speed

Simulate N gravitational bodies using the Leapfrog / Velocity-Verlet integrator, which conserves energy far better than Euler integration. Add a softening parameter to prevent singularities at close approach. Visualise orbital trails and measure the total energy drift over time.

• Compute gravitational acceleration: a = G·m/|r|² (with softening ε)
• Leapfrog integration: kick–drift–kick scheme
• Trail rendering using THREE.Line circular buffers
• HUD: total kinetic + potential energy displayed in real time
• Presets: Solar system, binary star, figure-eight orbit