Outline
In this lab you will:
- Understand the concepts of dimension in art, graphics and mathematics
- Investigate the requirements for 3 dimensional graphics
- Get started with creating 3D environments in code
Introduction
Welcome back Creative Coders! I trust you all had a lovely holiday season. :) We’re eager to get back into the swing of things with this course as we start a new module of EXTN1019. This term, we will be working with 3D graphics in p5.js - and in term 2 we will investigate a new Javascript library called ml5.js.
As you work through the lab, it’ll be helpful to have the p5.js 3D references open in a new tab so you can refer to it easily.
Getting Dimensional
What is a dimension?
What do we mean by dimension? What are all the meanings of this word? What is associated with dimension? How many dimensions can we have?
Choose one of the following: (A) Write down all the meanings of the word “dimension”. (B) Think of, and write as a word cloud, all the words you can that you associate with the word “dimension”. (C) Find a precise mathematical definition of “dimension” [4 minutes]
Share your findings with the class. We will have a discussion about the meanings of dimension, fitting as much as we can into a time box of 5 minutes.
How many dimensions?
Let’s take a closer look into what we mean by dimension through some concrete examples.
Think: What does a 1-dimensional object look like? What are some examples of 2-dimensional objects? Can you have a 0-dimensional object? Do you know your 3d platonic solids? Are 4-dimensions possible: if so, what do these objects look like? Is there a limit to the number of dimensions? Can you have fractional dimensions?
Share your findings with the class. We will have a discussion about types of 0D, 1D, 2D, 3D, 4D and other types of dimensional spaces, fitting as much as we can into a time cube of 4 minutes.
Artistic Dimensions
OK: so now we have some working definitions of dimension. Lets look at dimensions in art, design and graphics.
Research: when did people start using aspects of dimension in art and design? When did they start using three dimensional representations of the world on two dimensional canvases? How do we know? What other meanings do we attribute to relative size, position, occlusion? What are the elements of 3-dimension representations of the world?
Share your findings with the class. We will have a discussion about how 3D space is represented on a 2D space, fitting as much as we can into a time bubble of 5 minutes.
Coding Dimensions
OK: So we now have an understanding of how we represent our world in 2D. Why not just take a photograph (ouch to the painters: how does photography turn 3D into 2D? sculptors reign supreme: they provide a 3D representation of a 3D world)?
Let’s take a look at code for 3D.
Fork, Clone and open this lab’s template repository:
Run the code. What do you see?
Let’s look at what has changed and what is needed for 3D
WEBGL
createCanvas(windowWidth, windowHeight, WEBGL);
WebGL is a JavaScript API for rendering 3D [and 2D] graphics in compatible Web Browsers. NOTE: compatibility is dependent on web browser, browser version, browser platform, and specific function used. The use of standard interface APIs within WebGL can enable hardware rendering [using the graphics card capabilities of the end-user platform]. This makes guaranteeing successful applications problematic: do you really want to force everyone to use a specific version of Chrome?
Adding WEBGL as a parameter to createCanvas tells p5.js that we are intending to use 3D graphics and/or the capabilities of WebGL.
X, Y and Z
translate(0, 250, 0);
we use the same methods for moving (translate), rotating (rotate) and resizing (scale) objects. But now we add a third dimension to the transform matrix: Z.
Discuss with a partner: Which way is Z? Which way is positive and which way is negative?
rotateX(PI/2);
As well as rotate(theta, axis), there are methods for rotateX(theta), rotateY(theta) and rotateZ(theta), which may make it easier to think about rotating about a single axis.
What are we rotating about X? What is the degree of rotation?
Uncomment the line: // rotateY(frameCount*-0.04); to view the impact of another translation.
Add a rotation about X. Experiment with rotation rate. Can you rotate the plane in a different way?
3D Primitives
plane(1000, 1000);
A plane is a 2D shape. But we are drawing it in a 3D space - so it is no longer simply a flat canvas aligned with your computer’s screen. It is now a surface which can be manipulated and rendered in different ways. It can be used to form backdrops for a scene.
torus(200, 30, 20, 8);
A torus is a donut. It is a cylinder which has been bent around so one end touches the other. It is a shape described by a circle which has been rotated 360 degrees about a point outside the circle. It is more topologically interesting than a box, sphere, cylinder, cone or ellipsoid.
A torus has a number of properties:
- radius (or ring radius) - the radius of the entire ring
- tubeRadius - the radius of the tube
- detailX - the number of segments in the x-dimension
- detailY - the number of segments in the y-dimension
The torus will be drawn at the current location (after applying translate()), using the current rotations (in X, Y and Z), scales, and shears.
It is vital to use push() and pop(), OR applyMatrix() and resetMatrix() to control where and how the 3D object is drawn.
Add another object type (box, sphere, cylinder, cone or ellipsoid). Add a transform for that object.
Lights, Cameras, …
Our 3D world should not look like this:
In order to display a more sophisticated image, we should get rid of the black lines which define the edges of our 3D surfaces using:
noStroke();
We need to add lights to light up our surfaces. We have many alternatives:
lights() is a shortcut for calling both ambientLight() and directionalLight() with default values.
noLights() removes all lights from a scene.
lightFalloff() sets the way light intensity reduces with distance for spotLight() and pointLight().
Cameras: we view our world through a camera. The camera has a range of properties, but key amongst these is the position of the camera, the direction the camera is pointing, and the orientation of the camera in 3D space. As we have not defined a camera, we get the default camera.
Material People
Lights interact with surface materials. There are a number of elements to materials, and for now we will keep this simply to:
ambientMaterial(250, 150, 200);
ambientMaterials interact with (reflect) ambient light. The reflection is flat/matte.
specularMaterial(100, 200, 200);
specularMaterials interact with ambient light, spot lights, point lights and directional lights. The reflect light with an aspect of “shininess”: the reflections reflect light colour and surface colour. The level of shininess can be controlled using the shininess() function.
Uncomment all commented lines. Notice the materials and the impact of changes. Change material colours, light colours, glossiness. Play with rotation. Add
What type of interaction might work with this. Add some interaction for a mousePress event.
How do you display an image on a surface of a 3D object? What are the issues you encounter when you try this? How do image lights work?
Prep for next week
Next week we will be exploring materials and geometries in greater detail. You might want to explore these areas of p5.js during the week.
Remember to commit your code and push it up to Gitlab.
Summary
Congratulations! In this lab you:
- Explored the concepts of dimension in art, graphics and mathematics
- Investigated requirements for creating 3D graphics
- Used WEBGL with p5.js to create 3D objects, lights, materials and transformations