qr-kod

Lär dig Processing (p5.js)

Lathund för p5.js

1 2 3 4 Lektion 5

Hastighet och acceleration

Vi har sett hur man kan använda variabler x, y för position och variabler xSteg, ySteg för förflyttning. Eftersom xSteg, ySteg är förflyttning per tidsenhet, kan man också kalla dessa variabler för xHastighet, yHastighet

v=s/t

Om du släpper ett föremål så att det faller ner till marken, så har föremålet hastigheten noll från början sedan ökar hastigheten - föremålet accelereras neråt.

Om du ska modellera gravitation och använder en variabel yHastighet så ska alltså denna variabel öka varje gång programmet "tickar".


Programmeringsuppgift - Modellera gravitation

Utgå från koden:

var x, y, xHastighet, yHastighet;

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

function draw() {
  x = x + xHastighet;
  y = y + yHastighet;
  ellipse(x, y, 20, 20);
}

Testkör programmet. Eftersom både xHastighet och yHastighet är noll, rör sig inte bollen.

Lägg till accelerationskoden:

yHastighet = yHastighet + 0.1;

Testkör koden och se till att bollen faller lagom snabbt.

Stanna när bollen rör marken

Om y-koordinaten är tillräckligt nära den nedre kanten ska bollen inte falla. Byt accelerationskoden till:

if (y < 0.9*windowHeight) {
  yHastighet = yHastighet + 0.1;
} else {
  yHastighet = 0;
}

Se till att denna kod ligger efter förflyttningarna i draw-funktionen. Du kan själv bestämma var marken är.

Hoppa med mellanslagstangenten

För att åstadkomma ett hopp räcker det nu att ge bollen en hastighet i riktningen uppåt. Lägg in följande händelsefunktion:

function keyPressed() {
  if (key == " ") {
    yHastighet = -10;
  }
}

Testkör programmet och ändra hastigheten och accelerationen tills det ser bra ut.

Flytta i sidled med piltangenterna

Lägg in följande kod i funktionen keyPressed():

if (keyCode == LEFT_ARROW) {
  xHastighet = -2;
}

och motsvarande kod för högerpil.

Finjusteringar

Med ett realistiskt hopp kan man inte byta riktning i x-led när man är i luften. Det går att förhindra detta med lämpliga if-satser.

Man ska kanske inte heller kunna hoppa när bollen i luften.

När bollen når vänster eller höger kant kan man välja att studsa eller att fortsätta från motstående kant.

Istället för en ellips kan man lägga in en bild, eller rita något mer avancerat med hjälp av geometriska objekt.

Ett alternativ till att tvärstanna när bollen når marken är att göra en dämpad studs, exempelvis med koden:

yHastighet = -0.8*yHastighet;

Välj själv hur ditt program ska fungera.

1 2 3 4 Lektion 5