In 2022, zal ik...

De P5.js editor heeft mijn project de default-naam "Nostalgic budget" gegeven. Dat is grappig, maar niet echt een goede beschrijving van mijn project. Ik ga het hernoemen naar "In 2022, zal ik..." door op het potloodje te drukken 🖉:

Doe jij dit ook. Geef je project een nieuwe naam.

Vervolgens heb je misschien gemerkt dat boven de code, er sketch.jsstaat.

Wat denk jij dat het daar doet?

Hint

Aan de linkerkant van sketch.js, zie je een kleine pijl >. Klik op de pijl. Je project heeft meer dan één bestand!

Voorlopig zullen we de index.html en style.css bestanden niet aanraken, maar weet dat ze bestaan.

Het laatste punt onderaan is de console. Deze is zeer nuttig om onze code te herstellen. We hebben het hier later nog wel over.

In het code-gedeelte zie je twee functies: setup() en draw(). Dit zijn de belangrijkste onderdelen van je animatie. Alle animaties gemaakt met de P5.js bibliotheek hebben deze twee functies. Dat gezegd zijnde, hebben veel andere animatie-bibliotheken zeer vergelijkbare functies.

Het is SUPER MEGA BELANGRIJK om te weten waar de definitie van een functie begint en waar deze eindigt. De definitie begint met een openende accolade { en eindigt met sluitende accolade }. Alles wat tussen de twee accolades staat, is deel van de functie.

Dus de setup() functie begint op regel 1 en eindigt op regel 3.

Waar begint en eindigt de draw() functie?

Antwoord

Het laatste wat je moet weten is dat de setup() functie maar één keer wordt uitgevoerd, terwijl de draw() functie meerdere keren per seconde wordt uitgevoerd. Daar hebben we het later nog wel over.

Om ons programma te starten, is niets eenvoudiger: klik op de "Play" knop.

Merk op dat ons canvas (het Preview gebied) lichtgrijs is geworden en de vorm heeft van een vierkant:

We zullen nu de grootte en de kleur van het canvas aanpassen. Voor de grootte, moeten we naar de setup() functie gaan. Daar zie je de volgende instructie:

Dat betekent "bouw een canvas met breedte 400 pixels en hoogte 400 pixels". Wil je de breedte veranderen in 600 pixels, dan schrijf je het volgende: createCanvas(600, 400);

Start je programma opnieuw, en tada! ons canvas is nu een rechthoek.

Om de kleur aan te passen, gebruiken we de draw() functie. Je zal de volgende instructie zien: background(220);

220 is het getal dat de grijstint die je ziet, aangeeft. Vervang dit nummer door een ander nummer. Een willekeurig nummer.

Hoe dichter je bij 0 komt, hoe meer we neigen naar... zwart. Hoe zit het met wit?

In plaats van een nummer, probeer dit: 'red'

Vergeet de apostrofs ' ' rond het woord red niet. Trouwens, indien je ze vergeet en dit schrijft:

                function draw() {
                  background(red);
                }
              

---

wanneer je jouw code uitvoert, zal je zien dat de console onderaan het scherm je een Error bericht zal geven:

Meestal zijn foutmeldingen erg nuttig om onze code te kunnen verbeteren (debuggen). Hier vertelt sketch: line 6 me dat mijn fout op lijn 6 van het sketch.js bestand zit.

De boodschap toont me ook dat iets geen "geldige kleurweergave" is. Kortom, ik vergat de apostrofs rond red.

Probeer de kleur van het canvas te veranderen in blauw! Wat dacht je van lichtblauw?

Laten we beginnen met één enkel woord toe te voegen aan ons canvas 💪🏽

Hoe doen we dit? Welke instructie moet ik de computer geven?

Helaas is het niet zoals in Scratch, waar alle blokken op kleur zijn gegroepeerd.

Maar, maar, maar... er bestaat een soort woordenboek van alle instructies die de P5.js bibliotheek bevat. Dit woordenboek is te vinden op https://p5js.org/reference/

Wanneer je naar de onderkant van de pagina gaat, zul je een Typography sectie zien:

Klik op de text() instructie. De pagina is vrij lang... en in het Engels! Helaas staat bijna alles in het Engels als het op code aankomt. Het is dus beter om er meteen aan te wennen, ook wanneer dit betekent dat je een woordenboek moet gebruiken!

De uitleg begint altijd met een voorbeeld, wat zeer nuttig is om te begrijpen hoe een instructie werkt. Het eerste voorbeeld begint met de volgende regels:

textSize(32);
text('word', 10, 30);
            

We gaan deze kopiëren en plakken in de draw() functie van onze code. Tadam, het woord word verschijnt op ons canvas.

🤔 Waarom denk je dat deze code niet werkt?

Hint

Door geen regels aan je code toe te voegen, maar een paar parameters te veranderen, kan je een woord naar keuze (in plaats van 'word') laten verschijnen, het lettertype groter maken en... het woord naar het midden van je canvas verplaatsen?

Om onze animatie te laten werken, hebben we verschillende bijvoeglijke naamwoorden nodig die continu voorbij scrollen, totdat je ergens op het canvas klikt.

In JavaScript wordt een lijst van woorden geschreven met haakjes [ ]. Elk item in de lijst wordt gescheiden door een komma ,. Als je een lijst van bijvoeglijke naamwoorden wilt, wordt het zo geschreven: ['dapper', 'vriendelijk', 'stijlvol']. Merk op dat we ook hier apostrofs gebruiken rond elk bijvoeglijk naamwoord. Dit is belangrijk!

Zodra onze lijst klaar is, slaan we deze op in een variabele. Zo kan de computer deze onthouden en kunnen wij de lijst meerdere malen gebruiken in onze instructies. Hier is hoe we iets opslaan in een variabele in JavaScript:

const adjectives = ['dapper', 'vriendelijk', 'stijlvol'];

const betekent constante (of variabele)

adjectives is de naam van onze variabele (de pro’s schrijven hun variabele namen in het Engels)

het gelijkheidsteken = betekent "waarde opslaan”

['dapper', 'mooi', 'stijlvol'] is onze lijst en...

de puntkomma ; dat is het einde van onze instructie!

Je kunt de code van je variabele net voor het text() statement zetten, in de draw() functie.

In plaats van steeds "yeah" weer te geven, zal ik de random()) instructie gebruiken om de computer een willekeurig woord te laten kiezen uit de lijst van bijvoeglijke naamwoorden die ik net gemaakt heb. Probeer dit eens:

              function draw() {
                background('red');
                textSize(100);
                const adjectives = ['dapper', 'mooi', 'stijlvol'];
                text(random(adjectives), 100, 200);
              }
            

Opgepast voor je ogen!!!

We zien verschillende bijvoeglijke naamwoorden supersnel voorbij scrollen! Nochtans hebben we de computer geen duizend verschillende instructies gegeven om dit te doen.

👇🏽 Kijk wat er gebeurt als ik alle code van de draw() functie in de setup() functie zet:

setup()

Herinner je wat we eerder zeiden! De computer voert de setup()-functie slechts eenmaal uit, terwijl de draw()-functie verscheidene malen per seconde wordt uitgevoerd. Meestal is het 60 keer per seconde! Super snel!

We plaatsen onze code terug in de draw() functie en we verlagen de scrolsnelheid en het aantal keren dat de computer de draw() functie per seconde uitvoert.

Je moet het frameRate() statement gebruiken in de setup() functie. Als je dus de draw() functie 5 keer per seconde wilt laten draaien, door wat moet je dan de XXXX in deze code vervangen?

function setup() {
  createCanvas(600, 400);
  frameRate(XXXX);
}
          

🎉 Gefeliciteerd dat je zover bent geraakt!

Nu gaan we het scrollen van het bijvoeglijk naamwoord laten stoppen als we ergens op het scherm klikken.

helemaal op het einde van onze code:

function mouseClicked() {
  noLoop();
}

👇🏽 Hier is het eindresultaat:

Het Rood en het Zwart is niet slecht, maar het is misschien niet je favoriete kleurencombinatie. Tussen haakjes, gefeliciteerd als je de Frans literaire referentie herkende.

Het kiezen van mooie, harmonieuze kleuren is een hele uitdaging. Bij Techies, vinden we de coolors website erg leuk. Als je op de knop Start the generator! klikt, zal deze een willekeurig, mooi bij elkaar passend kleurenpalet voorstellen:

Als het voorgestelde palet je niet inspireert, druk dan op de spatietoets van je toetsenbord en er wordt een nieuw palet voorgesteld. Je kan dit zo vaak als je wilt herhal.

Het palet dat ik zie inspireert me en ik ga de kleur Inchworm gebruiken voor mijn tekst, en de kleur English violet voor mijn achtergrond.

Boven de naam van elke kleur, staat de code van de kleur, of nauwkeuriger gezegd, de hexadecimale code ervan. Weet je waar deze naam vandaan komt?

Hint

Dit is de hexadecimale code van de kleur die je in je project gaat gebruiken. Voor je achtergrond, in plaats van:

background('red');

kan je de hexadecimale code gebruiken, voorafgegaan door een hashtag:

background('#44344f');

Om de tekstkleur te veranderen, kan je ook de hexadecimale code gebruiken via de fill() functie.

Door te klikken op de fill() functie link, zie je enkele voorbeelden. Probeer het zelf! Als het je niet meteen lukt, hier is een kleine hint...

Hint

Het wijzigen van het lettertype (font in het Engels) gebeurt in verschillende stappen:

1. Het vinden van een leuk lettertype
2. Dat lettertype gebruiken in onze JavaScript code

Eerste stap: zoek een lettertype. Op Google Fonts kan je gratis verschillende fonts vinden.

Zodra je in Google Fonts een lettertype gekozen hebt, klik je op de knop + Select this style:

Je zou een doos als deze moeten zien verschijnen:

Kopieer het stukje code dat begint met <link href="..."

En plak het in het index.html bestand, net onder de regel waar je <head> ziet:

Vervolgens kopieer je het stukje code dat begint met font-family:

Plak dit in het style.css bestand, en voeg p {} toe:

Laatste stap: het JavaScript! Voeg in het bestand sketch.js de volgende regel toe aan de code van de setup() functie:

            function setup() {
            createCanvas(400, 400);
            textFont("Syne Tactile");
          }
          

Gefeliciteerd!!! Je hebt zojuist je eerste animatie in JavaScript gecodeerd!

Aarzel niet om het te delen door naar het menu File te gaan en vervolgens op Share te klikken:

Je kan de link "Present" kopiëren:

En deze integreren in een post, met de hashtag #womenindigital!

Het is je misschien opgevallen dat het scrollen van de woorden niet perfect regelmatig is. Soms lijkt de animatie te "bevriezen" op een woord. Kan je raden waarom?

Hint

Er zijn twee mogelijke oplossingen:

1. We blijven de woorden willekeurig kiezen, maar als het gekozen woord hetzelfde is als het vorige, dan kiezen we een ander woord.
2. We laten de woorden scrollen in de volgorde van onze lijst. Wanneer we aan het eind van de lijst komen, beginnen we weer bij het begin.

Hier zijn een paar manieren om de tweede oplossing te coderen. Ten eerste, om de woorden in de volgorde van onze lijst (array) te laten scrollen, kunnen we de index van de elementen in onze lijst gebruiken.

              
                const adjectives = ['dapper', 'vriendelijk', 'stijlvol'];
                // INDEX               0           1             2

                adjectives[0]  // 'dapper'
                adjectives[1]  // 'vriendelijk'
              
            

In plaats van willekeurig een woord uit onze lijst te kiezen, kan je nu ook het eerste woord in onze lijst (index 0) kiezen: text(adjectives[0], 100, 200);

Leuk, maar niets rolt meer. We zitten nog steeds vast op het eerste woord. Om het tweede woord te krijgen, heb je text(adjectives[1], 100, 200); nodig

Nu, als je de twee regels code combineert

            
              text(adjectives[0], 100, 200);
              text(adjectives[1], 100, 200);
            
          

is het resultaat niet echt fantastisch:

We constateren: we kunnen de text() instructie niet tweemaal gebruiken in de draw() functie.

Aangezien de index moet veranderen telkens als de draw() functie wordt uitgevoerd, maken we een index variabele die we gaan verhogen.

Kijk eens naar deze code:

            
              let index = 0;
              text(adjectives[index], 100, 200);
              index++;
            
          

Op de eerste regel declareren we onze index variabele en kennen we er de waarde 0 aan toe. Op de tweede regel gebruiken we de waarde van de index variabele om toegang te krijgen tot element 0 van de adjectives lijst. Tenslotte, op de derde regel, betekent index++ dat we 1 toevoegen aan de index variabele en dat we deze nieuwe waarde in het geheugen opslaan.

Het is alsof je dit blok in Scratch gebruikt:

We voeren onze code uit en... de animatie zit nog steeds vast op het eerste woord in de lijst (op index 0).

Als je echter de console.log(index); verklaring gebruikt, zoals deze

lijkt de index naar 1 te gaan!

Als het nooit naar 2 gaat, komt dat omdat iedere keer dat de draw() functie wordt uitgevoerd (meerdere keren per seconde), de computer de let index = 0; verklaring opnieuw doorloopt. In het geheugen van de computer heeft de index variabele de waarde 0 dan 1 dan 0 dan 1 dan 0 dan 1 dan 0... Kijk:

Conclusie: we kunnen de instructie let index = 0; niet in de draw() functie laten staan Deze instructie mag maar één keer worden uitgevoerd! Waar in onze code moeten we deze verklaring volgens jou plaatsen?

Hint

Onze eerste drie woorden verschijnen, en dan niets! Als je de console.log(index); verklaring houdt, zie je de volgende foutmelding in de console:

De computer klaagt vanaf index 3. Dit is normaal aangezien er in mijn lijst geen woord is dat overeenkomt met index 3, omdat mijn lijst slechts 3 bijvoeglijke naamwoorden bevat! De laatste index is index 2.

We moeten dus voorkomen dat de computer één toevoegt aan de index variabele, als de variabele al de waarde heeft van de laatste index van de lijst. Hier is hoe je een voorwaarde in JavaScript schrijft:

            
              if (index == adjectives.length - 1) {
                // INSTRUCTIES OM UIT TE VOEREN
              }
              else {
                // ANDERE VERKLARINGEN UIT TE VOEREN
              }
            
          

In het Nederlands, betekent deze code "als (if) de index gelijk is aan (==) de lengte van de lijst met bijvoeglijke naamwoorden min één (adjectives.length - 1), voer dan deze instructies uit, anders (else), voer dan deze andere instructies uit".

Het is aan jou om de juiste instructies te vinden!!!

Onze woorden scrollen nu op volgorde en op een regelmatige manier