Υποενότητα 8.2: p5.js Τα Βασικά

Διαμόρφωση χώρου εργασίας

Ας δημιουργήσουμε έναν ιστότοπο p5 στον υπολογιστή μας.

Ακολουθήστε τα επόμενα βήματα

Ανοίξτε το πρόγραμμα επεξεργασίας του Visual Studio και το φάκελο p5yourName 

Πατήστε το Shift και επιλέξτε τα αρχεία index.html και sketch.js. Κάνετε δεξί κλικ και κάντε κλικ στην αντιγραφή των αρχείων.

Κάντε δεξί κλικ στο φάκελο module08 και επιλέξτε επικόλληση.

Μετονομάστε τα αρχεία στο φάκελο module08. Το αρχείο index.html στο ex812.html και το sketch.js στο ex812.js

Στο αρχείο ex812.html, ενημερώστε τη σύνδεση με το αρχείο ex812.js από το sketch.js

Ενημερώστε επίσης τους συνδέσμους για τις βιβλιοθήκες p5

Ενημερώστε τον κώδικα στο αρχείο ex812.js

function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('#31bc33');
}

Αποθηκεύστε κάθε αρχείο

Τροποποιήσεις του αρχείου index.html

Μεταβείτε στο αρχείο index.html και διαγράψτε όλες τις ετικέτες <script> και <style>

Δημιουργήστε ετικέτες <h2> για τις μονάδες p5

<h2>Module 8</h2>
<h2>Module 9</h2>
<h2>Module 10</h2>

Δημιουργήστε, κάτω από την ενότητα 8, μια σύνδεση με το ex812.html με έναν κατάλληλο τίτλο

<ul>
  <li>
     <a href="module08/ex812.html" target="_blank">Ex812 - A canvas example</a>
   </li>
 </ul>

Save the index.html file

p5 Server

Ανοίξτε το διακομιστή p5 (θυμηθείτε για αυτό) και κάντε κλικ στον σύνδεσμο. Μπορείτε να δείτε μια εργασία ex812.html !!

Commit

Do a Git commit with the message Initial Site Setup.

Visual Studio Editor 

Ανοίξτε στον επεξεργαστή σας τις Επεκτάσεις και αναζητήστε p5. εγκαταστήστε την επέκταση p5Canvas που σας επιτρέπει να κάνετε προεπισκόπηση του κώδικα p5js σε καμβά δίπλα-δίπλα στον κώδικα. Ο καμβάς ανανεώνεται ζωντανά κατά την επεξεργασία.

Ανοίξτε το exersice812.js και ενεργοποιήστε τη ζωντανή προεπισκόπηση του p5Canvas. Δεν συμβαίνει τίποτα!!

Αντιγράψτε τη λειτουργία του φόντου ('# 31bc33') από το setup () για να σχεδιάσετε () για να δείτε ζωντανά τον κωδικό σας. Η επέκταση p5Canvas παρακολουθεί τις αλλαγές στη λειτουργία draw (), όχι στη ρύθμιση ()!

Συναρτήσεις setup() και draw()

Το πρώτο πράγμα που θα χρειαστείτε για να ξεκινήσετε την κωδικοποίηση στο p5.js, είναι να κατανοήσετε τις λειτουργίες setup () και draw ().

Η συνάρτηση setup () θα πρέπει να τοποθετηθεί στην αρχή του κώδικα μας. Μπορούμε να έχουμε μόνο μία συνάρτηση setup () και είναι ο τόπος όπου αρχικοποιούμε το περιβάλλον μας. Αυτή η συνάρτηση setup () εκτελείται μόνο μία φορά στην αρχή του προγράμματος.

Μέσα από αυτή τη συνάρτηση, αρχικοποιούμε τις διαστάσεις του καμβά μας. Θα δούμε περισσότερα γι 'αυτό αργότερα, αλλά ουσιαστικά ο καμβάς μας είναι ο τόπος όπου εμφανίζεται ο κώδικας μας

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

Παράδειγμα κώδικα με κενό καμβά πράσινου φόντου:

function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('#31bc33');
}

Result of the above code:

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

Όλος ο βασικός μας κώδικας τοποθετείται μέσα σε αυτό το μπλοκ.

• Δείτε περισσότερα για setup() και draw() 
• Δείτε περισσότερα για  background() 

Συνάρτηση createCanvas

Προκειμένου να ξεκινήσουμε την κωδικοποίηση με το p5.js, πρέπει πρώτα να δημιουργήσουμε τον καμβά μας.

Για να γίνει αυτό, χρησιμοποιούμε τη pre-build p5.js function createCanvas();

Αυτή η συνάρτηση ορίζεται μόνο μία φορά στη ρύθμισή μας.

Αυτή η συνάρτηση δέχεται δύο ορίσματα: πλάτος και ύψος, έτσι έχουμεcreateCanvas(width, height); 

Όταν καλούμε αυτή τη συνάρτηση με συγκεκριμένες τιμές, το στοιχείο καμβά δημιουργείται στο έγγραφο με διαστάσεις πλάτους και ύψους ίσες με τις τιμές που έχουμε περάσει. Οι τιμές που περνάμε αποδίδονται αυτόματα σε μονάδες εικονοστοιχείων - pixels units. 

Όταν καθορίζουμε αυτές τις τιμές, μπορούμε να χρησιμοποιήσουμε απευθείας το πλάτος και το ύψος μέσα στον καμβά μας για να αναφερθούμε στις τιμές τους.

Αν δεν χρησιμοποιήσουμε το createCanvas();   στον κώδικα μας, το σύστημα δημιουργεί αυτόματα ένα με 100 x 100 εικονοστοιχεία.

Ένα ωραίο χαρακτηριστικό του p5.js είναι ότι μας επιτρέπει να δημιουργήσουμε έναν καμβά που ισούται με το πλάτος και το ύψος της σελίδας μας, ακόμα κι αν δεν γνωρίζουμε το μέγεθός του. Αυτό επιτυγχάνεται με τις μεταβλητές συστήματος - system variables windowWidth and windowHeight.

Αυτές οι μεταβλητές αποθηκεύουν αυτόματα το πλάτος και το ύψος της σελίδας μας. Έτσι γράφοντας  createCanvas(windowWidth,windowHeight);  θα έχει ως αποτέλεσμα τη δημιουργία καμβά ίσου με το μέγεθος του παραθύρου του προγράμματος περιήγησης.

• Δείτε περισσότερα σχετικά με τη  createCanvas() function

Βασικά σχήματα. Έλλειψη - ellipse

Ας αρχίσουμε να σχεδιάζουμε!

Το p5.js έχει pre-build functions για τα βασικά σχήματα που καθιστά εύκολο να σχεδιάσετε σχήματα στον καμβά.

Ένα από αυτά είναι η έλλειψη - ellipse();

Αυτή η συνάρτηση έχει 4 βασικές παραμέτρους και συνεπώς δέχεται 4 ορίσματα.

Αυτά τα ορίσματαείναι: x συντεταγμένη, y συντεταγμένη, πλάτος και ύψος που εκφράζονται στην έλλειψη ωs : ellipse(x,y,w,h); 

Επομένως, οι δύο πρώτες τιμές μιας έλλειψης είναι οι συντεταγμένες x και y. Οι συντεταγμένες του καμβά (0,0) βρίσκονται στην επάνω αριστερή γωνία. Έτσι, η συντεταγμένη x αυξάνεται στη δεξιά κατεύθυνση και η συντεταγμένη y καθώς κατεβαίνουμε στον καμβά. Όταν βρισκόμαστε στην πάνω δεξιά γωνία, η συντεταγμένη x ισούται με το πλάτος του καμβά, ενώ όταν βρισκόμαστε στο χαμηλότερο σημείο του καμβά, η συντεταγμένη y ισούται με το ύψος του καμβά. 

Οι δύο άλλες τιμές καθορίζουν όχι μόνο το πλάτος και το ύψος αλλά και το εάν θα εμφανίσουμε έλλειψη ή κύκλο. Εάν το w, h έχουν ίσες τιμές, δημιουργούμε έναν κύκλο. Το ίδιο αποτέλεσμα θα συμβεί αν καθορίσουμε μόνο το πλάτος, αφού το p5.js εκχωρεί αυτόματα την ίδια τιμή για το ύψος.

Παράδειγμα1

Ακολουθεί ένα παράδειγμα κώδικα για κύκλο που εμφανίζεται στο κέντρο του καμβά:

function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('#31bc33');
}
function draw () {
  ellipse(width/2,height/2,60);
}

Result of the above code:

Άσκηση

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

Modify the ex823.jsfile to create a face. You can see here an example.

Answer:

function setup() {
  createCanvas(800, 600);
  // set background color
  background('#D66761');
}
function draw() {
  noFill();
  // create the face ellipse
  ellipse(width/2,height/2,200,300)
  // for the left eye
  // draw the base ellipse for the eye, the sclera/“white of the eye”
  ellipse(350,275,50,25);
  // draw the Iris for the eye
  ellipse(350,275,25);
  // draw the center of the eye
  fill('black');
  ellipse(350,275,12.5);
  // for the right eye
  // draw the base ellipse for the eye, the sclera/“white of the eye”
  noFill();
  ellipse(450,275,50,25);
  // draw the Iris for the eye
  ellipse(450,275,25);
  // draw the center of the eye
  fill('black');
  ellipse(450,275,12.5);
}

Κάντε μια  Git commit με το μήνυμα "Primitives Shapes - ellipse".

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

Βασικά σχήματα. Γραμμή - line

line()

Η συνάρτηση line() λαμβάνει 4 ορίσματα.

Αυτά είναι: x1, y1, x2, y2. Έτσι έχουμε  line( x1,y1,x2,y2).

Η παράμετρος x1 είναι η συντεταγμένη x του πρώτου σημείου ενώ το x2 είναι το τελευταίο σημείο.

Η παράμετρος y1 είναι η συντεταγμένη y του πρώτου σημείου ενώ το y2 είναι το τελευταίο σημείο.

Ας δούμε ένα παράδειγμα κώδικα που χρησιμοποιεί τη συνάρτηση γραμμής () για να δημιουργήσει ένα αφηρημένο σχήμα:

function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  line ((width/2-100),height/2, (width/2+100),height/2);
  line ((width/2-100),height/2,(width/2-200),150);
  line ((width/2+100),height/2,(width/2+200),350);
}

Can you imagine what would be the outcome of the above code?

Result of the above code:

Exercise

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

Modify the ex824.jsfile in order to create a staircase using lines. You can see here an example.

Answer:

let i = 20;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  // left line
  line (350,100, 350,300);
  // right line
  line (450,100, 450,300);
  // draw horizontal lines across the height of the two vertical lines
  for (i; i<200; i= i+20){
    line (350,100+i, 450,100+i);
  }
}

• Κάντε μια  Git commit με το μήνυμα "Primitives Shapes - line".

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

Βασικά σχήματα. Σημείο - point()

point()

Η συνάρτηση point παίρνει 2 ορίσματα που καθορίζουν τη θέση x και y. Έτσι έχουμε e point(x,y).

Η συνάρτηση σχεδιάζει ένα σημέιο εμ διαστάσεις  1 pixel.

Ας δούμε ένα παράδειγμα ενός κώδικα που χρησιμοποιεί τη συνάρτηση point () για να δημιουργήσει σημεία σε όλο τον καμβά:

let xPos;
let yPos;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  for (xPos = 1; xPos<width; xPos = xPos +10) {
    for (yPos = 1; yPos<height; yPos = yPos+10) {
      point (xPos,yPos);
    }
  }
}

Result of the above code:

Exercise

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

Modify the ex825.jsfile in order to create a diagonal line of points, going from the up left edge to the right down. You can see here an example.

Answer:

let xPos;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  // use a for loop and create points with a distance of 30px
  for (xPos = 1; xPos<width; xPos = xPos +30) {
    // in order to create a diagonal line of points going from up left to down right
    // you will have to use the appropiate geometry to define the y coordinate
    point (xPos,5/8*xPos);
  }
}

• Κάντε μια  Git commit με το μήνυμα "Primitives Shapes - point".

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

Βασικά σχήματα. Ορθογώνιο Παραλληλόγραμμο - rect()

rect()

Η συνάρτηση rect () λαμβάνει τα ίδια 4 ορίσματα με την έλλειψη. Έτσι έχουμε  rect (x,y,w,h). 

Ας δούμε ένα παράδειγμα κώδικα που χρησιμοποιεί τη συνάρτηση rect () για να δημιουργήσει μια προσομοίωση ενός 3d σχήμα::

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color  
  background('orange');
   for (dim = 400; dim>10; dim = dim-10 ) {
    rectMode(CENTER);
    rect(width/2,height/2,dim,dim);
  }
  
}

Result of the above code:

Exercise

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

Modify the ex826.jsfile in order to create a cube using rects and lines.. You can see here an example.

Answer:

function setup() {
  // create canvas
  createCanvas(800,500);
}
function draw () {
  // set background color
  background('orange');
  noFill();
  // create the cube
  rect(300,200,100,100);
  rect(350,250,100,100);
  line (400,200,450,250);
  line (300,200,350,250);
  line (400,300,450,350);
  line (300,300,350,350);
}

• Κάντε μια  Git commit με το μήνυμα "Primitives Shapes - recy".

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

Βασικά σχήματα. Τρίγωνο - triangle()

triangle ()

Η συνάρτηση triangle() δέχεται 6 ορίσματα,  x1,y1,x2,y2,x3,y3. TΈτσι έχουμε τρίγωνο triangle(x1,y1,x2,y2,x3,y3).

Τα x1, x2 και x3 είναι αντίστοιχα οι συντεταγμένες x για το πρώτο, το δεύτερο και το τρίτο σημείο.

Τα y1, y2 και y3 είναι αντίστοιχα οι συντεταγμένες y για το πρώτο, δεύτερο και τρίτο σημείο.

Το τρίγωνο δημιουργείται συνδέοντας αυτά τα σημεία.

Ας δούμε ένα παράδειγμα ενός κώδικα που χρησιμοποιεί τη  triangle() function:

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color
  background('orange');
  triangle(width/2,height/2,500,400,300,400);
  triangle(width/2,height/2,500,100,300,100);
}

Result of the above code:

Exercise

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

Modify the ex827.jsfile in order to create the abstract shape using triangles. You can see here an example.

Answer:

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color
  background('orange');
  // create the shape using triangles
  triangle(400,250,500,400,300,400);
  triangle(300,100,400,250,200,250);
  triangle(500,100,600,250,400,250);
  triangle(400,250,200,250,300,400);
}

• Κάντε μια  Git commit με το μήνυμα "Primitives Shapes - triangle".

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

Κίνηση

Το 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:

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".