Υποενότητα 9.1: p5 Γεγονότα

Εισαγωγή στα Γεγονότα - p5.js events

Τα συμβάντα P5.js έχουν ενσωματωμένα συμβάντα που σας επιτρέπουν να εφαρμόσετε διαδραστικότητα στον καμβά σας.

Χρησιμοποιώντας αυτές τις συναρτήσεις μπορείτε να εφαρμόσετε αλλαγές στο σκίτσο / κινούμενο σχέδιο όταν ο χρήστης κάνει κάτι.

Για παράδειγμα, μπορείτε να αλλάξετε το χρώμα ενός σχήματος όταν ο χρήστης κάνει κλικ πάνω του.

Ας δούμε μερικά από αυτά τα γεγονότα

mouseX και mouseY

Δύο από τα συμβάντα p5.js είναι το  mouseX και mouseY.

Το mouseX κρατά την οριζόντια θέση στην οποία ο χρήστης δείχνει το ποντίκι του. Αλλάζει κάθε φορά που ο χρήστης κινεί το ποντίκι του οριζόντια.

Παρόμοια με το mouseX, το ποντίκι Y κρατά την κατακόρυφη θέση στην οποία ο χρήστης κρατάει το ποντίκι του.

Παράδειγμα

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

function setup() {
  createCanvas(windowWidth, windowHeight);
  // set background color in the setup so sketches will leave traces
  background('#D66761');
}
function draw() {
  noStroke();
  fill(241, 222, 152, 30);
  // ellipse will change according to the mouseX and mouseY position
  ellipse(mouseX, mouseY, 30, 30);
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα, click 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 ex912.js
3. Open the file ex812.html in your editor and save it as ex912.html
4. In the ex912.html file, update the link to ex912.js  from exersice812.js
5. Go to the index.html file and create, under Module 9, a link to the ex912.html  file with the title "mouseX and mouseY".

Modify the ex912.jsfile to create an ellipse that will change color according to the mouseX and mouseY position. You can see here an example.

Answer:

function setup() {
  createCanvas(800, 500);
  // set background color 
  background('#D66761');
}
function draw() {
  // we use mouseX in order to control the green value of the color
  // we divide it by 4 so that the value will not exceed 256
  // for the blue value we use mouseY divided by 2
  fill(241, mouseX/4, mouseY/2);
  // ellipse will change color according to mouseX and mouseY position
  ellipse(400, 250, 200);
}

• Κάντε μια  Git commit με το μήνυμα "mouseX , mouseY".

• Δείτε περισσότερα για το mouseY event

mouseClicked()

Η συνάρτηση  mouseClicked() καλείται κάθε φορά που γίνεται κλικ στο αριστερό πλήκτρο του ποντικιού.

Στον κώδικα μας, τοποθετούμε αυτή τη λειτουργία εκτός της draw().

Η σύνταξη είναι:

 function mouseClicked(){
//your code
}

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

let xPos, yPos;
function setup() {
  createCanvas(800, 500);
  // set background color
  background('#D66761');
}
function draw() {
  fill(241, 213, 145);
  // an ellipse will be drawn everytime the xPos, yPos are defined
  ellipse(xPos, yPos, 50);
}
// everytime the mouse is clicked
function mouseClicked(){
  // the x position will take the value of the horizontal mouse position
  xPos=mouseX;
  // the y position will take the value of the vertical mouse position
  yPos = mouseY;
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα, click 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 ex913.js
3. Open the file ex812.html in your editor and save it as ex913.html
4. In the ex913.html file, update the link to ex913.js  from exersice812.js
5. Go to the index.html file and create, under Module 9, a link to the ex913.html  file with the title "mouseClicked()".

Modify the ex913.jsfile to create an ellipse which will change its color from white to red, everytime the user clicks inside it.If the user clicks outside the ellipse, change its color back to white. You can see here an example.

Answer:

let i = 'white';
function setup() {
  createCanvas(800, 500);
  // set background color
  background('#D66761');
}
function draw() {
  fill(i);
  // create an ellipse
  ellipse(400, 250, 50);
}
// everytime the mouse is clicked
function mouseClicked(){
  // if the mouse x and y position is inside the ellipse
  if (mouseX >=350 && mouseX <=450 && mouseY >=200 && mouseY <=300){
    //change its color to red
    i = 'red';
  }
  // else change the color to white
  else {
    i = 'white';
  }
}

Κάντε μια  Git commit με το μήνυμα  "mouseClicked() ".

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

mouseIsPressed

Η mouseIsPressed είναι μια μεταβλητή boolean που μεταβάλλεται από false σε true όταν πατηθεί το ποντίκι.

Αυτή η μεταβλητή παραμένει αληθής, όσο είναι πατημένο το ποντίκι, και όταν απελευθερωθεί, αλλάζει ξανά σε ψευδής.

Example 

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

function setup() {
  createCanvas(800, 500);
}
function draw() {
  // set background inside draw so that the ellipse will not leave traces
  background('#D66761');
  fill(241, 213, 145);
  // if the mouse is pressed
  if (mouseIsPressed){
    // an ellipse will be drawn in the position where the mouse is pointing
    ellipse(mouseX, mouseY, 50);
  }
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα, click 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 ex914.js
3. Open the file ex812.html in your editor and save it as ex914.html
4. In the ex914.html file, update the link to ex914.js  from exersice812.js
5. Go to the index.html file and create, under Module 9, a link to the ex914.html  file with the title "mouseIsPressed".

Modify the ex914.jsfile to create a drawing tool which will be drawing ellipses as long as the mouse is pressed. Also, include two other ellipses, a red and a green one. Make the drawing tool change the color of the ellipses it is drawing to red, if the user clicks inside the red ellipse and to green if the user clicks inside the green ellipse. You can see here an example.

Answer:

let mycolor = 'white';
function setup() {
  createCanvas(800, 500);
  background('#D66761');
}
function draw() {
  // this color will change every time the mouse clikcs the red or green ellipse
  fill(mycolor);
  // if the mouse is pressed
  if (mouseIsPressed){
    // an ellipse will be drawn in the position where the mouse is pointing
    ellipse(mouseX, mouseY, 20);
  }
  fill ('red');
  ellipse (600,250,50);
  fill('green');
  ellipse (600,350,50);
}
// everytime the mouse is clicked
function mouseClicked(){
  // if the mouse x and y position is inside the red ellipse
  if (mouseX >=550 && mouseX <=650 && mouseY >=200 && mouseY <=300){
    //change its color to red
    mycolor = 'red';
  }
  // if the mouse x and y position is inside the green ellipse
  if (mouseX >=550 && mouseX <=650 && mouseY >=300 && mouseY <=400){
    //change its color to green
    mycolor = 'green';
  }
}

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

• Δείτε περισσότερα για τη μεταβλητή mouseIsPressed