Oefenen

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

Oefenen

Open HGAO1.js in de browser. Je ziet dan het eindresultaat hiernaast Jij moet deze figuur namaken. Open HGAO1U.js in notepad++. Hierin is al een beginnetje gemaakt.

Voer de volgende taken uit:

• Voeg linksonder een cirkel in met een diameter van 176 pixels en RGB-kleurcode 175,150,150.
• Voeg rechtsboven een vierkant toe met zijdes van 225 pixels en een rand van 40 pixels dik met RGB-kleurcode 125,75,25. Zorg dat het vierkant geen vulkleur heeft en achter de driehoek komt te staan.
• Zorg dat de driehoek voor 50% doorzichtig is, zodat je het het kader van het vierkant weer volledig kunt zien.

Open HGAO2.js in de browser. Je ziet het eindresultaat hiernaast. Je moet deze figuur namaken. Open HGAO2U.js in jouw editor. In de code zijn al een aantal keuzes gemaakt:

• rectMode(CENTER) en  angleMode(DEGREES) worden in de setup aangeroepen.
• translate(30 + 40,100); zorgt er daarom voor dat het eerste vierkant (met zijdes van 80 pixels) 30 pixels van de linkerrand van het canvas wordt getekend.
• Om de volgende drie vierkanten te tekenen, wordt telkens dezelfde combinatie van twee regels (met rect en translate) gebruikt.

Programmeer de volgende stappen:

• Geef de vier getoonde vierkanten een rand van 5 pixels dik van de kleur lemonchiffon.
• Zorg dat elk vierkant ten opzichte van zijn voorganger (vanaf links gezien) 15° met de klok mee gedraaid is.
• Gebruik push en pop om te zorgen dat translate(80 + 30,0); steeds alleen voor een horizontale verplaatsing zorgt.
• Heb je een vast patroon gevonden dat zich herhaalt? Breid dan het aantal vierkanten uit naar 8.

• Open HGAO3.js in de browser. Beweeg je muis, om tot een eindresultaat te komen, vergelijkbaar met hiernaast. Je moet dit tekenspel namaken. 
• Open HGAO3U.js in notepad++. Regel 9, 14 & 16 zijn leeg.

• Voeg in regel 9 code toe die gebruik maakt van de variabele hoogte (zie regel 1) om een silver rechthoek te tekenen over de onderste helft van het canvas.
• Voeg in regel 14 code toe die op de plaats waar de muis zich

bevindt een cirkel met diameter 10 tekent.

• Voeg in regel 16 een coderegel toe om het programma af te maken volgens het voorbeeld.

Open HGAO4.js in de browser. Je ziet een race tussen twee auto’s. Hiernaast zie je daarvan een momentopname. Open HGAO4U.js in notepad++. 

In de code zijn al een aantal keuzes gemaakt:

• Er zijn variabelen aangemaakt voor de coördinaten en de snelheid van de twee auto’s.
• Er is een variabele finish gemaakt gedeclareerd, die aangeeft voor welke waarde van x de auto de finish heeft bereikt.
• Er zijn tekstregels gemaakt, om de actuele x-positie van beide auto’s te kunnen weergeven. Hierbij is voor auto B de functie round gebruikt.
• Er is een functie tekenAuto geprogrammeerd, waarmee de twee auto’s kunnen worden getoond.

Voer de volgende taken uit:

• Roep de functie tekenAuto twee maal aan (regel 24 en 25 zijn hiervoor leeg gelaten) om auto A (met kleur cadetblue) en auto B (met kleur tomato) te tekenen.
• Laat de auto’s rijden. Gebruik hierbij de gedeclareerde variabelen voor de snelheid van de auto’s.
• Gebruik constrain om te zorgen dat de auto’s niet verder kunnen rijden dan de door finish aangegeven x-positie.
• Zorg dat behalve de x-positie ook de snelheid van de auto’s wordt getoond.
• In de eindversie gaat auto B steeds sneller. Declareer bovenaan een variabele acceleratieB met de waarde 0.01.
• Zorg dat de snelheid van B elke loop toeneemt met acceleratieB.
• Zorg dat de snelheid van B met één cijfer achter de komma op het scherm wordt getoond.

Open HGAO5.js in de browser en maak kennis met Toby. Open HGAO5U.js in notepad++. Vanaf regel 17 wordt Toby getekend.

Voer de volgende taken uit:

• Maak een functie tekenToby om Toby te tekenen. Zorg dat aan de functie een parameter s kan worden meegegeven, die aangeeft op welke schaal Toby moet worden getekend.
• Roep tekenToby aan. Gebruik hierbij als argument de variabele schaal die bovenaan is gedeclareerd.
• Vanaf regel 10 is een if-else-structuur geprogrammeerd. Pas deze aan, zodanig dat de variabele schaal met 1% toeneemt als er op de muis wordt geklikt en anders de waarde 1 krijgt.

Open HGAO6.js in de browser. Gebruik de pijltjestoetsen (links en rechts) om Toby veilig te laten landen tussen de obstakels zoals hiernaast. Je moet dit spelletje namaken.

Open HGAO6U.js in notepad++. 

In de code zijn al een aantal keuzes gemaakt:

• Er zijn variabelen gedeclareerd voor de positie van Toby.
  
• Er zijn functies gemaakt om Toby en de obstakels te tekenen.

Voer de volgende taken uit:

• Zorg dat Toby valt. Elke loop moet hij één pixel naar beneden vallen.
• Zorg dat de achtergrond wit wordt als Toby de onderkant van het canvas raakt. Roep op dat moment noLoop aan, zodat Toby stopt met bewegen.
• Voeg code toe, zodat Toby tijdens het vallen naar links en rechts kan bewegen. Het drukken op een pijltjestoets moet steeds een stap van 5 pixels verplaatsing opleveren.
• Beperk Toby’s beweging: zorg dat Toby links en rechts altijd volledig binnen het canvas blijft.
• Zorg dat de achtergrond zwart wordt als Toby een obstakel raakt. Roep op dat moment noLoop aan, zodat Toby stopt met bewegen.

• Open HGAO7.js in de browser. Je ziet een raster met een willekeurig stippenpatroon, zoals hiernaast. Laad de pagina enkele keren opnieuw, zodat je ziet dat zowel de positie als de kleur van de stippen willekeurig is.
• Open HGAO7U.js in notepad++. In de code zijn al een aantal keuzes gemaakt:
• Er is een variabele aantal gedeclareerd die aangeeft hoeveel stippen er moeten worden getekend.
• De functie tekenRaster tekent op dit moment één cel van het raster in kolom 4 van rij 1.
• De functie tekenStip tekent op dit moment één stip met kleur darkgoldenrod in kolom 4 van rij 1 met behulp van de parameters x en y.

Voer de volgende taken uit:

• Pas de functie tekenRaster aan, zodat een raster van 9 × 9 cellen wordt getoond. Gebruik hiervoor een vaste herhaling.
  
• Pas regel 11 aan, zodat de stip in het midden van een willekeurige cel in het raster wordt geplaatst.
  
• Gebruik een vaste herhaling om meerdere stippen in het raster te plaatsen. Gebruik hierbij de variabele aantal.
  
• Pas de functie tekenStip aan, zodat de stippen een willekeurige kleur krijgen.
  
• Verklaar dat je bijna nooit werkelijk 50 stippen te zien krijgt.
• EXTRA: Wil je een scherm met dansende stippen? Haal dan de regel met noLoop weg. Voeg eventueel frameRate(10); toe aan de setup, om te voorkomen dat je hoofdpijn krijgt…