Introductie: tekenen met Mondriaan

Teken dit meesterwerk op je computer! Het is gebaseerd op de schilderijen van de artiest Mondriaan.

Voorbereiding

Zo zou je interface er uit moeten zien.

De createCanvas(400, 400); code betekent dat een canvas (gebied waarin de code wordt uitgevoerd, waar wordt getekend) wordt gemaakt. De breedte en hoogte is 400 pixels (px).

Klik bovenaan op de Play knop om de code te starten. In de rechterkant (Preview) zie je nu dat het canvas getekend wordt.

Er wordt ook een achtergrondkleur ingesteld via background(220); Als je de waarde tussen de haakjes verandert, zul je zien dat de kleur verandert. Om bv. een achtergrond met een witte kleur in te stellen: background(255); De kleur kan een grijswaarde hebben van 0 tot 255. Probeer maar eens uit.

In P5.js is de draw() functie zo gemaakt dat die altijd opnieuw herhaald wordt. Voor de background() is dit niet nodig, het canvas hoeft hier niet altijd opnieuw ingekleurd te worden. Verplaats de background() opdracht naar de setup() functie, onderaan. Zo wordt het canvas maar 1 keer ingekleurd.

Kleuren maken

Zonet hebben we een kleur gemaakt met 1 getal. In dat geval kan je enkel een kleur van wit tot zwart maken, van 0 tot 255, met grijswaardes ertussen in.

Maar dit kan ook met 3 getallen i.p.v. 1.

Computers werken vaak met 3 getallen om 1 kleur samen te stellen. Deze getallen zijn dan waardes voor rood, groen en blauw. In het Engels Red, Green en Blue. Meestal wordt dit dan afgekort tot rgb.

Die kleuren worden dan gemengd en zo ontstaat een nieuwe kleur.

Elk van de drie kleuren kan een waarde hebben van 0 tot 255.

De kleur voor een eerste rechthoek

Voeg toe onderaan in de setup() functie. We maken eerst een kleur die gebruikt zal worden om de rechthoek op te vullen, dit kan met de opdracht:

fill(r, g, b);

Gebruik bv. volgende waardes voor een rode kleur: fill(230, 20, 20);

Posities in P5.js

Het canvas in P5.js heeft een X en een Y as. Dus een horizontale en verticale as.

Posities op het canvas kunnen dan bepaald worden met een getal voor x en y. Zowel x als y begint linksboven met 0.

x is positief naar rechts, y is positief naar onder.

bv. voor een canvas van 400 breed en 400 hoog:

Teken een rechthoek

Een rechthoek tekenen kan met:

rect(x, y, b, h);

Deze code tekent een rechthoek waarvan de linkerbovenhoek begint op de positie x en y met een breedte b en hoogte h.

Voeg toe onderaan in de setup() functie.

Teken bv.:

rect(100, 0, 300, 300);

Deze code tekent een rechthoek waarvan de linkerbovenhoek begint op de positie x = 100 en y = 0 met een breedte van 300 en hoogte van 300.

function setup() {
	createCanvas(400, 400);
	background(220);

	// rode rechthoek rechtsboven
	fill(230, 20, 20);
	rect(100, 0, 300, 300);
}

function draw() {}

Omlijning verwijderen

Rond de rode rechthoek is een fijn zwart lijntje te zien. We gaan instellen dat dit niet hoeft getekend worden via:

noStroke();

Plaats deze code vóór het tekenen van de rechthoek.

Blauwe rechthoek tekenen

We willen links onderaan een blauwe rechthoek tekenen. Probeer zelf eerst eens voor je naar de oplossing kijkt.

Gele rechthoek tekenen

Hoe voeg je deze gele rechthoek toe?

Lijnen tekenen

We gaan zwarte lijnen toevoegen aan de tekening.

Lijnkleur

De kleur van een lijn kan je instellen met:

stroke(getal);

Om zwarte lijnen te tekenen dus:

stroke(0);

Dit moeten we nu onderaan in de setup() functie toevoegen. Weet je nog dat je daarstraks de noStroke(); gebruikt hebt? Om het lijntje weg te halen? Nu voegen we opnieuw een lijntje toe, maar dat zal enkel gebruikt worden voor de vormen die getekend worden na de opdracht stroke(0);.

Lijn tekenen

Om een lijn te tekenen kun je gebruik maken van:

line(x1, y1, x2, y2);

We definiëren dus 2 posities waartussen de lijn zal getekend worden. bv.

line(10, 50, 300, 100);

Lijndikte

Om de lijn wat dikker te maken gebruiken we:

strokeWeight(getal);

Dit is het 'lijnGewicht'. Het getal geeft dan de dikte in pixels aan.

Probeer in je code vóór het tekenen van de lijn eens een dikte in te stellen: strokeWeight(12);

Uiteinden van de lijn

De 2 uiteinden van de lijn zijn nu afgerond, die kunnen we recht maken via:

strokeCap(SQUARE);

Square betekent vierkant. En het moet in hoofdletter geschreven worden. Voeg het ook weer toe vóór het tekenen van de lijn.

Ok, nu weten we hoe we een lijn moeten tekenen. Probeer volgende lijnen eens te tekenen. Zie je dat sommige lijnen een andere dikte hebben?

Zin om zelf aan de slag te gaan? Hier zijn een paar voorbeelden of je kan je eigen creatieve tekening maken.

Meer info vind je op: https://drive.google.com/file/d/1gf9aM-UU8UNAI8b68gZ1YQae15CLjpxQ/view?usp=drive_link