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.
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?
Ä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?
Ä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?
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.
Nu ska bollen studsa även i x-led.
xsteg
. Se till att xsteg
får ett startvärde i setup.
x
ändras med xsteg
i draw
.
xsteg
vid den högra kanten.
xsteg
vid den vänstra kanten.