Bevægelse og animationer #1

For at kunne få noget til at bevæge sig, bliver vi nødt til at gentage den del der tegner igen og igen. Vi bliver derfor nødt til at skrive en funktion som kan kaldes hver gang vi skal tegne.

Her er en funktion der tegner en cirkel ved muse-markørens placering:

var draw = function () {
  fill(0, 0, 0);
  ellipse(mouseX, mouseY, 10, 10);
};

Prøv at skrive det ind i editoren på KhanAcademy og se hvad der sker! (Husk semikolonnet til sidst!)

Opgave 7

Skriv et program der tegner en linje fra (0, 0) og hen til muse-markørens placering og bagefter en linje fra markøren hen til nederste højre hjørne.

Opgave 8

Dit program fra Opgave 7 tegner linjerne oven i hinanden, for at løse problemet skal du bruge background()-funktionen.

Følg linket, læs dokumentationen og prøv at fikse problemet.

Opgave 9

Du skal nu få bilen til at følge muse-markøren's x-koordinat.

• Start med at sætte tegnekommandoerne ind i en draw-funktion.
• Brug dernæst mouseX til at sætte xpos som styrer hvor på billedet bilen skal tegnes.
• Brug background()-funktionen så baggrunden bliver ryddet

Opgave 10

Fortsæt hvor du slap i Opgave 2 og Opgave 4:

• Indsæt al din kode ind i en "draw"-funktion
• Sæt et eller flere af koordinaterne til at bruge "mouseX" og "mouseY". Flyt musen henover tegningen og se hvad der sker.

Eksempel:

Opgave 11

Prøv nu at tegne en baggrundsfarve bag ved stregerne, så de gamle streger ikke bevares.

Eksempel: