Υποενότητα 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