Hallo! Vandaag gaan we een Plasma effect maken.
p5.js is een gratis en open-source JavaScript-bibliotheek.
We beginnen met een voorbeeld in de p5.js editor en gaan die aanpassen zodat je het resultaat ziet.
Elke opdracht bevat uitleg, en dingen die jij zelf moet doen. De dingen die jij zelf moet doen, staan aangegeven met ▶▶▶.
We beginnen met een ontwerp dat verandert tussen licht en donker Grijs, en jouw taak is om het veelkleurig te maken:
Als je helemaal klaar bent, zal het eindresultaat er ongeveer zo uit zien:
Opdracht 0: Open p5js editor
De programmeeromgeving waarin we gaan werken heet p5js.
▶▶▶ Open p5.js door op de link te klikken: https://editor.p5js.org/coderdojo-enschede/sketches/RhEVMuwXV
Er zijn meerdere dingen te zien:
- De uitvoeren knop (linksboven - driehoek) - Uitvoeren schets
- De stop knop (linksboven - vierkant) - Stop schets
- Code (links)
- Het resultaat (rechterkant)
In de volgende opdracht gaan we de code aanpassen, uitvoeren en het resultaat bekijken aan de rechterzijde.
Dat was gemakkelijk! Nu komt het echte werk!
Opdracht 1: Kleuren
Tot nu toe is alles Grijs, maar dat kunnen we veranderen.
▶▶▶ Ga naar links. Er staat 'Opdracht 1'.
Door gebruik te maken van const hebben we een paar variabelen ingevuld die ons helpen bij het maken van het ontwerp.
Als je goed kijkt, zijn er twee belangrijke variabelen: kleuren en richting.
Ze beschrijven welke kleuren worden gebruikt en hoe deze kleuren na verloop van tijd veranderen
▶▶▶ Verander const kleuren = [0, 0, 0]; naar const kleuren = [42, 84, 126];
▶▶▶ Verander const richting = [1, 1, 1]; naar const richting = [1, 1, -1];
▶▶▶ Klik op de uitvoeren knop om de veranderingen te zien (De Driehoek links bovenin)!
Opdracht 2: Functies f1, f2 en f3
Functies zijn als magische dozen. Je kunt een functie bijvoorbeeld twee getallen geven, en de functie telt ze voor je op.
We gaan nu naar een aantal functies kijken in dit project.
▶▶▶ Ga naar links. Er staat 'Opdracht 2'.
▶▶▶ Ga naar de functie f1.
Heb je het gevonden? Goed!
▶▶▶ Verander return startWaarde * 1; naar return startWaarde * sin(x / factor);
▶▶▶ Ga naar de functie f2
Heb je het gevonden? Geweldig!
▶▶▶ Verander return startWaarde + startWaarde * 1; naar return startWaarde + startWaarde * cos(y / factor);
▶▶▶ Ga naar de functie f3.
Heb je het gevonden? Perfect!
▶▶▶ Verander return startWaarde + startWaarde * 1; naar return startWaarde + startWaarde * sin(sqrt(x * x + y * y) / factor);
▶▶▶ Klik op de uitvoeren knop om de veranderingen te zien (De Driehoek links bovenin)!
Er lijkt niks veranderd te zijn, toch? Laten we naar de volgende opdracht kijken...
Opdracht 3: Functies s1, s2 en s3
▶▶▶ Scroll maar naar beneden aan de linkerkant. Er staat 'Opdracht 3'.
We hebben 3 functies genaamd s1, s2 en s3, die allemaal hetzelfde doen: return 1.
We gaan de code voor alle 3 functies aanpassen.
▶▶▶ Ga naar de functie s1.
▶▶▶ Verander return 1; naar return sin((i * PI) / 25 + PI / 2);
▶▶▶ Ga naar de functie s2.
▶▶▶ Verander return 1; naar return sin((i * PI) / 50 + PI / 4);
▶▶▶ Ga naar de functie s3.
▶▶▶ Verander return 1; naar return sin(((64 - i) * PI) / -50 + PI / 8);
▶▶▶ Klik op de uitvoeren knop om de veranderingen te zien (De Driehoek links bovenin)!
Opdracht 4: Text positie
We hebben een tekst die nog niet zichtbaar is. Dat gaan we veranderen.
▶▶▶ Ga naar links. Er staat 'Opdracht4'.
▶▶▶ Verander let textX=-50; naar let textX=50;
▶▶▶ Verander let textY=-100; naar let textY=100;
▶▶▶ Klik op de uitvoeren knop om de veranderingen te zien (De Driehoek links bovenin)!
Opdracht 5: CoderDojo teken
De laatste stap is om een Coderdojo teken toe te voegen aan de tekst!
▶▶▶ Ga naar links. Er staat 'Opdracht 5'.
▶▶▶ Verander text('CoderDojo', textX+sin(textI/60)*50, textY+cos(textI/60)*25); naar text('☯️CoderDojo', textX+sin(textI/60)*50, textY+cos(textI/60)*25);
Het enige verschil tussen de twee is het ☯️ icoon.
▶▶▶ Klik op de uitvoeren knop om de veranderingen te zien (De Driehoek links bovenin)!
Het is gelukt! Goed gedaan!