logo CoderDojo

P5.js - Art

Kunst maken in de browser.

Introductie

Naast kunst met Scratch en Python, kun je ook kunst programmeren met Processing.

Er is ook een Processing variant voor in de browser. Deze heet p5.js. We gaan er in deze instructie mee aan de slag. Eerst een voorbeeld van wat je ermee kunt doen:

de code bij dit voorbeeld

Favoriet van Jaap! 😉

Kopie van Sketch 422446.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var circle = 200;
var rot;
var col;
var freq = 0.000005;
var cont = 0;
var r;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(242);
    translate(300, 300);
    rotate(radians(rot));
    
    ellipseMode(RADIUS);
    for (var i=0; i<500; i ++) {
        circle= 200 + 50*sin(millis()*freq*i);
        col=map(circle,150,250,255,60);
        r=map(circle,150,250,5,2);
        fill(col,0,74);
        noStroke();
        ellipse(circle*cos(i), circle*sin(i),r,r);
        rot=rot+0.00005;
    }
}

Editor

p5.js is een Javascript bibliotheek. Deze kun je in elke webpagina integreren. Je kunt “sketches” schrijven in een editor op je PC en het resultaat dan bekijken in een webbrowser. Het is echter makkelijker om een editor in de browser zelf te gebruiken. Ga daarvoor naar deze editor.

De volgende instructies en voorbeelden gaan ervan uit dat je deze editor gebruikt.

De basis

p5.js sketches hebben de volgende basis:

1
2
3
4
5
function setup() {
}

function draw() {
}

Er zijn twee functies die worden aangeroepen door de p5.js bibliotheek:

In de setup() functie zet je éénmalige instellingen, zoals bijvoorbeeld een vaste achtegrondkleur. In de draw() functie dingen die veranderen, zoals bijvoorbeeld een verschuivende kubus.

Het volgende voorbeeld tekent een draaiend vierkant:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function setup() {
    createCanvas(150, 150);
}

function draw() {
    background(255);
    translate(width / 2, height / 2);
    rotate(frameCount/50);
    rect(-26, -26, 52, 52);
}

We zullen stap voor stap door de code heen lopen:

Opdracht 1: neem de code over in de editor en kijk of er een draaiend vierkant wordt getekend door op de speel knop te klikken.
Opdracht 2: vervang waarde 255 op regel 6 eens met een andere waarde tussen 0 en 256. Wat gebeurt er met een lage waarde? En wat met een hoge?
Opdracht 3: misschien vraag je je af waarom de achtergrond iedere keer opnieuw moet worden getekend? Door // voor de regel te zetten, maak je er commentaar van en wordt het niet meer uitgevoerd. Zet // voor regel 6. Wat gebeurt er?
Opdracht 4: regel 8 zorgt ervoor dat het vierkant draait. Verander waarde 50 eens door 10. Wat gebeurt er? En bij een waarde van 100?
Opdracht 5: regel 9 tekent het vierkant. De eerste twee getallen -26 verschuiven het draaipunt van het vierkant horizontaal en vertikaal. De twee laatste bepalen de hoogte en breedte. Vervang de getallen 52 eens door 75. Wat gebeurt er? En als je één van de twee 52 laat en de ander veranderd naar 75?

Na het uitvoeren van deze eerste opdrachten begrijp je een beetje hoe het werkt. In de volgende hoofdstukken gaan we verder met meer voorbeelden en uitleg.

Cirkels en muis

In dit hoofdstuk gaan we kunst maken met je muis. Beweeg je muis maar eens over het grijze vlak hieronder. 😉

Stap voor stap gaan we dit nabouwen.

Tekenvlak

We beginnen met het vlak waarin we de cirkels gaan tekenen:

1
2
3
4
5
6
7
function setup() {
    createCanvas(710, 400);
    background(102);
}

function draw() {
}

Opdracht 6: neem bovenstaande code over in de editor en voer het programma uit. Je hebt nu een grijs vlak.

Een cirkel

De volgende stap is een cirkel:

1
2
3
4
5
6
7
8
function setup() {
    createCanvas(710, 400);
    background(102);
}

function draw() {
    ellipse(300, 200, 60, 60);
}

Opdracht 7: neem regel 7 over in je code en voer het programma uit. Er verschijnt nu een witte cirkel in het grijze vlak. Wat gebeurt er als je de getallen 300 en 200 veranderd? En als je de getallen 60 veranderd?

De cirkel bewegen met de muis

Om de cirkel te bewegen met de muis, moet je er voor zorgen dat de cirkel de positie van de muis volgt:

1
2
3
4
5
6
7
8
function setup() {
    createCanvas(710, 400);
    background(102);
}

function draw() {
    ellipse(mouseX, mouseY, 60, 60);
}

Opdracht 8: vervang de getallen 300 en 200 in regel 7 met mouseX en mouseY. Deze twee variabelen bevatten de horizontale positie (mouseX) en vertikale positie (mouseY) van de muis. Voor je programma uit. Beweegt de cirkel mee?

Een kleurtje voor de cirkel

Het voorbeeld heeft een gekleurde cirkel. Laten we eens een kleurtje toevoegen:

1
2
3
4
5
6
7
8
9
function setup() {
    createCanvas(710, 400);
    background(102);
}

function draw() {
    fill(color(255, 128, 0));
    ellipse(mouseX, mouseY, 60, 60);
}

Opdracht 9: voeg regel 7 toe aan je code. Welke kleur heeft de cirkel?

Het commando fill() vult het figuur dat erna wordt getekend met de kleur die wordt bepaald door het commando color(). Het commando color() heeft 3 parameters, een voor rood, een voor groen en een voor blauw. Alle drie de kleuren kunnen met een getal tussen 0 en 255 worden bepaald. 0 is geen kleur en 255 is maximaal kleur. color(0, 0, 0) komt daarmee overeen met zwart en color(255, 0, 0) met helder rood.

Opdracht 10: speel met de kleur van de cirkel door met de getallen 255, 128 en 0 op regel 7 te variëren.

De cirkel grootte afhankelijk van de snelheid

Als je de snelheid van de muis berekent, kun je die gebruiken om de grootte van de cirkel ermee aan te passen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function setup() {
    createCanvas(710, 400);
    background(102);
}

function draw() {
    let snelheid = abs(mouseX - pmouseX) + abs(mouseY - pmouseY)
    fill(color(255, 128, 0));
    ellipse(mouseX, mouseY, snelheid, snelheid);
}

Opdracht 11: voeg regel 7 toe en pas regel 9 aan. Wordt de cirkel groter en kleiner?

Op regel 7 wordt de snelheid van de muis berekend. Wil je daar meer over weten, lees dan door in onderstaande grijze vak.

Hoe bereken je de snelheid van de muis?

Op het moment dat je je muis beweegt, dan beweegt het horizontaal, vertikaal of in beide richtingen als je je muis schuin beweegt. Als je je muis langzaam beweegt, dan verschuift het een kleiner stukje per seconde dan als je het sneller beweegt.

De verschuiving die je doet, kun je berekenen door het verschil te bepalen tussen de vorige positie en de huidige. In p5.js geven pmouseX en pmouseY de vorige horizontale en vertikale positie en mouseX en mouseY de huidige.

De horizontale en vertikale verschuiving kun je als volgt tekenen:

vector

Een schuine beweging, zoals getekend in het plaatje, is het resultaat van een horizontale en vertikale verschuiving. De lengte van de schuine pijl is dan een maat voor de snelheid. Hoe langer de pijl, hoe groter de verschuiving en dus hoe groter de snelheid.

De code bevat een berekening voor de maat van de snelheid (niet 100% correct, maar voldoende voor dit doel). Het telt de horizontale verschuiving (abs(mouseX - pmouseX) op bij de vertikale verschuiving (abs(mouseY - pmouseY)).

De kleur afhankelijk van de snelheid

Naast de grootte van de cirkel is ook de kleur in het voorbeeld afhankelijk van de snelheid van de muis. We hebben de snelheid al berekend, nu gaat we die gebruiken bij het inkleuren van de cirkel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function setup() {
    createCanvas(710, 400);
    background(102);
}

function draw() {
    let snelheid = abs(mouseX - pmouseX) + abs(mouseY - pmouseY)
    let kleur = color(255 - snelheid, snelheid, 128 + snelheid)
    fill(kleur)
    ellipse(mouseX, mouseY, snelheid, snelheid);
}

Met het commando color op regel 8 kunnen we een kleur maken. Het commando heeft 3 parameters. Het eerste bepaald de hoeveelheid rood (R), het tweede de hoeveelheid groen (G) en het derde en laatste de hoeveelheid blauw (B). Deze RGB waarde zorgt samen een mengsel van de drie kleuren. Daarbij zorgt color(255, 255, 255) voor wit (alle kleuren maximaal) en color(0, 0, 0) voor zwart (alle kleuren uit).

In het voorbeeld wordt voor rood de snelheid van 255 afgetrokken. Dus, hoe sneller de muis beweegt, hoe minder rood er in de kleur zit. Bij de middelste kleur, groen, is hoeveelheid direct afhankelijk van de snelheid. Hoe sneller, hoe meer groen er in de kleur zit. Tenslotte zit er bij blauw een minimum van 128 in de kleur en neemt de hoeveelheid blauw toe als de snelheid van de muis toeneemt.

Tenslotte wordt de cirkel ingekleurd met het commando fill(kleur).

Opdracht 12: wissel de berekening per kleur eens met een andere kleur. Dus bijvoorbeeld 255 - snelheid voor groen in plaats van voor rood. Welke kleuren krijg je?

Tot slot

De instructie geeft je slechts een introductie van wat er mogelijk is met de p5.js bibliotheek. Naast tekenen kun je ook met geluid werken of foto’s en filmpjes.

Zie https://p5js.org/examples/ voor een overzicht van voorbeelden.

Een aantal voorbeelden die we zelf leuk vinden:

Licentie

Deze instructies worden, net als alle andere instructies van CoderDojo Nijmegen, aangeboden onder een Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Licentie.

Creative Commons License