Objekt (studsboll)

Skapa ett objekt som rör sig med hastighet och acceleration

I stället för att skapa en variabel för varje värde som man ska hantera i koden kan värden som hör ihop sparas i ett objekt.  Ett objekt skapas också med ordet var och ett namn.

let ball1 = {
  tid: 0,
  ypos: 275,
  speed: 3.5,
  acc : -0.02
};

Objektets namn är ball1 och det finns fyra olika key/value par i objektet. Key är det som står före colon-tecknet  ( : )och value det som står efter. Efter key/value par finns ett komma . Efter det sista key/value finns inget komma vilket visar att det är det sista paret som definieras. Efter sista krullparentesen finns ett semicolon ( ; ) för att visa att objektet slutar. Objektet som skapas här ska bli en studsande boll och har värden för tid, y-position, hastighet och acceleration.

I setup() skapas canvasen och i draw() skapas en kod som delar in canvasen i en blå och en vit del.

function setup() {
createCanvas(400, 400);
}

function draw() {
noStroke();
background("lightblue");
fill("white");
rect(0, 250, 400, 150);
}

Därefter skrivs kod för bollens y-position in i draw()

ball1.ypos = (ball1.acc * ball1.tid * ball1.tid + ball1.speed * ball1.tid);

För att använda de värden som skapats i ett objekt skriver man objektets namn följt av en punkt och därefter namnet på key (nyckeln). För ypos får man skriva ball1.ypos

Koden ovan gör att bollens y-position kommer att ökas med
acc * tid * tid + speed * tid
för varje gång skärmen uppdateras (ca 60 gånger /sekund)

För att rita ut bollen skapas en ny variabel som vi kallar nyY1. Den får y-värdet 275  minus bollens y-position. När programmet startas kommer bollens position att vara x =200 och y = 275. För varje uppdatering av draw() kommer bollens position att ändras. Bollen ska vara blå.

let nyY1 = 275 - ball1.ypos;
fill("blue");
ellipse(200, nyY1, 50, 50);

Variabeln tid ska ändras med tre varje uppdatering av draw()

 ball1.tid += 3;

Om man nu kör programmet kommer bollen att åka uppåt ca 150 pixlar för att sen vända nedåt igen. Nu behövs villkor för att bollen ska studsa på det tänkta golvet (vilket är där bollen startar).

if (ball1.ypos < 0) {
   ball1.tid = 0;
if (ball1.speed > 0) { 
   ball1.speed -= 0.1
} else {
   ball1.speed = 3.5;
}
}

Om bollens ypos är mindre än noll ska tid sättas till 0 (som det var initialt). speeden sätts ska minskas med 0.1 så länge det finns ett värde på speed som är större än noll. När värdet är mindre än noll (else-villkoret) ska speed sättas till 3.5 igen.

 Sätt // framför koden för else-villkoret för att se vilken påverkan det har på programmet

 } //else {
//ball1.speed = 3.5;
// }

För att göra programmet lite snyggare så kan en skugga läggas till under bollen. En variabel som heter grey1 skapas och den får ett värde som är beroende av var bollen befinner sig i y-position. En annan variabel med namnet skuggSize1 skapas och den får också ett värde som beror av bollens y-position.  fill() får värdet grey1 och en ellipse ritas ut i positionen x = 200, y = 300, bredd = skuggSize och höjd 10

let grey1 = 0.1 * ball1.ypos + 200;
let skuggSize1 = 0.2 * ball1.ypos + 50;
fill(grey1);
ellipse(200, 300, skuggSize1, 10);

När koden körs så kan man se att skuggan ligger framför bollen vilket inte är så snyggt. Genom att flytta lite i koden så att skuggan ritas ut först och sen bollen kommer det att se bättre ut.

Nu kommer det smidiga med att ha skapat ett objekt. Man kan kopiera objektet och koden som tillhör och bara ändra namnet till ball2 och ändra siffran 1 i alla variabelnamn till siffran 2 så kan man skapa en boll till.

 Lägg till en boll och ändra i koden så att den har en annan position, skuggstorlek och färg.

Om du vill titta närmare på  hur bollen rör sig kan du lägga in en funktion som heter frameRate() i setup() . Med frameRate bestämmer du hur många gånger per sekund skärmen ska uppdateras. frameRate(10) gör att man hinner se bollens rörelse bättre. Att sätta en lägre frameRate är bra att använda när man behöver debugga sin kod.