Studiewijzer grafisch programmeren in object georiënteerd javascript

Voorbereiding:

• De wiskunde die je nodig hebt om de programmeeropdrachten te kunnen uitvoeren wordt behandeld in de cursus "De grondbeginselen van lineaire algebra". Het materiaal is ook als pdf te verkrijgen.
  Antwoorden op de vragen kun je hier vinden.
• Als je deze cursus op het Rijnlands Lyceum volgt, wordt de wiskunde parallel aan de programmeeropdracht behandeld. Doe jij dit geheel zelfstandig dan is aan te raden om eerst de wiskunde goed te bestuderen.
  In totaal werken we 24 lessen (inclusief toets) aan deze opdracht.

Normering voor leerlingen op het Rijnlands Lyceum:

In deze periode maak je een toets over de wiskundige grondbegrippen van de lineaire algebra. Deze toets telt voor 50% mee.
Daarnaast maak je per les programmeer opdrachten in javascript. Op een gegeven moment wordt je mondeling overhoord over de opgedane kennis. Deze overhoring telt voor 25% mee.
Als laatste maak je nog een eigen wereld, een creatief onderdeel waarmee ook nog 25% valt te verdienen.

Opdrachten:

• les 1:

  • In deze cursus programmeer je in Javascript, waarbij we een object georiënteerde benadering zullen volgen. Je bent al met objecten aan de slag geweest in de Javascript cursus. Bijvoorbeeld in de opdracht: document.getElementById('invoer1').value; gebruik je de objecten document en het element met id invoer1. Objecten hebben object specifieke functies (b.v. getElementById( ... ) ) en specifieke variabelen (b.v. value).
    Documentatie over het gebruik van objecten gedefinieerd in een klas (class) is te vinden op onderstaande websites. Vooral de Net Ninja video's zijn het bekijken waard.

    1. Wikipedia: wat is object georiënteerd programmeren
    2. Een introductie richting Object geörienteerd programmeren. Maar net iets anders dan hoe wij het aanpakken. Het idee blijft hetzelfde.
    3. Mozilla Developer Network
    4. javascript.info
    5. The Net Ninja video 5
    6. The Net Ninja video 6
    7. The Net Ninja video 7
    8. The Net Ninja video 8
    9. Een concurrent: functioneel programmeren

    Als je iets meer wilt weten over animatie in de browser dan is deze video een goed startpunt van waaruit je een beslissing kunt nemen hoe verder te gaan.

    Begrippen als conditie (if), herhaling (for) en rijen (array) worden geacht bekend te zijn. Ben je dat deels vergeten, dan raad ik ten zeerste aan om de details dan in de cursus Javascript, of bij W3schools ( if, for, array, ) te bestuderen.

  • Er zijn in deze cursus drie soorten opdrachten:
    • oriënterende
    • ontwikkelen wiskundig gereedschap
    • succes beleving
  • Neem uit de documentatie de items 1,3, 5 t/m 8 goed door.
  • Je krijgt les 1 van je docent. Les 1 betstaat uit twee documenten, canvas.tml en GraphicsApplet.js. Open canvas.tml in je browser. Verander de tekst in het voorbeeld zodat je de volgende tekst te zien krijgt:
    Meneer "naam van je docent" kan beter gaan "jouw suggestie" want van "zijn gebrek" kan hij niets!
  • Je hebt in de opdracht hierboven waarschijnlijk al gevonden dat je in de paint functie moet zijn. Deze functie zullen we nog vaak moeten aanpassen. Verander met je muis de grootte van het scherm. Wat zie je? Probeer een vierkant te tekenen dat gecentreed in het midden de helft van de breedte van het scherm en de helft van de hoogte van het scherm heeft. Gebruik daarvoor het voorbeeld van het huis.
  • Het huis wort getekend door de functie drawPolyLine. Bestudeer deze goed. Teken een ander object met deze functie
  • Het tekenen vindt plaats op een HTML canvas object. Meer uitleg over en teken instructies op het canvas vindt je op w3schools en Mozilla Developers Network
• les 2:
  • Je krijgt van je docent een tweede versie van het GraphicsApplet project. Daarin is de class MatrixLA aanwezig. MatrixLA objecten worden aangemaakt voor getallen matrices die je een programma wil gebruiken. Verder moet deze class alle methoden (=functies) gaan bevatten die nodig zijn voor het tekenen in 3D. Deze methoden bevatten onder andere alle wiskundige bewerkingen die in "De grondbeginselen van lineaire algebra" worden behandeld. Alle benodigde functies zijn al voorgedefinieerd. In MatrixLA.js staat in het commentaar boven een methode altijd wat de code moet gaan doen.
    Het is jouw taak de methoden waarnodig werkzaam te krijgen en uit te voeren. We zullen je stapsgewijs door dit proces heen leiden.
    In de theorie heb je leren rekenen. Voor het schrijven van de methoden is het noodzakelijk dat je recepten maakt om de wiskundige actie te laten verlopen. Bedenk dus altijd eerst goed welke stappen je maakt als je berekeningen met de hand maakt. Maak van deze stappen een recept en/of flowchart dat de computer moet uitvoeren.
  • Open de bestanden in het nieuwe GraphicsApplet project. Open daarna alleen je oude GraphicsApplet.js bestand en copieer zo nodig al het commentaar en je werkende code naar de nieuwe versie.
  • In de init() function van de class GraphicsApplet vind je een definitie van een kleine wereld die we gaan tekenen, waarin we gebruik gaan maken van de MatrixLa class.

          // begin van een wereld die we willen tekenen
         this.huis = new MatrixLA(
    			[
    			 [100.0,210.0,160.0,100.0,100.0,210.0,210.0],
    			 [210.0,210.0,250.0,210.0,100.0,100.0,210.0]
    			]);
          // einde van die wereld
    		

    Gebruik de methode getData() om het MatrixLA object huis te tekenen in de methode paint. (Vervang de oude code voor het tekenen van het huis op zijn kop. Dit doe je als volgt:

    		var data=this.huis.getData();
    		ctx.strokeStyle = 'blue';
    		this.drawPolyLine(data,ctx);
        

  • Maak in de init() function een een 2x2 matrixLA object met de naam roteer (zoals het huis voorbeeld hierboven) en stop daarin de waarden behorende bij een rotatie over een hoek van 1/12 π.
    Gebruik daarbij de wiskundige methoden Math.cos( "hoek in radialen" ), Math.sin( "hoek in radialen" ) en de variabele Math.PI (π dus)
    Gebruik in de methode paint de methode roteer.multiplyRight(huis) om het MatrixLA object draaihuis te maken en te tekenen.

    		var draaihuis=this.roteer.multiplyRight(this.huis);
    		ctx.strokeStyle = 'red';
    		var data=draaihuis.getData();
    		this.drawPolyLine(data,ctx);
        

    Herbruik draaihuis om het huis in een lus een volledige cirkel te laten afleggen.
  • Geef commentaar bij de functie multiplyRight in de class MatrixLA.
    Als \(A\) en \(B\) getallen matrices zijn die in het programma worden gerepresenteerd door de MatrixLA objecten MA en MB dan is het resultaat van MA.multiplyRight(MB) een matrixLA object met de getallen matrix die het resultaat is van de matrixvermenigvuldigin \(A \cdot B\) (zie theorie paragraaf 3.3).
  • Maak de functie multiplyLeft.
    Als \(A\) en \(B\) getallen matrices zijn die in het programma worden gerepresenteerd door de MatrixLA objecten MA en MB dan is moet het resultaat van MA.multiplyLeft(MB) een matrixLA object zijn met de getallen matrix die het resultaat is van de matrixvermenigvuldigin \(B \cdot A\) (zie theorie paragraaf 3.3)..
• les 3: In deze les gaan we het huis om een ander punt draaien dan de oorsprong. Daartoe is het nodig een translatie te programmeren. Je doet dat voorlopig nog in de euclidsiche twee dimensionale ruimte zoals in opgave 13 en 14 in de tekst.
  • Je krijgt van je docent een derde versie van het GraphicsApplet project. Daarin zijn de opdrachten uit les 2 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • Het huis uit de vorige opdracht hebben we geroteerd om de oorsprong. Nu willen we het draaien om het punt \(M = \left(\begin{array}{c} 100 \\ 125 \end{array}\right)\). In voorbeeld 4 van paragraaf 4.5 uit de theorie staat hoe je dat wiskundig moet aanpakken. Lees deze theorie dus eerst door.
    In de code moet dus een translatie worden geëplementeerd. Maak daartoe een 2x1 double[][] transleerdata en stop daarin de vector waarden behorende bij de translatie die \(M\) naar de oorsprong verplaatst en maak daarmee het object MatrixLA transleer.
    Voor de terugweg na roteren moeten we weer een translatie matrix hebben. We moeten daartoe de vector met -1 vermenigvuldigen.
  • In de class MatrixLA is ook de methode multiplyScalar(c,use_this) voorgedefinieerd. Als input is er getal c waarmee we een matrix vermenigvuldigen. Als use_this true is moet de vermenigvuldiging in de aanroepende matrix worden bewaard. Anders moet een nieuw MatrixLA worden gemaakt om het resultaat in op te slaan.
    De methode moet ieder getal in de matrix vermenigvuldigen met getal \(c\) (zie theorie paragraaf 3.2).
  • Maak met behulp van multiplyScalar het object MatrixLA transleerterug.
  • In de lineaire algebra mag een vector niet bij een matrix opgeteld worden. Wij doen dat nu toch om een translatie op alle hoekpunten in tekening opgeslagen in een MatrixLA object uit te voeren. In de class MatrixLA is de methode addToCols(punt,use_this) voorgedefinieerd. Als input is er een vector punt (denk: verplaatsing) die bij iedere kolom (denk: hoekpunt) van het huidige MatrixLA object wordt opgeteld. Natuurlijk kan dat alleen als het aantal rijen van de vector overeenkomen met het aantal rijen van de matrix.
    Als use_this true is moet de optelling in de aanroepende matrix worden bewaard anders moet het resultaat in een nieuw MatrixLA object terecht komen.
    Zorg nu dat de methode bovenstaande optelling gaat uitvoeren.
  • Verander je paint methode uit de vorige les zo dat er om het punt \(M\) wordt geroteerd in plaats van de oorsprong.
• Les 4: Zet het huis rechtop.
  • Je krijgt van je docent een vierde versie van het GraphicsApplet project. Daarin zijn de opdrachten uit les 3 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • In het in les 1 aangeleverde project ben je de code c = this.canvas; tegengekomen. Met c.width en c.height kun je de dimensie van je window opvragen. Gebruik deze informatie om de tekening in les 3 rechtop te zetten.
    Je moet hiervoor uit de theorie de wiskunde in paragraaf 4.5 voorbeeld 1 implementeren.
  • In de class MatrixLA is de methode addMatrix( B, use_this) voorgedefinieerd. Als input is er een MatrixLA object B gegeven die bij het huidige MatrixLA object moet worden opgeteld. Dit kan natuurlijk alleen als beide objecten gelijke dimensie hebben. Als use_this true is moet de optelling in de aanroepende matrix worden bewaard. Zorg dat de methode doet wat die moet doen.
• Les 5 en 6: Animatie.
  In de vorige lessen hebben we een rotatie van het huis in de paint opdracht uit laten voeren. Echter alle versies werden direct getekend. Tijd om eens een draaiend plaatje te maken.
  Laat je docent de theorie van threads uitleggen.
  Ook maken we weer een stap in het in vullen van de nog lege code stukken in de MatrixLA class.
  • Je krijgt van je docent een vijfde en zesde versie van het GraphicsApplet project. In de vijfde zijn de opdrachten uit les 4 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • In de zesde versie is aan het project de nieuwe class AnimationDemo toegevoegd. Deze class gaan we gebruiken om de rotatie uit te voeren als een film. We gebruiken daartoe de functies window.requestAnimationFrame om op gezette tijden te tekenen window.performance.now() om de juiste tijd te meten. Wil je na de klassikale uitleg nog een andere uitleg zien dan kun je één van deze filmpjes bekijken ( korte toepassing, diepere betekenis 3 )
  • Zorg ervoor dat het huis iedere 50 miliseconden over \(\frac{1}{24}\pi\) wordt gedraaid om het punt \(M = \left(\begin{array}{c} 150 \\ 150 \end{array}\right)\)
  • In de class MatrixLA is de methode getTranspose() voorgedefinieerd. Deze methode moet de getransponeerde (zie theorie 3.3.2 Matrix transponeren) van een MatrixLA object leveren. Zorg dat de methode een MatrixLA object oplevert die de getransponeerde gegevens bevat.
• Les 7: Double buffering.
  In de vorige lessen hebben we een animatie van een rotatie van het huis gemaakt.
  Laat jouw docent de theorie van double buffering uitleggen.
  Ook maken we weer een stap in het in vullen van de nog lege code stukken in de MatrixLA class.
  • Je krijgt van je docent een zevende versie van het GraphicsApplet project. In de zevende zijn de opdrachten uit 6 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • Zorg ervoor dat in de animatie het middelpunt van de cirkel in de y-richting tussen de waarden 100 en 200 heen en weer beweegt met stappen van lengte 1
• Les 8: Controle.
  In de vorige lessen hebben we een animatie van een rotatie van het huis gemaakt. We gaan er nu voor zorgen dat we ook nog naar toets aanslagen kunnnen luisteren.
  Laat je docent de theorie van events en wel de events keydown, keypress en keyup uitleggen en hoe die te koppelen via document.addEventListener.
  Ook maken we de laatste stap in het in vullen van de nog lege code stukken in de MatrixLA class.
  • Je krijgt van je docent een achste versie van het GraphicsApplet project. In de achste zijn de opdrachten uit les 7 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • In de code van de achste versie zijn er canvas.htm en GraphicsApplet.js veranderd. In canvs.htm worden de events gekoppeld en in de class GraphicsApplet is de functie handleKeyPress(event) toegevvoegd. Kortom alls wat je als gebruiker met een toets wil doen moet je die in de class afhandelen.
    De code is nu zo gemaakt dat het huis en alleen het huis naar links of rechts kan worden geplaatst met behulp van de numpad toetsen 4 of 6. Je moet bij het runnen van de code dan wel even in de applet klikken.
    
    In de code is ook de methode displayInfo opgenomen die in ieder van de bovengenoemde methodes word aan geroepen. Run het project en onderzoek welke code bij de pijltjes naar rechts en links hoort.
  • Zorg er voor dat bovenstaande actie ook plaatst vindt wanneer er op de pijltjes toetsen wordt gedrukt.
  • Zorg er voor dat ook het draaipunt wordt mee verplaatst.
  • In de class MatrixLA is de laaste methode die we nodig hebben voor 3D tekenen namelijk: onvertHomToEuclid() voorgedefinieerd. Deze methode converteert de kolommen van homogene naar euclidische coördinaten door alle kolom elementen door het laatste element in een kolom te delen tenzij die nul is. Zorg dat de methode doet wat die moet doen.
  • Gegeven is de matrix \(\mathbf{P}=\left(\begin{array}{ccc} 1 & 2 & 3 \\ 4 & 8 & 12 \\ 7 & 14 & 21 \\ 1 & 2 & 3 \end{array}\right)\). De kolommen van de matrix zijn de homogene coördinaten van de punten U,V en W. Laat met behulp van convertHomToEuclid() in de functie init() van de GraphicsApplet zien dat deze punten gelijk zijn.
  • Als je nog tijd over hebt kun je ook nog translaties maken voor de overige numpad toetsen.
• Les 9 en 10: 3D.
  In deze les ga je de code uitbreiden op basis van het ATO model uit de laatste paragraaf van de theorie (p42). Speel in deze les het in de theorie voorafgaande voorbeeld na.
  • Je krijgt van je docent een negende versie van het GraphicsApplet project. In de negende versie zijn de opdrachten uit les 8 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • Je krijgt van je docent ook een tiende versie van het GraphicsApplet project. De tiende versie dient als voorbeeld voor het 3D programmeren.
    In deze versie zijn alle 2 D teken opdrachten verwijderd en is een voorbeeld aangemaakt aan de hand van het voorbeeld uit de theorie.
  • In de tiende versie van het GraphicsApplet project is een nieuwe class ProjectieMatrixLA extends MatrixLA toegevoegd. Met deze code kan van de matrix A=BKM in het ATO model de matrix M worden gemaakt.
    Vraag je docent wat inheritance betekent.
    
    Met de methode make3Dto2Dmatrix(Assenstelsel2D) kan de matrix K worden opgesteld gegeven de homogene coördinaten van de richtingsvectorenen de oorsprong.
    Zorg er voor dat je volledig begrijpt wat er in deze code gebeurd. Zet bij iedere regel code zinvol commentaar en verwijs naar de bladzijde in het theoriedocument waar de betreffende berekening wordt uitgelegd.
  • In de nieuwe GraphicsApplet zijn de functies: setViewToScherm()
    en setTotaalProjectie()
    toegevoegd. Deze functies maken achtereenvolgens de matrix B en A(=BKM).
    Deze twee functies gebruiken ander variabelen uit de class. Zoek die op en geef weer commentaar bij iedere regel code en verwijs naar de bladzijde in het theoriedocument waar de betreffende berekening wordt uitgelegd.
  • In het voorbeeld zijn het kijkpunt, het kijkvlak en het assenstelsel genomen uit het voorbeeld van de tekst op bladzijde 35 en volgende.
    De wereld die geprojecteerd wordt is de driehoek PQR = \(\left(\begin{array}{ccc} 0 & \frac{1}{4} & \frac{1}{4} \\ 2 & 2 & 2\frac{1}{4} \\ 2 & 2 & 2\end{array}\right)\)
  • Verander het voorbeeld zoals gegeven in de voorbeeld toets op bladzijde 43 uit de tekst. Laat hierbij alleen de driehoek PQR tekenen.
• Les 11: 3D.
  Je gaat een heel viervlak tekenen en latendraaien.
  • Je krijgt van je docent een elfde versie van het GraphicsApplet project. In de elfde versie zijn de opdrachten uit les 10 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • Het kijkvlak en kijkpunt blijven die van de voorbeeld toets.
  • In de code van les 11 wordt nog steeds maar één driehoek getekend. Een viervlak PQRS bestaat zoals de naam al zegt vier vlakken. In het voorbeeld bestaande uit vier driehoeken. Maak nu vier matrixen genaamd PQR, PQS, PRS en QRS. Laat huis even verwijzen naar PQR. Verzamel nu de driehoeken PQR, PQS, PRS en QRS in een array MatrixLA[] Piramide en laat die in paint tekenen. (Hint: kijk naar de manier waarop data voor matrices worden gemaakt)
  • Dit viervlak willen we draaien om de lijn door het punt \(\mathbf{P}=\left(\begin{array}{c} 2 \\ 3 \\ 0 \end{array}\right)\) evenwijdig aan de z-as (zie pagina 31 en 32 van de tekst).
    Definieer eerst een rotatie matrix \(\mathbf{R}\) in 4D voor een rotatie om de z-as in stapjes van \(\frac{1}{12}\pi\) zoals gegeven op bladzijde 31 van de tekst.
  • Definieer een translatie matrix \(\mathbf{V}\) in 4D voor een verplaatsing van het punt \(\mathbf{P}\) naar de oorsprong en ook de inverse \(\mathbf{Vinv}\) daarvan.
  • In de tekst (pagina 31 en 32 van de tekst) wordt een matrix \(\mathbf{G}\) gemaakt die in één keer de hele rotatie vastlegt. Waarom is hier die matrix gelijk aan \(\mathbf{G}=\mathbf{Vinv}\cdot\mathbf{R}\cdot\mathbf{V}\).
  • Maak \(\mathbf{G}\). Zorg dat de functie draaiVeelVlak() uit GraphicsApplet het viervlak draait met behulp van \(\mathbf{G}\). Zorg er daarna voor dat AnimationDemo op de juiste manier wordt aangezet zodat er een roterend veelvlak in beeld komt.
• Les 12: 3D.
  Je gaat een straatje maken.
  • Je krijgt van je docent een twaalfde versie van het GraphicsApplet project. In de twaalfde versie zijn de opdrachten uit les 11 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • Het kijkvlak en kijkpunt blijven die van de voorbeeld toets.
  • In de code van les 12 wordt nog steeds maar één object (de Piramide) getekend. Een wereld bestaat uit meerdere te tekenen objecten. Zo is in de code van les 12 een huis toegevoegd. Deze wordt echter nog niet getekend. Verzamel nu de piramide en het huis in een array Wereld en laat die in paint tekenen. (Hint: kijk naar de manier de Piramide en het huis zijn gemaakt )
  • Je moet nu een straat tekenen van vier dezelfde huizen vlak naast elkaar. Het handigst is natuurlijk het huis te kopiëren. Maak daartoe een translatie matrix

             this.Vh=new MatrixLA([[1,0,0,0],[0,1,0,4],[0,0,1,0],[0,0,0,1]]);
    	  

    (Wat doet deze matrix?) en zorg dat je met deze matrix 3 kopiën maakt en toevoegd aan het Wereld object.
  • Kun je nu ook een straat maken met huizen aan de overkant?
• Les 13: 3D.
  In deze laatste les laat je de kijker door de wereld bewegen. In de vorige lessen heb je van het ATO model gekeken naar A (projectie en scherm) en de O ( de te tekenen objecten). In deze les concentreren we op T of wel de transformaties die je uit wil laten voeren door de kijker. In deze les kijk je alleen naar bewegingen van de kijker zoals naar voren of naar achter lopen en draaien afhankelijk van toetsaanslagen door de kijker. (In een spel zouden we nog ander acties kunnen zijn zoals objecten maken, verwijderen ).
  Wat je in de code moet doen is de wereld veranderen terwijl de kijker telkens het zelfde kijkpunt en kijkvlak heeft. Als de kijker naar voren loopt moet dus de wereld dichter bij komen. Als de kijker nar rechts draait draait de wereld naar links.
  • Je krijgt van je docent een dertiende versie van het GraphicsApplet project. In de dertiende versie zijn de opdrachten uit les 12 verwerkt.
    Kopieer code uit de nieuwe versie die je de vorige les niet hebt kunnen maken. Hier krijg je dus geen punten meer voor. Mocht je de vorige les punten in het documenteren hebben gemist dan kun je die nu nog scoren. Je moet echter vandaag wel weer nieuwe code produceren en documenteren. Maak dat je prioriteit nummer één.
  • Het kijkvlak en kijkpunt blijven die van de voorbeeld toets.
  • De kijker navigeert met de pijltjes toetsen: pijl omhoog is naar voren lopen; pijl omlaag is naar achter lopen; pijl naar links is draaien naar links over \(\frac{1}{24}\pi\); pijl naar rechts is draaien naar rechts over \(\frac{1}{24}\pi\).
    Definieer de 4x4 MatrixLA objecten naarVoor, naarAchter, draaiLinks en draaiRechts. Maak slim gebruik van getInverse();
  • Activeer weer het luisteren naar toetsaanslagen. In de code voor het luisteren naar de toetsen hoef nu alleen de matrix T te vermenigvuldigen met je actie. (waarom ?)
  • Zorg dat na het indrukken van de toets Home de kijker weer op de uitgangspositie terug komt.
• Les 14: 3D.
  
  • Je krijgt van je docent een vertiende versie van het GraphicsApplet project. In de veertiende versie zijn de opdrachten uit les 13 verwerkt.
    
  • Misschien heb je aan het eind van deze serie lessen opmerkingen en tips voor je docent over hoe hij/zij het beter had kunnen aanpakken om jou (en of medeleerlingen) het begrip over het programmeren in 3D en de vaardigheden in Java bij te brengen. Gaarne ontvangt hij/zij deze schriftelijk.
  • Tijd om nu je eigen creatie te maken. Voeg zoveel mogelijk uitdagende objecten en animaties toe aan je applicatie.
  • Je hebt nu alle basis stappen gemaakt. Je kunt tot het einde van deze periode je docent laten zien wat je allemaal in je mars hebt. Misschien wil je wel laten zien dat je kijker een sprong kan maken, of kan gaan liggen, of naar boven of beneden kan kijken, of een ruit kan inslaan of een paal kan neerzetten, of ........