Book
Υποενότητα 8.2: p5.js Τα Βασικά
Υποενότητα 8.2: p5.js Τα Βασικά
- Συναρτήσεις setup() and draw()
- Συνάρτηση createCanvas()
- Βασικά σχήματα - Primitives Shapes
Βασικά σχήματα. Γραμμή - 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?
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex824.js
- Open the file
ex812.html
in your editor and save it asex824.html
- In the
ex824.html
file, update the link toex824.js
from ex812.js - Go to the
index.html
file and create, underModule 8
, alink
to theex824.html
file with the title "Primitives Shapes - line".
Modify the ex824.js
file in order to create a staircase using lines. You can see here an example.
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