Βιβλίο
Υποενότητα 8.2: p5.js Τα Βασικά
Υποενότητα 8.2: p5.js Τα Βασικά
- Συναρτήσεις setup() and draw()
- Συνάρτηση createCanvas()
- Βασικά σχήματα - Primitives Shapes
Βασικά σχήματα. Σημείο - 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);
}
}
}
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex825.js
- Open the file
ex812.html
in your editor and save it asex825.html
- In the
ex825.html
file, update the link toex825.js
from ex812.js - Go to the
index.html
file and create, underModule 8
, alink
to theex825.html
file with the title "Primitives Shapes - point".
Modify the ex825.js
file 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.
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