Hier kunt u de opdrachten zien die we in de les hebben gemaakt voor Computer vision. We zijn aan de slag gegaan met het programma Processing 2.2.1 waarmee je door middel van code schrijven, interactieve en niet interactieve uitingen kan maken. U kunt op het plaatje zelf klikken om deze te vergroten.
Oefening 1
Door de code wordt in het zwarte veld onderaan(de console) de zin “ik kan goed tellen” geschreven.
Oefening 2
Je ziet nu dat de tekst “ik kan goed tellen” niet maar één keer wordt afgedrukt in de console,
maar er elke seconde een aantal regels bijkomen waarop dezelfde tekst staat. Dit komt doordat
alles binnen de draw functie elke seconde dat het programma draait een aantal keren (bij iedere
schermverversing) wordt uitgevoerd.
Oefening 3
Ellipsen en cirkels met behulp van de ellipse functie. De cijfers 100 tussen de haakjes achter ellipse(ook wel parameters genoemd) staan voor de afstand waarop de ellipse moet staan vanaf de linker en boven rand van het veld. Door de laatste twee parameters (40,50) aan te passen, kun je de vorm van de ellipse bepalen. Wanneer de laatste parameters gelijk zijn aan elkaar, zal de vorm altijd een cirkel worden. Dit gaat als volgt:
Oefening 4
Maar hoe telt Processing nu eigenlijk vanaf de linkerkant en vanaf de bovenkant? Met andere woorden: begint het midden van de cirkel in het voorbeeld op honderd pixels vanaf de bovenkant van het werkvenster, of begint de hoek nu op honderd pixels vanaf de bovenkant van het werkvenster? Wanneer je niet instelt, met behulp van de functie ellipseMode(), hoe de positionering moet gebeuren, dan telt Processing vanaf het midden van de cirkel.
Je kunt de functie als volgt gebruiken:
ellipseMode(CORNER);
Wanneer we na de bovenstaande programmaregel een ellips tekenen met behulp van de ellipse
functie, zal het beginpunt van de ellips de linkerbovenhoek van een denkbeeldig vierkant om de
cirkel zijn. Wanneer we, in plaats van CORNER , CENTER als parameter voor de ellipseMode
functie gebruiken, zal het beginpunt het midden van de ellips zijn. Zie het verschil tussen de
onderstaande afbeeldingen:
Oefening 5
– Als we kleur van de zwarte lijn om de cirkel willen aanpassen naar bijvoorbeeld rood kan dat door middel van de programmaregel stroke(255,0,0);. Hierbij staan de parameters voor R G B die weer staan voor de primaire kleuren(rood, geel, blauw).
– Wanneer we geen lijn om de cirkel willen, gebruiken we de functie noStroke.
– Ook de binnenkant van de cirkel kunnen we van kleur laten veranderen. Dit doen we aan de hand van fill(255,0,255);.
Oefening 6
– De functie line kent vier parameters. We gebruiken de functie op de volgende manier: line(30, 20, 85, 75);
De eerste twee parameters staan voor de x- en y-coördinaten van het beginpunt, de laatste twee parameters staan voor de x- en y-coördinaten van het eindpunt. De code line(30, 20, 85, 75); betekent dus dat er een lijn getrokken zal worden die
begint op 30 pixels vanaf de linkerzijde van het werkvenster en 20 pixels vanaf de bovenzijde van het werkvenster en doorgetrokken wordt tot 85 pixels vanaf de linkerzijde van het werkvenster en 75 pixels vanaf de bovenzijde.
– De lijn loopt netjes schuin naar beneden. Wanneer we een dikkere lijn willen, kunnen we dit instellen met behulp van de functie strokeWeight . Deze werkt als volgt: strokeWeight(5);
Met de gegeven programmaregel wordt de lijn dus in plaats van één pixel dik, wel vijf pixels dik!
Oefening 7
Om je code dynamischer te maken kan het handig zijn om ook variabelen te gebruiken. Een variabele kun je zien als een virtueel doosje met een naam waar je tijdelijk een waarde in op kan slaan. We noemen het opslaan van waardes in een variabele, het declareren van variabelen. Met int diameter; Hebben we nu een variabele gemaakt van het type int (integer, een heel getal) en deze de naam diameter gegeven. Er zit nu nog geen waarde in de variabele. Een waarde toekennen aan de variabele doen we als volgt: int diameter = 10. Om te verwijzen naar een variabele en de waarde die er in is opgeslagen, gebruik je de naam van de variabele. In de programmaregel ellipse(100, 100, 50, 50); vervangen we nu de 50, 50 voor de naam diameter om deze waarde toe te voegen. We hebben nu de hoogte en breedte van de ellips vervangen door de variabele.
Oefening 8
In dit voorbeeld zien we dat je ook makkelijk een animatie met processing kan maken. Doordat
void draw steeds opnieuw word aangeroepen wordt de grafische output ook steeds ververst.
Door het schrijven van een eenvoudig stukje code wordt er bij elke nieuwe aanroep een waarde 1
opgeteld bij de diameter van de cirkel. Hierna heb ik dit proces versnelt door in plaats van waarde 1, de waarde 5 op te tellen. Vervolgens heb ik hem ook interactief gemaakt. Bij het laatste voorbeeld zie je dat als ik met mijn cursor(pijltje) over de bal heen ga, deze groter wordt. Wanneer ik dan mijn linker muisknop indruk en over de bal heen ga, krimpt deze weer.
Oefening 9
Bij deze oefening ga ik een Live Cam Test doen aan de hand van gezichtsherkenning. Op die manier kan ik een vorm of zelfs plaatje over mijn gezicht plaatsen die mijn gezicht dan ook volgt als ik beweeg.
Annemarie Vermaesen 