Roc Zadkine. Javascript Car. Door: K.Bakker versie 1.0
|
|
- Krista Meyer
- 5 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Roc Zadkine Javascript Car Door: K.Bakker versie 1.0
2 mei 2016 distributielijst versie historie versie datum auteur Opmerkingen k.bakker
3 inhoudsopgave 1. Project benodigdheden 3 2. Benodigdheden 3 3. Project Demo 3 4. Shapes! 4 5. Laat de auto bewegen 7 6. RequestAnimationFrame 9 7. Hoe de beweging controleren met COSAS 9 8. Afronden van het project 14
4 1. Project benodigdheden Basis kennis Javascript Basiskennis HTML Begrip van cosinus, sinus en tangens 2.Benodigdheden Geschikte afbeelding van een auto 3.Project Demo Introduction to the Canvas De komst van HTML5 heeft enorme veranderingen veroorzaakt in het ontwikkelen van websites. Met de introductie van het CANVAS concept gecombineerd met enige slimme Javascript programmeertechnieken zijn legio mogelijkheden geopend om creatieve en slimme grafische effecten en animaties te maken. In dit project zullen we simpel spel maken waarbij een auto-afbeelding gebruikt wordt als voorwerp dat bestuurd gaat worden. Feitelijk wordt het CANVAS element gecreëerd door de CANVAS TAG. Daarnaast zijn een aantal JavaScript functies beschikbaar om het element te manipuleren. Bestudeer onderstaand HTML code met het<canvas> tag. 01.<!DOCTYPE html> 02.<html> 03. <head> 04. <title>hello world</title> 05. <meta charset="utf-8"> 06. <script type="text/javascript" src="main.js"></script> 07. <style type="text/css"> 08. #canvas{ 09. border: 2px solid #333; 10. } 11. </style> 12. </head> 13. <body> 14. <canvas id="canvas" width"800" height="800"> 15. <!-- fun things happen here --> 16. </canvas> 17. </body> 18.</html>
5 4.Shapes! Het CANVAS element wordt gebruikt om een een afbeelding te plaatsen. Dit doen we door de context van het betreffende CANVAS element te bepalen met het JavaScript. Er zijn 2 variabelen die het CANVAS element gaan manipuleren. Canvas = document.getelementbyid( canvas ) Context = canvas.getcontext( 2d ) 1.window.onload = function() 2.{ 3. var canvas = document.getelementbyid("canvas"); 4. var context = canvas.getcontext("2d"); context.fillstyle = "rgb(100, 200, 120)"; 7. context.fillrect(10, 10, 55, 50); 8.} Hier gebeuren dus een aantal zaken: 1. window.onload start de grafische functie. 2. Verwijs naar het CANVAS element in het HTML-document (DOM verwijzing) 3. Zet de grafische context naar 2D 4. fillstyle voor een bepaalde kleur. Hiermee geven we kleur aan het object. 5. fillrect() om een vierhoek te tekenen met coördinaten x1,y1,x2,y2. in de kleuren van fillstyle
6 Het proces om een afbeelding te importeren is anders aangezien we feitelijk geen afbeelding maken met JavaScript maar een grafisch object gebruiken. 1. We maken eerst een image object 2. Het kenmerk src verwijst naar de bestandsnaam van de afbeelding 3. Het image object wordt gekoppeld aan de CANVAS context met de begin coördinaten x en y. De x,y-coördinaten worden gebruikt om de auto-afbeelding te plaatsen op het scherm. Het scherm begint altijd linksboven.
7 Het JavaScript wordt dus uitgebreid met Var car = new Image() Car.src = auto.jpg // de naam die jij gegeven hebt aan het bestand Context.drawImage( car, x, y) 01.window.onload = function() 02.{ 03. var canvas = document.getelementbyid("canvas"); 04. var context = canvas.getcontext("2d"); var x = 0; 07. var y = 0; var car = new Image(); 10. car.src="myimage.jpg"; 11. context.drawimage(car, x, y); 12.} De auto wordt nu getoond op het scherm!
8 5.Laat de auto bewegen Dit lijkt veel op de techniek die in een tekenfilm gebruikt wordt. De afbeelding worden keer op keer opnieuw getoond met kleine veranderingen waardoor een beweging gesimuleerd wordt. 1. Toon de afbeelding op het scherm. Afbeelding import en koppelen aan CANVAS element 2. Open een tekengebied 3. Herhaal stap 1 en 2 oneindig. Het openen van een schoon tekengebied doe we als volgt; 1.context.clearRect(0, 0, 800, 800); Bovenstaande code zal alles schoonmaken op het gebied met de coordinaten 0,0,800,800 Voor stap 3 hebben we oneindige loop nodig die iedere keer kleine veranderingen kan aanmaken. Om de veranderingen te zien is een soort pauze nodig iedere keer nadat de functie doorlopen is. Dit doen we met de setinterval methode van JavaScript. In de onderstaande code wordt de auto iedere keer een stukje verder verplaats setinterval( function(), { draw() }, 30 ) start iedere 30 seconden de draw-functie (teken auto) De draw functie plaatst de auto iedere keer een stukje lager door de variabele y++. Context.drawImage(car, x, y )
9 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; canvas = document.getelementbyid("canvas"); 07. context = canvas.getcontext("2d"); var moveinterval = setinterval(function() 10. { 11. draw(); 12. }, 30); 13.}; function draw() 16.{ 17. context.clearrect(0, 0, 800, 800); 18. var car = new Image(); 19. car.src="myimage.png"; 20. context.drawimage(car, x, y); y++; 23.} Dit loopt oneindig door. We kunnen dit stoppen de door onderstaande code toe te voegen. clearinterval moveinterval 1.clearInterval(moveInterval);
10 6.RequestAnimationFrame Naast de functie setinterval, biedt HTML5 een JavaScript API met de naam requestanimationframe. Deze API heeft meerdere mogelijkheden om animaties met CANVAS te stoppen welke in tabs die niet direct zichtbaar zijn. Deze API is echter niet in alle browser te gebruiken. 7.Hoe de beweging controleren met COSAS De functie van SINUS en COSINUS worden veel gebruikt in animaties om de beweging zo natuurgetrouw mogelijk weer te geven. Dit is noodzakelijk indien we de auto over een schuine lijn laten bewegen met een bepaalde constante snelheid. We hebben dit nodig omdat de commando regel Context.drawImage(car, x, y) een afbeelding alleen maar kan plaatsen op absolute coördinaten. X en Y zijn horizontaal en verticaal. Voor verticaal bereken je : Y = cos (hoek) maal (schuine lijn). Voor horizontaal bereken je : X = sin (hoek) maal (schuine lijn). De hoek moet berekend worden naar radialen met Math PI/180 Bekijk de code nu
11 Bekijk de code nu 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. speed = 5; 06. angle = 30; canvas = document.getelementbyid("canvas"); 09. context = canvas.getcontext("2d"); car = new Image(); 12. car.src="myimage.png"; var moveinterval = setinterval(function() 15. { 16. draw(); 17. }, 30); 18.}; function draw() 21.{ 22. context.clearrect(0, 0, 800, 800); context.drawimage(car, x, y); x += speed * Math.cos(Math.PI/180 * angle); 27. y += speed * Math.sin(Math.PI/180 * angle); 28.} Zoals je ziet worden twee waarden gebruikt voor de beweging; speed én angle. Hiermee wordt de horizontale en verticale beweging bepaald.
12 Hoe krijgen we snelheid (speed) en de hoek (angle). Dit wordt geregeld door de API rotate methode De oplossing werkt als volgt; 1. Bewaar de huidige staat van de context. En centreer op halve hoogte en breedte. 2. Roteer de context door bovenstaande code 3. Teken de afbeelding opnieuw maar doe dat houdt rekening met de hoogte en breedte van het object zodat het object roteert om zijn eigen zwaartepunt. 4. Herstel de bewaarde context. Het object is nu geroteerd. 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. speed = 5; 06. angle =25; canvas = document.getelementbyid("canvas"); 09. context = canvas.getcontext("2d"); 10. car = new Image(); 11. car.src="myimage.png"; var moveinterval = setinterval(function() 14. { 15. draw(); 16. }, 30); 17.}; function draw() 20.{ 21. context = canvas.getcontext("2d"); 22. context.clearrect(0, 0, 800, 800); x += speed * Math.cos(Math.PI/180 * angle); 25. y += speed * Math.sin(Math.PI/180 * angle); context.save(); 28. context.translate(x, y); 29. context.rotate(math.pi/180 * angle); 30. context.drawimage(car, -(car.width/2), -(car.height/2)); 31. context.restore(); 32.}
13 We hebben nu een auto die kan bewegen en roteren. Het volgende dat we nodig hebben is de besturing vanuit het toetsenbord. Het toetsenbord geeft zogenaamde scancodes af. Deze scancodes zoeken we uit om in het spel te bepalen wat er moet gebeuren bij bijvoorbeeld pijltje naar rechts. De keycodes die het JavaScript bij een windows event leest voor het numeriek deel van het toetsenbord zijn; W: S: A: D: Windows-event: én event.keycode. window.addeventlistener("keydown", keypress_handler, false); Door de waarde in event.keycode worden 2 variabelen bepaald ; mod en angle. Let op de wijziging in de berekening van de beweging:. x += (speed*mod) * Math.cos(Math.PI/180 * angle); 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. speed = 5; 06. angle = 0; 07. mod = 0; canvas = document.getelementbyid("canvas"); 10. context = canvas.getcontext("2d"); 11. car = new Image(); 12. car.src="myimage.png"; window.addeventlistener("keydown", keypress_handler, false); 15. window.addeventlistener("keyup", keyup_handler, false); var moveinterval = setinterval(function()
14 18. { 19. draw(); 20. }, 30); 21.}; function draw() 24.{ 25. context = canvas.getcontext("2d"); 26. context.clearrect(0, 0, 800, 800); context.fillstyle = "rgb(200, 100, 220)"; 29. context.fillrect(50, 50, 100, 100); x += (speed*mod) * Math.cos(Math.PI/180 * angle); 32. y += (speed*mod) * Math.sin(Math.PI/180 * angle); context.save(); 35. context.translate(x, y); 36. context.rotate(math.pi/180 * angle); 37. context.drawimage(car, -(car.width/2), -(car.height/2)); 38. context.restore(); 39.} function keyup_handler(event) 42.{ 43. if(event.keycode == 87 event.keycode == 83) 44. { 45. mod = 0; 46. } 47.} function keypress_handler(event) 50.{ 51. console.log(event.keycode); 52. if(event.keycode == 87) 53. { 54. mod = 1; 55. } 56. if(event.keycode == 83) 57. { 58. mod = -1; 59. } 60. if(event.keycode == 65) 61. { 62. angle -= 5; 63. } 64. if(event.keycode == 68) 65. { 66. angle += 5; 67. } 68.}
15 8.Afronden van het project De basis van het spel heb je nu gemaakt. De achtergrond met aangepast worden zodat de auto ook echt over de weg en over obstakels kan rijden. Maak een grafische achtergrond zodat de dit echt zichtbaar wordt voor de speler. Daarnaast moet er ook een score komen voor het goed afleggen van een bekwaamheid die door de bedenker van dit spel bedacht is. tip maak een array van coördinaten die verboden zijn. Dus als de auto geplaatst wordt op coördinaten die niet mogelijk zijn volgens de achtergrond dan krijg je strafpunten. Hoe? gewoon afvragen voordat je verplaatst Bijvoorbeeld: Als x < -1 dan strafpunt Als x < 800 dan strafpunt. Als x > 30 && x < 40 dan sta je in het water en dus krijg je strafpunten.. Tip: Lees de coördinaten uit in het console.
Roc Zadkine. Javascript SpaceGame. Door: K.Bakker versie 2.0
Roc Zadkine Javascript SpaceGame Door: K.Bakker versie 2.0 juni 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker 1.0 2-2-2016 k.bakker inhoudsopgave 1. Game in
Nadere informatieHTML Graphics. Hans Roeyen V 3.0
HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.
Nadere informatieRoc Zadkine. Javascript animatie en bewegingen. Door: K.Bakker versie 2.0
Roc Zadkine Javascript animatie en bewegingen Door: K.Bakker versie 2.0 mei 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker Klant : Zadkine College Pagina 1
Nadere informatieVersie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
Nadere informatieLes 4 Snake. Een hele kleine Sprite. 1) Zie Afbeelding 1. Klik met je rechtermuisknop op sprite1. Kies vervolgens verwijderen.
Les 4 Snake Een hele kleine Sprite 1) Zie Afbeelding 1. Klik met je rechtermuisknop op sprite1. Kies vervolgens verwijderen. Afbeelding 1 2) Maak een nieuwe sprite met de knop 3) Teken vervolgens precies
Nadere informatieVakgroep CW KAHO Sint-Lieven
Vakgroep CW KAHO Sint-Lieven Objecten Programmeren voor de Sport: Een inleiding tot JAVA objecten Wetenschapsweek 20 November 2012 Tony Wauters en Tim Vermeulen tony.wauters@kahosl.be en tim.vermeulen@kahosl.be
Nadere informatieKris Merckx - 16/10/ Agnes.js - creative commons license
Agnes.js - alpha 2.5 => www.ardeco.be/agnes (testsite) Fase 1: Opzetten van de frameworkbasis (afgerond) TOETSTYPES: - meerkeuze (één of meerdere correcte antwoorden) - invuloefening - ja-neen-vragen -
Nadere informatieLes 9: formulier controle met javascript.
Les 9: formulier controle met javascript. Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side scripting is, is java client side scripting. Dwz, niet
Nadere informatieGegevens uit een database tonen
Gegevens uit een database tonen In een eerdere handleiding heb ik jullie laten zien hoe je met behulp van MySQL en phpmyadmin een database kunt opzetten. We hebben toen een database aangemaakt en gevuld
Nadere informatie0. voorkennis. Periodieke verbanden. Bijzonder rechthoekige driehoeken en goniometrische verhoudingen
0. voorkennis Periodieke verbanden Bijzonder rechthoekige driehoeken en goniometrische verhoudingen Er zijn twee verschillende tekendriehoeken: de 45-45 -90 driehoek en de 30-0 -90 -driehoek. Kenmerken
Nadere informatieHandleiding Woonz.nl iframe
Handleiding Woonz.nl iframe Woonz.nl biedt de mogelijkheid om uw actuele woningaanbod op Woonz.nl op uw website te tonen. Hiervoor dient u eerst een API-key te ontvangen van Woonz.nl, dit is een sleutel
Nadere informatieWEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK
Nadere informatie1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
Nadere informatieX. Grafische elementen
X. Grafische elementen Om u te helpen bij grafische voorstellingen heeft java een aantal grafische afbeeldingen die u kunt gebruiken. Meestal worden zij in de methode paint(graphics g) geplaatst. Zij moeten
Nadere informatie8 Word Art Teksten. De documentatie van deze API is te lezen in Bijlage P: WordArt Documentatie.
8 Word Art Teksten De tbvectorfont library maakt gebruik van alle standaard functionaliteit die de browsers bieden. Naast deze standaard functionaliteit ziet Tingly Games graag ook uitgebreidere tekst
Nadere informatieHand-out Introduction to Programming, werkcollege 7 Alex Reuneker 2013
Hand-out Introduction to Programming, werkcollege 7 Alex Reuneker (a.reuneker@hhs.nl), 2013 1. Document Object Model (DOM) DOM: DOM staat voor Document Object Model. Het DOM is een model van webpagina
Nadere informatieFuncties. Huub de Beer. Eindhoven, 4 juni 2011
Functies Huub de Beer Eindhoven, 4 juni 2011 Functies: je kent ze al Je hebt al verschillende PHP functies gebruikt: pi() om het getal π uit te rekenen. sin( 0.453 ) om het de sinus van het getal 0.453
Nadere informatieHandleiding Aansluiting beeldbank
Handleiding Aansluiting beeldbank Copyright 2014 FotoCadeau.nl Versie 1.0 Overzicht veranderen Versie Datum Verandering 1.0 22-07-2014 Oplevering eerste versie handleiding Copyright 2014 FotoCadeau.nl
Nadere informatieEigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM
Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken
Nadere informatieAutoTrack.nl. Handleiding Implementatie Voorraadlijst
AutoTrack.nl Handleiding Implementatie Voorraadlijst Basis Implementatie De nieuwe AutoTrack.nl Voorraadlijst kunt u (of uw webbouwer) implementeren door op uw website de URL die u van AutoTrack.nl heeft
Nadere informatieVoordelen: Nadelen: Benodigdheden: Programma s: Google Web Designer. Photoshop. Sublime (HTML-editor) Websites: Tinypng.com
Google Web Designer Voordelen: Sneller en makkelijker. Banners kunnen worden afgespeeld op telefoons (flash kan dit niet). Het vervangen van plaatjes kan zonder het programma op te starten. Meer FPS dan
Nadere informatieWerken met afbeeldingen in webpagina's
Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.
Nadere informatieONTWERPEN VAN INTERACTIEVE PRODUCTEN
ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend:
Nadere informatieWebsitecursus deel 3 JavaScript
Websitecursus deel 3 JavaScript A Eskwadraat WebCie www@a-eskwadraat.nl 12 oktober 2015 Introductie Twee weken geleden HTML Vorige week CSS Deze week JavaScript Javascript JavaScript (ook wel JS) is een
Nadere informatieFFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
Nadere informatieA Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Nadere informatieZoek bij Beweging de juiste functie en klik ze aan de vorige functie.
Lees eerst de beknopte handleiding van Scratch bij Uitleg leerlingen. We maken een spel waarbij de kat van Scratch probeert muizen te vangen die uit de lucht vallen. Per muis die de kat vangt krijg je
Nadere informatieStart GameMaker en open een nieuw spel (menu: Zorg ervoor dat GameMaker in Advanced Mode
1. Room Start GameMaker en open een nieuw spel (menu: Zorg ervoor dat GameMaker in Advanced Mode toolbar onder de menubalk. Links staat de resource explorer waarmee je tijdens het ontwerpen van je spel
Nadere informatieInformatica: C# WPO 5
Informatica: C# WPO 5 1. Inhoud While-loop, do while, debuggen, graphics 2. Oefeningen Demo 1: Power of 2 Demo 2: Tel totdat... Demo 3: Debug oplossing demo s 1 en 2 A: Count down A: Random counting A:
Nadere informatieGebruikershandleiding voor: Beperkte Password protectie met JavaScript
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript URL: http://home.hccnet.nl/s.f.boukes/html-2/html-202.htm INHOUD : 1. Structuur van een beveiligde site 2. Login-formulier 3. Login
Nadere informatieJarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber. Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?
Jarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow? Inleiding Dit is een eenvoudige handleiding om in javascript een simpele
Nadere informatieEen verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.
Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving
Nadere informatieInstructies Zitecraft Content Management System (CMS)
Instructies Zitecraft Content Management System (CMS) Inloggen Het CMS wordt geopend via http://zitecraft.com/login of er kan op het icoontje rechtsonder op de zite geklikt worden. Vervolgens dient het
Nadere informatieWebsitecursus deel 2 CSS
Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website
Nadere informatieHANDLEIDING INFOGRAPHIC SOFTWARE Versie 2.3 / jan 2014
HANDLEIDING INFOGRAPHIC SOFTWARE Versie 2.3 / jan 2014 Inhoudsopgave 1. Inleiding... 3 2. Systeemvereisten... 3 3. Installeren van de software... 4 4. Programma instellingen... 5 5. Importeren van een
Nadere informatieEen ASP.NET applicatie opzetten. Beginsituatie:
Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.
Nadere informatieJavascript oefenblad 1
Leer de basis van Javascript. Javascript oefenblad 1 Niels van Velzen Javascript oefenblad 1 Pagina 2 Inleiding Javascript is niet altijd even makkelijk. Vooral aan het begin is het even wennen hoe de
Nadere informatieHet installatiepakket haal je af van de website http://www.gedesasoft.be/.
Softmaths 1 Softmaths Het installatiepakket haal je af van de website http://www.gedesasoft.be/. De code kan je bekomen op de school. Goniometrie en driehoeken Oplossen van driehoeken - Start van het programma:
Nadere informatie10.0 Voorkennis. cos( ) = -cos( ) = -½ 3. [cos is x-coördinaat] sin( ) = -sin( ) = -½ 3. [sin is y-coördinaat] Willem-Jan van der Zanden
10.0 Voorkennis 5 1 6 6 cos( ) = -cos( ) = -½ 3 [cos is x-coördinaat] 5 1 3 3 sin( ) = -sin( ) = -½ 3 [sin is y-coördinaat] 1 Voorbeeld 1: Getekend is de lijn k: y = ½x 1. De richtingshoek α van de lijn
Nadere informatieVoor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Nadere informatieGoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps
Google Maps INHOUDSOPGAVE Inleiding.. 3 Een Google Map maken.. 4 Een eigen adres opgeven 7 Inzoomen op je eigenkaart. 8 Satellietbeeld op je eigenkaart. 10 Markers plaatsen. 13 Tekstballon plaatsen.. 15
Nadere informatieAPI geolocation. Ying-Hing Lam Tjebbe Marchand DP31T
API geolocation Ying-Hing Lam Tjebbe Marchand DP31T 1 Inhoudsopgave Achtergrondinformatie blz. 4 Uitleg werking blz. 5 Extra functies blz. 6 Verschillende concepten Ons concept Brondvermelding Feedback
Nadere informatieSolidworks windmolen
1 Solidworks windmolen Niveau: gevorderd www.dearchimedes.com Op vind je PDF s met daarin de basis van Solidworks. Zorg dat je de eerste twee PDF s hebt doorlopen, zodat je basisbewerkingen van Solid-
Nadere informatie<NANO> Creeren met. <code> Bouw je eigen. website
.. Creeren met Bouw je eigen website Holly, Dervla, Daniël en Sam zitten samen in de band Nanonauten. Holly speelt gitaar, Dervla keyboard, Daniël zingt en Sam speelt
Nadere informatieSchuiven van een voertuig in een bocht met positieve verkanting
Voertuigtechniek Technisch Specialist LESBRIEF Schuiven van een voertuig in een bocht met positieve verkanting Deze lesbrief behandelt positieve verkanting en centripetale kracht in relatie tot het schuiven
Nadere informatieoefeningen opstellen met GeoGebra en javascript
oefeningen opstellen met GeoGebra en javascript Er zijn heel wat verschillende mogelijkheden om GeoGebra en Javascript te combineren in het opstellen van oefeningen. Antwoorden in het applet zelf: - Je
Nadere informatieExtra: Hoe u uw website met HTML kunt verbeteren
Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel
Nadere informatieWeb building gevorderden: CSS & JavaScript. Karel Nijs 2008/11
Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11 Webbuilding gevorderden les 3 JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript
Nadere informatieAnimatie. Korte opdrachten. Tekst Hart Auto MARKETING & COMMUNICATIE - DIGITALE VORMGEVING ANIMATIE- KORTE OPDRACHTEN
Animatie Korte opdrachten Tekst Hart Auto 1 Tekst Tekstlagen - Maak een nieuw bestand: 800 px breed 200 px hoog 72 dpi kleur RGB - Typ het woord Marketing, Communicatie of Evenementen. - Kopieer dit woord
Nadere informatieZo gaat jouw kunstwerk er straks uitzien. Of misschien wel heel anders.
Spirograaf in Python Een kunstwerk maken Met programmeren kun je alles maken! Ook een kunstwerk! In deze les maken we zelf een kunstwerk met Python. Hiervoor zal je werken met herhalingen en variabelen.
Nadere informatieIntroductie in R. http://www.math.montana.edu/stat/tutorials/r-intro.pdf http://www.math.montana.edu/stat/docs/splus_notes.ps
Introductie in R R is een programmeer taal met een groot aantal voorgeprogrammeerde statistische functies. Het is de open source versie van S-plus. Wij gebruiken R dan ook omdat het gratis is. Documentatie
Nadere informatieInleiding goniometrie
Inleiding goniometrie We bekijken de volgende twee hellingen: 1 2 Duidelijk is dat de tweede helling steiler is dan de eerste helling. Ook zien we dat hellingshoek 2 groter is dan hellingshoek 1. Er bestaat
Nadere informatieLet s play baseball! Let s get ready! Voorkennis: Sprites, Lopen, Variabelen, Scores, xy. Leerdoelen: 3D illusie, Klonen
Let s play baseball! Voorkennis: Sprites, Lopen, Variabelen, Scores, xy Leerdoelen: 3D illusie, Klonen Let s get ready! Jullie weten ongetwijfeld wat het belangrijkste is van het succes van elk goed spel
Nadere informatieExacte waarden bij sinus en cosinus
acte waarden bij sinus en cosinus n enkele gevallen kun je vergelijkingen met sinus en cosinus eact oplossen. Welke gevallen zijn dat? 0, π 0, π f() = sin π π 8 9 0, g() = cos π π π 8 9 π 0, ierboven zie
Nadere informatieDe Sense HAT programmeren Je eerste computerprogramma
De Sense HAT programmeren Je eerste computerprogramma De Sense HAT is een uitbreiding voor de Raspberry Pi die speciaal voor de Astro Pi-wedstrijd is gemaakt. Met dit bord is het mogelijk om allerlei informatie
Nadere informatieHANDLEIDING PROGRAMMEREN IN PASCAL (LAZARUS)
HANDLEIDING PROGRAMMEREN IN PASCAL (LAZARUS) LES 4 In deze les gaan we een eenvoudig dobbelspelletje maken: Allereerst krijgt de speler de gelegenheid zijn/haar naam in te vullen en daarna op OK te klikken
Nadere informatieHTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?
HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.
Nadere informatieAanmaken van een lokale site kalibratie Hoe kan vanuit Trimble Access en Trimble Business Center een lokale site coordinatensysteem aangemaakt
Aanmaken van een lokale site kalibratie Hoe kan vanuit Trimble Access en Trimble Business Center een lokale site coordinatensysteem aangemaakt worden? Inleiding Dit document beschrijft de stapsgewijze
Nadere informatieHier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf.
Elke website begint met een basisstructuur. Deze basisstructuur is opgebouwd uit drie tags. Je gebruikt eerst de - tag welke aangeeft wat voor type document het is. Dan de - tag. Hier komt
Nadere informatie16.0 Voorkennis. Voorbeeld 1: Los op in 2x + 3i = 5x + 6i -3x = 3i x = -i
16.0 Voorkennis Voorbeeld 1: Los op in 2x + 3i = 5x + 6i -3x = 3i x = -i Voorbeeld 2: Los op in 4x 2 + 12x + 15 = 0 4x 2 + 12x + 9 + 6 = 0 (2x + 3) 2 + 6 = 0 (2x + 3) 2 = -6 (2x + 3) 2 = 6i 2 2x + 3 =
Nadere informatieLab Webdesign: Javascript 11 februari 2008
H2: BASISBEGRIPPEN In dit hoofdstuk zullen er enkele basisbegrippen worden behandelt PLAATSING VAN JAVASCRIPT-CODE DE SCRIPT-TAG De script-tag geeft aan dat er gebruik zal worden gemaakt van een scripttaal.
Nadere informatieHTML. Media. Hans Roeyen V 3.0
Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...
Nadere informatieIntroductie Coach 6 videometen. 1 Eerste oefening
Introductie Coach 6 videometen 1 Eerste oefening Open het programma coach6. Het pictogram vind je op het bureaublad van je pc. Je krijgt dan het onderstaande scherm te zien. Verander docent in student.
Nadere informatieAgenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?
Agenda HTML algemeen Wat is HTML? Korte historie Opbouw HTML document Aantal tags + voorbeelden Vragen 2 3 Opmaaktaal Letter Kleur Plaatjes Tabellen Formulieren Links Wat is HTML? Waarin maak je een HTML-bestand?
Nadere informatieTransformaties van grafieken HAVO wiskunde B deel 2. Willem van Ravenstein Haags Montessori Lyceum (c) 2016
Transformaties van grafieken HAVO wiskunde B deel Willem van Ravenstein 50075005 Haags Montessori Lyceum (c) 0 Inleiding In deze leerroute gaan we kijken naar goniometrische functies: De eenheidscirkel
Nadere informatieBrowseAloud Plus: dé voorleestool op websites! 1
BrowseAloud Plus: dé voorleestool op websites! 1 INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS INHOUD Informatie voor communicatiemanagers en webmasters... 2 BrowseAloud Plus: dé voorleestool op websites!
Nadere informatie8.1 Rekenen met complexe getallen [1]
8.1 Rekenen met complexe getallen [1] Natuurlijke getallen: Dit zijn alle positieve gehele getallen en nul. 0, 1, 2, 3, 4, 5, 6,... Het symbool voor de natuurlijke getallen is Gehele getallen: Dit zijn
Nadere informatieInteractief blok 2 code opdracht 6 - wireframe
Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).
Nadere informatieVOORBEREIDINGSWEEK BASISOPDRACHTEN
DEEL I VOORBEREIDINGSWEEK BASISOPDRACHTEN In deze week werk je aan een grote serie opdrachten die gereedschap zullen zijn voor de rest van de periode. Je moet zelf je eigen uitwerking maken in een soort
Nadere informatieZonnepanelen Hoe krijg je de data op je website?
Zonnepanelen Hoe krijg je de data op je website? Beste website-bezoeker, Omdat ik al heel wat vragen kreeg over het gedeelte zonne-energie op mijn website, heb ik besloten om de werkwijze die ik gevolgd
Nadere informatieHTML & CSS DEEL 1. webdesign. Programmeren met CodeAcademy
Programmeren met CodeAcademy HTML is de taal die gebruikt wordt om webpagina s te maken die jij elke dag bezoekt. Het is een logische manier om een website te structureren. Laten we kijken wat de term
Nadere informatieJavascript - antwoorden
informatica Javascript - antwoorden Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie Woudt remie.woudt@gmail.com 2013 François Vonk (Javascript geïsoleerd en major edits)
Nadere informatieOEFENINGEN PYTHON REEKS 5
Vraag 1: Interpoleren (vervolg) OEFENINGEN PYTHON REEKS 5 Bouw verder op je code van Reeks 3, vraag 4. Voeg vier constanten toe aan je code: X0 = 280, Y0 = 0, Z0 = 50 en SIZE = 8. a) Teken een kubus met
Nadere informatieMeer Blokken. 1. Dit is een functie genaamd Maximum, die twee argumenten heeft: number1 en number2.
Meer Blokken Voorkennis: SuperDojo, Snake Leerdoelen: Meer Blokken Introductie Meer Blokken zijn Scratch s manier van functies. Functies zijn een heel belangrijk concept in alle programmeertalen. Het staat
Nadere informatieTIPS EN HINTS VOOR BEGINNERS. Klik nu in de Menu balk op het menu item ELEMENT. Onder het woord Element gaat er nu vervolgens nu een sub menu open
........................................ TIPS EN HINTS VOOR BEGINNERS.................................................... Nadat u WinRail 8 heeft geïnstalleerd krijgt u automatisch een leeg werkblad waarop
Nadere informatieGame maker Tutorial Pong
Game maker Tutorial Pong Fall 2016 with gamemaker studio version 1.4 Sprites Sprites zijn kleine afbeeldingen. Je kan ze importeren of Create/Edit deze afbeeldingen. Hier maken we ze: Bal,lijn en paddels.
Nadere informatie2010-I. A heeft de coördinaten (4 a, 4a a 2 ). Vraag 1. Toon dit aan. Gelijkstellen: y= 4x x 2 A. y= ax
00-I De parabool met vergelijking y = 4x x en de x-as sluiten een vlakdeel V in. De lijn y = ax (met 0 a < 4) snijdt de parabool in de oorsprong en in punt. Zie de figuur. y= 4x x y= ax heeft de coördinaten
Nadere informatieHistorische filmrecensie Hotel Rwanda digitaal dossier klas 3V
Historische filmrecensie Hotel Rwanda digitaal dossier klas 3V Wij bekijken met elkaar de film Hotel Rwanda. In deze film komen verschillende onderwerpen van de geschiedenislessen van afgelopen schooljaar
Nadere informatieHandleiding Poll Campagne 9 december 2009 Versie 1.1
Handleiding Poll Campagne 9 december 2009 Versie 1.1 Hoofdstuk 1 - Inleiding In dit document wordt stap voor stap uitgelegd hoe de Poll campagne ontworpen dient te worden. De volgende punten worden besproken:
Nadere informatieInformatietechnologie 1. HTML: DOM, Links en Afbeeldingen. Links en afbeeldingen. Kristof Michiels
Informatietechnologie 1 HTML: DOM, Links en Afbeeldingen Links en afbeeldingen Kristof Michiels In deze presentatie DOM of Document Object Model Links (a element) Naar externe pagina's Naar documenten
Nadere informatieFoutcontrole met Javascript
Foutcontrole met Javascript Pol Van Dingenen Yannick Van Hauwe INLEIDING Het controleren van de gegevens die ingevuld zijn in formulieren is heel erg belangrijk. In de praktijk is enkel en alleen controle
Nadere informatieDe principes van unobtrusive JavaScript. Peter-Paul Koch (ppk) http://www.quirksmode.org PFCongrez, 12 april 2008
De principes van unobtrusive JavaScript Peter-Paul Koch (ppk) http://www.quirksmode.org PFCongrez, 12 april 2008 Unobtrusive JavaScript Bescheiden? Onopvallend? Unobtrusive JavaScript Volgens Wikipedia
Nadere informatieLessen wiskunde uitgewerkt.
Lessen Wiskunde uitgewerkt Lessen in fase 1. De Oriëntatie. Les 1. De eenheidscirkel. In deze les gaan we kijken hoe we de sinus en de cosinus van een hoek kunnen uitrekenen door gebruik te maken van de
Nadere informatieHoe maak je een tram in Adobe Illustrator AD en DRAW door Hector Heredia6
Hoe maak je een tram in Adobe Illustrator AD en DRAW door Hector Heredia6 Wat je gaat creëren In deze tutorial gaan we een klassieke tram maken met behulp van eenvoudige vormen in Adobe Illustrator. Als
Nadere informatieDe frameset uit de afbeelding wordt op de volgende manier gedefinieerd:
FRAMES GEBRUIKEN Met frames kan het venster van een browser zo worden ingedeeld, dat er meerdere webpagina's tegelijk getoond kunnen worden. In de afbeelding hieronder staat een webpagina met frames. We
Nadere informatieDrICTVoip.dll v 2.1 Informatie en handleiding
DrICTVoip.dll v 2.1 Informatie en handleiding Nieuw in deze versie : Koppeling voor web gebaseerde toepassingen (DrICTVoIPwebClient.exe) (zie hoofdstuk 8) 1. Inleiding Met de DrICTVoIP.DLL maakt u uw software
Nadere informatieAan de slag met het Geoloket
Aan de slag met het Geoloket Een Geoloket standaardscherm is opgebouwd uit volgende basiselementen: Linkermenu dat opengeklapt kan worden, met: Lagen: overzicht van alle lagen. De basisinventaris bevat
Nadere informatieBasis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >
Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken
Nadere informatieA Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Nadere informatieCalculus I, 19/10/2015
Calculus I, 9/0/05. a Toon aan dat de rationale functie f = 3 + 3 + voor alle 0 bekomen wordt via volgende procedure: Start met een gelijkbenige rechthoekige driehoek OAB, met B het punt, 0 op de -as,
Nadere informatieWebsite maker. Bezoek je domein om de Website maker in te stellen. De volgende melding zal zichtbaar zijn.
Aan de slag met de Bezoek je domein om de in te stellen. De volgende melding zal zichtbaar zijn. Volg de url 'administratie paneel' om in te loggen en de vervolgens in te stellen. Als eerst krijg je de
Nadere informatieConstanten. Variabelen. Expressies. Variabelen. Constanten. Voorbeeld : varid.py. een symbolische naam voor een object.
een symbolische naam voor een object. Variabelen Constanten Variabelen Expressies naam : geeft de plaats in het geheugen aan waarde : de inhoud van het object identifier : een rij van letters en/of cijfers
Nadere informatieSoftware Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License
SIRK Software Instructions for Real Kiddies (versie 0.247) De programmeeromgeving, interpreter en compiler kan je online gebruiken op www.ardeco.be/sirk Variabele Functies Functienaam Parameters Voorbeeld
Nadere informatieWerkblad Cabri Jr. Punten en coördinaten
Werkblad Cabri Jr. Punten en coördinaten Doel Onderzoeken van het coördinatenstelsel. Constructies 1. Tonen van de coördinaatsassen en construeren van een punt in het eerste kwadrant 1. Druk op [GRAPH]
Nadere informatieVersie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
Nadere informatieScratch in drie uur. Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken!
Scratch in drie uur Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken! Bernd Gärtner Nederlandse vertaling en bewerking: Martine Segers
Nadere informatieInhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
Nadere informatieWhitepaper. E-mail design best practices
Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk
Nadere informatie