Previous

Κίνηση

Το P5.js μας δίνει τη δυνατότητα να δημιουργούμε εύκολα κίνηση / animation αντικειμένων.

Αν και αυτή η έννοια είναι νέα, η βάση είναι η καλή κατανόηση των συντεταγμένων του καμβά.

Τώρα που έχετε δημιουργήσει κάποια σχήματα και έχετε εξοικειωθεί με τις συντεταγμένες του καμβά, είναι καιρός να χρησιμοποιήσετε τις νέες γνώσεις σας μαζί με τη JavaScript για να δημιουργήσετε ένα απλό κινούμενο σχέδιο. Πώς θα δημιουργούσατε μια ελλειπτική κίνηση που θα κινηθεί οριζόντια από το αριστερό προς το δεξί άκρο του καμβά σας και αντίστροφα;

View source:

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

Δείτε here το παράδειγμα.

Μπορεί να έχετε παρατηρήσει ότι η έλλειψη σας αφήνει ίχνη καθώς κινείται μέσα από τον καμβά. Γιατί νομίζετε ότι αυτό συμβαίνει; Τι θα κάνατε αν θέλετε να το αλλάξετε;

Answer:

Επίσης, στη setup()  μπορούμε να επιλέξουμε να καθορίσουμε το χρώμα φόντου του καμβά μας.Ο λόγος για τον οποίο συμβαίνει αυτό είναι επειδή έχουμε ορίσει το background  στη setup () και όχι στην draw(). Εφόσον η setup()  καλείται μόνο μία φορά, το φόντο δημιουργείται μόνο μία φορά. Από την άλλη πλευρά, η draw() τρέχει 60 φορές κάθε δευτερόλεπτο, και έτσι δημιουργούνται κάθε φορά νέοι κύκλοι. Αν καθορίσουμε το φόντο στην draw(), τότε θα δημιουργείται  κάθε φορά που τρέχει η draw() και έτσι τα ίχνη του κύκλου δεν θα είναι ορατά.

Exercise

  1. Open your Visual Studio editor and the p5yourName folder.
  2. Open the file ex812.js in your editor and save it as ex828.js
  3. Open the file ex812.html in your editor and save it as ex828.html
  4. In the ex828.html file, update the link to ex828.js  from ex812.js
  5. Go to the index.html file and create, under Module 8, a link to the ex828.html  file with the title "Motion".

Modify the ex828.jsfile in order to create a two-dimensional motion with collisions You can see here an example.

Answer:

Do a Git commit with the message "Motion".

Previous