CSCI 461: Computer Graphics

Middlebury College, Fall 2023

Lecture 11: Animation 2 (Particles)

Last time, we prescribed motion using curves.

By the end of today's lecture, you will be able to:

  • implement Euler's method for updating the position and velocity of particles,
  • draw particles as either squares or using a sprite,
  • use transform feedback to ping-pong updated position and velocity data during an animation.

Mission: determine if there is a collision between asteroid and satellite.

$$ \vec p^{k+1} = \vec p^k + \Delta t\ \vec v(\vec p^k, t^k). $$
  • satellite: $\vec v_s(\vec p, t) = (-y, x)$ where $\vec p = (x, y)$, starts at $\vec p_s = (25, 0)$.
  • asteroid: $\vec v_a(\vec p, t) = (-30, -2.5)$, starts at $\vec p_a = (50, 25)$,
  • use $\Delta t = 0.2$.
  • Collision if distance is less than 2 (in provided units).
  • Should we fire thrusters to avoid asteroid? (fuel is expensive!) 

              t |            ps |      vs(ps,t) |            pa |      va(pa,t) | distance
            ------------------------------------------------------------------------------
               0| (   25,    0) | (   -0,   25) | (   50,   25) | (  -30, -2.5) |    35.4
             0.2| (   25,    5) | (   -5,   25) | (   44, 24.5) | (  -30, -2.5) |    27.2
             0.4| (   24,   10) | (  -10,   24) | (   38,   24) | (  -30, -2.5) |    19.8

Revisiting the Pixar ball from last lecture & lab.

Things get more complicated with other forces.

Let's just use a computer...

$$ \vec v^k = \frac{\Delta p}{\Delta t} = \frac{\vec p^{k + 1} - \vec p^k}{\Delta t} \phantom{\quad \rightarrow \quad \vec p^{k+1} = \vec p^k + \Delta t\ \vec v^k,} $$ $$ \vec a^k = \frac{\Delta v}{\Delta t} = \frac{\vec v^{k + 1} - \vec v^k}{\Delta t} \phantom{\quad \rightarrow \quad \vec v^{k+1} = \vec v^k + \Delta t\ \vec a^k.} $$

Accuracy of Euler's method depends on time step $\Delta t$.

demo: https://philipclaude.github.io/csci461f23/lecture11

Our goal: animate thousands or millions of particles!

Draw particles with gl.drawArrays and gl.POINTS.

Complete particle animation might look like this:

We'll use transform feedback to capture updated position & velocity to a buffer and send to next iteration.

Exercise: use transform feedback to animate particles.

  • Part 1: declare varyings to capture.
  • Part 2: create buffers for transform feedback.
  • Part 3: calculate updated position and velocity in vertex shader.
    • Today, we'll use $y^{k + 1} = y^k - \frac{1}{2}g t^2$ where $t = k \Delta t$ and $v_y = \frac{y^{k+1} - y^k}{\Delta t}$.
    • You will actually use Euler's method in the lab on Thursday.
    • Only really working with position in this example (to practice with transform feedback).
  • Part 4: draw and capture updated position in feedback buffer, then swap buffers.
  • Part 5: read data from buffers.