Кодингові завдання

Починаючи зі сфери, що зависла в повітрі, додайте силу гравітації, яка щокадру прискорює м'яч донизу. Коли він торкається підлоги, застосуйте відскок із поглинанням енергії, щоб м'яч зрештою зупинився. Опануйте інтегрування за Ейлером, накопичення швидкості та коефіцієнт відновлення.

• М'яч падає з vy += g * dt, що застосовується щокадру
• М'яч відскакує від площини підлоги за vy *= -restitution
• М'яч сповільнюється та зупиняється (restitution < 1)
• Керування: повзунок сили гравітації (0 → 30 м/с²)

// Three.js r160 вже завантажено
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);

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

// Підлога
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: додайте фізику гравітації тут
let vy = 0;
const GRAVITY = 9.8;        // м/с²
const RESTITUTION = 0.7;    // пружність
const FLOOR_Y = 0.5;        // радіус м'яча

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

  // ← Ваш код тут

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

Створіть плавну анімовану синусоїду за допомогою лінії THREE.BufferGeometry. Хвиля має рухатися в часі (зсув фази щокадру) та реагувати на повзунки амплітуди, частоти й швидкості. Це основа багатьох візуалізацій хвильової фізики.

• Відрендерте плавну лінію за допомогою THREE.Line із BufferGeometry
• Анімуйте хвилю: y = A * sin(f*x - speed*t)
• Оновлюйте позиції вершин щокадру (повторно використовуйте буфер — без повторного виділення пам'яті)
• Повзунки HUD: амплітуда (0.1 → 3), частота (0.5 → 10), швидкість (0 → 5)

const NUM_POINTS = 512;
const X_RANGE = 20; // хвиля простягається від -10 до +10

// Будуємо геометрію один раз
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: заповніть positions[] даними синусоїди
  // x змінюється від -X_RANGE/2 до +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;
}

Реалізуйте алгоритм Boids Крейга Рейнольдса: 100 агентів, які збираються у зграю лише за трьома локальними правилами. Кожен boid дивиться на сусідів у межах радіуса сприйняття та керує собою, щоб розділятися, вирівнюватися та згуртовуватися. Зграйна поведінка виникає без жодної глобальної координації.

• Розділення: відхиляйтеся від boids, що надто близько
• Вирівнювання: керуйте до середнього курсу сусідніх boids
• Згуртування: керуйте до середньої позиції сусідніх boids
• Замкнені межі (boids телепортуються через краї)
• Повзунки HUD для радіуса сприйняття та ваг 3 правил

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

Модель хвилі Герстнера зміщує вершини як вертикально, так і горизонтально, утворюючи характерні загострені гребені океанських хвиль. Реалізуйте її як вершинний шейдер GLSL за допомогою Three.js ShaderMaterial. Накладіть 4 хвильові поїзди з різними напрямками та частотами для реалістичної поверхні моря.

• Вершинний шейдер обчислює зміщення Герстнера для кожної вершини сітки
• Накладіть щонайменше 4 хвильові поїзди (змінюйте напрямок, частоту, амплітуду)
• Фрагментний шейдер використовує нормалі для освітлення Фонга/Блінна з відбиттям неба
• HUD: повзунок швидкості вітру, що масштабує амплітуди хвиль і крутість

// Вершинний шейдер GLSL (спрощена одиночна хвиля)
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)
  );
}

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

Згладжена гідродинаміка частинок (SPH) розглядає рідину як хмару частинок, що діють одна на одну силами тиску та в'язкості. Реалізуйте формулювання SPH за Мюллером та ін. із 200 частинками у 2D, включно з оцінкою густини, силами тиску та в'язкості й граничними умовами на стінках.

• Оцінка густини через ядро poly6: ρᵢ = Σ m · W_poly6(rᵢⱼ, h)
• Сила тиску через ядро гострого градієнта (spiky)
• Сила в'язкості через лапласіанове ядро
• Прямокутна межа з демпфуванням (частинки відскакують від стінок)
• Рендеринг інстансованими сферами, забарвленими за швидкістю

Змоделюйте N гравітаційних тіл за допомогою інтегратора «жабка» / Velocity-Verlet, який зберігає енергію значно краще за інтегрування Ейлера. Додайте параметр пом'якшення, щоб запобігти сингулярностям при близькому зближенні. Візуалізуйте орбітальні сліди та вимірюйте загальний дрейф енергії в часі.

• Обчисліть гравітаційне прискорення: a = G·m/|r|² (з пом'якшенням ε)
• Інтегрування «жабка»: схема поштовх–дрейф–поштовх
• Рендеринг слідів за допомогою кільцевих буферів THREE.Line
• HUD: загальна кінетична + потенціальна енергія в реальному часі
• Заготовки: Сонячна система, подвійна зоря, орбіта-вісімка