Simulation + Particle Systems

This Course So Far...

  • How to draw things in 2D
  • How to manage complexity of things we want to draw
  • How to transform things we want to draw
  • How to draw things in 3D

Turns out drawing things is kinda important in graphics (surprise!)

From now on

  • What sorts of systems might we want to draw?
  • How do we make them behave the way we want them to, instead of just looking the way we want them to?
  • Miscellaneous graphics and graphics-adjacent subjects

these eyes will not be blinded by the lights

Questions

Why is it called the Phong Model?

Bui Tuong Phong

An early doctoral student of Ivan Sutherland at Utah.

Invented the Phong shading model and algorithm.

Created the first computer graphics image that looked like its physical counterpart (the Beetle, right)

Died in 1975, age 32, to complications from squamous cell carcinoma.

Became professor at Stanford after graduation.

What if we want to map textures onto shapes that aren't spheres or boxes?

# Vertices
v 0.0 0.0 0.0
v 1.0 0.0 0.0
v 1.0 1.0 0.0
v 0.0 1.0 0.0
v 0.0 0.0 1.0
v 1.0 0.0 1.0
v 1.0 1.0 1.0
v 0.0 1.0 1.0

# Texture coordinates
vt 0.0 0.0
vt 1.0 0.0
vt 1.0 1.0
vt 0.5 0.7
vt 0.0 1.0
vt 0.4 0.2

# Faces (vertex/texture/normal)
f 1/1/1 2/2/1 3/3/1
f 1/1/1 3/3/1 4/4/1
f 5/1/2 8/2/2 7/3/2
f 5/1/2 7/3/2 6/4/2
f 1/1/3 4/2/3 8/3/3
f 1/1/3 8/3/3 5/4/3
f 2/1/4 6/2/4 7/3/4
f 2/1/4 7/3/4 3/4/4
f 4/1/5 3/2/5 7/3/5
f 4/1/5 7/3/5 8/4/5

DO NOT TRY TO DO THIS MANUALLY.

How can we make textures that move with the shape and interact normally with lighting models?

Textures already do this.

You can think of a texture as a fill which varies across the surface of the shape.

When you use fill(), you don't worry about transforming the shape. Same with textures.

One exception: scaling the shape will stretch the texture, but there's not much you can do to avoid this (if mapping a square texture onto a rectangle, something has to stretch)

Can textures be animated?

Unfortunately, not automatically. But you can manually make a sequence of textures and apply them per-frame to make the appearance of an animated texture.

Can textures change the geometry of a shape?

For the textures we're examining in this class, no.

However, advanced techniques like bump mapping, displacement mapping, normal mapping, and parallax mapping can change the (apparent) geometry of a shape.

What is Simulation?

The capture of behaviors based on rules

Many different variations:

  • Physical simulation models phenomena based on physical rules
     
  • Operational simulation models effects that arise out of artificial processes and human interactions (e.g. agent-based disease modeling)
     
  • Simulations can be entirely from first principles, or use empirical rules that have been observed from real phenomena.

Uses for Simulation

Basic Physical Simulation

Classical mechanics is the study of forces on bodies.

Based on well-understood laws (Newtonian)

Our basic quantities:

  • position: the location of a thing
  • velocity: the rate of change in position
  • acceleration: the rate of change in velocity

Velocity isn't Speed

If the car is going 25mph, it's kind of important to know whether it's moving left or right!

25 mph?

25 mph?

Vectors

We can represent velocity and acceleration as vectors.

Vectors have direction and magnitude.

In 1D, vectors are just (signed) numbers.

x
y
\vec{v}
\vec{v} = \begin{bmatrix}x\\ y \end{bmatrix}

Vector Arithmetic

\vec{v} = \vec{v_1} + \vec{v_2} = \begin{bmatrix} x_1\\ y_1 \end{bmatrix} + \begin{bmatrix} x_2\\ y_2 \end{bmatrix}
c\vec{v} = \begin{bmatrix} c x\\ c y \end{bmatrix}

Addition

Scaling

x
y
cx
cy
\vec{v}
c\vec{v}
y_1
\vec{v_1}
x_2
y_2
\vec{v_2}
\vec{v}
x_1

How to Modify Velocity + Acceleration

We can set rules and relationships between our three quantities to modify physical behavior.

For now, we'll work with a simple, intuitive version of Newton's Laws of Motion:

  • Position is changed by velocity over time
  • Velocity is changed by acceleration over time
  • Acceleration is caused by a force \(F = ma\)

1D Example

float y = 0.0;
float r = 30.0;
float vel = 0.0;
float accel = 0.03;

void setup(){
  size(500, 500);
}
void draw() {
  ellipse(250, y, r, r);
  vel += accel;
  y += vel;
  if (y > height) {
    y = 0.0;
  }
}

Hands-On Part 1

  1. Encapsulate our simulated particle into a Particle class with at least the members shown to the right.

    Don't worry about other forces--just get a particle that falls off the bottom of the screen.
class Particle {
  float y = 0.0;
  float r = 30.0;
  float vel = 0.0;
  float accel = 0.0;
  float gravity = 0.05;
  
  // Take a step using the current
  // accleration + velocity settings
  void update(){}
  
  // Draw the particle
  void draw(){}
}

Problems with this setup

  • The object's speed increases indefinitely since there is no limit on either acceleration or velocity.
     
  • There is no concept of object mass, so we are not conserving energy or momentum.
     
  • The behavior in this system is boring. We need more rules to create interesting behavior.

What other rules can we add to our system?

  • Gravity is a downward force (we already have this).

  • Friction is a force which opposes the velocity.

  • Spring force is the force needed to compress a spring

  • Coefficient of restitution describes the loss of energy when objects collide.

Adding Restitution and Friction

float y = 0.0;
float r = 30.0;
float vel = 0.0;
float accel = 0.0;
float gravity = 0.05;
float coef_fric = 0.001;
float coef_rest = 0.8;

void setup(){
  size(500, 500);
  ellipseMode(RADIUS);
}
void draw() {
  background(210);
  ellipse(250, y, r, r);
  accel = gravity;
  vel += accel;
  vel -= coef_fric * vel;
  y += vel;
  if (y > (height - r)) {
    vel = -(coef_rest * vel);
    y = height - r; // Massive hack
  }
}

Note: we still haven't solved the problem that our simulation is unprincipled---but it sure looks more interesting!

Making the Jump to N-D

where N > 1

Variables

In 2D, a particle will need six variables to hold its state:

  • Position x, y
  • Velocity x,y
  • Acceleration x, y

 

In 3D, we'll need nine variables.

 

Now imagine that we have 50 particles (we're about to have that!). How many variables do we need?

How can we contain this complexity?

Encapsulation

class Particle {
  float x;
  float y;
  float vx;
  float vy;
  float ax;
  float ay;
  
  void applyForce(){
    // Code code code...
  }
}

Can we do a little better?

PVector Class

The PVector class lets us store vectors in a class in Processing.

PVector p1 = new PVector(1,2);
PVector p2 = new PVector(2,4);

PVector p3 = p1.add(p2);
PVector p4 = p3.mult(2);

// Alternate way of creating p4
PVector p5 = p1.add(p2).mult(2);

Basic math operations (+, -, /, *, ^) are not defined on classes, so we need to use methods like .add() or .mult() to do math on PVectors.

class Particle {
  PVector pos;
  PVector vel;
  PVector accel;
  
  void update(){
    // Code code code...
  }
}

Hands-On: Part 2

  1. Modify your Particle class to work in 2D.
     
  2. Modify update() so that it takes a PVector indicating the force acting on the particle at the time.
     
  3. Modify the simulation so that the particle does not move straight down. Maybe there's a wind blowing from left to right, or the world is tilted and gravity pulls in the wrong direction.

Particle Systems

Particle systems dictate the movement and appearance of particles within the world.

Examples: smoke, water, fire, clouds, dust, galaxies, etc.

Particle Systems

Generally, there will be three "stages" in a particle system, though these can be thought more as decisions to make than as discrete stages.

  1. Emission stage: we decide where/how particles are generated and their initial states.
     
  2. Simulation stage: we decide how particles are going to behave (what forces are going to act on them and whether they'll collide, etc.)
     
  3. Rendering stage: we decide how particles are going to be displayed to the user.

What decisions were made for each stage for these particle systems?

Fireworks

Snowstorm

Extending the Particle

Additional rules (usually written as methods) can make the behavior of our Particle class more complex and interesting:

  • Continuous generation of particles
  • Changes to particle appearance over time
  • Application of additional forces on particles
  • Changes in how particles are visualized

These things don't have to be physically based!

Linked from https://en.wikipedia.org/wiki/Particle_system#/media/File:Particle_Emitter.jpg

Differences in rendering can create a large difference in visual impact!

Particle Systems aren't restricted to fireworks and fountains!

https://github.com/zshipchandler/particle-simulator

Hands-On: Particle Systems

Take the Particle class you've written and do one of the following with it:

 

  1. Generate a continuous stream of particles that "respawn" once they go off the screen.
  2. Create several particles that bounce against the sides of the screen.

In either case, you should add some randomness to the initial velocity of the particles so that they don't all do exactly the same thing. The random() method may be useful for this.

Index Cards!

  1. Your name and EID.
     
  2. One thing that you learned from class today. You are allowed to say "nothing" if you didn't learn anything.
     
  3. One question you have about something covered in class today. You may not respond "nothing".
     
  4. (Optional) Any other comments/questions/thoughts about today's class.

Last Time: 3D Structures

Is it possible to calculate lighting/texture numbers, or do you fiddle with things until they look right?

How do you figure out which parameters you need to put in to get the lighting effects you want?

How can we get the material effects we want?

https://www.youtube.com/watch?v=0Gi0ssQkWok&t=4120s

Can I apply textures to shapes that are not boxes or spheres? How?

Hire an artist.

I hate to make it sound like everything is really difficult but....this is the kind of job that takes someone with 10 years of practice days to do really well.

Can we apply textures on overlapping shapes?

No. Textures map onto a single surface, overlapping shapes are more than one surface. You would have to join the shapes.

Is there an analogue of blendMode() for overlapping objects?

Not in the Phong model, because all objects are opaque. If you allow object transparency, there are some analogues (but this falls squarely in the realm of "advanced shading models").

Is there an analogue of blendMode() for overlapping lights?

No. Light intensities are added.

Can we use SVGs for textures?

Most systems require raster images for textures.

Do we need to know how textures and lights affect the output at the pixel level, or is this all handled for us?

This is all handled for you, though we'll have a peek at how this is done at the end of next week.

[12a]: Simulation and Particle Systems

By Kevin Song

[12a]: Simulation and Particle Systems

  • 144

More from Kevin Song