Wanneer we naar onderstaande code kijken, hebben we in het vorige hoofdstuk al vastgesteld dat hier niets gebeurd omdat we steeds dezelfde cirkel tekenen, op steeds dezelfde plaats. Om precies te zijn tekenen we de cirkel op x-plaats 50 en y-plaats 50.
Om de cirkel beweging te krijgen zullen we dus de x en y coördinaat moeten aanpassen. Om dit op een laagdrempelige manier te doen, heeft P5js een speciale, ingebouwde variabele. Wanneer een canvas wordt aangemaakt en een draw loop wordt geïnitialiseerd, houdt P5js automatisch de locatie van onze muiscursor bij in de variabelen mouseX en mouseY. Wanneer we deze invullen op de plaats waar de x en de y coördinaat van onze cirkel hoort te staan krijgen we:
(beweeg, na op play te hebben geduwd, met je muis over het canvas)
Eureka! De cirkel beweegt! Echter ziet het er raar uit. Dit doet ons denken aan windows 95. Als de computer crashte kregen we een soortgelijke staart wanneer we het venster verplaatste.
Dit effect wordt veroorzaakt omdat de achtergrond niet wordt geupdate. We tekenen wel telkens een nieuwe cirkel, in dit geval op de plaats van onze muis, maar de vorige cirkels blijven gewoon staan. Dat was meteen ook de reden waarom er een rafelige rand verscheen toen we de cirkels op dezelfde plaats over elkaar lieten verschijnen. De oplossing is de achtergrond te vernieuwen vooraleer we er een cirkel op tekenen. Elke keer als de draw loop wordt uitgevoerd willen we eerst een cleane achtergrond, en dan een cirkel op de positie van onze muis.
We kunnen ook vormen relatief aan de muis plaatsen. Dat wil zeggen dat we een vorm kunnen plaatsen die de muis volgt op 20 pixels rechts van de muispointer. Dit doe je door simpelweg +20 achter mouseX toe te voegen. Hieronder zie je 2 cirkels, die de muis volgen op respectievelijk -20 en 20 pixels afstand van de X coördinaat van de muis.
Maak een mickey-mouse achtige compositie van cirkels, die je muis volgt.