Wyzwania Programistyczne

Zaczynając od kuli unoszącej się w powietrzu, dodaj siłę grawitacji, która przyspiesza piłkę w dół w każdej klatce. Gdy uderzy w podłogę, zastosuj odbicie pochłaniające energię, aby ostatecznie się zatrzymała. Poznaj całkowanie Eulera, akumulację prędkości i współczynnik restytucji.

• Piłka spada z zastosowanym vy += g * dt w każdej klatce
• Piłka odbija się od podłogi z vy *= -restitution
• Piłka zwalnia i zatrzymuje się (restitution < 1)
• Sterowanie: suwak siły grawitacji (0 → 30 m/s²)

// Three.js r160 jest już wczytane
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);

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

// Podłoga
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: dodaj tutaj fizykę grawitacji
let vy = 0;
const GRAVITY = 9.8;        // m/s²
const RESTITUTION = 0.7;    // odbojność
const FLOOR_Y = 0.5;        // promień piłki

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

  // ← Twój kod tutaj

  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;
}

Stwórz płynną animowaną falę sinusoidalną za pomocą linii THREE.BufferGeometry. Fala powinna „podróżować” w czasie (przesunięcie fazowe co klatkę) i reagować na suwaki amplitudy, częstotliwości i prędkości. To podstawa wielu wizualizacji fizyki fal.

• Renderuj gładką linię za pomocą THREE.Line z BufferGeometry
• Animuj falę: y = A * sin(f*x - speed*t)
• Aktualizuj pozycje wierzchołków co klatkę (ponownie wykorzystuj bufor — bez ponownej alokacji)
• Suwaki HUD: Amplituda (0.1 → 3), Częstotliwość (0.5 → 10), Prędkość (0 → 5)

const NUM_POINTS = 512;
const X_RANGE = 20; // fala rozciąga się od -10 do +10

// Zbuduj geometrię raz
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: wypełnij positions[] danymi fali sinusoidalnej
  // x biegnie od -X_RANGE/2 do +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;
}

Zaimplementuj algorytm Boidów Craiga Reynoldsa: 100 agentów, które łączą się w stado dzięki tylko trzem lokalnym regułom. Każdy boid patrzy na sąsiadów w promieniu percepcji i steruje, aby się odseparować, wyrównać i skupić. Emergentne zachowanie stadne pojawia się bez globalnej koordynacji.

• Separacja: steruj z dala od zbyt bliskich boidów
• Wyrównanie: steruj w kierunku średniego kursu pobliskich boidów
• Kohezja: steruj w kierunku średniej pozycji pobliskich boidów
• Granice zawijające (boidy teleportują się przez krawędzie)
• Suwaki HUD dla promienia percepcji i 3 wag reguł

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);
  });
}

Model fali Gerstnera przesuwa wierzchołki zarówno w pionie, jak i w poziomie, tworząc charakterystyczne szczytowe grzbiety fal oceanicznych. Zaimplementuj go jako vertex shader GLSL za pomocą Three.js ShaderMaterial. Nałóż na siebie 4 pociągi fal o różnych kierunkach i częstotliwościach dla realistycznej powierzchni morza.

• Vertex shader oblicza przemieszczenie Gerstnera dla każdego wierzchołka siatki
• Nałóż co najmniej 4 pociągi fal (różny kierunek, częstotliwość, amplituda)
• Fragment shader wykorzystuje normalne do oświetlenia Phong/Blinn z odbiciem nieba
• HUD: suwak siły wiatru skalujący amplitudy i stromość fal

// GLSL Vertex Shader (uproszczona pojedyncza fala)
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)
  );
}

// W 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) traktuje płyn jako chmurę cząstek, które wywierają na siebie ciśnienie i lepkość. Zaimplementuj formułę SPH Müllera i in. ze 200 cząstkami w 2D, w tym estymację gęstości, siły ciśnienia i lepkości oraz warunki brzegowe ścian.

• Estymacja gęstości przez jądro poly6: ρᵢ = Σ m · W_poly6(rᵢⱼ, h)
• Siła ciśnienia przez gradient jądra spiky
• Siła lepkości przez laplasjan jądra
• Ściany pudełka z tłumieniem (cząstki odbijają się od ścian)
• Renderowanie przy użyciu instancjonowanych kul kolorowanych wg prędkości

Symuluj N ciał grawitacyjnych za pomocą integratora Leapfrog / Velocity-Verlet, który zachowuje energię znacznie lepiej niż całkowanie Eulera. Dodaj parametr wygładzania, aby zapobiec osobliwościom przy bliskim zbliżeniu. Wizualizuj ślady orbitalne i mierz dryf całkowitej energii w czasie.

• Oblicz przyspieszenie grawitacyjne: a = G·m/|r|² (z wygładzaniem ε)
• Całkowanie Leapfrog: schemat kick–drift–kick
• Renderowanie śladów za pomocą kołowych buforów THREE.Line
• HUD: całkowita energia kinetyczna + potencjalna wyświetlana w czasie rzeczywistym
• Ustawienia gotowe: układ słoneczny, gwiazda podwójna, orbita ósemkowa