Home / 🗓 Schedule / 🛠 Examples / 💫 Guides / 💎 Resources
✨ Loops allow us to very simple write instructions that can happen repeatedly, whether it’s drawing a series of shapes or running through an entire array of elements! They’ll come in handy again and again and again and again and again and again and again… ✨
while loopsfor loops(Inline links below are for YuJa)
while-loops
while-loops noteswhile-loops in practice
while-loops in practice notesfor-loops
for-loops notesfor-loops in practice
for-loops in practice notesfor versus for...of
for versus for...of notesThere’s a whole extra part of p5 devoted to drawing stuff in 3D using WebGL. One weird thing that you need to remember with it is that the origin (that is, the coordinates 0,0) is in the centre of the canvas when you use WebGL.
It’s a way of dipping your toe into programmed 3D if you’re interested. Check out the 3D section of the reference as well as the 3D Models and 3D Primitives sections.
For example:
/**
* Rotating cube
* Pippin Barr
*
* Displays a rotating cube using WebGL
*/
// Data about our cube
const cube = {
// How long are its sides?
size: 100,
// How is it currently rotated on x and z (radians)
rotation: {
x: 0,
z: 0
},
// How much does it rotate each frame on x and z (radians)
rotationSpeed: {
x: 0.1,
z: 0.01
}
};
/**
* Create the WEBGL canvas
*/
function setup() {
// Note we include WEBGL as the third argument for createCanvas()
createCanvas(400, 400, WEBGL);
}
/**
* Displays a rotating cube
*/
function draw() {
// The void
background(0);
// Still makes sense to protect these transformations (the rotations)
// by using push() and pop()
push();
// Rotates everything we're about to draw on the x-axis
rotateX(cube.rotation.x);
// Rotates everything we're about to draw on the z-axis
rotateZ(cube.rotation.z);
// Draw a "box" (a cube), specifying the length of its sides
box(cube.size);
pop();
// Update the cube's rotation so it rotates
cube.rotation.x += cube.rotationSpeed.x;
cube.rotation.z += cube.rotationSpeed.z;
}