Welkom bij de cursus Apps om in te lijsten. Dit is de eerste van vier lessen waarin de wereld van beeld door code zullen betreden. In deze eerste les gaan we kijken naar Processing zelf. Daarna gaan we zelf aan de slag om dingen aan te passen in een voorbeeld script. Zo leer je dat experimenteren op andersmans code een snelle manier is om nieuwe dingen te leren en heb je aan het einde van de les meteen iets leuks op je scherm staan.

Aan de slag met Processing

Het doel van deze cursus is niet dat je na de vierde les een spel als GTA V kunt gaan maken. Het is natuurlijk helemaal prima als je dat wel kunt, maar wij hebben in beginsel een iets minder stressvol ambitieniveau voor ogen. Het lijkt ons gaaf als we na de vierde les iets van beeld kunnen genereren op het tablet.

Er zijn heel veel manieren om kunst te maken door middel van code, maar deze cursus is veel te kort om alle mogelijkheden te benoemen, laat staan behandelen. Wat wij gaan doen is Java programmeren in Processing. Dat is een programmatje dat je gratis kunt downloaden voor alle grote besturingssystemen en waarmee je snel tot zichtbaar resultaat kunt komen. Op de website van Processing kun je onder Exhibition heel veel voorbeelden zien van werk gemaakt in Processing.

Omdat Processing ook gebouwd is vanuit een educatief standpunt, heeft allemaal handige tools, een goede online documentatie en veel expert die online mensen verder helpen met hun vragen. Daarom zal het niet moeilijk voor je om handvatten te vinden hoe je verder kan met Processing als je klaar bent de workshop.

Installeer Processing door het te downloaden vanaf de Processing-website, let op dat als je aan de slag wil met Processing draaien op Android apparaten, dat versie 2.03 de laatste versie is die zonder problemen draait.

Processing interface

De interface is simpel, zodat je snel aan de slag kan. De belangrijkste middelen om je programma te laten starten en stoppen staat in de toolbar. De text editor is het deel waar je je programmacode schrijft. De overige delen zijn op dit moment nog niet zo belangrijk.

Een van de belangrijkste dingen om te onthouden is de handleiding van Processing. Deze kun je in de taakbalk vinden onder Help -> Reference voor een versie de werkt zonder internet. Maar ook de Processing website heeft een Reference-pagina beschikbaar. De pagina legt uit hoe je (bijna) alles in Processing kan doen, inclusief voorbeeld code. Dit is dus een plek waar je veel tijd gaat doorbrengen.

aq_block_20

Functies

Misschien heb je al wel eens gehoord dat je met programmeren vaak te maken hebt met functies. Over dit principe gaan wij nu niet uitwijden, maar om te kunnen werken in Processing is het belangrijk er twee te kennen, te weten setup en draw. Met setup definieer je als het ware het canvas en een aantal uitgangspunten. Met draw vertel je de computer wat het uiteindelijk moet tekenen (vandaar de naam). Alles dat binnen de accolades wordt geplaatst hoort bij die functie.

Een ander belangrijk verschil is dat de functie setup maar een keer wordt uitgevoerd. Terwijl draw tot zestig keer per seconde herhaalt wordt. Maar daar komen we later op terug.

 void setup(){
        //Accolades zijn deze haakjes
        //Alles binnen deze haakjes hoort bij de functie setup
    }
    
    void draw(){
        //Accolades zijn deze haakjes
        //Alles binnen deze haakjes hoort bij de functie draw
    }

Variabelen

Variabelen ken je misschien uit de wiskunde. Variabelen bestaan uit een naam waar je een waarde in kan stoppen. In ons geval zullen het vooral namen zijn van getallen. Zo kan een variabele hoogte bijvoorbeeld de ene keer staan voor 10 en de andere keer voor 20 (pixels). De naam van een variabele kan van alles zijn, maar het is altijd wel handig om ze een naam te geven die ergens op slaat.

int getal = 3; //Int staat voor interger, of een heel getal
    float kommaGetal = 3.5; //float is een komma getal
    String tekst = "Drie"; 
    // String is een tekst en schrijf je altijd met een hoofdletter
    boolean aanUit = true; 
    // boolean kun je zien als een lichtknopje en 
    // heeft twee waardes true of false.

Met variabelen kun je ook rekenen zoals:

Dit heeft het volgende als resultaat:

  int getal1 = 3; 
    println("getal1: "+getal1);
    int getal2 = getal1 + 1;
    println("getal2: "+getal2);
    int getal3 = getal1 + getal2;
    println("getal3: "+getal3);

Let op!
Let op dat processing hoofdletter gevoelig is dus dat "getal1" niet hetzelfde is als "Getal1". Verder zie je in de code hier boven het commando println, dit is handig om te zien wat de waarde is van een bepaalde variabele als je het programma draait.

Aan de slag

Omdat je het snelst leert doe het gewoon te doen, gaan we aan de slag! En dat doen we door deze simpele "sketch" (zo heet een programma in Processing). Aan te passen tot iets anders

Download de sketch hier en pak hem uit. Wij gaan aan de slag met het de simpele variant. De advanced versie is een mooi startpunt als je klaar met de workshop en dieper in programmeren wil duiken. Open de alife_simple map en dubbelklik op alife_simple.pde. Als je nu op de play knop drukt zie je iets wat lijkt op deze sketch hieronder.

Deze sketch is qua werking heel simpel. het zijn een aantal vierkanten die op het moment dat ze de rand van het scherm raken aan de andere kant weer verschijnen. Maar de sketch is zo ingericht dat er veel opties zijn om aan de sleutelen. Door dingen te proberen in andermans code leer je vaak heel veel, dus laten we in de code duiken om te zien wat we tegenkomen.

Als eerste zie je veel regels beginnen met //. Deze regels zijn ook grijs gekleurd in tegenstelling tot de andere regels. Dit zijn namelijk zogenaamde comments. Regels die door de computer worden genegeerd en bedoelt zijn als hulpmiddel voor programmeurs om de code van andere programmeurs te begrijpen. Je code voorzien van comments is ook een goed idee voor jezelf omdat je zo over 6 maanden oude code nog steeds begrijpt door je eigen aanwijzingen.

Na een aantal regels met comments zien we dit blok met verschillende variabelen:

// Verander deze waardes voor grappige effecten
int numberOfCells = 50; // het aantal blokjes op het scherm
int cellMinimalSize = 20; // minimale grootte van een blokje 
int cellMaximumSize = 50; // maximale grootte van een blokje
float cellMinimalSpeed = 1; // minimale snelheid van een blokje
float cellMaximumSpeed = 3; // maximale snelheid van een blokje
boolean clearScreen = true; // maak het scherm leeg na elke tekenbeurt
boolean drawRectangles = true; // zet dit op false om cirkels te tekenen
boolean shakyCells = false; // als je dit op true zet krijgen de blokjes Parkinson

Dit soort blokken zie je heel veel in Processing sketches en dit zijn de plekken waar de fundering voor het geheel wordt gelegd. Je ziet bijvoorbeeld het aantal vierkantjes dat getekend gaat worden, of de maximale snelheid die blokjes mogen reizen. Het aan passen van deze variabelen heeft vaak direct effect op de werking.

Verander het stukje code links eens in het stukje rechts.

int numberOfCells = 50; // het aantal blokjes op het scherm
int numberOfCells = 20; // het aantal blokjes op het scherm

Als je de code nu afspeelt zie je dat het veel rustiger is op je canvas.

Omdat je de code zonder heel veel kennis van programmeren gaat veranderen is het handig om na elke verandering de code even af te spelen met de play knop of te zien of het nog werkt. Als her in plaats van een werkend programma er een foutmelding in het rood ziet, dan gaat er iets mis. Gelukkig kun je met ctrl+z altijd nog een stap terug

Naast het vaak uitvoeren van je code is het opslaan onder verschillende namen ook een goed idee. Zo heb je op het laatst een leuk overzicht van je experimenten.

Verder kun je tijdelijk regels code ook veranderen in een comments om zo regels binnen het programma te houden zonder dat het programma ze uitvoert. Dit is vooral handig om variaties op bestaande code te testen zonder dat je de originele regels weggooid.

Verander nu een aantal getallen in dit blok en zet een aantal van de boolean variabelen van true naar false en andersom. Je zult zien dat je tot steeds hele andere plaatjes uit komt.

//int numberOfCells = 50; 
   int numberOfCells = 30; 

Dat je bij het veranderen van getallen komt tot andere resultaten, lijkt logisch. Maar hoe zit dat met die boolean varibelen. Hoe valt dat besluit bij programma's om iets wel of niet te doen als dingen true of false zijn.

Dat gebeurd in zogenaamde if-statements. Naast functies en variabelen zijn if-statement heel belangrijk. Een if-statement is eigenlijk niets anders dan zeggen als 'dit, dan dat'. Ze zeggen niet eens wat er dan gebeurt, maar puur dat er iets gebeurt.

Als we iets doorscrollen naar beneden in de code komen wij bijvoorbeeld het volgende stuk tegen.

Hier zie je een if-statement die reageert op de drawRectangles variabele die je bovenaan zag staan. Als deze op true staat dan tekent hij een vierkantje, te zien aan de functie rect(). Als dat niet zo is, dus als drawRectangles op false staat. Dan voert hij het blok code uit dat bij else staat, namelijk de functie ellipse(). Met het tekenen door middel van rect() en ellipse gaan we overigens de volgende les mee aan de slag.

if (drawRectangles == true) {
      // drawRectangles staat op true, teken vierkantjes
      rect(cell.x, cell.y, cell.size, cell.size);
    } else {
      // drawRectangles staat op false, teken cirkels
      ellipse(cell.x, cell.y, cell.size, cell.size);
    }

Naast dat if statements reageren op boolean variabelen met een betekenis van true of false. Kun je ook if statements allerlei vergelijkingen laten maken met getallen. Zoals je hiernaast kan zien.

Je bent nu wat aan het spelen geweest met code, maar het lijnt niet zo mooi als hij de oorspronkelijk broncode. Code die mooi ingesprongen is leest beter doordat je in een oog opslag kan zien wat nog wel bij een bepaald deel van de code valt. Gelukkig helpt Processing je hier mee met de functie 'auto-format' die automatisch je code goed doet inspringen. Druk op ctrl+t of cmnd+t op een Mac en je zult zien dat je code er meteen een stuk netter uitziet.

int getal1 = 50;

//Als getal1 precies 50 is dan....
if(getal1 ==50){
    //Voert het deze code uit
    println("getal1 is gelijk aan 50");
}

//Als getal1 precies 50 is of groter dan 50
if(getal1 >=50){
    //Voert het deze code uit
    println("getal1 is groter dan of gelijk aan 50");
}

//Als getal1 groter is dan 50
if(getal1 >50){
    //Voert het deze code uit
    println("getal1 is groter dan 50");
}

//Als getal1 alles behalve 50 is dan....
if(getal1 !=50){
    //Voert het deze code uit
    println("getal1 is gelijk aan 50");
}

Huiswerk voor de volgende les

  1. Speel vooral verder met de code, we zijn heel nieuwsgierig waar mensen allemaal op uitkomen. Kijk vooral in de Reference als je dingen niet meer weet.
  2. Probeer de Android SDK te installeren via deze pagina. Ik zal de volgende keer eerder aanwezig zijn om mensen te helpen bij wie dit niet gelukt is.
  3. Kijk eens naar deze video. Hier zie je Raes (een van de makers achter Processing) zijn Processing-serie uitleggen. Deze serie werken bestaan allemaal uit het generen van beelden door kleine elementen gedragsregels mee te geven.

    Het is niet heel spetterend vertelt. Maar het laat zien hoe je heel ingewikkeld werk kan opbreken in kleine beschrijfbare stappen. Deze manier van analyseren gaan we mee aan de slag in les 2 en 3.