3D Animation

In addition to the 2 dimensional graphics functions you've used, P5 also has a set of 3 dimensional graphics functions. In this assignment you will create an animation using one or more of these functions. The people who wrote P5 have put together a great 3D tutorial. You may also find slides 318 - 365 in the slide presentation helpful.

Suggested steps for starting this assignment:

1. Start a new P5 program
2. In function setup() you will need to call the 3 argument version of createCanvas(), e.g.createCanvas(400, 400, WEBGL); since we will be using the 3d functions.
3. In function draw() you could use the following functions in this order:
   • background()
   • translate() moves the coordinates where the box will be drawn
   • rotateX() rotates the box around the X axis
   • rotateY() rotates the box around the Y axis
   • box() draws the rotated and translated box
4. Experiment with different arguments to get a feel for how they effect the box.
5. You'll need someway to animate the box. It could rotate on its own, or you could add something like mouseDragged() or keyPressed() with mouseX and mouseY used to change the amount of rotation. Whatever method you choose, since the amount of rotation will be changing, you'll will probably need a variable or two to store the amount of rotation in the x, y and/or z directions.

Optional Extensions

• You may want to use pointLight() to make a 3 dimensional lighting effect. Moving the position of the pointlight() can create interesting effects.
• You can change the perspective with camera()
• Bind rotation to mouse or keys.
• Create a 3D shape that is not built in (not a torus, cube, sphere/ellipsoid, cone, plane, cylinder.) For example, you could create a composite 3D shape like a house (pyramid on a cube) or an ice cream cone (sphere on a cone)
• For the really adventurous, you could design an object in CAD software (e.g. Tinkercad) export it as an obj file and upload it to your P5 program.

These are only suggestions, your 3d animation doesn't have to look like any other. Have fun and be creative!

Samples of Student Work

Yeshi
Ally
Alyssa
Arwyn
John
Cali
Tiffany
Douglas
Ngoc
Tania
Michelle
Aice
Vivian
Susana
Alex
Omara
Theo
Justin
Oliver
Joseph
Artiom
Cathy
Jiana
Vincent
Amy
Jasmine
Bella
Pansy
Andrei
Patrick
Alyssa
Margaux
Emerson
Owen
Noah
Aaron
Evie
Zachary
Marielle
Alyssa
Kathy
Jonathan
Calvin
Rima
Yulia
Donovan
Charlene
Isaac
Grace
Breana
Alvaro
Peter
Tennyson
Kaitlyn
Rio
Hao
Linen
Joanne
Adam
Michelle
Kenneth
Tiffany
Justin
Azalea
Lillian
Sean
Michelle
Jason
Alisa
Elvin
Naomi
Joanna
Tommy
Juan
Christina
Henry
Emely
Micheal
Victor
Sally
Jennie
Benjamin
Paolo
John
Cameron
Ashton
Ken
Kami
Audrey
Dat
Tobias
Tushig
Cyrus
Tommy
Irisa
Niko
Juan
Damian
Marissa
Daniil
Tyler
Rachel
Cameron
Benjamin
Melissa
Michael
Gloria
Marco