Previous
Next

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
Previous
Next