Βιβλίο
Υποενότητα 8.2: p5.js Τα Βασικά
Υποενότητα 8.2: p5.js Τα Βασικά
- Συναρτήσεις setup() and draw()
- Συνάρτηση createCanvas()
- Βασικά σχήματα - Primitives Shapes
Βασικά σχήματα. Τρίγωνο - 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);
}
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex827.js
- Open the file
ex812.html
in your editor and save it asex827.html
- In the
ex827.html
file, update the link toex827.js
from ex812.js - Go to the
index.html
file and create, underModule 8
, alink
to theex827.html
file with the title "Primitives Shapes - triangle".
Modify the ex827.js
file in order to create the abstract shape using triangles. You can see here an example.
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