When working in P5.js we have been describing to the computer locations where we would like to draw to screen by specifying coordinates, this set of coordinates we call the matrix. When we use the translate function we are changing the position which our matrix starts
There is an example to the left showing what happens when you translate a sketch. Both of these ellipses are drawn at the same position of 100, 100 but the second one is being moved by the translate function. The gird resembles the matrix of each.

                ellipse(100,100, 50);
                // Here we apply our translate
                push();
                  translate(mouseX, mouseY);
                  ellipse(100,100, 50);
                pop();
              

Remember the ellipse coordinates are not updating, the position of the matrix is updating. Both ellipses have the same coordinates.

In the previous slide, the function push() and pop() were used. These functions are used to store the transformation settings and then return to the original ones when we are done applying these changes. Here is what would happen if we were to not to return to our original position. We can see that our transformations are being applied on top of each other. The red dot symbolizes the origin point of the matrix at the end of the draw loop.

                ellipse(100, 100, 50);

                // Move the grid 100 by 100
                translate(100, 100);
                ellipse(100, 100, 50);

                // Move the grid 200 by 200
                translate(200, 200);
                ellipse(100, 100, 50);
              

If we apply the push() and pop() you'll notice how the matrix at the end of the draw loop is unaffected. This is an important thing to note if you are planning on using transformations on multiple elements. We can see our matrix position is unchanged at the end of the draw loop.

              ellipse(100, 100, 50);

              // Here we store the current state of the matrix
              push();
              // Here we apply transformations
              translate(100, 100);
              ellipse(100, 100, 50);
              pop();
              // Then we return to the orignal state

              push();
              translate(200, 200);
              ellipse(100, 100, 50);
              pop();
              

We can apply a rotation to our matrix as well. The point of rotation is going to be from the original 0, 0 point. Here we have the same example as the last slide with two ellipse on layer is being trasnformed the other is not. In this example I have applied the angleMode(DEGREES); function to ensure we are working with degrees not radians.

              ellipse(100,100,50);

              push();
                rotate(mouseX);
                ellipse(100,100,50);
              pop();
              

We can combine transformations in our sketch. Here we have two ellipses, one at 100, 100 and the other which has been translated 200, 200 and then rotated. The syntax order is outlined below.

              ellipse(100,100,50);

              push();
                // Translate first
                translate(200, 200);
                // Then rotate
                rotate(mouseX);
                ellipse(100,100,50);
              pop();
             

If we reverse the order we get a very different result. The reason being that the point which rotate is rotating from is from the original 0, 0 cooridnate of the matrix. The next line we ask for the translate(200,200) to be applied. Which means it is rotated first from the origin, then offset leading to this result.

              ellipse(100,100,50);

              push();
                // Rotate first
                rotate(mouseX);
                // Then translate
                translate(200, 200);
                ellipse(100,100,50);
              pop();
             

The scale function allow us to maniplate all the values on a matrix to scale anything we want. Again the scaling is applied from the origin point of the matrix.

                ellipse(100,100,50);

                push();
                  scale(mouseX, mouseY);
                  ellipse(mouseX, mouseY);
                pop();

                // Alternatively scale can be applied with one parameter
                // scale(mouseX);
              

An event is triggered as soon as the browser has registered a user action. In this example we are using the environmental variable mouseIsPressed to return a true or false value for our conditional statement.

                function setup() {
                  createCanvas(windowWidth, windowHeight);
                }

                function draw() {
                  if(mouseIsPressed) {
                    // When pressed background is grey
                    background(50);
                  } else {
                    // Otherwise background is off white
                    background(230);
                  }
                }
               

A common event that you may want to run code on is when the mouse is pressed and released. When these functions are present in your sketch the syntax will look like the snippet below.

                function setup() {
                  createCanvas(windowWidth, windowHeight);
                }

                function draw() {
                  // Typical draw loop
                }

                function mousePressed() {
                	// Code runs when mouse is clicked down
                }

                function mouseReleased() {
                  // Code runs when mouse is released
                }
               

P5.js has several key-based events as well which can be quite helpful. There are a few which all operate similarly check the reference to see exactly what makes them different.

                let sentence = "";

                function setup() {
                	createCanvas(windowWidth, windowHeight);
                }

                function draw() {
                	background(230);
                	textAlign(CENTER, CENTER);
                	textSize(50);
                	text(sentence, width/2, height/2);
                }

                function keyTyped() {
                	// Add on the latest key to the string
                	sentence += key;
                }