Joël Smit | 5V.in1
Informatica – J + P Programmeerparadigma’s en User experience
1.1 Het canvas: ons speelveld
Setup beginsituatie van programma creëren
Canvas veld van pixels naar punt verwijzen met x- en y-waarde waarbij 0,0
linksboven is:
Grotere x-waarde naar rechts
Grotere y-waarde naar beneden
Cirkel
function draw() {
noStroke() ;
fill(‘kleur) ;
ellipse(afstand van linksboven naar rechts, afstand naar beneden, (= middelpunt
cirkel), diameter cirkel)
of:
ellipse(afstand van linksboven naar rechts, afstand naar beneden, (= middelpunt
cirkel), breedte cirkel, hoogte cirkel)
}
Rechthoek
function draw() {
stroke(‘kleur’) ;
fill(‘kleur’) ;
strokeWeight(10) ; (= dikte lijn)
rect(afstand van linksboven naar rechts, afstand naar beneden, (= beginpunt
rechthoek), lengte lijn naar rechts, lengte lijn naar beneden)
}
Driehoek
function draw() {
noStroke() ;
fill(‘kleur’) ;
triangle(afstand van linksboven naar rechts, afstand naar beneden, (= bovenpunt
driehoek), afstand van linksboven naar rechts, afstand naar beneden, (=
linkerpunt driehoek), afstand van linksboven naar rechts, afstand naar beneden,
(= rechterpunt driehoek))
}
Shape
function draw() {
strokeWeight(5); (= dikte lijn)
stroke(‘kleur’);
fill(‘kleur’);
beginShape();
vertex(afstand van linksboven naar rechts, afstand naar beneden); (= punt 1)
vertex(afstand van linksboven naar rechts, afstand naar beneden); (= punt 2)
vertex(afstand van linksboven naar rechts, afstand naar beneden); (= punt 3) etc.
endShape(CLOSE);
}
Line
function draw() {
1
Informatica – J + P Programmeerparadigma’s en User experience
1.1 Het canvas: ons speelveld
Setup beginsituatie van programma creëren
Canvas veld van pixels naar punt verwijzen met x- en y-waarde waarbij 0,0
linksboven is:
Grotere x-waarde naar rechts
Grotere y-waarde naar beneden
Cirkel
function draw() {
noStroke() ;
fill(‘kleur) ;
ellipse(afstand van linksboven naar rechts, afstand naar beneden, (= middelpunt
cirkel), diameter cirkel)
of:
ellipse(afstand van linksboven naar rechts, afstand naar beneden, (= middelpunt
cirkel), breedte cirkel, hoogte cirkel)
}
Rechthoek
function draw() {
stroke(‘kleur’) ;
fill(‘kleur’) ;
strokeWeight(10) ; (= dikte lijn)
rect(afstand van linksboven naar rechts, afstand naar beneden, (= beginpunt
rechthoek), lengte lijn naar rechts, lengte lijn naar beneden)
}
Driehoek
function draw() {
noStroke() ;
fill(‘kleur’) ;
triangle(afstand van linksboven naar rechts, afstand naar beneden, (= bovenpunt
driehoek), afstand van linksboven naar rechts, afstand naar beneden, (=
linkerpunt driehoek), afstand van linksboven naar rechts, afstand naar beneden,
(= rechterpunt driehoek))
}
Shape
function draw() {
strokeWeight(5); (= dikte lijn)
stroke(‘kleur’);
fill(‘kleur’);
beginShape();
vertex(afstand van linksboven naar rechts, afstand naar beneden); (= punt 1)
vertex(afstand van linksboven naar rechts, afstand naar beneden); (= punt 2)
vertex(afstand van linksboven naar rechts, afstand naar beneden); (= punt 3) etc.
endShape(CLOSE);
}
Line
function draw() {
1