Previous
Next

Βασικά σχήματα. Έλλειψη - 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
Previous
Next