3D Shapes

Lerp

We can use the lerp() function to smoothly interpolation motion between endpoints.

Interpolation can also be applied to many different types of values.

Why is time an input to interpolation?

The variable is traditionally called "time," but a better name for it might be "control," since it controls what blend of the endpoints you see.

lerp(x, y, 0) = x

lerp(x, y, 1) = y

How would you animate something like a fish tail oscillation with lerp?

1. Determine Pose 1
2. Determine Pose 2
3. Lerp with oscillating control

How important is it to know the equations for interpolation/splining/easing?

Not important at all, at least for this class.

Apart from sines, what other functions can be used for non-linear motion?

Pretty much anything.

What Changes in 3D?

Our scene is now three-dimensional.

But we're still trying to draw 2D images!

Suddenly, we're going to have many more choices about how to make pictures.

Example: Perspective

• A representation of depth and object relations on a flat surface
• Technique used by artists and cameras
• Adds realism to a scene by modeling what our eyes already do

Perspective Choices

Cameras can project in two ways: orthographic or perspective

Perspective Choices

Orthographic

• Distant objects appear at the same scale as closer objects.
• Gives a flat, technical appearance

Perspective

• Distant objects appear at a smaller scale than closer objects.
• Gives a physically realistic appearance.

3D Shapes in Processing

By default, Processing assumes you want to work in 2 dimensions. We'll need to tell it we want to work in 3D.

size(width, height, P3D);

Note: there is also a P2D renderer. P2D and P3D work in OpenGL, making them faster with more effects.

Replacements for rect()

Now that we're in 3D, rect() and ellipse() calls won't cut it anymore!

Instead, we can use box() and sphere() to create boxes and spheres, respectively. More complex shapes can be made with beginShape() and vertex()

We can use fill() and stroke() on these primitives, but cannot set positions---must use affine transforms to do this.

Meshes

Just like with SVGs, we can load meshes into PShape objects.

Note: we need to be in 3D rendering mode in order to load .obj files!

3D Transforms

In 2D, we had access to three basic transformations:

• scale
• rotate
• translate

In 3D, we're going to have access to the same set of transformations. In fact, their mathematical notation looks similar too!

Scaling

Translation

....Rotation

Summary of Transformations

Translate and scale function basically the same as their 2D counterparts, but with an additional function argument.

Rotate is replaced by three functions which each take a parameter.

• translate(x, y, z)
• scale(x, y,z)
• rotateX(θ)
• rotateY(θ)
• rotateZ(θ)

Quick Aside: 3D Coordinates

Most coordinate systems are "right-handed". Processing uses a left-handed coordinate system.

The concepts are the same, just be sure you have the right picture in your head before trying things!

Example

Camera

Camera in 2D

Camera in 3D

Camera in Processing

camera(eyeX, eyeY, eyeZ, centerX,centerY, centerZ, upX, upY, upZ);

Example for changing the height of the camera based on mouse movement:

camera(200.0, mouseY, 120.0,
       0.0, 0.0, 0.0,
       0.0, 1.0, 0.0);

Hands-On: 3D Shapes

1. Create several nonoverlapping 3D shapes.
2. Set up a camera to look at these objects
3. Experiment with moving the camera along the x,y,z axes

Remember, you need to pass P3D into size() to get a 3D environment!

Is it possible to draw a sphere with a reasonable number of points?

How does a scene graph interact with manual (user-initiated) adjustments to an object?

The same way it does to a computer-initiated adjustment.

Do games actually use SVGs for their game assets?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

How can you interpolate between pixels in an image?

Different from kernel: creates new pixels and fills them in!