Υποενότητα 9.2: Προηγμένες συναρτήσεις και μετασχηματισμοί στο p5

Συναρτήσεις noLoop and loop

Η noLoop() είναι μια συνάρτηση p5.js που μας επιτρέπει να διακόψουμε την εκτέλεση του κώδικα που είναι γραμμένος μέσα στη συνάρτηση  draw() . 

Όσο η noLoop() καλείται, γεγονόντα μέσα στη draw όπως το  mousePressed() δεν εκτελούνται.

Μετά τη  noLoop() μπορούμε να χρησιμοποιήσουμε τη loop() για να αρχίσει ξανά η εκτέλεση του κώδικα μέσα στη draw.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα που χρησιμοποιεί τόσο τη noLoop() όσο και τη loop(). Θα χρησιμοποιήσουμε ως βάση το παράδειγμα motion oτην υποενότητα 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();
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex921.js
3. Open the file ex812.html in your editor and save it as ex921.html
4. In the ex921.html file, update the link to ex921.js  from exersice812.js
5. 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 will change color according to the mouseX and mouseY position. 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();
}

Κάντε μια  Git commit με το μήνυμα "noLoop and loop".

• Δείτε περισσότερα για την noLoop() function
• Δείτε περισσότερα για την loop() function

Συνάρτηση redraw

Η redraw() ίναι μια συνάρτηση p5.js, η οποία καθιστά τον κώδικα εντός της  draw() function να εκτελείται μόνο μία φορά όταν είναι απαραίτητο

Αυτή η συνάρτηση χρησιμοποιείται μέσα στα γεγονότα - events.

Example 

Εδώ είναι παράδειγμα κώδικα που κάνει την έλλειψη να κινείται κάθε φορά που ο χρήστης πιέζει το ποντίκι:

// 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();
 }

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex922.js
3. Open the file ex812.html in your editor and save it as ex922.html
4. In the ex922.html file, update the link to ex922.js  from exersice812.js
5. 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();
 }

Κάντε μια  Git commit με το μήνυμα "redraw".

• Δείτε περισσότερα για την redraw() function

Συνάρτηση clear

Η clear() είναι μια συνάρτηση p5.js η οποία, όταν καλείται, καθαρίζει όλα όσα βρίσκονται μέσα στον καμβά.

Αυτή η συνάρτηση δεν διαγράφει πραγματικά τα στοιχεία. Τα καθαρίζει καθιστώντας τα διαφανή.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα που καθαρίζει τον καμβά κάθε φορά που πατάτε το ποντίκι:

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();
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex923.js
3. Open the file ex812.html in your editor and save it as ex923.html
4. In the ex923.html file, update the link to ex923.js  from exersice812.js
5. 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();
}

Κάντε μια  Git commit με το μήνυμα "clear".

• Δείτε περισσότερα για την clear() function

Συναρτήσεις translate και rotate

Η translate(x,y) είναι μια συνάρτηση p5.js η οποία παίρνει δύο παραμέτρους.

Η τιμή της παραμέτρου x καθορίζει τη μετακίνηση αριστερά / δεξιά, ενώ η παράμετρος y προσδιορίζει τη μετακίνηση προς τα πάνω / κάτω. 

Μετά την κλήση αυτής της συνάρτηση, όλα τα στοιχεία που τοποθετούνται μετά από αυτή θα μετακινούνται σύμφωνα με τις καθορισμένες παραμέτρους.

Για να εφαρμόσουμε την μετακίνηση μόνο σε συγκεκριμένα στοιχεία, μπορούμε να χρησιμοποιήσουμε τα push() and pop() .

Η rotate() ίναι μια συνάρτηση p5.js που περιστρέφει ένα στοιχείο. Η ποσότητα στην οποία θα περιστραφεί το στοιχείο εξαρτάται από τον αριθμό που καθορίζεται μέσα στην παρένθεση. Οι γωνίες μπορούν να δοθούν είτε σε μοίρες - degrees είτε σε ακτίνια - radians. 

Example 

Ακολουθεί ένα παράδειγμα κώδικα που χρησιμοποιεί μετακίνηση και περιστροφή για να δημιουργήσει ένα ορθογώνιο που θα περιστραφεί δεξιόστροφα: 

// 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;
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex924.js
3. Open the file ex812.html in your editor and save it as ex924.html
4. In the ex924.html file, update the link to ex924.js  from exersice812.js
5. 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;
}

Κάντε μια  Git commit με το μήνυμα "translate and rotate".

• Δείτε περισσότερα για την translate() function
• Δείτε περισσότερα για την rotate() function
  

Συνάρτηση random

Η random() iείναι μια συνάρτηση p5.js η οποία επιστρέφει έναν τυχαίο αριθμό από τα καθορισμένα ορίσματα.

Μπορούμε να το χρησιμοποιήσουμε για να επιτύχουμε πολλά πράγματα, όπως: τοποθέτηση στοιχείων σε τυχαία θέση, τυχαία μετακίνηση στοιχείων, δημιουργία σχημάτων τυχαίου μεγέθους κλπ.

Μπορεί να πάρει 0,1 ή 2 ορίσματα.

• Αν καθορίζονται 0 ορίσματα, επιστρέφει έναν αριθμό μεταξύ [0,1).
• Αν έχει οριστεί 1 όρισμα, επιστρέφει αριθμό μεταξύ [0, αριθμός).
• Εάν έχουν οριστεί 2 επιχειρήματα, επιστρέφει έναν αριθμό μεταξύ [αριθ. 1, αριθμός 2].

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα που δημιουργεί ελλείψεις σε τυχαίες θέσεις και με τυχαίο μέγεθος:

//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

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex925.js
3. Open the file ex812.html in your editor and save it as ex925.html
4. In the ex925.html file, update the link to ex925.js  from exersice812.js
5. 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);
}

Κάντε μια  Git commit με το μήνυμα "random".

• Δείτε περισσότερα για την random() function