Blog

Download Processing hier.

Update: De voorbeeld-codes zijn ondertussen aangepast zodat ze ook werken in de PDE (het losse programma).

In deze opdracht gaan we dit schilderij van Mondriaan makkelijk nabouwen. Als we dat gedaan hebben, gaan we ‘m laten bewegen.

Super belangrijke programmeer-trucs

Om dit schilderij na te maken moeten we nogal vaak dezelfde codes gebruiken. Maar, we zijn lui. Dat betekent dat we telkens dezelfde code willen hergebruiken.

Dat kan met kopiëren- plakken. Maar dat is voor losers.  Als je iets wilt veranderen, dan moet dat in elke kopie. Handig, not!

Een programmeur gebruikt functies voor veel-voorkomend werk

In het Mondriaan-schilderij gaan we lijnen maken die telkens even dik zijn. Het is handig om dan een functie te gebruiken. Gemak dient de mens.

void draw() {  // this is run repeatedly.  
        // horizontal lines first
   mondriaanLine(75 ,200,"hor",300);
   
        // now vertical lines
   mondriaanLine(75,0,"ver",800);
       // black square left top
   fill(0);
   rect(0,0,75,30);
       // big red square
   fill(255,0,0);
   rect(82,0,220,203);
} 

Maar hoe ziet die functie mondriaanLine() er dan uit?

void mondriaanLine(int myStartX, int myStartY,
    String myDirection, int myLength) {
    rectMode(CORNER);
    color(0);
    fill(0);
    int strokeWeight=7;
    if(myDirection == "hor") {
                // horizontal line
        rect(myStartX, myStartY,myLength,strokeWeight);
    } else     // it must be vertical
    {
        rect(myStartX, myStartY,strokeWeight,myLength);
    }
}

If Then Else {}

Kijk nog eens naar deze basis truuk uit het programmeren. Als de conditie waar oplevert, dan wordt het if{} gedeelte uitgevoerd. Anders, else{}, het tweede gedeelte.

Wat is void?

void: een functie die geen resultaat terugstuurt naar de aanroep. Binnen de { } mag je doen wat je wilt. Let op de namen en hoofdLetters van de parameters.

Opdracht: Maak het schilderij af

Op dit moment doet het programma het volgende. Gebruik nog een aantal aanroepen van mondriaanLine() en  color() , rect() om hem af te maken volgens het voorbeeld.

In de volgende opdracht gaan we de vlakken laten bewegen.

ps voor als je deze nog miste:

void setup() {  // this is run once.   
     // canvas size (Integers only, please.)
      size(300, 700); 
     // set the background color 
  background(255); 
  // limit the number of frames per second 
  frameRate(30); 
}