Animeren met P5.js

See the Pen animatie 1 by karinwegter (@karinwegter) on CodePen.


See the Pen animatie 2 by karinwegter (@karinwegter) on CodePen.


blog tekst


Hoe laat ik een object bewegen door gebruik te maken van de muis en het toetsenbord

Hoe kan ik objecten op verschillende manieren bewegen

Hiervoor heb ik eerst uitgezocht op welke verschillende manieren je een object kunt laten bewegen en op welke manieren ik een object wou laten bewegen. Ik heb als eerste opgezocht hoe ik een ster kon maken omdat ik deze wou gebruiken als object die ik laat bewegen door middel van het gebruik van de muis en het toetsenbord. De ster heb ik gebruikt door gebruik te maken van een Pshape, hier mee kun je geavanceerde vormen tekenen. om een Pshape te kunnen tekenen beginnen we met createShape () nu kun je een vorm tekenen, bijvoorbeeld waar je de muis hebt staan op het scherm. Met createShape () en endShape () kan ik veel meer verschillende vormen en moeilijkere vormen maken. Zoals de ster die ik gemaakt heb door gebruik te maken van PolygonPShape.

Verder heb ik gezorgd dat als ik de muis over het scherm beweeg de ster met de muis mee gaat. de ster maakt gebruik van de X en Y positie van de muis door deze te volgen. En als er op de de ster geklikt wordt door de muis verandert de stroke (rand) van de ster in een random kleur, Er wordt een nieuwe kleur gekozen door random waarden voor de R G en B te gebruiken.

See the Pen Ster die met de muis mee gaat en van kleur veranderd als je met de muisklikt. by karinwegter (@karinwegter) on CodePen.

Ik heb de ster overgenomen van mijn eerdere voorbeeld. ik heb de kleur van de ster veranderd in rood en de ster heb ik een zwarte stroke gegeven. Ik heb verschillende tutorials gevolgt over hoe je een object kunt bewegen met keypressed omdat ik niet goed wist hoe dit in P5.js werkt omdat het in processing net weer anders is. Ik heb de functie keypressed aangemaakt, elke keer als deze functie wordt aangeroepen kijkt deze of de juiste key is ingedrukt, als dit niet zo is dan beweegt die ster niet. Als er op de juiste key wordt gedrukt, de w, a, s, of d, dan beweegt de ster 10 pixels omhoog, opzij of omlaag.

See the Pen PJmYNv by karinwegter (@karinwegter) on CodePen.

Verder heb ik er voor gezorgd dat je een key ingedrukt kunt blijven houden waardoor de ster blijft bewegen en het niet lijkt dat hij hapert en stoef beweegt. Ik had eerst veel problemen mee om de ster op de manier te laten bewegen omdat hij steeds manier 2 kanten op wou bewegen dit heb ik opgelost door de if aan te passen wat de ster moet doen als de juiste key is ingedrukt. Verder heb ik de snelheid waarmee de ster beweegt aangepast op X en Y as.

See the Pen ster met w a s d die door gaat by karinwegter (@karinwegter) on CodePen.

Leer ervaring

Ik heb geleerd hoe ik in P5.js objecten kan bewegen met de muis en het toetsenbord.
Ook heb ik geleerd hoe ik de javascript debugger in de browser kan gebruiken om fouten op te lossen in het script, hier had ik last van toen een paar knoppen het niet deden en een aantal functies in P5 anders heten dan in processing.

Bronnen

https://p5js.org/examples/hello-p5-interactivity-1.html
https://processing.org/examples/star.html
https://processing.org/tutorials/pshape/
https://forum.processing.org/two/discussion/20904/can-someone-explain-how-this-code-makes-a-star
http://coursescript.com/notes/interactivecomputing/animation/
http://coursescript.com/notes/interactivecomputing/index.html
https://www.youtube.com/watch?v=UvSjtiW-RH8
https://www.youtube.com/watch?v=ibW4oA7-n8I
https://www.youtube.com/watch?v=DEHsr4XicN8