Rörelse i koordinatsystem

Vi har sett hur man kan använda variabler för att placera en ellips. Nu ska vi ändra ellipsens position varje gång programmet tickar och få den att studsa som en biljardboll på ett biljardbord.

---

Programmeringsuppgift - Studsande boll

Övning 1 - från vänster till höger

Börja med följande kod:

var x, y; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
  x = 300;
  y = 100;
}

function draw() {
  ellipse(x, y, 20, 20);
}

Testkör programmet!

Ändra koden i draw-funktionen till:

function draw() {
  background(100);
  ellipse(x, y, 20, 20);
  x = x +10;
}

Nu ska vi se till att bollen börjar om från början när den nått fönstrets bredd. Lägg till kod i draw-funktionen:

function draw() {
  background(100);
  ellipse(x, y, 20, 20);
  x = x +10;
  if (x > windowWidth) {
    x = 0;
  }
}

Testkör programmet!

Hur gör du för att bollen ska gå fortare?

Övning 2 - från höger till vänster

Ändra koden så att bollen startar vid den högra kanten och rör sig åt vänster. När den når den vänstra kanten ska den börja om vid den högra kanten igen.

Vilket startvärde ska x ha?

Hur får du bollen att röra sig åt vänster?

Hur ska if-satsen se ut?

Övning 3 - Uppifrån och ned

Ändra koden så att bollen startar vid den övre kanten och rör sig neråt. När den når den nedra kanten ska den börja om vid den övre kanten igen.

Vilket startvärden kan koordinaterna ha?

Hur får du bollen att röra sig åt neråt?

Hur ska if-satsen se ut?

Övning 4 - Lodrät studsning

Vi ska nu få bollen att studsa mellan den övre och den nedre kanten.

Med koden

y = y + 10;

rör sig bollen neråt.

Med koden

y = y - 10;

rör sig bollen uppåt.

Om vi vill att bollen omväxlande ska röra sig uppåt och nedåt måste vi göra en variabel som kan vara omväxlande 10 och -10.

Ändra koden till:

var x, y, ysteg; 
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
  x = 300;
  y = 0;
  ysteg = 10;
}

function draw() {
  background(100);
  ellipse(x, y, 20, 20);
  y = y +ysteg;
  if (y > windowHeight) {
    ysteg = -10;
  }
}

Testkör koden!

Lägg till en if-sats som gör att bollen studsar i den övre kanten, så att ysteg får värdet 10.

Övning 4 - Studsa som en biljardboll

Nu ska bollen studsa även i x-led.

• Lägg till en variabel xsteg. Se till att xsteg får ett startvärde i setup.
• Se till att x ändras med xsteg i draw.
• Lägg in en if-sats som ändrar värde på xsteg vid den högra kanten.
• Lägg in en if-sats som ändrar värde på xsteg vid den vänstra kanten.