Welkom bij les 2 van de cursus Apps om in te lijsten.

Vorige keer hebben we een introductie gehad in het maken van beeld door middel van code. We hebben een aantal basisregels van programmeren behandeld en gewerkt met Processing. Vandaag nemen we een stapje terug, beginnen we bij nul en kijken we naar de volgende basis stappen:

  • loops
  • kleuren
  • vierkantjes (of andere rechthoeken) en cirkels
  • if en else

Laten we beginnen bij het begin en een vierkant tekenen op het scherm.

Zorg dat je er dit keer wat eerder bent voor de mensen die vastgelopen zijn met het installeren van de Android SDK. Check of iedereen echt zijn tablet werkend heeft. Laten we nu eerst even kijken naar wat iedereen naar aanleiding van vorige week gemaakt heeft.
Schrijf bij het uitleggen de code mee op een scherm. De invulling van veel van deze onderdelen is sterk afhankelijk van het publiek van je workshop. Als je er doorheen vliegt neem gerust de tijd om moeilijkere concepten uit te leggen zoals rectMode en ellipseMode. Als de klas al vol zit met met met Processing basiskennis kun je kijken naar push en popMatrix

Stap 1: Een vierkant

Laten we beginnen bij het begin en een vierkant tekenen op het scherm.

In Processing zet je een vierkant met de functie rect, gevolgd door vier getallen. Om te beginnen willen we de plaats aangeven x en een y coordinaat [cartesisch systeem, (0,0) is linksboven ipv midden in beeld]. Vervolgens hebben we een breedte en een hoogte nodig.

aq_block_17

Neem het stukje hieronder over en klik op play. Probeer eens een vierkant te rekenen, maar dan op een andere plek of een andere vorm.Bijvoorbeeld rechts bovenin, of precies in het midden. Probeer een wat dingen uit en lees dan pas verder.

void setup(){
    size(400,400);
    rect(100,50,20,20);
}

Ga vragen stellen: hoe maak je de rechthoek breder, groter, op een andere plek, etc. Schenk daarbij ook aandacht aan de rechterhoek omdat veel studenten niet nadenken over het punt waarbij het tekenen begint. Als je tijd over hebt laat ook ellipse ziet en het verschil hoe beiden op het scherm gezet worden

Stap 2: Flexibele code

Je merkt dat echt in het midden tekenen een hoop rekenwerk vergt, je moet rekening houden met de breedte en de hoogte van het canvas en het scherm. Dat is lastig als je te maken hebt met een programmatje dat je later misschien op een andere grootte wil uit proberen. Dit kun je oplossen door gebruik te maken van variabelen, die we ook in de vorige les zagen.

void setup(){
    size(400,400);
    rect((width/2)-10,(height/2)-10,20,20);
}

De variabelen width en height geven altijd de breedte en de hoogte van het scherm in pixels terug. Als we deze door twee delen komen we precies in het midden uit. Omdat de coordinaten die je op geeft van een vierkant overeenkomen met de linker boven hoek van een vierkant, moet je nog de helft van de opgegeven breedte en hoogte van de coordinaten aftrekken om echt in het midden uit te komen.

Hoewel dit al sneller is, is het nog steeds niet heel handig omdat elke keer als je een vierkant wil laten verschillen in grootte je op meerdere plekken de code moet aanpassen. Niet alleen bij de breedte en hoogte van rect, maar ook in de coordinaten. Dit los je op door dit ook te koppelen aan variabelen, zoals we hier onder laten zien.

float amountOfSquaresWidth =12.0;
float squareWidth;

float amountOfSquaresHeight =12.0;
float squareHeight;

void setup() {
  size(400, 400);
  squareWidth = width/amountOfSquaresWidth;
  squareHeight = height/amountOfSquaresHeight;
}

void draw() {
  //Let op hoe ik i heb verandert is x en y
  for (int y=0;y<amountOfSquaresHeight;y=y+1) {  
    for (int x=0;x<amountOfSquaresWidth;x=x+1) {
      rect(0+(x*squareWidth), 0+(y*squareHeight), squareWidth, squareHeight);
    }
  }
}

Iets wat veel mensen vergeten als je for loops in for loops plaatsen is dat de variabele i niet twee keer kan voor komen. Daarom is het belangrijk dat je in dit geval de naam i aanpast in twee verschillende namen. Ik heb hier gekozen voor x en y, waarbij x de herhalingen doet op de horizontale as en y op de verticale as.

Stap 3: Kleuren

Het raster aan vakjes is er klaar voor. Voor de kleuren pakken we het iets anders aan en laten we dat lekker over aan de computer door de kleuren te laten bepalen met de random functie. Zoals je kan herinneren lopen kleuren van 0 tot 255 dus kunnen we een willekeurige kleur maken door de volgende code.

fill(random(0,255),random(0,255),random(0,225));

Als we dit toevoegen aan het script ziet dat er als volgt uit.

float amountOfSquaresWidth =12.0;
float squareWidth;

float amountOfSquaresHeight =12.0;
float squareHeight;

void setup() {
  size(400, 400);
  squareWidth = width/amountOfSquaresWidth;
  squareHeight = height/amountOfSquaresHeight;
}

void draw() {
  //Let op hoe ik i heb verandert is x en y
  for (int y=0;y<amountOfSquaresHeight;y=y+1) {  
    for (int x=0;x<amountOfSquaresWidth;x=x+1) {
      fill(random(0,255),random(0,255),random(0,225));
      stroke(255);
      rect(0+(x*squareWidth), 0+(y*squareHeight), squareWidth, squareHeight);
    }
  }
}

Mocht je dat nou heel onrustig vinden kun je in de setup, de functie noLoop() zetten. Daardoor wordt het deel in draw niet herhaald en wordt er elke keer dat je het script start er keurig een 1025 Farben werk gemaakt. Ook zie je dat we een witte lijn om de vakjes hebben heen gemaakt, door maar een waarde op te geven bij kleuren maak je grijs waardes.

Stap 4: Bonus

Als laatste nemen we alvast een voorproefje op volgende week en gaan we kijken naar hoe we de muis kunnen gebruiken om eindeloos nieuwe 1025 farben werken te maken. Haal de noLoop() uit de setup functie weg en bekijk de mousePressed variabele op de Reference pagina.

als het deel dat de blokken tekenen in de mousePressed-statement plaatsen. Worden er alleen nieuwe kleuren gemaakt op het moment dat we de muis indrukken. Hierdoor hoeven we niet elke keer het script opnieuw op te starten op het moment dat we een nieuwe versie van ons werk willen zien.

float amountOfSquaresWidth =12.0;
    float squareWidth;
    
    float amountOfSquaresHeight =12.0;
    float squareHeight;
    
    void setup() {
      size(400, 400);
      squareWidth = width/amountOfSquaresWidth;
      squareHeight = height/amountOfSquaresHeight;
    }
    
    void draw() {
      if (mousePressed== true) {
        //Let op hoe ik i heb verandert is x en y
        for (int y=0;y<amountOfSquaresHeight;y=y+1) {  
          for (int x=0;x<amountOfSquaresWidth;x=x+1) {
            fill(random(0, 255), random(0, 255), random(0, 225));
            stroke(255);
            rect(0+(x*squareWidth), 0+(y*squareHeight), squareWidth, squareHeight);
          }
        }
      }
    }

Huiswerk

Zoals gezegd gaan we de volgende week aan de slag met de muis om interactieve werken te produceren! Maar eerst laten wat huiswerk bekijken. Kies een van de volgende werken en probeer het om te zetten naar code.