Mondriaan in OOP (Objectgeoriënteerd programmeren) schets. terug naar de inleiding
Door veranderingen in de argumenten van de constructor aan te brengen, zie regel 25 t/m 31 van de schets met de code,
kan je de rechthoeken een andere kleur, positie en grootte geven, zo creeer je een andere "Mondriaan".
Stappenplan voor het maken van een "Mondriaan" schets
les 1 een "Mondriaan" schets op ruitjespapier maken met 7 rechthoeken , genummerd 0 t/m 6
stap 1) maak een schets van 7 rechthoeken op ruitjespapier, nummer deze, begin bij "0" want in coderen is het eerste getal een 0
stap 2) maak een lijstje van de x,y coordinaten van de li bovenhoeken van de rechthoeken en de lengte en hoogte van de rechthoeken,
een vakje in het ruitjespapier is n lang en n breed en n is 1/10 deel van de hoogte van het venster (zie regel 17 van de schets)
les 2 de waarden van het lijstje in de constructor plaatsen, zo construeer je de "Mondriaan" schets in processing
stap 3) Copieer onderstaande schets en plak het in je processing programma. en sla alles op bijv als "Mondriaan"
stap 4) Maak een nieuw tabblad en kies als naam voor bestand "Vorm".
stap 5) copieer de code van de class "Vorm" in het aangemaakte tabblad en sla alles op. De class "Vorm" staat onder deze schets
stap 6) Maak een nieuw tabblad en kies als naam voor bestand "Ruitjes".
stap 7) Copieer de class "Ruitjes" en plak deze in het aangemaakte tabblad en sla alles op.
stap 8) Plaats de waarden van het lijstje in de constructor (zie regel 25 t/m 31 van de schets)
voor de x waarde is dit argument 1, voor y is dit argument 2, voor de lengte argument 3 en voor de hoogte argument 4, (zie regel 24 in de schets)
les 3 over kleuren
Kleur de rechthoeken in color(R,G,B), R = rood, G = Groen en B = Blauw, R, G en B hebben waarden tussen 0 en 255, waarin 0 = zwart en 255 = wit
color(255,0,0) = rood, color(255,255,0) is geel want rood gemengd met groen geeft geel dit met een beetje blauw = color(255,255,50) maakt het geel wat zachter
color(0,0,255) is blauw, dit met een beetje rood en groen = color(50,50,255) Door de kleuren wat te mengen zijn ze niet zo fel.
Je kan ook een kleur selecteren via Tools --> Kleur Selecteren en de geselecteerde R,G,B waarden invoeren in color(R,G,B); (zie de afbeelding: "les 3 kleur invoeren")
mbv een colorpicker, van bijvoorbeeld de w3schools, kan er ook een kleur worden geselecteerd.
De lessen 4, 5, 6 en 7 zijn leuk voor mensen met wat codeer kennis
les 4 wat je allemaal nog meer kan doen om de "Mondriaan" schets te verfraaien, zonder extra coderegels toe te voegen
1) De lijnen van de rechthoeken dikker maken en een andere kleur geven.
2) De "Mondriaan" kleiner maken en bijv links boven plaatsen.
3) Enkele rechthoeken over elkaar plaatsen en deels doorzichtig maken. Bedenk dat de de color functie nog een vierde argument "alpha" heeft
dus color(R,G,B,Alpha); met alpha = 0 is de doorzichtigheid maximaal en zie je de kleur van de achtergrond, met alpha= 255 is de kleur niet meer doorzichtig.
4) Een of meerdere rechthoeken uitschakelen
5) De "Mondriaan" in een volledig scherm tonen
6) De achtergrondkleur veranderen
7) De draw functie (regel 35) is een lus waarin alle rechthoeken met een snelheid van 60 keer per seconde worden getekend
Hoe kan je aantonen dat draw(); een lus is ?
les 5 veranderingen in de schets aanbrengen door extra coderegels toe te voegen
1) De "Mondriaan" 45 graden draaien
2) Extra rechthoeken toevoegen
3) De "Mondriaan" laten ronddraaien
4) Met toets aanslag de kleur van een rechthoek veranderen
5) Enkele rechthoeken in de schets 45 graden draaien (is een moeilijke)
6) De vorm objecten in een array plaatsen en deze in de draw functie in een for lus tekenen
les 6 veranderingen in de code van de class "vorm" aanbrengen
1) klik op het tabblad "Vorm" Plaats boven de coderegel rect(x,y,h,b) (regel 20) de functie rectMode(CENTER);
wat gebeurt er ? verander deze functie in rectMode(CORNER); wat gebeurt er?
2) De code tussen regel 15 en 21 is de functie, displayR (displayRechthoek). Omdat deze functie in een class staat spreekt met ook wel van methode
vervang in regel 20 rect(x,y,h,b); door ellipse(x,y,h,b);
3) Voeg de methode displayE (displayEllips) toe aan de class.
4) Geef de rechthoeken ronde hoeken.
5) De ronde hoeken als extra argument aan de constructor toevoegen.
les 7 een class toevoegen
Bijvoorbeeld de class "Huis" toevoegen en zo een of meerdere huizen rond de Mondriaan bouwen.
1) tabblad huis aanmaken, de class "Huis" copieeren en in het tabblad plakken
2) in de schets het object huis declareren, in de setup functie het huis construeren en in de draw functie het huis tekenen
De class "Mens" kan je ook toevoegen deze class heeft 4 methodes
Let op: in het computer coordinatenstelsel is y omhoog negatief dus -, in het Cartesiaanse coördinatenstelsel is y omhoog positief dus +
Pixel (0,0) zit in de linker bovenhoek van het computerscherm
stap 3 selecteer en copieer onderstaande code en plak deze in je processing programma.
//vormen 0 t/m 6 zijn rechthoeken
Vorm vorm0;
Vorm vorm1;
Vorm vorm2;
Vorm vorm3;
Vorm vorm4;
Vorm vorm5;
Vorm vorm6;
Ruitjes ruitjespap;
void setup() {
size(960, 540);
// fullScreen();
float x = width/2;
float y = height/2;
float n = height/10; //n is de lengte en breedte van een vakje in het ruitjespapier
float sw = height/100; // sw (strokeWeight) is de dikte van de zwarte lijn rond de rechthoeken
//1) x positie, 2) y positie, 3) lengte, 4) hoogte, 5) kleur rechthoek, 6) dikte van de lijnen, 7) kleur van de lijnen (hier zwart)
//Stap 4, de waarden van het lijstje in de constructor plaatsen (argumenten 1 t/m 4). Stap 5, de rechthoeken kleuren, (argument 5)
//constr arg 1 2 3 4 5 color(R, G, B) 6 7
vorm0 = new Vorm(x-3*n, y, n, n*3, color(255,255,50),sw, color(0));
vorm1 = new Vorm(x, y, n*3, n, color(255), sw, color(0));
vorm2 = new Vorm(x-2*n, y+n, n*5, n*2, color(255,0,0), sw, color(0));
vorm3 = new Vorm(x-2*n, y-2*n, n*2, n*3, color(70,70,255), sw, color(0));
vorm4 = new Vorm(x, y-3*n, n*3, n*3, color(255,255,50),sw, color(0));
vorm5 = new Vorm(x-3*n, y-3*n, n, n*3, color(255,0,255), sw, color(0));
vorm6 = new Vorm(x-2*n, y-3*n, 2*n, n, color(0), sw, color(0));
ruitjespap = new Ruitjes(n,x,y);
}
void draw() {
background(#E6FBFF);
vorm0.displayR();
vorm1.displayR();
vorm2.displayR();
vorm3.displayR();
vorm4.displayR();
vorm5.displayR();
vorm6.displayR();
ruitjespap.display();
}
de class "Vorm"
class Vorm {
float x; float y;
float h; float b;
color c1; float sw; color c2;
//constructor 1) x positie, 2) y positie, 3) lengte, 4) breedte, 5 kleur, 6) lijndikte 7, lijnkleur
//1 2 3 4 5 6 7
Vorm(float x_, float y_, float h_, float b_, color c1_, float sw_, color c2_ ) {
x = x_; y = y_;
h = h_; b = b_;
c1 =c1_; sw = sw_; c2 = c2_;
}
void displayR()
{
stroke(c2);
strokeWeight(sw);
fill(c1);
rect(x,y,h,b);
}
}
Toegift: de "Mondriaan" schets 45 graden draaien
De schets kan je niet draaien maar wel het coordinatestelsel. In processing bevindt het (0,0) punt van het coordinatenstelsen zich linksboven
Stappenplan
1) De schets naar het (0,0) punt verplaatsen door in regel 15: float x = width/2; te veranderen in float x = 0; en in regel 16: float y = height/2; veranderen in float y = 0; .
2) Het assenstelsel naar het middelpunt verplaatsen met de functie: translate(width/2, height/2);
3) de schets roteren met de functie: rotate(radians(45)); rotate(PI/4); mag ook
De translate en rotate functies moeten onder background(#E6FBFF); (regel 36) komen te staan.