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

Συναρτήσεις 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