Coding 3D Shapes

Learn to code 3D shapes with P5j.

To get started go to: https://editor.p5js.org/

Interested in other P5j coding sites? Check out Open Processing.

1
 Coding 3D Shapes
Example 1

Type in the following lines of code:

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(20, 150, 130);
rotateY(millis() / 2000);
sphere(70);
}

Let’s find out more about this code.

2
 Coding 3D Shapes
Understanding the Code

To create 3D shapes we will need to add WEBGL after setting the screen width (400)
and height (400) of the canvas. WEBGL enables 3D render by introducing the third
dimension: Z.

createCanvas (width, height, WEBGL)

function setup() {
createCanvas(400, 400, WEBGL);
}

Background Color: background ()

Under function draw(){ , type “background ()”. This function will set the background
color. I used background(20, 150, 130), but you can choose a different color.

Check out https://p5js.org/reference/#/p5/background for more options.

3D shape: sphere (radius)

function draw() {
sphere(70);
}

By typing “sphere(70)” the program will draw a sphere at the center of the canvas with a
radius of 70 pixels.

For 3D shapes, the parameters (the numbers following a shape) will set the dimensions
of that shape, either: radius, width, height, or depth.

Note: All of the examples in this workbook will remain in the center of the canvas.

3
 Coding 3D Shapes
Looking Back at 2D Shapes

function draw (){

square (0,0, 200);
{

The first two numbers following square (0,0) set the location of the square’s top left
corner. The third number (200) sets the size of each side. This means our square will
start in the upper left corner of our canvas at (0,0) and its size will be 200 pixels
by 200 pixels, halfway across the x-axis and halfway across the y-axis.

2D Shape vs. 3D Shape

function setup() { function setup() {

createCanvas(400, 400); createCanvas(400, 400, WEBGL);
} }

function draw() { function draw() {

noStroke(); background(20, 150, 130);
fill(224, 104, 139); sphere(70);
square(0, 0, 200); }
}

4
 Coding 3D Shapes
Create other 3D shapes.

Using Example 1, replace the line of code to draw a sphere [ sphere(70);]

with these other shapes.

box (width, height, depth)

CODE: box (70,100,100);

torus (radius, tube radius)

CODE: torus (70,30);

cone (radius, height)

CODE: cone (70, 50);

Learn more about 3D rendering and 3D shapes.

https://p5js.org/reference/#/p5/WEBGL

https://p5js.org/reference/#/p5/sphere

https://p5js.org/reference/#/p5/box

https://p5js.org/reference/#/p5/torus

https://p5js.org/reference/#/p5/cone

5
 Coding 3D Shapes
Rotating Shapes

In Example 1, the sphere rotates around the Y-axis using this line of code:

rotateY(millis() / 2000);

You can make a shape rotate by using these functions:

rotateX (angle) - Rotates around X-axis.

rotateY (angle) - Rotates around the Y-axis.

rotateZ (angle) - Rotates around the Z-axis.

Experimenting with rotate()

Experiment 1: rotateX()
Add the following line of code to Example 1: rotateX(millis() / 2000)

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(20, 150, 130);
rotateX(millis() / 2000);
rotateY(millis() / 2000);
sphere(70);
}

6
 Coding 3D Shapes
Experiment 2: rotateY()
Add another line of code: rotateZ(millis() / 2000);

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(20, 150, 130);
rotateX(millis() / 2000);
rotateY(millis() / 2000);
rotateZ(millis() / 2000);
sphere(70);
}

Learn more about rotate (), rotateX(), rotateY(), and rotateZ().

https://p5js.org/reference/#/p5/rotate

https://p5js.org/reference/#/p5/rotateX

https://p5js.org/reference/#/p5/rotateY

Millis and FrameCount

millis () Returns the number of milliseconds (thousandths of a second) since starting

the sketch (when setup() is called). This information is often used for timing events and
animation sequences.

7
 Coding 3D Shapes
Experimenting with millis ()

Using Example 1, change rotateY(millis() / 2000) to rotateY(millis() / 4000).

What happened? Experiment by changing the parameters for rotateX and rotateZ.

frameCount () The system variable frameCount contains the number of frames that
have been displayed since the program started. Inside setup() the value is 0, after the
first iteration of draw it is 1, etc.

Experimenting with frameCount

Type in the following code:

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(120, 50, 80);
rotateY(frameCount * 0.01);
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
torus(70,30);
}

Learn more about millis, frameCount, and 3D examples.

https://p5js.org/reference/#/p5/millis
https://p5js.org/reference/#/p5/frameCount

8
 Coding 3D Shapes
Two 3D Shapes

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(120, 50, 80);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
rotateZ(frameCount * 0.01);
torus(80,20);

rotateY(frameCount * 0.02);
torus(30,10);
}

Experimenting with two 3D shapes.

Change the torus at the center [torus(30,10] with another 3D shape.

9
 Coding 3D Shapes
Three 3D Shapes

function setup() {
createCanvas(400, 400, WEBGL);
}

function draw() {
background(120, 50, 80);
rotateY(frameCount * 0.01);
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
torus(100,10);

rotateZ(frameCount * 0.02);
torus(150, 5);

rotateX(frameCount * 0.01);
sphere(60);
}

Learn more about 3D shapes.

https://p5js.org/examples/3d-geometries.html

https://p5js.org/reference/#/p5/translate

https://p5js.org/reference/#/p5/push

https://p5js.org/reference/#/p5/pop

10