Skolekoding.no > Tekstkoding > p5.js > Kurs > 6. Bevegelse

---

6.1 Bildehastighet

p5.js gjentar koden som står inne i draw() om og om igjen. På samme måte som en i en tegnefilm. Standard hastighet er 60 ganger i sekundet. Hvis koden tar lang tid å gjennomføre, kan det hende at bildehastigheten går ned.

Skriv dette i editoren:

• function setup() {
  • createCanvas (600, 400);
• }
• function draw() {
  • ellipse (mouseX, mouseY, 20, 20);
• }

​
Vi kan endre hastigheten ved å bruke funksjonen frameRate(). Setningen frameRate(1) inne i setup(), vil sette bildehastigheten til ett bilde i sekundet.

---

6.2 Bevegelseshastighet og retning

En figur tegnes med utgangspunkt i en x- og en y-koordinat. For å få til bevegelse må koordinatene endres for hver runde i draw().

Hvis x-verdien økes, beveger figuren seg mot høyre.
Hvis økningen er stor, blir hastigheten høy.

---

6.3 Fra venstre mot høyre

Skriv dette i editoren:

• let x = 0;
• let speed = 5;
• let radius = 50;
• function setup() {
  • createCanvas(600, 400);
• }
• function draw() {
  • background(240); _{// lerretet blankes ut for hver runde i draw()}
  • x = x + speed; _{// for hver runde i draw vil x få en ny verdi som er lik den forrige verdien + verdien av speed}
  • fill(0);
  • circle(x, height / 2, radius);
• }​

For å etterlate bevegelsesspor kan man tegne et rektangel med en en viss grad av gjennomskinnelighet, i stedet for å bruke background().

Bytt ut

• background(240;

med

• fill(240, 10); _{// Hvitt med lav fyllgrad (10) dvs. stor gjennomskinnelighet}
• rect(0, 0, width, height); _{// Rektangel i helle lerretets størrelse}

---

6.4 Rundt og rundt

For å få sirkelen til å dukke opp igjen i venstre kant sjekker vi om x-verdien er størrre enn bredden og begynner på nytt.

Skriv dette i editoren:

• let radius = 40;
• let x = – radius; 
• let speed = 4.5; 
• function setup() {
  • createCanvas(600, 400);
• }
• ​function draw() {
  • background(255); 
  • x = x +speed; 
  • if (x > width) { 
    • x = 0; 
  • }
  • fill(0);
  • circle(x, height / 2, radius);
• }

---

6.5 Oppgave

Endre programmet over slik at sirkelen beveger seg helt utenfor lerretet før den forsvinner. Den skal heller ikke poppe opp halvveis over kanten på venstre side.

---

6.6 Sprette tilbake fra kanten

Skriv dette i editoren:

• let radius; 
• ​let x; 
• let xSpeed;
• ​
• function setup() {
  • createCanvas(600, 400);
  • radius = 40;
  • x = 100; 
  • xSpeed = 4.5;
• }
• ​function draw() {
  • background(255); 
  • x = x + xSpeed;
  • if ((x > width – radius) || (x < radius))  { _{// ved høyre kant eller ved venstre kant}
    • xSpeed =xSpeed * -1 ; _{// retningen byttes om}
  • }
  • fill(0);
  • circle(x, height / 2, radius);
• }

---

6.7 Oppgaver

A) Lag en skisse der sirkelen beveger seg oppover lerretet.

B) Lag en skisse der sirkelen beveger seg på skrå.

C) Lag en skise der sirkelen beveger seg på skrå og spretter tilbake ved kanten.

D) Lag et program der en ball slippes, og spretter når den treffer nedre kant av lerretet, for så å falle ned igjen. Klarer du å få ballen til å sprette mindre og mindre på samme måte som en virkelig sprettball?
​
Hint: bruk en variabel for fart og en for akselerasjon, og ikke tenk på at dette nødvendigvis foregår her på jorda. Farten er forflytningen langs y-aksen i hver runde i draw(). Akselerasjonen er hvor mye  forflytningen øker for hver runde i draw) etter hvert som ballen faller mot bakken.

---

6.6 Tilfeldig bevegelse

Ved å bruke random() får vi tilfeldige verdier.

let t = random(10); gir variabelen «t» tilfeldige verdier mellom 0 og 10 (aldri eksakt null og aldri eksakt ti).

let t = random(-1, 1) gir «t» tilfeldige verdier mellom -1 og 1.

Ved å legge til en tilfeldig verdi til x og y,  kan vi få en figur til å bevege seg tilfeldig over skjermen.

• xSpedd = random(-4, 4);
• ySpeed = random(-4, 4);

---

6.7 Oppgaver

A) Lag en sirkel som beveger seg med små steg tilfeldig rundt på skjermen.
​
B) For å holde sirkelen innenfor lerretet kan vi bruke constrain()

• x = constrain(x, 10, 20);

Her hindrer constrain() x-verdien i å bli mindre enn 10 eller større enn 20. Legg inn constrain() i koden fra oppgave A slik at sirkelen holder seg innenfor lerretet.