Βιβλίο
Υποενότητα 8.2: p5.js Τα Βασικά
Υποενότητα 8.2: p5.js Τα Βασικά
- Συναρτήσεις setup() and draw()
- Συνάρτηση createCanvas()
- Βασικά σχήματα - Primitives Shapes
Βασικά σχήματα. Ορθογώνιο Παραλληλόγραμμο - 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);
}
}
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex826.js
- Open the file
ex812.html
in your editor and save it asex826.html
- In the
ex826.html
file, update the link toex826.js
from ex816.js - Go to the
index.html
file and create, underModule 8
, alink
to theex826.html
file with the title "Primitives Shapes - rect".
Modify the ex826.js
file in order to create a cube using rects and lines.. You can see here an example.
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