Cc -2 19-10

Oct 19, 2026 13:24 · 42:40 · Dutch · Whisper Turbo · 8 Talare
Den här utskriften går ut i 9 dagar. Uppgradering för permanent lagring →
Föreläsningsindex
Visar endast
0:00
S… Speaker 1 (Cc -2 19-10)
We gaan eens te beginnen met wat een animatie juist is.
0:03
S… Speaker 1 (Cc -2 19-10)
Animatie is eigenlijk allemaal frames
0:07
S… Speaker 2 (Cc -2 19-10)
na elkaar.
0:08
S… Speaker 1 (Cc -2 19-10)
Ik weet niet waar jullie dat in audiovisual misschien al niet zo over gehoord hebben.
0:11
S… Speaker 1 (Cc -2 19-10)
Een aantal frames na elkaar met kleine verschilletjes,
0:14
S… Speaker 1 (Cc -2 19-10)
waardoor als je die allemaal achter elkaar afspeelt,
0:16
S… Speaker 1 (Cc -2 19-10)
dat die lijken alsof als ze geanimeerd dat dat een vloeiende
0:20
S… Speaker 1 (Cc -2 19-10)
animatie is.
0:21
S… Speaker 1 (Cc -2 19-10)
Weet je iemand hoe dat zo 'n ding noemt?
0:22
S… Speaker 3 (Cc -2 19-10)
Zo 'n silicon?
0:24
S… Speaker 1 (Cc -2 19-10)
Hebben jullie dat gezien?
0:28
S… Speaker 1 (Cc -2 19-10)
Ja, en zo 'n trope is dat.
0:30
S… Speaker 1 (Cc -2 19-10)
En dat kun je eigenlijk gewoon als een van de eerste animatiefilmpjes dat er bestond.
0:34
S… Speaker 1 (Cc -2 19-10)
We gaan eigenlijk gewoon door gaatjes gaan kijken die elkaar afwisselden.
0:38
S… Speaker 1 (Cc -2 19-10)
En zo zagen we verschillende frames op iets aan rond draaien.
0:41
S… Speaker 4 (Cc -2 19-10)
Oké,
0:42
S… Speaker 1 (Cc -2 19-10)
en dat ziet er ook weer zo uit dat je kunt door één gaatje gaan kijken.
0:46
S… Speaker 5 (Cc -2 19-10)
Nu,
0:47
S… Speaker 6 (Cc -2 19-10)
we wilden eigenlijk over verschillende frames heen.
0:52
S… Speaker 1 (Cc -2 19-10)
lichte wijzigingen hebben in hetgeen dat we zien,
0:55
S… Speaker 1 (Cc -2 19-10)
frame per frame.
0:56
S… Speaker 1 (Cc -2 19-10)
En even een schil uitleggen tussen een statisch en een actief programmaatje,
1:00
S… Speaker 1 (Cc -2 19-10)
zal het nu toe altijd statische programmaatjes geven.
1:02
S… Speaker 1 (Cc -2 19-10)
Dat wil zeggen,
1:03
S… Speaker 1 (Cc -2 19-10)
in dit geval,
1:04
S… Speaker 1 (Cc -2 19-10)
we hebben hier twee functies.
1:05
S… Speaker 1 (Cc -2 19-10)
We hebben hier twee functies,
1:10
S… Speaker 1 (Cc -2 19-10)
die worden opgeroepen,
1:11
S… Speaker 6 (Cc -2 19-10)
één voor één.
1:12
S… Speaker 1 (Cc -2 19-10)
Als die opgeroepen zijn,
1:14
S… Speaker 1 (Cc -2 19-10)
gaat het programmaatje gedaan zijn en hebben we meestal een statische tekening op ons schijn staan.
1:18
S… Speaker 1 (Cc -2 19-10)
Vanaf nu gaan we ook dynamische of actieve scriptjes
1:23
S… Speaker 7 (Cc -2 19-10)
kunnen gaan maken.
1:26
S… Speaker 1 (Cc -2 19-10)
En dat gaan we doen aan de hand van een draw loop.
1:29
S… Speaker 1 (Cc -2 19-10)
Dat is eigenlijk gewoon een magische functie,
1:31
S… Speaker 1 (Cc -2 19-10)
kunnen we dat noemen.
1:32
S… Speaker 1 (Cc -2 19-10)
Als je die function draw toevoegt,
1:34
S… Speaker 1 (Cc -2 19-10)
dat is eigenlijk een functie die je zelf gaat schrijven,
1:37
S… Speaker 1 (Cc -2 19-10)
maar die door P5 automatisch gaat gevonden worden,
1:41
S… Speaker 1 (Cc -2 19-10)
en 60 keer per seconde,
1:43
S… Speaker 1 (Cc -2 19-10)
normaal gezien,
1:43
S… Speaker 1 (Cc -2 19-10)
gaat opgeroepen worden.
1:45
S… Speaker 1 (Cc -2 19-10)
Dus vanaf dat we die function draw daarin zetten,
1:47
S… Speaker 1 (Cc -2 19-10)
wordt die 60 keer per seconde opgeroepen,
1:49
S… Speaker 1 (Cc -2 19-10)
of naar lang...
1:51
S… Speaker 1 (Cc -2 19-10)
Vanuit je refresh rate van je schermen kan dat ook meer zijn.
1:54
S… Speaker 1 (Cc -2 19-10)
Sommigen zetten dat op 160 Hz,
1:57
S… Speaker 1 (Cc -2 19-10)
sommigen zetten dat op 30 Hz,
1:58
S… Speaker 4 (Cc -2 19-10)
op 60 Hz.
1:59
S… Speaker 1 (Cc -2 19-10)
Naar gelang welke schermen je hebt,
2:00
S… Speaker 1 (Cc -2 19-10)
kan dat een beetje verschillen.
2:02
S… Speaker 1 (Cc -2 19-10)
Laten we het even doen.
2:04
S… Speaker 1 (Cc -2 19-10)
We gaan hier Function Draw inzetten.
2:08
S… Speaker 1 (Cc -2 19-10)
En ik ga hier
2:12
S… Speaker 1 (Cc -2 19-10)
Output zetten.
2:18
S… Speaker 1 (Cc -2 19-10)
En ik ga dan runnen.
2:19
S… Speaker 1 (Cc -2 19-10)
Dan ziet u hier onderaan de hele tijd,
2:22
S… Speaker 1 (Cc -2 19-10)
60 keer per seconde,
2:23
S… Speaker 1 (Cc -2 19-10)
de boodschap hallo verschijnen.
2:25
S… Speaker 1 (Cc -2 19-10)
Dus ik is nu eigenlijk de ganze tijd aan het loopen.
2:27
S… Speaker 1 (Cc -2 19-10)
Wat kan ik nu voor het gaan doen?
2:29
S… Speaker 1 (Cc -2 19-10)
Ik kan een globale variabele maken.
2:32
S… Speaker 1 (Cc -2 19-10)
LetCount is 0.
2:35
S… Speaker 1 (Cc -2 19-10)
Ik ga iedere loop count
2:39
S… Speaker 1 (Cc -2 19-10)
gaan afdrukken.
2:40
S… Speaker 1 (Cc -2 19-10)
Dus als ik dat nu zou saven,
2:42
S… Speaker 1 (Cc -2 19-10)
ziet u hier altijd 0 staan.
2:44
S… Speaker 1 (Cc -2 19-10)
Maar wat kan ik nu gaan doen?
2:45
S… Speaker 1 (Cc -2 19-10)
Ik kan binnen die functie,
2:46
S… Speaker 1 (Cc -2 19-10)
iedere drawloop opnieuw en opnieuw,
2:48
S… Speaker 1 (Cc -2 19-10)
bijvoorbeeld zeggen,
2:49
S… Speaker 1 (Cc -2 19-10)
COUNT++,
2:50
S… Speaker 1 (Cc -2 19-10)
die gaat bij de huurige waarde van COUNT eentje bijtellen,
2:54
S… Speaker 1 (Cc -2 19-10)
en dan zie je dat die gewoon blijft gaan optellen.
2:56
S… Speaker 1 (Cc -2 19-10)
Na 1 seconde zou er ongeveer 60 moeten zien staan,
2:59
S… Speaker 1 (Cc -2 19-10)
120 na 100 seconden,
3:01
S… Speaker 1 (Cc -2 19-10)
enzovoort.
3:03
S… Speaker 1 (Cc -2 19-10)
Nu, je hoeft daar niet per se zelf zo 'n globale variabele voor te
3:07
S… Speaker 1 (Cc -2 19-10)
maken, en dan telkens zelf op te tellen,
3:09
S… Speaker 1 (Cc -2 19-10)
want P5 die heeft al een variabele,
3:12
S… Speaker 1 (Cc -2 19-10)
net zoals we bijvoorbeeld die width en die height kunnen opvragen van P5,
3:16
S… Speaker 1 (Cc -2 19-10)
van hoe groot is mijn canvas,
3:17
S… Speaker 1 (Cc -2 19-10)
kan ik hier ook zeggen frame count,
3:19
S… Speaker 4 (Cc -2 19-10)
en dan gaat hij eigenlijk
3:24
S… Speaker 1 (Cc -2 19-10)
gewoon tonen aan welke frame dat we zitten sinds het begin van het programma.
3:27
S… Speaker 1 (Cc -2 19-10)
Dus vanaf dat ik play druk,
3:28
S… Speaker 1 (Cc -2 19-10)
gaat hij gewoon frames beginnen genereren,
3:30
S… Speaker 1 (Cc -2 19-10)
iedere keer die drawloop opnieuw en opnieuw uitzoeken.
3:32
S… Speaker 1 (Cc -2 19-10)
En dan zien we eigenlijk gewoon aan welke frame dat hij ondertussen zit,
3:35
S… Speaker 1 (Cc -2 19-10)
en die gaat oneindig blijven doorgaan,
3:38
S… Speaker 1 (Cc -2 19-10)
oftewel dat getalletje niet meer in onze computer past.
3:40
S… Speaker 1 (Cc -2 19-10)
Dus dat gaat wel heel erg langzijdig door.
3:43
S… Speaker 1 (Cc -2 19-10)
En nu hebben we eigenlijk een simpel drawloopje,
3:45
S… Speaker 1 (Cc -2 19-10)
waar we eender wat kunnen gaan inschrijven,
3:46
S… Speaker 1 (Cc -2 19-10)
gaan tekenen,
3:48
S… Speaker 1 (Cc -2 19-10)
en dan gaat iedere frame opnieuw en opnieuw getekend worden.
3:51
S… Speaker 1 (Cc -2 19-10)
Wat kan ik nu gaan doen?
3:53
S… Speaker 1 (Cc -2 19-10)
Bijvoorbeeld een cirkel tekenen.
4:00
S… Speaker 1 (Cc -2 19-10)
En ik ga die bijvoorbeeld op positie 50
4:05
S… Speaker 1 (Cc -2 19-10)
-50 zetten.
4:08
S… Speaker 1 (Cc -2 19-10)
En die mag 50 groot zijn.
4:10
S… Speaker 4 (Cc -2 19-10)
Oké.
4:13
S… Speaker 1 (Cc -2 19-10)
Nu krijgen we een zeer mooi geanimeerde cirkel die 60 keer per
4:17
S… Speaker 1 (Cc -2 19-10)
seconde getekend wordt,
4:18
S… Speaker 1 (Cc -2 19-10)
maar op dezelfde plaats.
4:19
S… Speaker 1 (Cc -2 19-10)
Dus die wordt handig op dezelfde plaats getekend.
4:21
S… Speaker 1 (Cc -2 19-10)
Wat kan ik bijvoorbeeld gaan doen?
4:22
S… Speaker 1 (Cc -2 19-10)
Ik ga die even op 0 zetten.
4:24
S… Speaker 1 (Cc -2 19-10)
Dan gaat die daar terechtkomen.
4:26
S… Speaker 1 (Cc -2 19-10)
En in de plaats van 0 ga ik nu framecount hier zetten.
4:32
S… Speaker 1 (Cc -2 19-10)
En gaat die eigenlijk geanimeerd worden van links naar rechts.
4:35
S… Speaker 1 (Cc -2 19-10)
Want wat gebeurt er?
4:36
S… Speaker 1 (Cc -2 19-10)
Even doorstappen.
4:38
S… Speaker 1 (Cc -2 19-10)
Iedere frame opnieuw
4:42
S… Speaker 4 (Cc -2 19-10)
en opnieuw.
4:43
S… Speaker 1 (Cc -2 19-10)
Gaat die eentje verder gaan.
4:45
S… Speaker 1 (Cc -2 19-10)
En ik ga ook even...
4:46
S… Speaker 1 (Cc -2 19-10)
Ga ik hier even output frame
4:50
S… Speaker 7 (Cc -2 19-10)
comment ook zetten.
4:51
S… Speaker 4 (Cc -2 19-10)
Voilà.
4:53
S… Speaker 4 (Cc -2 19-10)
Ik ga opnieuw beginnen.
4:55
S… Speaker 5 (Cc -2 19-10)
Oké.
4:59
S… Speaker 1 (Cc -2 19-10)
Dus we zien de eerste...
5:00
S… Speaker 1 (Cc -2 19-10)
frame, frame count is 1,
5:02
S… Speaker 1 (Cc -2 19-10)
hij wordt getekend,
5:03
S… Speaker 1 (Cc -2 19-10)
in de volgende frame wordt hij getekend,
5:06
S… Speaker 1 (Cc -2 19-10)
1 pixel verder,
5:07
S… Speaker 1 (Cc -2 19-10)
en ga gewoon die frame count variabele,
5:10
S… Speaker 1 (Cc -2 19-10)
die je daar telkens eentje omhoog ziet gaan per frame,
5:12
S… Speaker 1 (Cc -2 19-10)
gaat hij gebruiken als een x -positie om die cirkel van links naar rechts op
5:16
S… Speaker 3 (Cc -2 19-10)
te schrijven.
5:19
S… Speaker 1 (Cc -2 19-10)
Nu, ik wil eigenlijk een veel groter venstertje tekenen dan dit,
5:22
S… Speaker 1 (Cc -2 19-10)
dat is maar 100 op 100 breed standaard.
5:24
S… Speaker 1 (Cc -2 19-10)
Dus ik moet Create Canvas aanroepen met een bepaalde breedte
5:29
S… Speaker 1 (Cc -2 19-10)
en hoogte.
5:29
S… Speaker 1 (Cc -2 19-10)
Dus Create Canvas,
5:31
S… Speaker 4 (Cc -2 19-10)
bijvoorbeeld 600.
5:36
S… Speaker 4 (Cc -2 19-10)
En
5:45
S… Speaker 1 (Cc -2 19-10)
hij gaat eigenlijk de eerste dag gaan uitvoeren en dan begint hij aan die draw -rope.
5:50
S… Speaker 1 (Cc -2 19-10)
Eigenlijk vanaf nu,
5:51
S… Speaker 1 (Cc -2 19-10)
als je zo 'n draw loop maakt,
5:53
S… Speaker 1 (Cc -2 19-10)
willen we eigenlijk ook nog een andere functie sowieso maken,
5:57
S… Speaker 1 (Cc -2 19-10)
die gewoon aan het begin van het programma één keer uitgevoerd wordt.
5:59
S… Speaker 1 (Cc -2 19-10)
Dan gaan we een heel duidelijk onderscheid maken.
6:01
S… Speaker 1 (Cc -2 19-10)
Dit gebeurt één keer.
6:03
S… Speaker 1 (Cc -2 19-10)
En vanaf dan gaat je de draw loop constant gaan uitvoeren.
6:07
S… Speaker 1 (Cc -2 19-10)
En dan hebben we de setup functie.
6:08
S… Speaker 1 (Cc -2 19-10)
Function Setup.
6:11
S… Speaker 1 (Cc -2 19-10)
En die wordt ook magisch,
6:13
S… Speaker 1 (Cc -2 19-10)
helemaal automatisch,
6:14
S… Speaker 1 (Cc -2 19-10)
aan het begin van mijn programma één keer opgeroepen.
6:17
S… Speaker 1 (Cc -2 19-10)
Vanaf daarna wordt de draw altijd opgeroepen.
6:20
S… Speaker 1 (Cc -2 19-10)
En daarin ga ik alles van het setup van mijn scriptje gaan doen.
6:24
S… Speaker 1 (Cc -2 19-10)
Bijvoorbeeld de canvas een bepaalde grote geven.
6:27
S… Speaker 1 (Cc -2 19-10)
Create canvas.
6:29
S… Speaker 4 (Cc -2 19-10)
Zeg maar op 400.
6:33
S… Speaker 1 (Cc -2 19-10)
Ik ga bijvoorbeeld een background kleurtje geven.
6:36
S… Speaker 1 (Cc -2 19-10)
Ik ga ook bijvoorbeeld mijn color mode hier al
6:40
S… Speaker 1 (Cc -2 19-10)
in instellen.
6:40
S… Speaker 1 (Cc -2 19-10)
Dus eigenlijk alles wat er maar één keer moet gebeuren.
6:42
S… Speaker 1 (Cc -2 19-10)
Color mode instellen ga ik bijvoorbeeld niet iedere drawer op opnieuw en opnieuw
6:46
S… Speaker 1 (Cc -2 19-10)
doen. Want dat is niet nodig.
6:47
S… Speaker 1 (Cc -2 19-10)
Vanaf dat ik dat één keer ingesteld heb,
6:49
S… Speaker 1 (Cc -2 19-10)
gaat dat gelden voor de rest van het programma.
6:51
S… Speaker 1 (Cc -2 19-10)
Dus dat doe ik in de setup.
6:52
S… Speaker 1 (Cc -2 19-10)
Color mode HSL,
6:53
S… Speaker 1 (Cc -2 19-10)
dan ga ik hier voor de background wat licht blauw
6:58
S… Speaker 4 (Cc -2 19-10)
doen, zoiets.
7:01
S… Speaker 1 (Cc -2 19-10)
En daarna begin ik een intramatje te tekenen.
7:05
S… Speaker 1 (Cc -2 19-10)
Nu, je ziet met een cirkel iedere frame met 1 pixel opschuiven,
7:09
S… Speaker 1 (Cc -2 19-10)
want die frame count niet altijd omhoog.
7:10
S… Speaker 1 (Cc -2 19-10)
Dus iedere frame,
7:12
S… Speaker 1 (Cc -2 19-10)
net zoals met een loop,
7:12
S… Speaker 1 (Cc -2 19-10)
ga ik die cirkel de volgende frame eentje verder tekenen.
7:16
S… Speaker 1 (Cc -2 19-10)
Dus altijd 1 pixel verder.
7:17
S… Speaker 1 (Cc -2 19-10)
Maar je ziet hier wel zo 'n streep verschijnen.
7:20
S… Speaker 1 (Cc -2 19-10)
En dat komt omdat ik gewoon altijd bovenop mijn huidige canvas aan het verder tekenen ben.
7:23
S… Speaker 1 (Cc -2 19-10)
Dus ik teken mijn cirkel,
7:25
S… Speaker 1 (Cc -2 19-10)
daarna één pixel verder.
7:26
S… Speaker 1 (Cc -2 19-10)
Maar je ziet natuurlijk zo 'n streep,
7:28
S… Speaker 1 (Cc -2 19-10)
omdat die rand van die cirkel blijft staan.
7:30
S… Speaker 1 (Cc -2 19-10)
Ik zou natuurlijk kunnen zeggen,
7:31
S… Speaker 1 (Cc -2 19-10)
ik ga hier netjes no stroke doen.
7:33
S… Speaker 4 (Cc -2 19-10)
Oké,
7:35
S… Speaker 1 (Cc -2 19-10)
dan heb ik al geen rand van mijn cirkel niet meer.
7:37
S… Speaker 1 (Cc -2 19-10)
Maar al mijn vorige cirkels staan daar nog,
7:39
S… Speaker 1 (Cc -2 19-10)
dus ik blijf gewoon verder tekenen.
7:40
S… Speaker 1 (Cc -2 19-10)
Net hetzelfde zoals we een voorloop zouden tekenen.
7:43
S… Speaker 1 (Cc -2 19-10)
Maar nu over de tijd heen,
7:45
S… Speaker 1 (Cc -2 19-10)
in plaats van alles in één keer naar elkaar.
7:48
S… Speaker 1 (Cc -2 19-10)
Goed, wat kan ik nu eigenlijk eenvoudig weg gaan doen om een bewegende cirkel
7:52
S… Speaker 1 (Cc -2 19-10)
te krijgen die geen streep nalaat?
7:54
S… Speaker 1 (Cc -2 19-10)
Heb je iemand idee dat ik dat zou kunnen aanpakken?
7:56
S… Speaker 5 (Cc -2 19-10)
We moeten
8:04
S… Speaker 1 (Cc -2 19-10)
op een of andere manier die vorige cirkel gaan wissen.
8:06
S… Speaker 1 (Cc -2 19-10)
Je zou kunnen zeggen,
8:08
S… Speaker 1 (Cc -2 19-10)
ik teken een vakje over die vorige cirkel,
8:10
S… Speaker 1 (Cc -2 19-10)
maar eigenlijk eenvoudiger is,
8:12
S… Speaker 1 (Cc -2 19-10)
gewoon aan het begin van iedere frame,
8:15
S… Speaker 1 (Cc -2 19-10)
mijn background instellen.
8:17
S… Speaker 1 (Cc -2 19-10)
En background is eigenlijk niet heel letterlijk background,
8:20
S… Speaker 1 (Cc -2 19-10)
dat is gewoon een rectangle die getekend wordt over de breedte van mijn scherm.
8:23
S… Speaker 1 (Cc -2 19-10)
Dus als ik hier het begin van iedere frame ga resetten,
8:28
S… Speaker 1 (Cc -2 19-10)
eigenlijk background gaat gewoon alles in dat kleur gaan wissen,
8:30
S… Speaker 1 (Cc -2 19-10)
dan krijg ik daar bovenop iedere keer een nieuwe circle.
8:33
S… Speaker 1 (Cc -2 19-10)
Die background is eigenlijk net hetzelfde als rect,
8:36
S… Speaker 1 (Cc -2 19-10)
oh sorry,
8:38
S… Speaker 1 (Cc -2 19-10)
fill, en dan rect,
8:42
S… Speaker 4 (Cc -2 19-10)
nul nul,
8:43
S… Speaker 1 (Cc -2 19-10)
width en height.
8:49
S… Speaker 1 (Cc -2 19-10)
doet eigenlijk eigenlijk hetzelfde.
8:51
S… Speaker 1 (Cc -2 19-10)
Ik moet natuurlijk wel een anonieme fill doen voor mijn cirkel dan.
8:54
S… Speaker 4 (Cc -2 19-10)
Oké.
8:59
S… Speaker 1 (Cc -2 19-10)
En als ik dat stap voor stap zou uitvoeren,
9:01
S… Speaker 1 (Cc -2 19-10)
mijn canvas wordt gemaakt,
9:03
S… Speaker 1 (Cc -2 19-10)
column mode op hsl,
9:04
S… Speaker 6 (Cc -2 19-10)
no stroke.
9:06
S… Speaker 1 (Cc -2 19-10)
Daarna komt het de eerste keer in die drawloop,
9:08
S… Speaker 1 (Cc -2 19-10)
ik zal hem fillen en ik teken een rectangle over de breedte en hoogte van mijn canvas.
9:12
S… Speaker 1 (Cc -2 19-10)
Ik doe een fill wide,
9:14
S… Speaker 1 (Cc -2 19-10)
ik teken die cirkel op die plaats en de volgende loop start.
9:17
S… Speaker 1 (Cc -2 19-10)
Ik wis alles door die rectangle opnieuw te tekenen.
9:22
S… Speaker 1 (Cc -2 19-10)
Ik doe een fill en light,
9:24
S… Speaker 1 (Cc -2 19-10)
maar die frame count is ondertussen eentje hoger geworden.
9:26
S… Speaker 1 (Cc -2 19-10)
Dus ik sta nu op wersel 1.
9:27
S… Speaker 1 (Cc -2 19-10)
En zo ga ik eigenlijk iedere keer wisselen.
9:31
S… Speaker 1 (Cc -2 19-10)
Die frame count gaat eentje omhoog.
9:34
S… Speaker 1 (Cc -2 19-10)
Ik teken die cirkel op x -proces frame count.
9:37
S… Speaker 1 (Cc -2 19-10)
Dus op 2, op 3,
9:38
S… Speaker 1 (Cc -2 19-10)
op 4, op 5.
9:39
S… Speaker 1 (Cc -2 19-10)
En zo ga ik die cirkel telkens gaan opschuiven.
9:42
S… Speaker 1 (Cc -2 19-10)
En dan zie je die stap voor stap opnieuw en opnieuw
9:46
S… Speaker 1 (Cc -2 19-10)
getekend worden.
9:46
S… Speaker 1 (Cc -2 19-10)
Wat moet ik doen als ik die cirkel sneller
9:50
S… Speaker 2 (Cc -2 19-10)
wil laten bewegen?
9:54
S… Speaker 1 (Cc -2 19-10)
Je beweegt die per frame 1 pixel,
9:56
S… Speaker 1 (Cc -2 19-10)
dus na 1 seconde gaat die...
10:03
S… Speaker 1 (Cc -2 19-10)
Hier zie je trouwens ook bovenaan een
10:08
S… Speaker 1 (Cc -2 19-10)
icoontje staan,
10:09
S… Speaker 4 (Cc -2 19-10)
FPS,
10:10
S… Speaker 1 (Cc -2 19-10)
en dan kun je zien hoeveel frames per seconde dat er gaat.
10:14
S… Speaker 1 (Cc -2 19-10)
Nu, op sommige computers kan dat hoger zijn,
10:17
S… Speaker 1 (Cc -2 19-10)
of naargelang je refresh rate van je schijn.
10:19
S… Speaker 4 (Cc -2 19-10)
En ook,
10:20
S… Speaker 1 (Cc -2 19-10)
hoe meer dat er gaande is op je schijn,
10:21
S… Speaker 1 (Cc -2 19-10)
als je heel complexe tekeningen aan het maken bent,
10:23
S… Speaker 1 (Cc -2 19-10)
iedere frame opnieuw,
10:25
S… Speaker 1 (Cc -2 19-10)
gaat die frame rate naar beneden gaan.
10:26
S… Speaker 1 (Cc -2 19-10)
Dat is iets wat je bij gamers ook heel vaak ziet,
10:28
S… Speaker 1 (Cc -2 19-10)
als er van alles gebeurt en je computer is net niet krachtig genoeg,
10:31
S… Speaker 1 (Cc -2 19-10)
zie je de frame rate,
10:32
S… Speaker 1 (Cc -2 19-10)
de FPS, naar beneden gaan.
10:33
S… Speaker 1 (Cc -2 19-10)
En dat is puur daardoor omdat er iedere frame heel veel werk moet doen.
10:37
S… Speaker 1 (Cc -2 19-10)
En als je dat niet op tijd gedaan krijgt,
10:39
S… Speaker 1 (Cc -2 19-10)
binnen 61 seconde,
10:41
S… Speaker 1 (Cc -2 19-10)
dan gaat die frame wat langer duren,
10:43
S… Speaker 1 (Cc -2 19-10)
waardoor je minder frames per seconde haalt.
10:45
S… Speaker 1 (Cc -2 19-10)
En je ziet dat het ook niet altijd exact gelijk is.
10:49
S… Speaker 1 (Cc -2 19-10)
Er gaat een klein beetje verschil op zitten tussen frames hierheen.
10:51
S… Speaker 1 (Cc -2 19-10)
De ene frame gaat wat langer duren dan de andere.
10:54
S… Speaker 1 (Cc -2 19-10)
Maar dat gaat altijd rond de 60's zijn.
10:57
S… Speaker 1 (Cc -2 19-10)
Dus nu hebben we eigenlijk al een bewegend
11:01
S… Speaker 1 (Cc -2 19-10)
cirkeltje kunnen tekenen.
11:02
S… Speaker 1 (Cc -2 19-10)
Even terugkeren.
11:03
S… Speaker 1 (Cc -2 19-10)
En dan gaat dus telkens
11:08
S… Speaker 1 (Cc -2 19-10)
opnieuw en opnieuw herhaald worden.
11:11
S… Speaker 5 (Cc -2 19-10)
Enzovoort.
11:12
S… Speaker 5 (Cc -2 19-10)
Goed,
11:13
S… Speaker 1 (Cc -2 19-10)
dus, zoals ik heb juist verteld,
11:15
S… Speaker 1 (Cc -2 19-10)
de eerste setup -functie wordt automatisch opgeroepen aan het begin
11:19
S… Speaker 1 (Cc -2 19-10)
van dit programma.
11:20
S… Speaker 1 (Cc -2 19-10)
Na die setup -functie gaan we opnieuw en opnieuw die browser gaan
11:24
S… Speaker 4 (Cc -2 19-10)
uitvoeren.
11:25
S… Speaker 6 (Cc -2 19-10)
De frame -count variabele,
11:30
S… Speaker 1 (Cc -2 19-10)
hoewel dat duidelijk is,
11:31
S… Speaker 1 (Cc -2 19-10)
die start bij 0 en gaat dus ieder frame -ange omhoog gaan.
11:36
S… Speaker 1 (Cc -2 19-10)
Maar we kunnen ook andere functies gaan oproepen als we willen.
11:39
S… Speaker 1 (Cc -2 19-10)
Stel dat we iets met de tijd willen gaan doen,
11:41
S… Speaker 1 (Cc -2 19-10)
dan kunnen we de millies functie oproepen.
11:43
S… Speaker 1 (Cc -2 19-10)
En die geeft ons de tijd die gepasseerd is sinds het begin van
11:47
S… Speaker 1 (Cc -2 19-10)
de startweer.
11:48
S… Speaker 1 (Cc -2 19-10)
Dus je gaat hier gewoon een tellertje van tijd bijhouden,
11:50
S… Speaker 1 (Cc -2 19-10)
een soort van chronometer.
11:52
S… Speaker 1 (Cc -2 19-10)
En als ik wil weten hoeveel tijd er al gepasseerd is,
11:54
S… Speaker 1 (Cc -2 19-10)
kan ik millies oproepen.
11:56
S… Speaker 1 (Cc -2 19-10)
Dus dat wil zeggen als ik hier bijvoorbeeld in de plaats millies oproep,
12:00
S… Speaker 1 (Cc -2 19-10)
dan zou je hier...
12:03
S… Speaker 1 (Cc -2 19-10)
het aantal milliseconden moeten zien verschijnen.
12:05
S… Speaker 1 (Cc -2 19-10)
Dat wil zeggen 1000 is 1 seconde.
12:08
S… Speaker 1 (Cc -2 19-10)
Waarom is dat later
12:12
S… Speaker 1 (Cc -2 19-10)
handig als je animaties wilt gaan maken?
12:15
S… Speaker 1 (Cc -2 19-10)
en je doet dat gewoon per frame,
12:16
S… Speaker 1 (Cc -2 19-10)
en er gebeurt heel veel op je scherm,
12:18
S… Speaker 1 (Cc -2 19-10)
en die frames gaan naar beneden,
12:19
S… Speaker 1 (Cc -2 19-10)
dan gaan die animatie soms langer duren om een bepaald punt te
12:23
S… Speaker 1 (Cc -2 19-10)
bereiken, en dan op een andere moment te korter duren.
12:25
S… Speaker 1 (Cc -2 19-10)
Dus als je dat over de tijd heen wil spreiden,
12:27
S… Speaker 1 (Cc -2 19-10)
dan ga ik een beetje logica moeten maken die berekening op de tijd in plaats
12:31
S… Speaker 1 (Cc -2 19-10)
van het aantal frames.
12:32
S… Speaker 1 (Cc -2 19-10)
Omdat ik nooit zeker weet hoeveel frames er gaan gepanceerd zijn.
12:36
S… Speaker 1 (Cc -2 19-10)
Het is ook een truc die heel veel in games en in animaties gebruikt wordt.
12:38
S… Speaker 1 (Cc -2 19-10)
We gaan die milliseconden gebruiken om dan eigenlijk vloeiende animaties
12:43
S… Speaker 4 (Cc -2 19-10)
te gaan maken.
12:46
S… Speaker 2 (Cc -2 19-10)
Delta Time,
12:47
S… Speaker 1 (Cc -2 19-10)
dat gaan we nu nog niet zoveel gebruiken,
12:49
S… Speaker 1 (Cc -2 19-10)
maar zeker als je naar interactieve 3D applicaties
12:53
S… Speaker 1 (Cc -2 19-10)
of games gaat.
12:53
S… Speaker 1 (Cc -2 19-10)
Dat wordt iets dat heel vaak gebruikt wordt.
12:55
S… Speaker 1 (Cc -2 19-10)
En Delta Time geeft mij de tijd terug tussen de huidige frame en de vorige frame.
12:59
S… Speaker 1 (Cc -2 19-10)
Dus je weet eigenlijk ook het verschil daartussen.
13:01
S… Speaker 1 (Cc -2 19-10)
Dat gaat normaal gezien 1 zestigste van een seconde zijn,
13:03
S… Speaker 1 (Cc -2 19-10)
maar soms een beetje meer,
13:05
S… Speaker 1 (Cc -2 19-10)
soms een beetje minder.
13:05
S… Speaker 1 (Cc -2 19-10)
En daarmee,
13:06
S… Speaker 1 (Cc -2 19-10)
met die functie, kunnen we dat eigenlijk gaan oproepen.
13:08
S… Speaker 1 (Cc -2 19-10)
Dus als ik dat hier ga tonen,
13:10
S… Speaker 1 (Cc -2 19-10)
dan ga je zien als ik Delta Time oproep.
13:15
S… Speaker 1 (Cc -2 19-10)
Oeh, delta,
13:16
S… Speaker 1 (Cc -2 19-10)
is dat een function?
13:18
S… Speaker 4 (Cc -2 19-10)
Oké,
13:20
S… Speaker 4 (Cc -2 19-10)
dat is een variabele.
13:24
S… Speaker 4 (Cc -2 19-10)
Ja, het
13:29
S… Speaker 1 (Cc -2 19-10)
is een variabele.
13:30
S… Speaker 1 (Cc -2 19-10)
Dus delta time geeft mij hier altijd 16 milliseconden terug.
13:34
S… Speaker 1 (Cc -2 19-10)
Dus normaal gezien 61,
13:38
S… Speaker 4 (Cc -2 19-10)
klopt.
13:39
S… Speaker 4 (Cc -2 19-10)
Ja,
13:42
S… Speaker 1 (Cc -2 19-10)
dus iets meer dan 60 per seconde.
13:45
S… Speaker 1 (Cc -2 19-10)
We gaan dat later wel zien waarom we
13:49
S… Speaker 1 (Cc -2 19-10)
dat kunnen gebruiken.
13:50
S… Speaker 1 (Cc -2 19-10)
Maar stel bijvoorbeeld dat je het aantal 5 per seconde wilt gaan berekenen.
13:53
S… Speaker 1 (Cc -2 19-10)
Dan kun je dat voor het gaan doen door gaan
13:57
S… Speaker 1 (Cc -2 19-10)
kijken. 1 seconde.
13:59
S… Speaker 1 (Cc -2 19-10)
gedeeld door de delta time.
14:00
S… Speaker 1 (Cc -2 19-10)
Dus hoeveel tijd is er gepasseerd met deze frame.
14:03
S… Speaker 1 (Cc -2 19-10)
Als we 1 seconde delen door dat getallen,
14:04
S… Speaker 1 (Cc -2 19-10)
dan krijgen we het aantal frames dat in 1 seconde past.
14:07
S… Speaker 1 (Cc -2 19-10)
En dat ga ik gewoon even kopiëren en
14:11
S… Speaker 1 (Cc -2 19-10)
tonen wat dat doet.
14:12
S… Speaker 5 (Cc -2 19-10)
Zo.
14:15
S… Speaker 1 (Cc -2 19-10)
En dan zie je hier frames per
14:19
S… Speaker 1 (Cc -2 19-10)
seconde, 60.
14:20
S… Speaker 1 (Cc -2 19-10)
Afgrond.
14:21
S… Speaker 1 (Cc -2 19-10)
Ik ga gaan afronden.
14:23
S… Speaker 1 (Cc -2 19-10)
En de ene keer gaat dat 61 zijn,
14:25
S… Speaker 1 (Cc -2 19-10)
de andere keer gaat dat 59 zijn,
14:26
S… Speaker 1 (Cc -2 19-10)
maar meestal gaat dat die 60 proberen bereiken.
14:37
S… Speaker 1 (Cc -2 19-10)
En wat is er nu ook handig?
14:39
S… Speaker 1 (Cc -2 19-10)
We kunnen eigenlijk ook allerlei globale variabelen gaan gebruiken.
14:42
S… Speaker 1 (Cc -2 19-10)
Eentje hebben we al gezien,
14:43
S… Speaker 6 (Cc -2 19-10)
die frame count,
14:44
S… Speaker 1 (Cc -2 19-10)
die wordt automatisch ingevuld.
14:46
S… Speaker 1 (Cc -2 19-10)
Maar ook de x -position en de y -position van mijn muisschipsel.
14:49
S… Speaker 1 (Cc -2 19-10)
En dan begint het eigenlijk interessant te worden.
14:52
S… Speaker 1 (Cc -2 19-10)
Dan kunnen we het heel interactief gaan maken.
14:54
S… Speaker 1 (Cc -2 19-10)
In plaats van dat ik die cirkel van daar juist gewoon van links
14:58
S… Speaker 1 (Cc -2 19-10)
naar rechts laat bewegen,
15:00
S… Speaker 4 (Cc -2 19-10)
Ga ik,
15:01
S… Speaker 1 (Cc -2 19-10)
voor de x -positie van die cirkel,
15:04
S… Speaker 1 (Cc -2 19-10)
mijn muispositie gaan gebruiken.
15:06
S… Speaker 1 (Cc -2 19-10)
En de A
15:12
S… Speaker 1 (Cc -2 19-10)
-positie van mijn muis,
15:13
S… Speaker 4 (Cc -2 19-10)
not defined,
15:18
S… Speaker 1 (Cc -2 19-10)
dat veranderd,
15:18
S… Speaker 1 (Cc -2 19-10)
dat valt niet.
15:19
S… Speaker 1 (Cc -2 19-10)
Even kijken in de documentatie.
15:22
S… Speaker 1 (Cc -2 19-10)
Ik denk dat ik de verkeerde naam heb.
15:25
S… Speaker 1 (Cc -2 19-10)
Het zal mouse -x zijn denk ik.
15:27
S… Speaker 4 (Cc -2 19-10)
Mouse, ja,
15:28
S… Speaker 4 (Cc -2 19-10)
sorry.
15:28
S… Speaker 4 (Cc -2 19-10)
Volg je de slides.
15:30
S… Speaker 1 (Cc -2 19-10)
Mouse X en mouse Y,
15:32
S… Speaker 1 (Cc -2 19-10)
die bevat gewoon sowieso de plaats van mijn cursor.
15:35
S… Speaker 1 (Cc -2 19-10)
Dus wat kan ik doen?
15:37
S… Speaker 1 (Cc -2 19-10)
Ik kan ieder frame mijn mouse cursor bewegen,
15:40
S… Speaker 1 (Cc -2 19-10)
en ik ga alles gaan wissen,
15:42
S… Speaker 1 (Cc -2 19-10)
en dat op de plaats van mijn mouse cursor,
15:44
S… Speaker 1 (Cc -2 19-10)
ga ik die cirkel gaan tekenen.
15:47
S… Speaker 1 (Cc -2 19-10)
Dus nu heb ik eigenlijk een interactieve cirkel,
15:48
S… Speaker 1 (Cc -2 19-10)
die automatisch mijn mouse gaat volgen.
15:51
S… Speaker 1 (Cc -2 19-10)
Je kunt dat woord ook direct weg doen,
15:54
S… Speaker 1 (Cc -2 19-10)
en dan krijg je eigenlijk een heel eenvoudig tekenprogrammaatje.
15:57
S… Speaker 1 (Cc -2 19-10)
Zodat tof ik zou kunnen zeggen,
15:59
S… Speaker 1 (Cc -2 19-10)
ik ga de kleur van mijn cirkeltje laten
16:03
S… Speaker 1 (Cc -2 19-10)
veranderen over de tijd heen.
16:05
S… Speaker 1 (Cc -2 19-10)
Wat kan ik dan gaan doen?
16:06
S… Speaker 1 (Cc -2 19-10)
Ik kan die fill,
16:07
S… Speaker 1 (Cc -2 19-10)
in plaats van white,
16:09
S… Speaker 1 (Cc -2 19-10)
ga ik de hue laten variëren,
16:14
S… Speaker 1 (Cc -2 19-10)
frame count.
16:14
S… Speaker 1 (Cc -2 19-10)
Dus die gaat bij 0 beginnen en die gaat optellen tot 360
16:19
S… Speaker 1 (Cc -2 19-10)
en dan gewoon terug verder blijven die cirkel afgaan.
16:22
S… Speaker 6 (Cc -2 19-10)
Frame count,
16:23
S… Speaker 1 (Cc -2 19-10)
bijvoorbeeld zo.
16:24
S… Speaker 4 (Cc -2 19-10)
En
16:30
S… Speaker 1 (Cc -2 19-10)
dan zie je eigenlijk over de tijd heen,
16:32
S… Speaker 1 (Cc -2 19-10)
Gaat die constant verkleuren?
16:34
S… Speaker 1 (Cc -2 19-10)
Want die frame count verandert over alle frames telkens omhoog en
16:38
S… Speaker 1 (Cc -2 19-10)
omhoog en omhoog.
16:39
S… Speaker 1 (Cc -2 19-10)
Als je dat duidelijk wilt maken,
16:41
S… Speaker 1 (Cc -2 19-10)
zou je wel een variabele zelf kunnen maken.
16:44
S… Speaker 1 (Cc -2 19-10)
Let hue color is
16:49
S… Speaker 1 (Cc -2 19-10)
0. En dan hier hue color meegeven.
16:53
S… Speaker 1 (Cc -2 19-10)
Dan zie je die is nu altijd rood.
16:55
S… Speaker 1 (Cc -2 19-10)
Maar als ik iedere frame opnieuw hue color plus
17:00
S… Speaker 1 (Cc -2 19-10)
plus doe,
17:01
S… Speaker 1 (Cc -2 19-10)
gaat die telkens eentje omhoog gaan,
17:04
S… Speaker 1 (Cc -2 19-10)
iedere frame.
17:05
S… Speaker 1 (Cc -2 19-10)
En dat verandert hier,
17:06
S… Speaker 1 (Cc -2 19-10)
ook al kom ik er niet aan,
17:07
S… Speaker 1 (Cc -2 19-10)
je ziet die constant veranderen.
17:08
S… Speaker 1 (Cc -2 19-10)
Ieder frame gaat daar eentje omhoog.
17:10
S… Speaker 1 (Cc -2 19-10)
En dan kan ik daar eigenlijk mee gaan tekenen als ik wil.
17:13
S… Speaker 1 (Cc -2 19-10)
Maar zo kun je eigenlijk eender welke variabele,
17:18
S… Speaker 1 (Cc -2 19-10)
eender welke waarde,
17:19
S… Speaker 1 (Cc -2 19-10)
gaan animeren over de tijd heen dat je wilt.
17:21
S… Speaker 1 (Cc -2 19-10)
Als ik wil dat dat sneller van kleur verandert.
17:23
S… Speaker 1 (Cc -2 19-10)
Nu hier zie ik wel,
17:24
S… Speaker 1 (Cc -2 19-10)
maar als ik aan 360 zit,
17:26
S… Speaker 1 (Cc -2 19-10)
blijf ik rood hebben.
17:28
S… Speaker 1 (Cc -2 19-10)
Want dat gaat niet verder kunnen op die cirkel.
17:29
S… Speaker 1 (Cc -2 19-10)
En daar kunnen we eigenlijk iets handig doen.
17:31
S… Speaker 1 (Cc -2 19-10)
In plaats van...
17:33
S… Speaker 1 (Cc -2 19-10)
hue color te blijven gebruiken plus plus,
17:35
S… Speaker 1 (Cc -2 19-10)
kan ik vooruit gaan zeggen,
17:36
S… Speaker 1 (Cc -2 19-10)
als hue color gelijk is aan
17:40
S… Speaker 4 (Cc -2 19-10)
360,
17:41
S… Speaker 1 (Cc -2 19-10)
zet hue color dan op
17:46
S… Speaker 1 (Cc -2 19-10)
0. En zo hebben we eigenlijk ieder frame dat we gaan controleren,
17:51
S… Speaker 1 (Cc -2 19-10)
is die 0,
17:52
S… Speaker 1 (Cc -2 19-10)
is die 1,
17:53
S… Speaker 1 (Cc -2 19-10)
is die 2, is die 3,
17:54
S… Speaker 1 (Cc -2 19-10)
als die 360 is,
17:55
S… Speaker 1 (Cc -2 19-10)
zet ik die terug op 0,
17:56
S… Speaker 1 (Cc -2 19-10)
waardoor hij terug aan het begin begint,
17:57
S… Speaker 1 (Cc -2 19-10)
en dan gaat hij terug beginnen optellen.
17:59
S… Speaker 1 (Cc -2 19-10)
Dus dat is een mogelijkheid om te doen.
18:01
S… Speaker 1 (Cc -2 19-10)
Gewoon zelf een if statement schrijven,
18:03
S… Speaker 1 (Cc -2 19-10)
en dan die telkens gaan resetten.
18:05
S… Speaker 1 (Cc -2 19-10)
Of, wat kan je ook in principe doen,
18:08
S… Speaker 1 (Cc -2 19-10)
hier onze fill,
18:10
S… Speaker 4 (Cc -2 19-10)
nee,
18:12
S… Speaker 1 (Cc -2 19-10)
sorry, deze fill,
18:13
S… Speaker 1 (Cc -2 19-10)
uw color,
18:13
S… Speaker 1 (Cc -2 19-10)
modulo 360 doen.
18:15
S… Speaker 4 (Cc -2 19-10)
En dan gaat
18:19
S… Speaker 1 (Cc -2 19-10)
hij eigenlijk de reststelling pakken,
18:22
S… Speaker 1 (Cc -2 19-10)
dus alles tot 360 geeft het getalletje zelf,
18:24
S… Speaker 1 (Cc -2 19-10)
alles boven de 360 wordt dan telkens terug naar 0,
18:27
S… Speaker 1 (Cc -2 19-10)
1, 2, 3,
18:28
S… Speaker 8 (Cc -2 19-10)
4, enzovoort gezet.
18:30
S… Speaker 1 (Cc -2 19-10)
Ik denk dat is een mogelijkheid,
18:31
S… Speaker 1 (Cc -2 19-10)
maar de andere oplossing is iets beter.
18:33
S… Speaker 1 (Cc -2 19-10)
Waarom?
18:33
S… Speaker 1 (Cc -2 19-10)
Omdat dit getalletje wel blijft stijgen.
18:36
S… Speaker 1 (Cc -2 19-10)
Terwijl als je het zelf gaat resetten en je hebt meer controle over,
18:40
S… Speaker 1 (Cc -2 19-10)
dat dat elke keer terug naar vol gaat.
18:41
S… Speaker 5 (Cc -2 19-10)
Dat
18:47
S… Speaker 1 (Cc -2 19-10)
va? Je zou ook kunnen zeggen,
18:48
S… Speaker 1 (Cc -2 19-10)
ik ga dat over de tijd heen bijvoorbeeld mijn size laten vergroten.
18:52
S… Speaker 1 (Cc -2 19-10)
Dus ik kan hier bijvoorbeeld zeggen frame count.
18:54
S… Speaker 1 (Cc -2 19-10)
En mijn cirkeltje wordt altijd maar groter en groter.
18:59
S… Speaker 1 (Cc -2 19-10)
Of je maakt daar terug een led size
19:03
S… Speaker 1 (Cc -2 19-10)
variante van.
19:05
S… Speaker 1 (Cc -2 19-10)
En size is...
19:06
S… Speaker 1 (Cc -2 19-10)
Ik ga beginnen bij 10.
19:07
S… Speaker 1 (Cc -2 19-10)
Ik geef hier size mee.
19:09
S… Speaker 1 (Cc -2 19-10)
En ik kan door iedere loop plus plus doen met
19:13
S… Speaker 1 (Cc -2 19-10)
die size.
19:16
S… Speaker 1 (Cc -2 19-10)
Als ik aan een bepaalde size kom,
19:19
S… Speaker 1 (Cc -2 19-10)
kan ik die terug gaan resetten als ik wil.
19:21
S… Speaker 1 (Cc -2 19-10)
Kan ik die terug kleiner laten worden.
19:23
S… Speaker 8 (Cc -2 19-10)
Enzovoort.
19:28
S… Speaker 1 (Cc -2 19-10)
We hebben gezien, dus als je wilt dat je canvas iedere frame gekleerd wordt,
19:32
S… Speaker 1 (Cc -2 19-10)
kun je background gebruiken of zelf een rectangle tekenen.
19:35
S… Speaker 1 (Cc -2 19-10)
Je kunt ook in principe deeltjes van je canvas gaan missen
19:39
S… Speaker 1 (Cc -2 19-10)
en andere deeltjes laten staan,
19:41
S… Speaker 8 (Cc -2 19-10)
in sommige gevallen.
19:41
S… Speaker 5 (Cc -2 19-10)
Goed.
19:44
S… Speaker 1 (Cc -2 19-10)
Maar nu gaan we ook een beetje interactie toevoegen.
19:47
S… Speaker 1 (Cc -2 19-10)
Dus we hebben al wat interactie door die x - en y -positie van de muis te gaan gebruiken.
19:51
S… Speaker 1 (Cc -2 19-10)
Maar we kunnen eigenlijk allerlei andere dingen aan doen.
19:53
S… Speaker 1 (Cc -2 19-10)
We kunnen ook gaan reageren op muiskliks,
19:56
S… Speaker 1 (Cc -2 19-10)
op mouse release,
19:57
S… Speaker 1 (Cc -2 19-10)
op muisbewegingen.
20:00
S… Speaker 1 (Cc -2 19-10)
op drags en op de muiswiel.
20:01
S… Speaker 1 (Cc -2 19-10)
Dus er zijn allemaal events,
20:03
S… Speaker 1 (Cc -2 19-10)
noemen we dat.
20:03
S… Speaker 1 (Cc -2 19-10)
Dingen die gebeuren waar wij op kunnen gaan reageren.
20:07
S… Speaker 1 (Cc -2 19-10)
En dat is eigenlijk vrij eenvoudig te doen,
20:09
S… Speaker 1 (Cc -2 19-10)
net zoals dat we de
20:14
S… Speaker 1 (Cc -2 19-10)
function setup en function draw kunnen toevoegen,
20:17
S… Speaker 1 (Cc -2 19-10)
en dat dat automatisch opgeroepen wordt met P5,
20:20
S… Speaker 1 (Cc -2 19-10)
kunnen we ook een mouse -clicked functie maken,
20:23
S… Speaker 1 (Cc -2 19-10)
en die wordt automatisch opgeroepen op het moment dat je klikt.
20:25
S… Speaker 1 (Cc -2 19-10)
Dus wat kan ik nu gaan doen?
20:27
S… Speaker 1 (Cc -2 19-10)
Je kan voor iets zeggen...
20:31
S… Speaker 1 (Cc -2 19-10)
En daarvoor heb ik zelf niet per se de function,
20:33
S… Speaker 1 (Cc -2 19-10)
de draw loop,
20:34
S… Speaker 1 (Cc -2 19-10)
nodig.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!
Sammanfattning
Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.
Sammanfatta...
Fråga AI om detta Transcript
Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.
Skriv om en annan