LESSON 3: ANIMATIE
INTRODUCTIE
In Processing kun je heel eenvoudig abstracte animaties programmeren. In deze les gaan we een stapje verder en gaan we spelen met een klein beetje wiskunde om een vorm te animeren, creative coding dus.
STAP 1
Onze basis vorm wordt voor deze les wederom een cirkel. In onderstaand voorbeeld tekenen we een cirkel in het midden van het scherm, net als in de eerste les.
void setup() {
size(400, 400);
}
void draw() {
background(0);
stroke(255); // every outline will be white
strokeWeight(5); // every outline will be 5 pixels wide
noFill(); // the inside of a shape will not have a color
ellipse(width / 2, height / 2, 50, 50); // draw a circle in the center of the screen
}
STAP 2
Voor onze animaties kunnen we gebruik maken van de sinus-functie. Sinus? De sinus en de cosinus zullen waarschijnlijk al wat bekend klinken. Deze functies worden namelijk in de wiskunde gebruikt om de verhouding van hoeken en lengtes van lijnstukken aan te geven. Denk hierbij bijvoorbeeld aan een driehoek. De sinus en cosinus heb je ook nodig om een vorm 3D te kunnen maken, want geen ruimte zonder hoeken.
De sinus-functie heeft als output een getal tussen -1 en 1.
Als we dit getal willen gebruiken om bijvoorbeeld de grootte van de cirkel te beïnvloeden moeten we dit getal ‘omzetten’ naar een getal tussen de gewenste waardes. Dit kunnen we doen met de functie map. Map heeft 5 argumenten:
- het input-getal (in ons geval wat er uit de sinus-functie komt)
- de laagste waarde van het input getal (-1)
- de hoogste waarde van het input getal (1)
- de laagste waarde van het output getal
- de hoogste waarde van het output getal
Willen we bijvoorbeeld van de range [-1, 1] naar de range [40, 300] dan doen we dat als volgt:
float output = map(input, -1, 1, 40, 300);
void setup() {
size(400, 400);
}
void draw() {
background(0);
stroke(255); // every outline will be white
strokeWeight(5); // every line will be 5 pixels wide
noFill(); // the inside of a shape will not have a color
float phase = frameCount * 0.05; // determine a ‘phase’ for the sine function
// try changing 0.05 to something else to change the speed
float radius = 75; // how big will the movement be?
float x = sin(phase); // this will be a value between -1 and 1
float radius = map(x, -1, 1, 40, 300); // transform the value to a range of [40, 300]
ellipse(width / 2, height / 2, radius, radius); // draw a circle with this radius
}
STAP 3
We kunnen ook andere parameters van de vorm animeren met behulp van dezelfde waarden. Een parameter is een variabele waaraan een bepaalde waarde wordt toegekend. Een simpel voorbeeld; je thermostaat is de parameter van je verwarmingssysteem. In deze stap gaan we dit doen voor de dikte van de cirkel-outline. We gebruiken hiervoor weer de map functie, maar dan met een andere output-range.
void setup() {
size(400, 400);
void draw() {
background(0);
stroke(255);
noFill();
float phase = frameCount * 0.015; // determine a ‘phase’ for the sine function
float x = sin(phase); // we will use this value for animating radius and lineWidth
float radius = map(x, -1, 1, 40, 300); // determine the radius
float lineWidth = map(x, -1, 1, 0, 5); // and the lineWidth
strokeWeight(lineWidth); // set the lineWidth
ellipse(width / 2, height / 2, radius, radius); // draw a circle with the radius
}