Lär dig Processing

 

1 2

Lektion 3

4 5

Rörelse i koordinatsystem

Vi har sätt hur man kan ändra bredden och höjden på en ellips med hjälp av variabler. Nu ska vi använda variabler till att ändra ellipsens position och på så vis få den att studsa som en biljardboll på ett biljardbord.

studsa, vid kanten

Programmeringsuppgift - Studsande boll

Deklarera variabler

Vi ska göra två variabler x och y som anger positionen för en ellips.

Om du vill göra egna variabler i Javascript skriver du var följt av variabelnamn. Ett variabelnamn måste börja med en bokstav, därefter kan det innhålla bokstäver och siffror men inte blanksteg. Du kan deklarera flera variabler efter ordet var, sätt ett kommatecken mellan variablerna.

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 +1;
}

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

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

Övning 1 - 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 2 - 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 3 - 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.

 

1 2

Lektion 3

4 5