Submodule 17.2: Advanced p5 functions and transformations

Site:	ΕΛ/ΛΑΚ Moodle
Course:	Study / Web Design and Web Development
Book:	Submodule 17.2: Advanced p5 functions and transformations

Printed by:	Guest user
Date:	Wednesday, 24 April 2024, 8:04 PM

Description

noLoop and loop
redraw
clear
translate and rotate
random

noLoop and loop
redraw
clear
translate and rotate
random

noLoop and loop

noLoop() is a p5.js function that enables us to stop executing the code written inside the draw() function.

While noLoop() is called events inside the draw such as mousePressed() will not function.

After noLoop() we can use loop() in order for the code inside the draw to start executing again.

Example

Here is an example code which uses both noLoop() and loop(). We will use as base the motion example of the submodule 8.2:

// create a variable to control the direction of the ellipse
let control = false;
// make ellipse starting from the left end of the canvas
let i=30;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('#31bc33');
}
function draw () {
  // when ellipse is in the left edge, control would be/become false
  if (i==30) {
    control = false;
  }
  // if ellipse is inside the canvas width (we substract 30 which is the radius
  // of our ellipse) and control is false
  if (i<(width-30) && control==false){
    i++
    // increase its x position (ellipse moves in the right direction)
    ellipse(i,height/2,60);
  }
  else {
    // else control will change to true
    control = true;
    // decrease its x position (ellipse moves in the left direction)
    i--;
    ellipse(i,height/2,60);
  }
}
// make the ellipse stop when the user clicks the mouse
function mousePressed() {
  noLoop();
}
// make the ellipse continue moving when user releases the mouse
function mouseReleased() {
  loop();
}

You can see the result of the above code here

Exercise

Open your Visual Studio editor and the p5yourName folder.
Open the file ex812.js in your editor and save it as ex921.js
Open the file ex812.html in your editor and save it as ex921.html
In the ex921.html file, update the link to ex921.js from exersice812.js
Go to the index.html file and create, under Module 9, a link to the ex921.html file with the title "noLoop and loop".

Modify the ex921.jsfile to create an ellipse that moves on a circle and stops when the user clicks the mouse. You can see here an example.

Answer:

// initial x and y positions of the circular movement
let x0= 100;
let y0= 100;
// this variable is used to make the ellipse moving
let t = 0;
function setup() {
  // make a canvas that's 800x600 pixels
  createCanvas(800, 500);
}
function draw() {
  // set background color
  background('#D66761');
  // write the appropiate equations for x and y to make the ellipse moving circular
  let xMove = (width/2) + x0*sin(2*PI*t);
  let yMove = (height / 2) + y0*cos(2*PI*t);
  // create the ellipse
  ellipse(xMove, yMove, 20, 20);
  // increase the value of t and thus make the ellipse moving
  t += 0.01;
}
// make the ellipse stop moving when the user presses the mouse
function mousePressed() {
  noLoop();
}
// make the ellipse continue moving when user releases the mouse
function mouseReleased() {
  loop();
}

Do a Git commit with the message "noLoop and loop".

See more about the noLoop() function
See more about the loop() function

redraw

redraw() is a p5.js function which makes the code inside draw() function to be executed only one time when necessary.

This function is used inside events.

Example

Here is an example code which makes the ellipse moving every time the user presses the mouse:

// create a variable to control the direction of the ellipse
let control = false;
// make ellipse starting from the left end of the canvas
let i=30;
function setup() {
  // create canvas
  createCanvas(800,500);
  noLoop();
}
function draw () {
  // set background color
  background('#31bc33');
  // when ellipse is in the left edge, control would be/become false
  if (i==30) {
    control = false;
  }
  ellipse(i,height/2,60);
}
function mousePressed() {
  if (i<(width-30) && control==false){
    i=i+20;
  }
  else {
    // else control will change to true
    control = true;
    // decrease its x position (ellipse moves in the left direction)
    i=i-20;
  }
  // use redraw to update the position of ellipse
   redraw();
 }

You can see the result of the above code here

Exercise

Open your Visual Studio editor and the p5yourName folder.
Open the file ex812.js in your editor and save it as ex922.js
Open the file ex812.html in your editor and save it as ex922.html
In the ex922.html file, update the link to ex922.js from exersice812.js
Go to the index.html file and create, under Module 9, a link to the ex922.html file with the title "redraw".

Modify the ex922.jsfile to use redraw() to create an ellipse which will change its size every time the mouse is pressed. The size of the ellipse should not exceed the canvas height. When it reaches the maximum point it should start decreasing its size until it reaches 30 px. You can see here an example.

Answer:

// create a variable to control the size of the ellipse
let control = false;
// make ellipse starting from the left end of the canvas
let i=30;
function setup() {
  // create canvas
  createCanvas(800,500);
  noLoop();
}
function draw () {
  // set background color
  background('#31bc33');
  // when ellipse is 30px change the control to false
  if (i==30) {
    control = false;
  }
  ellipse(width/2,height/2,i);
}
function mousePressed() {
  // if the ellipse size do no exceed the canvas height
  if (i<(height-30) && control ==false){
    // increase the size of the ellipse
    i=i+20;
  }
  else {
    // else control will change to true
    control = true;
    // decrease the size of the ellipse
    i=i-20;
  }
  // use redraw to update the size of ellipse
   redraw();
 }

Do a Git commit with the message "redraw".

See more about the redraw() function

clear

clear() is a p5.js function which when called, clears everything that is inside the canvas.

This function does not actually delete the elements. It clears them by making them transparent.

Example

Here is an example code which clears the canvas every time the mouse is pressed :

function setup() {
  createCanvas(windowWidth, windowHeight);
  // set background color in the setup so sketches will leave traces
  background('white');
}
function draw() {
  noStroke();
  fill(0, 0, 0, 30);
  // ellipse will change according to the mouseX and mouseY position
  ellipse(mouseX, mouseY, 30, 30);
}
// clear the canvas every time the user presses the mouse
function mousePressed() {
  clear();
}

You can see the result of the above code here

Exercise

Open your Visual Studio editor and the p5yourName folder.
Open the file ex812.js in your editor and save it as ex923.js
Open the file ex812.html in your editor and save it as ex923.html
In the ex923.html file, update the link to ex923.js from exersice812.js
Go to the index.html file and create, under Module 9, a link to the ex923.html file with the title "clear".

Modify the ex923.jsfile to create a drawing program which will be draw ellipses in the mouseX and mouseY position every time the user presses the mouse. Clear the sketch every time the user presses a key using the information from here. You can see here an example.

Answer:

function setup() {
  createCanvas(windowWidth, windowHeight);
  // set background color
  background('white');
}
function draw() {
   noStroke();
  fill(0, 0, 0, 30);
  if (mouseIsPressed) {
    // ellipse will be drawn to the mouseX and mouseY position
    ellipse(mouseX, mouseY, 30, 30);
  }
}
// clear the canvas every time the user presses a key
function keyPressed() {
  clear();
}

Do a Git commit with the message "clear".

See more about the clear() function

translate and rotate

translate(x,y) is a p5.js function which takes two parameters.

The value of the x parameter specifies left/right translation, whereas the y parameter specifies up/down translation.

After calling this function, all the elements placed after this will behave according to the specified parameters.

In order to apply the translate only to specific elements, we can use the push() and pop() .

rotate() is a p5.js function which rotates an element. The amount at which the element will be rotated depends on the number specified inside the parenthesis. The angles can be given in either degrees or radians.

Example

Here is an example code which uses translate and rotate to create a rectangle which will be rotating clockwise:

// initialize the angle
let theta = 0;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(50);
}
function draw() {
  // move the origin to the center of the canvas
  translate(width / 2, height / 2);
  rotate(radians(theta));
  // draw the rect in relation with the origin
  // in this case the x pos will be (width/2-15) and the y position (height/2-85)
  rect(-15, -85, 30, 100);
  // increment the angle by one degree
  theta += 1;
}

You can see the result of the above code here

Exercise

Open your Visual Studio editor and the p5yourName folder.
Open the file ex812.js in your editor and save it as ex924.js
Open the file ex812.html in your editor and save it as ex924.html
In the ex924.html file, update the link to ex924.js from exersice812.js
Go to the index.html file and create, under Module 9, a link to the ex924.html file with the title "translate and rotate".

Modify the ex924.jsfile to create and use the above example as a base to create a clock simulation. The clock will only show hours and minutes. The hours "hand" should move with 1/12 the speed of minutes "hand". Use push(),pop(),translate and rotate to create your clock. You can see here an example.

Answer:

// initialize the angle
let theta = 0;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(50);
}
function draw() {
  push();
  // move the origin to the center of the canvas
  translate(width / 2, height / 2);
  // move the hour hand ( move 1/12th the speed of the minute hand )
  rotate(radians(theta / 12));
  rect(-15, -85, 30, 100);
  pop();
  push();
  // move the origin back to the center of the canvas
  translate(width / 2, height / 2);
  // move the minute hand
  rotate(radians(theta));
  rect(-10, -190, 20, 200);
  pop();
  // increment the angle by one degree
  theta += 1;
}

Do a Git commit with the message "translate and rotate".

See more about the translate() function
See more about the rotate() function

random

random() is a p5.js function which returns a random number from the specified arguments.

We can use it to achieve many things, sush as: positioning our elements in random position, move the elements randomly, create shapes of random size etc.

It can take 0,1 or 2 arguments.

If 0 arguments are defined, it returns a number between [0,1).

If 1 argument is specified, it returns a number between [0, number).

If 2 arguments have been specified, it returns a number between [numer1,number2).

Example

Here is an example code which creates ellipses in random positions and with random size:

//create variable for ellipse size
let size;

function setup() {
  createCanvas(800, 600);
  background(75);
}

function draw() {
  // the size of the ellipses will be between (20,200]
  let size = random(20, 200);
  // all of x ,y and size of the ellipse will be random
  // the x position will be between (size,(width-size)] so that the ellipse will always be within canvas
  // the y position of the ellipse will also be always inside the canvas
  ellipse(random(size, (width-size)), random(size, (height-size)), size);
}

You can see the result of the above code here

Exercise

Open your Visual Studio editor and the p5yourName folder.
Open the file ex812.js in your editor and save it as ex925.js
Open the file ex812.html in your editor and save it as ex925.html
In the ex925.html file, update the link to ex925.js from exersice812.js
Go to the index.html file and create, under Module 9, a link to the ex925.html file with the title "random".

Modify the ex925.jsfile and use as a base the above example to make the ellipses taking random colors. You can see here an example.

Answer:

//create variable for ellipse size
let size;

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(67,34,89);
  // the size of the ellipses will be between (20,200]
  let size = random(20, 200);
  // create random fill for the ellipses
  fill(random(1, 256),random(1, 256),random(1, 256));
  // all of x ,y and size of the ellipse will be random
  // the x position will be between (size,(width-size)] so that the ellipse will always be within canvas
  // the y position of the ellipse will also be always inside the canvas
  ellipse(random(size, (width-size)), random(size, (height-size)), size);
}

Do a Git commit with the message "random".

See more about the random() function

Submodule 17.2: Advanced p5 functions and transformations

Description

Table of contents

noLoop and loop

redraw

clear

translate and rotate

random