voorbeeld van een "Mondriaan" schetsvoorbeeld van een "Mondriaan" schets

 

 

Stap 1  voorbeeld schets op ruitjespapier
 
Let op:  y omhoog is negatief dus -

y omlaag is positief dus +

 

De schets op ruitjespapier met de genummerde rechthoeken

schets op ruitjespapier met genummerde rechthoeken,

rode puntjes zijn de x,y coordinaten van de rechthoeken

 

 

 stap 2  het lijstje met de waarden van

 x, y,  lengte en hoogte van de rechthoeken

rechth x y lengte hoogte
 0 x-3*n y n n*3
 1 x y n*3 n
 2 x-2*n y+n n*5 n*2
 3 x-2*n y-2*n n*2 n*3
 4 x y-3*n n*3 n*3
 5 x-3*n y-3*n n n*3
 6 x-2*n y-3*n n*2 n
 stap 4  x, y, lengte en hoogte invoeren in de
constructor, argumenten 1 t/m 4, regel 26 t/m 32

 

 stap 5 kleur invoeren

kleur selecteren via tools --> Kleur selecteren

Selecteer kleur met tools --> kleur selecteren
Hier is de blauwe kleur geselecteerd
R = 70, G = 70, B = 255

Dit invoeren in color(70,70,255); (zie regel  29)

 

De Mondriaan schetsde Mondriaan schets

 

begint er aardig op te lijken, alleen het rood wat te fel

begint er aardig op te lijken,
alleen het rood wat te fel.

hoe lossen we dat nou weer op?

 

Mondriaan in OOP (ObjectgeoriĆ«nteerd programmeren) schets.                       terug naar de inleiding

Door veranderingen in de argumenten van de constructor aan te brengen, zie regel 26 t/m 32 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 18 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 code en plak het in je processing programma.
stap 4) Plaats de waarden van het lijstje in de constructor   (zie regel 26 t/m 32 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 25 in de schets)

les 3 over kleuren
stap 5) 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 stap 5)

mbv een colorpicker, van bijvoorbeeld de w3schools, kan er ook een kleur worden geselecteerd.


De lessen 4,  5  en 6 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 rechthoek 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 (vanaf regel 46) aanbrengen
1) Plaats boven de coderegel rect(x,y,h,b) (regel 64) de functie rectMode(CENTER); wat gebeurt er ?  verander deze functie in rectMode(CORNER); wat gebeurt er?
2) In regel 64 rect(x,y,h,b); vervangen door ellipse(x,y,h,b);
3) De class Ellips aanmaken zodat je ellipsen aan de schets kan toevoegen.
 
Let op: in het computer coordinatenstelsel is y omhoog negatief dus -, in het Cartesiaanse coƶrdinatenstelsel is y omhoog positief dus +
 
stap 3 selecteer en copieer onderstaande code en plak het in je processing programma en sla alles op
 

Rechthoek rechthoek0; 
Rechthoek rechthoek1; 
Rechthoek rechthoek2;  
Rechthoek rechthoek3; 
Rechthoek rechthoek4; 
Rechthoek rechthoek5; 
Rechthoek rechthoek6; 
 
float x;  float y;  
float n;  float sw; 
 
void setup() {   
   size(960, 540);   
 // fullScreen();  
    x = width/2;  
    y = height/2;  
    n = height/10;      //n is de lengte en breedte van een vakje in het ruitjespapier 
   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)
 
//constructor  argumenten     1     2      3    4   5 color(R, G,  B)   6     7 
  rechthoek0 = new Rechthoek(x-3*n, y,     n,   n*3, color(255,255,50),sw, color(0)); 
  rechthoek1 = new Rechthoek(x,     y,     n*3, n,   color(255),       sw, color(0)); 
  rechthoek2 = new Rechthoek(x-2*n, y+n,   n*5, n*2, color(255,0,0),   sw, color(0)); 
  rechthoek3 = new Rechthoek(x-2*n, y-2*n, n*2, n*3, color(70,70,255), sw, color(0)); 
  rechthoek4 = new Rechthoek(x,     y-3*n, n*3, n*3, color(255,255,50),sw, color(0)); 
  rechthoek5 = new Rechthoek(x-3*n, y-3*n, n,   n*3, color(255),       sw, color(0)); 
  rechthoek6 = new Rechthoek(x-2*n, y-3*n, 2*n, n,   color(0),         sw, color(0));  
}   
  
void draw() {   
  background(#E6FBFF);   
  rechthoek0.display(); 
  rechthoek1.display(); 
  rechthoek2.display(); 
  rechthoek3.display(); 
  rechthoek4.display(); 
  rechthoek5.display(); 
  rechthoek6.display(); 
} 
 
class Rechthoek {   
  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 
  Rechthoek(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 display()   
  {   
   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 16:  x = width/2; te veranderen in x = 0; en in regel 17:  y = height/2; veranderen in 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.