LESSON 1: SCRIPTING
INTRODUCTIE
In deze lessenreeks werken we in zes lessen creative coding toe naar een eigen character. Maar voordat we daarmee van start gaan is het handig om eerst te beginnen met wat basis coding principes. Aan het einde van deze les zul je je eerste werkende script hebben gemaakt, wat je direct ook een beeld kan geven van het concept programmeren.
In je eerste sketch zul je kennismaken met de basisstructuur van een Processing programma, waaronder het instellen van de grootte van je schermpje, achtergrondkleuren, het tekenen van simpele vormen en het updaten van waardes voor elk frame. Nadat je deze les hebt voltooid zul je bekend zijn met de termen functies en variabelen. Het eindresultaat van de les zal een programma zijn wat er uit ziet zoals je rechts van deze tekst ziet staan.
Download Processing
STAP 1
Elke Processing sketch heeft 2 onderdelen: setup en draw. Zoals de woorden al doen vermoeden is setup verantwoordelijk voor de opbouw van je sketch en kun je met draw gaan tekenen. We beginnen met een lege setup en een lege draw, een leeg canvas dus, wat we in de volgende stappen gaan invullen. Deze sketch doet nog niets maar is wel de basis voor elke sketch die je ooit zal maken.
void setup() {
}
void draw() {
}
Setup en draw noemen we functies. De inhoud van een functie staat altijd tussen accolades: {}, waarmee je een functie opent en ook weer sluit.
STAP 2
In setup zetten we alle code die met ‘initialisatie’ te maken heeft. Een goed voorbeeld is het instellen van de grootte van het schermpje. Je ziet in de code ook dat we commentaar kunnen toevoegen. Deze code zal niet uitgevoerd worden en dient alleen ter verduidelijking. Dat is vooral handig als je snel een stukje code terug wilt vinden of om te verduidelijken welke actie er volgt uit de code die je hebt ingevuld. Je kunt commentaar schrijven door te beginnen met //.
void setup() {
size(400, 400); // window will be 400 by 400 pixels
}
void draw() {
}
STAP 3
Alles wat in draw staat wordt elk frame opnieuw uitgevoerd. Net als een film of animatie werkt je sketch ook met frames waardoor je dus kunt werken met bewegingen en transformaties. Om te beginnen kunnen we de achtergrond van het schermpje rood maken.
void setup() {
size(400, 400); // window will be 400 by 400 pixels
}
void draw() {
background(255, 0, 0); // set a red background
}
STAP 4
In draw kunnen we ook verschillende vormen tekenen. In onderstaande code tekenen we een cirkel met de ‘ellipse’ functie van Processing. Zoals je ziet heeft ellipse een aantal eigenschappen; deze eigenschappen noemen we bij coding argumenten. In dit geval zijn de argumenten van ellipse de horizontale en verticale positie binnen het vlak en de breedte en hoogte van de cirkel die we willen tekenen. widthis de breedte van het schermpje en height is de hoogte van het schermpje.
Processing zorgt er voor dat deze variabelen automatisch de juiste waardes hebben. We willen de cirkel exact in het midden en dus voeren we in; width / 2, height / 2. width / 2 betekent dan het horizontale midden van het scherm, height / 2 het verticale midden. De laatste 2 argumenten zijn de breedte en hoogte van de cirkel, in dit geval allebei 50 pixels. Voer je hier ongelijke getallen in dan wordt je cirkel dus een ovaal.
void setup() {
size(400, 400); // window will be 400 by 400 pixels
}
void draw() {
background(255, 0, 0); // set a red background
ellipse(width / 2, height / 2, 50, 50);
}
STAP 5
Als het formaat en de positie van je cirkel is bepaald kun je hem een kleurtje geven. Dit doen we met de functie fill. De getallen die je bij fill invoert staan gelijk aan de gebruikelijke RGB kleurcodes. Als we fill hebben gebruikt wordt alles wat je daarna tekent met de fill-kleur getekend, dus elke nieuwe cirkel die je hierna zou tekenen krijgt diezelfde kleur.
void setup() {
size(400, 400); // window will be 400 by 400 pixels
}
void draw() {
background(255, 0, 0); // red background
fill(0, 255, 0); // everything that will be drawn will be green
ellipse(width / 2, height / 2, 50, 50); // draw a circle in the center of the screen
}
STAP 6
Als laatste stap kunnen we een simpele transformatie binnen onze sketch toepassen door de kleur van onze cirkel random laten veranderen. Dit doen we met behulp van de random functie. random(255) zal steeds een random getal tussen 0 en 255 pakken, hierbij staan de getallen dus ook weer voor RGB kleuren.
void setup() {
size(400, 400); // window will be 400 by 400 pixels
}
void draw() {
background(255, 0, 0); // red background
fill(0, random(255), 0); // everything that will be drawn will be randomly colored
ellipse(width / 2, height / 2, 50, 50); // draw a circle in the center of the screen
}