Interpolation

Transformations

Calls in Processing that allow us to move the coordinate system around---changes the interpretation of positions.

Useful transformations:

  • translate
  • rotate
  • shearX
  • shearY
  • scale

Recalling Transformations

Sometimes we might want to save the current transformation: can do with with pushMatrix()

The most recent transformation saved with pushMatrix() can be restored by calling popMatrix()

We should generally try to make sure every pushMatrix() is matched with a popMatrix()

Questions

Project Questions

Do we need to have fixed shapes in the background for P3?

No. If your animation is helped by such things you can include them, but you can also have an animation which gives the illusion of movement by animating the background (e.g. plane flying through infinite clouds).

Can we use code from the Processing website for P3?

Yes. But make sure you attribute it.

Processing website is licensed under BSD0 so no issues with copyright.

A Note on Project 3 (and Project 4)

Two levels of transformation is not the same thing as applying two transformations to an object!

Two transformations:

  • Apply one transform to the object
  • Apply another transform to the same object

Two levels of animation:

  • Apply one transform to the object
  • Apply another transform to only a part of the object

Will we use (Maya/Illustrator/AutoCAD) in this class?

No, but if you already know how to use these programs and want to learn how to import assets into Processing, feel free to ask!

Instead of loading PShapes, can you just load drawings?

Yes, but regular image rules will apply: can't scale up arbitrarily, must be rectangular, rotations may create artifacts, etc.

How do spatial hierarchies work in 3D? Do they use camera depth?

Spatial hierarcy: things that move together are grouped together.

 

If things away from the camera tend to move more/less, you can group them by depth, but usually not.

Is the entire scene always rendering or just the place the camera is looking at?

Depends on implementation. Efficient ones don't render things the camera can't see, but this is harder than it sounds.

Object Hierarchy Demo

Animating a Scene

So far, we've focused on how to construct static images. Static images are so 15,000 B.C.E. Let's make moving pictures!

One way to make an animation would be to define a sequence of static images that form the final animation.

Static images constructed with 15,000 B.C.E. technology.

Tweening

  • "In-betweening"
  • Used in both traditional and digital animation
  • Define distinct keyframes and automatically create intermediates derived from them or interpolate between keyframes

Chu and Lee, 2009

Example

t = 0
t = 100

Where should the ball be at \(t = 50\)? What about \(t = 10\)?

Key configurations: \(t = 0\) and \(t = 100\)

Linear Interpolation

Given a starting and ending target, we can change a value by a fixed amount each timestep. This way, the change happens at a linear rate (i.e. if we wait twice as long, the change is twice as large).

This is linear interpolation, sometimes nicknamed "lerp".

Linear Interpolation

t = 0
t = 100
x = 0
x = 5

Linear Interpolation in Processing

A simple way to change values over time in Processing is to use the draw() loop.

We know the draw() function is called every 16.66ms (for 60FPS) or 33.33ms (for 30FPS).

 

Can update shape position in draw loop!

float x = 0.0;
float y = 250.0;
float dx = 3.0;

void setup () {
 frameRate(30);
 size(500, 500); 
}

void draw() {
 background(210); // Why?
 ellipse(x, y, 30, 30);
 if (x < 250) {
  x += dx;        // wheee!
 }
}

Well, in theory at any rate.

float x = 0.0;
float y = 250.0;
float dx = 3.0;

void setup () {
 size(500, 500); 
}

void draw() {
 background(210);
 ellipse(x, y, 30, 30);
 if (x < 250) {
  x += dx;
 }
 simulateLag(); // Ouch.
}
void simulateLag(){
  int delayAmt = 0;
  if (random(1) < 0.1){
    delayAmt = int(random(500)); 
  } else {
    delayAmt = int(random(75));
  }
  delay(delayAmt);
}

Locking things to your framerate is basically guaranteed to come back and bite you someday!

Processing has a function called lerp()

Usage: lerp(v1, v2, t) where t is between 0 and 1

\text{lerp}(v_1, v_2, t) = v_1 (1 -t ) + v_2(t)

Does not actually apply the lerp over time---you need to do that yourself! This just tells you what the result should be.

An Example in Processing

float xBegin = 0.0;
float yBegin = 0.0;
float xEnd = 500.0;
float yEnd = 300.0;

float time = 0.0;
float timeEnd = 100.0;

float x = xBegin;
float y = yBegin;

void setup(){
  size(500, 500);
}

void draw(){
  time++;
  if(time > 100){
    noLoop();
    return;
  }
  ellipse(x, y, 50, 50);
  // How do we get the new x and y?

}

Uses for Lerp

Any time you want values "in-between" in a simple manner.

Michael Guerzhoy, UToronto, https://www.cs.toronto.edu/~guerzhoy/320/lec/upsampling.pdf

User Berland on Wikipedia

Cosine Interpolation

Linear Interpolation can have sharp discontinuities at each point. Cosine interpolation can smooth these out without requiring more data points.

t_2 = \frac{1 - \cos(\pi t)}{2}
v(t) = (1 - t_2) v_1 + t_2 v_2

paulbourke.net

Hands-On: Interpolation

  1. Create a global counter time which runs from 0.0 to 1.0 in increments of 0.01. Increment time at the end of your draw() loop (and roll it back over to 0.0 if it exceeds 1.0).
     
  2. Use lerp() to move a shape between two points of your choosing in your draw() loop. Use the global time you set up in step 2 to do the interpolation.
     
  3. Do the same thing as in step 3, but use lerpColor() to make the shape change color smoothly as well.
     
  4. OPTIONAL: Instead of making the counter roll over from 1.0 to 0.0, make it smoothly oscillate between 0.0 an 1.0, back and forth. There are several ways to do this, but one is to use 0.5 * (sin(time)+ 1) as your lerp argument (since it is always in the range [0.0, 1.0])

Non-Linear Interpolation

  • Lerp allows us to move between things, but we have to do it in a line (and at constant speed).
     
  • Cosine interpolation lets us get smooth curves between points, but has other downsides.

How smooth is smooth?

Is this smooth?

Is this smooth?

Is this smooth?

How smooth is smooth?

We can define smoothness by which derivatives are continuous at all points!

 

  • \(C^0\) smooth: all values are continuous.
  • \(C^1\) smooth: all slopes (1st derivatives) are continuous.
  • \(C^2\) smooth: all curvatures (2nd derivatives) are continuous.
  • ...
  • \(C^\infty\) smooth: all derivatives of all orders are continuous.

Not smooth at all!

\(C^0\) smooth

\(C^1\) smooth

\(C^\infty\) smooth

Higher Order Continuity

Higher-order continuity is useful in many applications including animation and geometric modeling. (Looks smooth, smooth behavior gives nice guarantees).

 

Requires some extra parameters to meet the overheads of smoothness.

 

Splines are piecewise polynomials with high continuity.

Splines

Spline

Control Point

(Duck)

Splines

I give you

A set of control points

A smoothness constraint, usually specified as a \(C^k\) smoothness

You give me

A curve which is controlled by the control points and satisfies the smoothness constraint.

  • Passes through the control points?
  • Is smoother than required?
  • Has derivative control?
  • Is within the convex hull of the points?

¯\_(ツ)_/¯

Splines: A Total Zoo

There are many ways to construct a spline, and there are lots of spline techniques as a result.

 

  • Interpolating polynomial
  • Natural piecewise cubic spline
  • Clamped piecewise cubic spline
  • Bezier curve
  • Hermite spline
  • Basis spline
  • NURBS
  • Catmull-Rom spline
  • ........many more

Bézier Curve

B(t) = (1-t)[(1-t) P_0 + t P_1] + t[(1-t) P_1 + t P_2]

Given three control points \(P_0, P_1, P_2\), the Bézier curve expressed by the three points is

Quadratic Bézier Curve

Cubic Bézier Curve

Combining Bézier Curves

We can glue together multiple Bézier curves to get a basis spline.

https://en.wikipedia.org/wiki/B-spline

Higher Dimensions

We can extend the principles of splines into higher dimensions!

Still give a set of control points and a smoothness constraint, but now ask for a surface that satisfies those constraints instead.

Very popular in 3D modeling and animation where smooth surfaces are important.

Other Interpolation Forms

How else can we connect the two points?

Sine Waves

Sine (and cosine) equations model a periodic relationship between the input and output.

y = a \sin(w \theta + p)

\(y\) is the output and \(\theta\) is the input.

 

Other letters provide control handles for the wave:

  • \(a\) is the amplitude, controls how high the wave is.
  • \(w\) is the frequency, controls how wiggly the wave is.
  • \(p\) is the phase, controls the wave starting point.

Amplitude

small \(a\)

large \(a\)

y = a \sin(w \theta + p)

Frequency

small \(w\)

large \(w\)

y = a \sin(w \theta + p)

Phase Shift

zero \(p\)

nonzero \(p\)

y = a \sin(w \theta + p)

Waving a Thing

float time = 0.0;

void setup(){
  size(600, 600);
}

void draw(){
  background(255);
  fill(0);
  
  time += 1.0;
  
  // What's going wrong with this line?
  float x = 600 * sin(0.02 * time);

  ellipseMode(CENTER);
  ellipse(x, x, 50, 50);
}

Easing

Linearly moving an object between two points is simple, but it doesn't always look nice

Linearly moving an object between two points is simple, but it doesn't always look nice

Sometimes you want some pop!

Linearly moving an object between two points is simple, but it doesn't always look nice

Sometimes you want something more subdued.

Linearly moving an object between two points is simple, but it doesn't always look nice

Sometimes you want something more subdued.

Linearly moving an object between two points is simple, but it doesn't always look nice

Or you want your shape to spend as little time in the middle as possible....

Easing

Apply a function to the position to create nonlinear motion.

float x = 0.0;
float easing = 0.05;
float targetX = 400;
void setup() {size(500, 500);}
void draw() {
  x += (targetX - x) * easing;
  ellipse(x, 250, 50, 50);
}

How do we generate the equations?

We try a bunch and see what looks good...or let someone else do that work and then use their results! E.g. https://gizma.com/easing/

Hands-On: Non-Linear Motion

  1. Use the sin function to oscillate a ball back and forth along a line. Keep the ball on-screen at all times.
  2. Use the sin/cos function to orbit a ball in a circle or ellipse around a point.
  3. Create your own easing animation using one of the functions at https://gizma.com/easing/. Specify which function you picked in a comment. Use your easing function to animate a ball moving between two points.

Make the ball for each of these a different color. They should all animate on screen at the same time (the last one needs to only animate once)

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.

[09]: Interpolation and NLM

By Kevin Song

[09]: Interpolation and NLM

  • 88

More from Kevin Song