3D Matrix Basics

This is probably the most important lesson of this course, because the 3D-martix is the foundation of any spacial sketch.

In the first course Creative Coding Essentials, you have already learned about the so called “matrix”. The word “matrix” is basically a synonym for “coordinate system”.

2D and 3D matrices

Until this point you have probably only worked with two-dimensional matrixes. Remember how to define a position in Processing? You can do so by defining x and y values, right? Let’s do so to make it clear.

//Processing & P5.js
translate(x,y);

// Example
translate(100,100);

In a three-dimensional world, you have one additional axis: z!

//Processing & P5.js
translate(x,y,z);

// Example
translate(100,100,100);

With x, y and z you can move things in the 3D-scene in any way you want. And that’s what we are going to talk about in the next lesson about 3D-transformations.

This means in 3D sketches in P5.js you don’t need to translate the coordoninate system before displaying objects in the center of the sketch.