Roc Zadkine. Javascript animatie en bewegingen. Door: K.Bakker versie 2.0
|
|
|
- Erika Thys
- 5 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Roc Zadkine Javascript animatie en bewegingen Door: K.Bakker versie 2.0
2 mei 2016 distributielijst versie historie versie datum auteur Opmerkingen k.bakker Klant : Zadkine College Pagina 1 van 22
3 inhoudsopgave 1. Animatie Voorbeeld 4 2. Animaties en de bewegingen 5 3. De algemene constructie van het animatie script Voorbeeld 8 4. De bewegingen in wiskundige berekeningen Linear delta Power of n Circelbeweging of sinusbeweging De boog beweging Bots beweging (bounce) Elastische beweging easein, easeout, easeinout functies easeout easeinout De plotter Animatie kleur effecten Maak een animatie waarbij een bal stuitert op de grond en doorrolt CSS transities Bijlagen 20 Klant : Zadkine College Pagina 2 van 22
4 1. Animatie Een animatie vereist meestal een zogenaamd raamwerk, framework, waarbij het framework de animatie uitvoert die geprogrammeerd is. Het is echter ook mogelijk om een animatie te maken met alleen JavaScript, we noemen dit plain of pure JavaScript. De techniek van een JavaScript is essentieel om te begrijpen hoe frameworks complexe animaties kunnen uitvoeren. De basis van animaties in JavaScript Een JavaScript animatie is gebaseerd op het veranderen van de DOM element stylen van het canvas object. Deze manipulaties gebeuren in volgorde en hebben een timings effect. Je krijgt dan het effect zoals in een tekenfilm. 1 var id = setinterval(function() { 2 /* show the current frame */ 3 if (/* finished */) clearinterval(id) 4, 10) In bovenstaande code wordt door de functie setinterval een functie opgeroepen. Dit gebeurt om de 10 ms dus 100 frames per seconde. Deze timings functie is ruim voldoene om beweging te simuleren. Het is niet verstandig om dit te verkorten aangezien de CPU dan onnodig belast wordt. Een vertraging van 40 ms leidt al tot een snelheid van 24 frames per seconde hetgeen dezelfde snelheid is als een film in de bioscoop. `setinterval` in plaats van `settimeout` Het ligt voor de hand om een pauze te programmeren met settimeout. Deze oplossing is echter niet zuiver aangezien het JavaScript ook een bepaalde tijd nodig heeft om de opdrachten uit te voeren. Door de timeout functie zou de frequentie van de frame update niet zuiver zijn. De functie setinterval zorgt ervoor dat de gehele functie op vaste tijdstippen wordt uitgevoerd. Klant : Zadkine College Pagina 3 van 22
5 1.1 Voorbeeld Hierbij wordt het element verplaatst door element.style.left van 0 tot 100px. De verplaatsing is 1px per 10ms. <!DOCTYPE HTML> <html> <head> scene.add( skybox ); href="/files/tutorial/browser/animation/animate.css"> <script> function move(elem) { var left = 0 function frame() { left++ // update parameters elem.style.left = left + 'px' // show frame if (left == 100) // check finish condition clearinterval(id) var id = setinterval(frame, 10) // draw every 10ms </script> </head> <body> <div onclick="move(this.children[0])" class="example_path"> <div class="example_block"></div> </div> </body> </html> Klant : Zadkine College Pagina 4 van 22
6 2. Animaties en de bewegingen delay Tijd tussen frames (in ms, 1/1000 second). Bijvoorbeeld, 10ms duration De uitvoertijd per een animatie moet (in ms) bijvoorbeeld 1000ms start De starttijd van de animatie; start = new Date. timepassed De tijd die verlopen is vanaf de start van de animatie progress Voortgang in animatie tijd dat al gepasseerd is. Op een frame bepaald als timepassed/duration. Schaal is van 0 tot 1. Bijvoorbeeld progress = 0.5 betekent dat de halve duration gebruikt is. delta(progress) Een functie welke de huidige animatie progressie weergeeft. Bijvoorbeeld; De height property loopt van 0% naar 100%. Er volgt een linaire waarde toename. Waarden: progress = 0 -> height = 0% progress = 0.2 -> height = 20% progress = 0.5 -> height = 50% progress = 0.8 -> height = 80% progress = 1 -> height = 100% Klant : Zadkine College Pagina 5 van 22
7 Bij niet lineaire toename maar een exponentiele, dus langzame progressie en op het einde een versnelde toename. Hierdoor is de hoogte op de helft van de tijd bijvoorbeeld 25%. Waarden: progress = 0 -> height = 0% progress = 0.2 -> height = 4% progress = 0.5 -> height = 25% progress = 0.8 -> height = 64% progress = 1 -> height = 100% delta(progress) is de functie die de tijdwaarde van progress koppelt aan de aan de animatie progresse delta De animatie progressie is niet de waarde van height maar een getal tussen 0 en 1. step(delta) Deze functie neemt de waarde van delta en past dit toe. Voor het voorbeeld van de property height function step(delta) { elem.style.height = 100*delta + '%' Opsomming van de parameters: delay is de setinterval waarde duration is de tijdsduur van de animatie. progress is de voortgang of progressie van 0 tot 1. delta bepaalt de voortgang of het verschil in voortgang. step geeft de opdracht voor de uitvoering. Klant : Zadkine College Pagina 6 van 22
8 3. De algemene constructie van het animatie script function animate(opts) { var start = new Date var id = setinterval(function() { var timepassed = new Date start var progress = timepassed / opts.duration if (progress > 1) progress = 1 var delta = opts.delta(progress) opts.step(delta) if (progress == 1) { clearinterval(id), opts.delay 10) Het object opts bevat de animatie beweging opties: delay duration functie delta functie step Klant : Zadkine College Pagina 7 van 22
9 3.1 Voorbeeld 01 function move(element, delta, duration) { 02 var to = animate({ 05 delay: 10, 06 duration: duration 1000, // 1 sec by default 07 delta: delta, 08 step: function(delta) { 09 element.style.left = to*delta + "px" ) 12 De functie move() geeft de uitvoering over aan animate waarbij alle benodigde parameters doorgegeven worden. ( delay, duration, delta, step ) delta = function(p) {return p Betekent dat de animatie voortgang is constant over de uitvoeringstijd van de animatie. step Gebruikt een mapping van 0..1, teruggegeven door delta op een interval van 0..to. Dit wordt door gegeven aan de verschuiving op het object element.style.left. Gebruik: <div onclick="move(this.children[0], function(p) {return p)" class="example_path"> </div> <div class="example_block"></div> Maths is de functie in de voortgang van delta De animatie is een opeenvolging van veranderingen in de properties volgens een bepaalde regel. In dit geval is delta de regel. Verschillende waarden van delta maken de veranderingen,en dus bewegingen, dynamischer in sneheid, versnelling of vertraging. Klant : Zadkine College Pagina 8 van 22
10 4. De bewegingen in wiskundige berekeningen. Wiskundige berekeningen worden dan ook geplaatst in de functie van delta. In het voorbeeld wordt de beweging bepaald door verschillende berekeningen van delta. 4.1 Linear delta function linear(progress) { return progress Voorbeeld: <div onclick="move(this.children[0], linear)" class="example_path"> </div> <div class="example_block"></div> Klant : Zadkine College Pagina 9 van 22
11 4.2 Power of n delta is progress in n-th degree. De kwardraat functie function quad(progress) { return Math.pow(progress, 2) Graph for the quadrantic function: Als de factor n verhoogd wordt zal de snelheid accelereren. Voorbeeld van n = 5. Klant : Zadkine College Pagina 10 van 22
12 4.3 Circelbeweging of sinusbeweging Functie gebruik; waarbij de beweging een golfbeweging krijgt. function circ(progress) { return 1 - Math.sin(Math.acos(progress)) 4.4 De boog beweging Genoemd naar de beweging van een pijl in een boog die eerst teruggaat en dan versneld beweegt. Functie: function back(progress, x) { return Math.pow(progress, 2) * ((x + 1) * progress - x) Graph for x = 1.5: Klant : Zadkine College Pagina 11 van 22
13 4.5 Bots beweging (bounce) Stel je voor dat een bal valt op de grond. De bal valt dan en botst weer terug naar boven door de veerwerking totdat de energie in de veer opgebruikt is door de zwaartekracht. bounce functie doet exact het ongekeerde maar heeft hetzelfde effect. function bounce(progress) { for(var a = 0, b = 1, result; 1; a += b, b /= 2) { if (progress >= (7-4 * a) / 11) { return -Math.pow((11-6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2) 4.6 Elastische beweging Deze functie is afhankelijk van een parameter x. Waarbij x de lengte van de veerweg aangeeft. function elastic(progress, x) { return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*x/3*progress) Grafiek voor x=1.5: Klant : Zadkine College Pagina 12 van 22
14 5. easein, easeout, easeinout functies Een JavaScript framework voorziet meestal in een pakket aan delta functies. Dat wordt dan gebruikt als easein of easeout naar behoefte van de toepassing. 5.1 easeout deltaeaseout = 1 - delta(1 - progress) Voorbeeld van een Bounce beweging in easeout mode: function bounce(progress) { for(var a = 0, b = 1, result; 1; a += b, b /= 2) { if (progress >= (7-4 * a) / 11) { return -Math.pow((11-6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2); function makeeaseout(delta) { return function(progress) { return 1 - delta(1 - progress) var bounceeaseout = makeeaseout(bounce) De easeout beweging in grafiek vorm: Het rode (onder) is de easein (normal) beweging, de groene of bovenste is de easeout (time-reversed). Klant : Zadkine College Pagina 13 van 22
15 5.2 easeinout Een andere mogelijkheid is het delta effect met easeinout. if (progress <= 0.5) { // the first half of the animation) return delta(2 * progress) else { // the second half return (2 - delta(2 * (1 - progress))) De code om de waarde van delta aan te passen: The code which transforms the delta: function makeeaseinout(delta) { return function(progress) { if (progress <.5) return delta(2*progress) / 2 else return (2 - delta(2*(1-progress))) / 2 bounceeaseinout = makeeaseinout(bounce) Klant : Zadkine College Pagina 14 van 22
16 Deze transformatie voegt feitelijk twee bewegingen samen van de grafieken easein en easeout. Klant : Zadkine College Pagina 15 van 22
17 6. De plotter Om het effect van de bewegingen te verduidelijken is een plotter-script geschreven waarmee je kunt experimenteren. <html> <head> <script src="delta.js"></script> <script> function prepare(canvas) { var ctx = canvas.getcontext("2d"); ctx.clearrect(0, 0, canvas.offsetwidth, canvas.offsetheight) // clear canvas ctx.beginpath() // zero point is 20px from left, middle vertically // max is distance to 1 from zero. var zerox = 20, zeroy = canvas.offsetheight/2 var max = canvas.offsetwidth-zerox-7 ctx.linewidth = 1 ctx.font = 'normal 14px sans-serif' ctx.strokestyle = '#000' ctx.stroketext('0', zerox-15, zeroy+5) ctx.stroketext('1', zerox+max, zeroy+5) ctx.stroketext('-1', zerox-17, zeroy+max-8) ctx.stroketext('1', zerox-15, zeroy-max+15) ctx.strokestyle = '#808080' // arrow right ctx.moveto(zerox, zeroy) ctx.lineto(zerox+max, zeroy) ctx.lineto(zerox+max-5, zeroy-5) ctx.moveto(zerox+max, zeroy) ctx.lineto(zerox+max-5, zeroy+5) // arrow up ctx.moveto(zerox, zeroy) ctx.lineto(zerox, zeroy-max) ctx.lineto(zerox+5, zeroy-max+5) ctx.moveto(zerox, zeroy-max) ctx.lineto(zerox-5, zeroy-max+5) // arrow down ctx.moveto(zerox, zeroy) ctx.lineto(zerox, zeroy+max) ctx.lineto(zerox+5, zeroy+max-5) ctx.moveto(zerox, zeroy+max) ctx.lineto(zerox-5, zeroy+max-5) ctx.closepath() Klant : Zadkine College Pagina 16 van 22
18 7. Animatie kleur effecten De functie highlight veroorzaakt een kleuren verandering in de animatie. function highlight(elem) { var from = [255,0,0], to = [255,255,255] animate({ delay: 10, duration: 1000, delta: linear step: function(delta) { elem.style.backgroundcolor = 'rgb(' + Math.max(Math.min(parseInt((delta * (to[0]-from[0])) + from[0], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((delta * (to[1]-from[1])) + from[1], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((delta * (to[2]-from[2])) + from[2], 10), 255), 0) + ')' ) Klant : Zadkine College Pagina 17 van 22
19 8. Maak een animatie waarbij een bal stuitert op de grond en doorrolt. Klant : Zadkine College Pagina 18 van 22
20 9. CSS transities Bijvoorbeeld verander de kleur met CSS color met een tijdsduur van 2s. Werkt overigens niet altijd in iedere browser..animated { transition-property: background-color; transition-duration: 2s; Gebruik <style>.animated { transition: background-color 2s; -webkit-transition: background-color 2s; -o-transition: background-color 2s; -moz-transition: 2s; </style> <div class="animated" onclick="this.style.backgroundcolor='red'"> <span style="font-size:150%">click to animate (no IE, no FF<4)</span> </div> Klant : Zadkine College Pagina 19 van 22
21 10. Bijlagen Move lineair <!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="/files/tutorial/browser/animation/animate.css"> <script> function move(elem) { var left = 0 function frame() { left++ // update parameters elem.style.left = left + 'px' // show frame if (left == 100) // check finish condition clearinterval(id) var id = setinterval(frame, 10) // draw every 10ms </script> </head> <body> <div onclick="move(this.children[0])" class="example_path"> <div class="example_block"></div> </div> </body> </html> Klant : Zadkine College Pagina 20 van 22
22 Delta.js bewegingsfuncties function elastic(progress){return Math.pow(2,10*(progress-1))*Math.cos(20*Math.PI*1.5/3*progress) function linear(progress){return progress function quad(progress){return Math.pow(progress,2) function quint(progress){return Math.pow(progress,5) function circ(progress){return 1- Math.sin(Math.acos(progress)) function back(progress){return Math.pow(progress,2)*((1.5+ 1)*progress- 1.5) function sin(progress){return Math.sin(Math.PI*progress*2); function bounce(progress){for(var a=0,b=1,result;1;a+=b,b/=2){if(progress>=(7-4*a)/ 11) { return-math.pow((11-6*a- 11*progress)/ 4, 2) + Math.pow(b, 2); function makeeaseinout(delta){return function(progress){if(progress<.5) return delta(2*progress)/ 2 else return(2- delta(2*(1-progress)))/ 2 function makeeaseout(delta){return function(progress){return 1- delta(1- progress) Klant : Zadkine College Pagina 21 van 22
Roc Zadkine. Javascript Car. Door: K.Bakker versie 1.0
Roc Zadkine Javascript Car Door: K.Bakker versie 1.0 mei 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker inhoudsopgave 1. Project benodigdheden 3 2. Benodigdheden
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
Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.
Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze
Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen
Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)
DOM: attributen, styling, classes, events, timeouts en intervallen, willekeurige getallen en forms
Informatietechnologie 2 JavaScript DOM: attributen, styling, classes, events, timeouts en intervallen, willekeurige getallen en forms Kristof Michiels Belangrijkste bouwstenen tot nu toe: Werken met variabelen
David Weenink. Instituut voor Fonetische Wetenschappen ACLC Universiteit van Amsterdam. Spraakverwerking per computer.
Instituut voor Fonetische Wetenschappen ACLC Universiteit van Amsterdam AMSTERDAM CENTER FOR LANGUAGE AND C O M M U N I C A T I O N Het spectrogram Het representeert een acoustische tijd-frequentie representatie
Algoritmen en Datastructuren 1. Functies
Algoritmen en Datastructuren 1 Functies Rad van Fortuin score = 0 huidigespeler++ draai rad bankroet verlies beurt joker huidigespeler++ jokers++ rad else score += bedrag * k rad/klinker toon gok medeklinker
FFO 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
Voordelen: 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
Jarno 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
Handleiding 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
Wat is een child-theme?
Child theme Waarschuwing 1. Het maken van een child theme is relatief eenvoudig, u hebt er wel FTP toegang voor nodig bij uw provider. 2. Het is soms lastig om precies uit te vinden welke css codes u moet
Gegevens 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
Samenvatting Wiskunde Hoofdstuk 1 & 2 wisb
Samenvatting Wiskunde Hoofdstuk 1 & 2 wisb Samenvatting door J. 803 woorden 7 maart 2015 4,6 6 keer beoordeeld Vak Methode Wiskunde Getal en Ruimte Wiskunde Hoofdstuk 1 1 Lineaire verbanden Lineaire formule.
LES 6: Vijanden en dood gaan
LES 6: Vijanden en dood gaan DOEL: Je moet dodelijke slangen gaan ontwijken. Als je toch een slang raakt ga je dood en moet je opnieuw beginnen. Je geeft de slang aan het eind een leuke animatie. Start
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 5) 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.
Websitecursus 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
Javascript - 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)
Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012
Hand-out Web Technologies, werkcollege 5 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Groeperen (div- en span-elementen) : Het HTML-element div is een block-level element (zie hand-out bij het
MODULE 4 : WEBSITEX5(11)
MODULE 4 : WEBSITEX5(11) In deze benadering maken we een site met een startpagina en 3 kleine pagina s. We doen dit met een tool op de PC: WebSiteX(Versie 9 is volledig gratis, maar beperkter dan versie
Websitecursus 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
HTML 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.
Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.
1 2 Als je de Beginner en Midden HTML & CSS Sushi Kaarten hebt afgerond, dan weet je al veel over het programmeren met deze twee talen. Deze kaarten leren je hoe je al die onderdelen samenvoegt om een
Module Programmeren in Javascript
Module Programmeren in Javascript Spel: PONG Pong: uiterlijk In deze module zullen we alle onderdelen die we tot nu toe geleerd hebben samen brengen in het spel Pong. We willen dat het spel er uiteindelijk
Inleiding. Als u zelf uw website niet bijhoudt dan kan uw webmaster deze tips gebruiken.
Tips & Tricks Inleiding In dit overzicht vindt u een aantal tips die u kunt volgen. Het zijn slechts tips en adviezen dus als u of uw webmaster andere manieren hebben voor een perfect resultaat dan is
1.1 Tweedegraadsvergelijkingen [1]
![1.1 Tweedegraadsvergelijkingen [1]](/thumbs/58/42425907.jpg "1.1 Tweedegraadsvergelijkingen [1]")
1.1 Tweedegraadsvergelijkingen [1] Er zijn vier soorten tweedegraadsvergelijkingen: 1. ax 2 + bx = 0 (Haal de x buiten de haakjes) Voorbeeld 1: 3x 2 + 6x = 0 3x(x + 2) = 0 3x = 0 x + 2 = 0 x = 0 x = -2
De 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
Informatica: C# WPO 6
Informatica: C# WPO 6 1. Inhoud Timers, switch cases, combobox 2. Oefeningen Demo 1: Bounce Demo 2: Hex to decimal converter Demo 3: Debug oplossing demo 1 A: Count to 10 A: Biljarttafel A: Azerty to qwerty
Computerhandleiding Proteus PEC-7588
Computerhandleiding Proteus PEC-7588 De computerhandleiding bestaat uit de volgende hoofdstukken: De monitor Knopfuncties Werkingsinstructies Zaken die u dient te weten alvorens te trainen De monitor Er
Informatica: C# WPO 6
Informatica: C# WPO 6 1. Inhoud Timers, switch cases, combobox 2. Oefeningen Demo 1: Bounce Demo 2: Hex to decimal converter Demo 3: Debug oplossing demo 1 A: Count to 10 A: Biljarttafel A: To reverse
Hoofdstuk 1 Beweging in beeld. Gemaakt als toevoeging op methode Natuurkunde Overal
Hoofdstuk 1 Beweging in beeld Gemaakt als toevoeging op methode Natuurkunde Overal 1.2/1.3 Snelheidsgrafieken en versnellen In een (v,t)-diagram staat de snelheid (v) uit tegen de tijd (t). Het (v,t)-diagram
API 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
Eenparige rechtlijnige beweging
Eenparige rechtlijnige beweging Leerplandoelen FYSICA TWEEDE GRAAD ASO WETENSCHAPPEN LEERPLAN SECUNDAIR ONDERWIJS VVKSO BRUSSEL D/2012/7841/009 5.1.1 Snelheid B1 In concrete voorbeelden van beweging het
Een 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.
TOPIC G: RECORD TOPIC G: RECORD TOPIC G: RECORD TOPIC G: RECORD 23/12/2010 MODULE D1; <* NOOPTIMIZE + *> <* NOOPTIMIZE + *>
FROM IO IMPORT RdChar, WrChar, WrStr, WrLn,WrFixReal; VAR c1, c2, c3: RECORD re, img: REAL; WrLn; c1.re := 3.5; c1.img := -4.76; c2.re := 4.0; c2.img := 14.6; (* sum *) c3.re := c1.re + c2.re; c3.img :=
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
Inhoud. Pagina 2 van 13
Code Conventie Inhoud PHP algemeen... 3 Namen van variabelen... 3 Enkele of dubbele aanhalingstekens... 3 Globale variabelen... 3 Namen van functies... 3 Argumenten van functies... 3 Formattering... 4
AJAX (XMLHttpRequest)
AJAX (XMLHttpRequest) Ajax is hot. De meesten die met webdesign bezig zijn hebben er wel al van gehoord, veronderstel ik. Voor diegenen die er nog niet van hoorden, of nog niet mee werkten volgt hier een
VERKORTE GEBRUIKSAANWIJZING TMC 212. Toro Modulaire Controller REGENAUTOMAAT
VERKORTE GEBRUIKSAANWIJZING TMC 212 Toro Modulaire Controller REGENAUTOMAAT INHOUD Pagina Instellen van tijd en datum. 2. Bekijken of wijzigen beregeningsschema. 3. Bekijken of wijzigen programma starttijden.
2 Vraagstuk Dynamicaboek (Kermisattractie)
Kermisattractie Wisnet-HB update april 009 1 Benodigde wiskunde-onderwerpen Vectoren (eerst in de R) Poolcoördinaten (r en φ) Differentiëren (plaats, snelheid en versnelling en maximum/minimum bepalen)
E-Basic. E-Studio. E-Run Real-Time Experiment Generator. E-Merge. E-DataAid Spreadsheet Application for E-Prime Data Files
E-Studio Graphical Design Environment E-Basic Full Scripting Language E-Run Real-Time Experiment Generator E-Merge Data Merging Utility E-DataAid Spreadsheet Application for E-Prime Data Files E-Studio
Eenparige rechtlijnige beweging
Eenparige rechtlijnige beweging Leerplandoelen FYSICA TWEEDE GRAAD ASO WETENSCHAPPEN LEERPLAN SECUNDAIR ONDERWIJS VVKSO BRUSSEL D/2012/7841/009 5.1.1 Snelheid B1 In concrete voorbeelden van beweging het
Javascript 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
WEBSITE-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
Web 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
1.0 Voorkennis. Voorbeeld 1: Los op: 6x + 28 = 30 10x.
1.0 Voorkennis Voorbeeld 1: Los op: 6x + 28 = 30 10x. 6x + 28 = 30 10x +10x +10x 16x + 28 = 30-28 -28 16x = 2 :16 :16 x = 2 1 16 8 Stappenplan: 1) Zorg dat alles met x links van het = teken komt te staan;
KLIK OM TE NAVIGEREN PRODUCTIE 4 GRAFISCHE ELEMENTEN 4 RIGGING 4 ANIMEREN 4 RENDEREN 5 BACKUP 5
PRODUCTIE PROCES Wij vinden het bij Infilmer Studios belangrijk dat de klant een goed inzicht heeft in het proces. Daarom zullen we je bij elk onderdeel van de productie een overzicht geven van de processen
Game Maker 6.1. Scrolling shooter. Hoofdstuk 6.1
Game Maker 6.1 Scrolling shooter Hoofdstuk 6.1 Scrolling Shooter Een spelgenre is shooter. Je kent ze wel: Halo, de bondgames, Metroid Prime ook. Dit zijn First of Third Person Shooters. Daarnaast heb
Extra voorbeelden. 1 Objectenhierarchie. 2 Kalender
Extra voorbeelden 1 Objectenhierarchie 2 Kalender PHP EN MYSQL de basis 1.1 Uitgebreid voorbeeld van een objectenhierarchie We zullen een aantal kenmerken van objectgeoriënteerd programmeren toelichten
--> hierop worden de lessen begeleid --> hierop worden de lessen voorbereid
Les 1 Inleiding Welkom terug bij deze tweede module Drupal. Dit semester werken we verder met Drupal 8. Zo gaan we dieper in op Views, bekijken we de opties met responsieve images, webformulieren en zoveel
1.0 Voorkennis. Voorbeeld 1: Los op: 6x + 28 = 30 10x.
1.0 Voorkennis Voorbeeld 1: Los op: 6x + 28 = 30 10x. 6x + 28 = 30 10x +10x +10x 16x + 28 = 30-28 -28 16x = 2 :16 :16 x = 2 1 16 8 Stappenplan: 1) Zorg dat alles met x links van het = teken komt te staan;
S4 Monitor Gebruiksinstructies
S4 Monitor Gebruiksinstructies Introductie De WR S4 Monitor is ontworpen op basis van een combinatie van hoge technische kwaliteit en gebruiksvriendelijkheid. De S4 Monitor bestaat uit 6 Informatie en
Exercise assistant on-line
Exercise assistant on-line Onderwerpen - Introductie Exercise Assistant - On-line volgens MVC principe - Problemen bij MVC principe - Mogelijke oplossing - Richtingen onderzoek - Mogelijkheid tot meedoen
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
Internet Standaarden HC4
Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor
Deel 1: Arduino kennismaking. Wat is een microcontroller, structuur van een programma, syntax,
Deel 1: Arduino kennismaking Wat is een microcontroller, structuur van een programma, syntax, Wat is een microcontroller Wat is een microcontroller? Microcontroller = kleine dedicated computer. - Beperkt
Computerhandleiding MI-611
Computerhandleiding 1 Knopfuncties INCLINE UP Met de INCLINE UP knop verhoogt u de hellingshoek van het loopvlak. Tevens kunt u met deze knop een programma selecteren en het niveau van een programma (L1-L3)
Invloeden van schok en trillingen op product en verpakkingen
Invloeden van schok en trillingen op product en verpakkingen Er zijn diverse invloeden die schade kunnen veroorzaken aan producten tijdens transport. Temperatuur, luchtvochtigheid, trillingen en schokken.
VERKORTE HANDLEIDING CUSTOM COMMAND
VERKORTE HANDLEIDING CUSTOM COMMAND 1 Automaat componenten, 1. LCD scherm: voor tijd, programma aanduiding en algemene informatie. 2. +/On & -/Off knoppen: Om programma gegevens zichtbaar te maken. 3.
Beeldbewerking met Gimp
Beeldbewerking met Gimp Animated GIFs maken Vandaag maken we een bewegende afbeelding (om specifiek te zijn: een animated GIF) in GIMP. Niet alle programma s geven Animated GIFs correct weer. Veel programma's
Hosting. Bestelformulier en domeinnaamcontrole. Januari, 2013. WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland. w: www.wefact.nl e: helpdesk@wefact.
Hosting Januari, 2013 Bestelformulier en domeinnaamcontrole WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland w: www.wefact.nl e: helpdesk@wefact.nl Introductie Algemeen In deze handleiding wordt uitgelegd
Sushi MIJN EERSTE WEBSITE EEN WEBPAGINA BEWERKEN. Kaart 1 van 10 Ik ben HTML/CSS aan het leren
MIJN EERSTE WEBSITE Sushi EEN WEBPAGINA BEWERKEN Kaart 1 van 10 We gaan een nieuwe website bouwen! We gaan hem over boeken maken maar je kan hem ook zo maken zoals jij zelf wilt! Download de HTML code
Computerhandleiding MX-900
Computerhandleiding 1 Knopfuncties INCLINE UP Met de INCLINE UP knop verhoogt u de hellingshoek van het loopvlak. Tevens kunt u met deze knop een programma selecteren en het niveau van een programma (L1-L3)
Dit wordt niet in deze setup guide besproken, raadpleeg indien nodig de handleiding voor meer informatie.
Voordat we kunnen beginnen dienen we eerst wat instellingen na te lopen. We gaan er in deze setup guide vanuit dat de bedrading al correct is aangesloten zoals staat beschreven in de handleiding. Voor
[P5] Project: Bellenschieter
![[P5] Project: Bellenschieter](/thumbs/27/10761413.jpg "[P5] Project: Bellenschieter")
[P5] Project: Bellenschieter Vereiste voorkennis: fiches [7] [8] [9] [11] [12] [13] [14] [18] (dit programma is sterk geïnspireerd door het boek Programmeren voor kinderen van Carol Vorderman) Opdracht
Project Embedded Linux Domaza. Elektronica-ICT. Dimitri Kozakiewiez Jonas Govaerts. Academiejaar 2014-2015
Project Embedded Linux Domaza Elektronica-ICT Dimitri Kozakiewiez Jonas Govaerts Academiejaar 2014-2015 Campus Geel, Kleinhoefstraat 4, BE-2440 Geel 5 2 INHOUDSTAFEL INHOUDSTAFEL... 2 1 DOMAZA... 3 1.1
10.0 Voorkennis. Herhaling van rekenregels voor machten: a als a a 1 0[5] [6] Voorbeeld 1: Schrijf als macht van a:
![10.0 Voorkennis. Herhaling van rekenregels voor machten: a als a a 1 0[5] [6] Voorbeeld 1: Schrijf als macht van a:](/thumbs/55/36210674.jpg "10.0 Voorkennis. Herhaling van rekenregels voor machten: a als a a 1 0[5] [6] Voorbeeld 1: Schrijf als macht van a:")
10.0 Voorkennis Herhaling van rekenregels voor machten: p p q pq a pq a a a [1] a [2] q a q p pq p p p a a [3] ( ab) a b [4] Voorbeeld 1: Schrijf als macht van a: 1 8 : a a : a a a a 3 8 3 83 5 Voorbeeld
A 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
Op heel brede monitoren kan een dergelijke site er snel ongemakkelijk worden doordat de tekst op heel lange regels komt te staan.
Layout met CSS Naast het opmaken van tekst, navigatie menu s en foto s komt de echte kracht van CSS tot uiting voor de layout van de webpagina. Het is geen eenvoudig onderwerp, daarom eerst een beetje
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website Wat we gaan doen 1. Wie ben ik? 2. Voor- en nadelen bestaande templates en eigen templates 3. Eigen template op basis
Informatietechnologie 2. JavaScript. Inleidende les. Kristof Michiels
Informatietechnologie 2 JavaScript Inleidende les Kristof Michiels In deze presentatie JavaScript: inleiding Variabelen Wiskundige bewerkingen Booleans: true of false Voorwaardelijke statements 2 / 54
Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid
LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct 1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid
Informatietechnologie 2. JavaScript. Functies, Objecten en toegang tot de DOM. Kristof Michiels
Informatietechnologie 2 JavaScript Functies, Objecten en toegang tot de DOM Kristof Michiels In deze presentatie Functies Objecten Toegang tot de DOM: basis 2 / 32 Functies Wat zijn functies? Kort gezegd
Titel: flashvars.html
Data uitwisselen met Flash: the easiest way Kris Merckx www.ardeco.be Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden
Scripting 2 TUTORIAL EEN APP ONTWIKKELEN VOOR ANDROID MET PROCESSING. ellipse(screenwidth/2, screenheight/2, 140,140); DOOR THIERRY BRANDERHORST
Scripting 2 ellipse(screenwidth/2, screenheight/2, 140,140); TUTORIAL EEN APP ONTWIKKELEN VOOR ANDROID MET PROCESSING. DOOR THIERRY BRANDERHORST ANDROID APPLICATIES Tegenwoordig zijn er duizenden applicaties
Versie 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,
Zonnepanelen 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
Je hoeft je maar met twee bestanden bezig te houden:
1 2 3 Deze set Sushi Kaarten leert je hoe je een web-app maakt met een nogte-doen lijst. Als je op enig moment wilt zien hoe de web-app kan worden, kijk dan op dojo.soy/js-todo. Deze app kun je gebruiken
Examen HAVO 2013. wiskunde B. tijdvak 1 vrijdag 17 mei 13.30-16.30 uur. Bij dit examen hoort een uitwerkbijlage.
Examen HAVO 201 tijdvak 1 vrijdag 17 mei 1.0-16.0 uur wiskunde B Bij dit examen hoort een uitwerkbijlage. Dit examen bestaat uit 19 vragen. Voor dit examen zijn maximaal 80 punten te behalen. Voor elk
I'VE GOT EM FRONTEND DEVELOPMENT LES 3
I'VE GOT EM FRONTEND DEVELOPMENT LES 3 VORIGE WEEK CSS bling Selectors deel 1 Even heel kort samenvatten waar we het ook al weer over hebben gehad vorige week. Niet te lang bij stilstaan want er is heel
Hand-out Introduction to Programming, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012
Hand-out Introduction to Programming, werkcollege Alex Reuneker (a.reuneker@hhs.nl), 0. Geneste if-statements (herhaling werkcollege ) If in if in if : Er kunnen meerdere if-statements genest worden. Dat
Software 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
Lab Webdesign: Javascript 25 februari 2008
H4: FUNCTIES We zullen in dit hoofdstuk zien hoe we functies moeten maken, aanroepen, argumenten doorgeven en waarden retourneren. Ook zullen we het hebben over het begrip "recursie", en laten zien hoe
INHOUDSOPGAVE. Over de auteur, de illustrator en de technische redacteuren 13
INHOUDSOPGAVE Over de auteur, de illustrator en de technische redacteuren 13 Dankwoord 14 Inleiding 15 Waarom Python?... 16 Hoe je code leert schrijven... 16 Voor wie is dit boek... 17 Wat staat er in
Heroglyph 4.0 Het maken van een route met een object op de eigen kaart
Heroglyph 4.0 Het maken van een route met een object op de eigen kaart In deze workshop leggen we uit hoe je een route-animatie maakt met twee routes, inclusief een object op een door ons gekozen kaart.
Onderzoeksvaardigheden 2
Performance van Phonegap Naam: Datum: april 2012 Studentnummer: 0235938 Opleiding: CMD Docenten: Pauline Krebbers Modulecode: MEDMO101DT Modulenaam: Onderzoeksvaardigheden 2 / Media & Onderzoek Inhoudsopgave
Stop-motion Animatie
Stop-motion Animatie inhoudsopgave * stop-motion animatie stappenplan * script * storyboard * stop-motion variaties * camera-opstelling * decor * monteren stop-motion animatie Bij het maken van een stop-motion
Simulink. Deel1. Figuur 1 Model van het zonnepaneel in Simulink.
Simulink Deel1 In dit deel van het ontwerp simuleren we het gedrag van onze zonnepanneel bij weerstanden tussen 10 Ohm en 100 Ohm. Een beeld van hoe het model in Simulink is opgesteld is in figuur 1 opgenomen.
Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.
Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in
Meer 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
De computerhandleiding bestaat uit de volgende hoofdstukken:
Computerhandleiding Proteus PEC-4975 De computerhandleiding bestaat uit de volgende hoofdstukken: Knopfuncties De schermen Besturingsgetallen Zaken die u dient weten alvorens te trainen Werkingsinstructies
Inhoud. Informatica. Hoofdstuk 5 Scripting. Context. Editor voor Programmeercode. Scripting 1
5.1 5.2 1rste BAC Biologie Hoofdstuk 5 Inhoud Inleiding Programeerconstructies functies variabelen (toekenning) statements (print, ) controlestructuren (if, while, until, for) Oefeningen 5.3 5.4 "functionzero.zip"
Computervaardigheden. Basisvaardigheden Statistiek. Hoofdstuk 3 Grafieken en Rapporten
Computervaardigheden Hoofdstuk 3 Grafieken en Rapporten Basisvaardigheden Statistiek Twee datareeksen vergelijken met behulp van AVERAGE, MEDIAN, STDEV, Q3-Q2 (interkwartiele afstand) Boxplot van verschillende
HANDLEIDINGEN Tips en tricks ETZ Leerplein
HANDLEIDINGEN Tips en tricks ETZ Leerplein IMAGE SLIDER OVER DE IMAGE SLIDER De imageslider (lees: slider), zoals deze ontwikkelt is binnen de editor van Pulseweb maakt het mogelijk om meerdere afbeeldingen
Instructie Kaarten - GameMaker
Kaart 1 Een nieuwe Sprite maken Hoe voeg je een plaatje toe aan een game? Rechtermuisknop op Sprites en dan Create Sprite. Kies nu voor Load Sprite. Kijk in de map CodeKinderen Bestanden en hierna Sprites
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014
Handleiding Pivot docent Wendy Bruins www.wisemice.nl versie 1.2 december 2008
1 Handleiding Pivot Stickfigure Animator Maak je eigen animated gifjes en laat je poppetje bewegen zoals jij wilt. Je kunt je Pivot invoegen in een mailtje, je website of laten verschijnen op je desktop.
Zelf een spel maken met GameMaker Les 3: Vijanden en levens
Zelf een spel maken met GameMaker Les 3: Vijanden en levens 1) Start het programma GameMaker en laad het spel van de tweede les. 2) We gaan een vijand voor de speler maken. Klik met de rechtermuisknop
Informatica 1rste BAC Biologie. Hoofdstuk 3 Grafieken. Universiteit Antwerpen
3. Informatica rste BAC Biologie Hoofdstuk 3 3.2 Basisvaardigheden Creëer Zip-file (Essentieel) Histogram Box-plot Scatterplot & Trend line (Voor gevorderden) Logaritmische schaal Functies tekenen Inhoud