Vektorer
En vektor är en storhet som har både en storlek (magnitud) och en riktning.
En vektor visas som en pil mellan en startpunkt (A) och en slutpunkt (B) och betecknas med bokstäver, alternativt en bokstav, med en pil över.
Längden på pilen är vektorns storlek (magnitud) och det håll den pekar åt är vektorns riktning.
Vektorer kan användas i programmering för att beskriva bland annat position, hastighet eller acceleration.
Nedan finns ett program skapat men p5.js vilket visar vektorer. Programmet är tänkt som en demonstration på hur vektorer skapas, adderas och subtraheras. Värden på variablerna redX, redY, blueX och blueY kan ändras för att skapa vektorer med annan storlek och riktning. Canvasen är indelad i fyra delar.
I p5.js skapas en 2D- vektor med koden
createVector(x,y)
Här anges bara ett värde för vektorn vilket är slutvärdet (B). Startvärdet (A) antas vara origo (0,0).
I ruta 1 har en vektor angetts och en pil ritats ut mellan punkterna (0,0) och (90,90). En grön rätvinklig triangel ritas också ut. Med den kan storleken (längden) på vektorn beräknas med Pythagoras sats. Katetrarna har båda längd 90. Genom att ändra på värdet på variablerna redX och redY fås en vektor med annan storlek och riktning. Riktningen anges här i grader i förhållande till den övre horisontella linjen på canvasen.
I ruta två ritas ytterligare en vektor ut med värdet för variablerna blueX och blueY.
I ruta tre visas hur vektorer adderas. En vektor förflyttas och läggs efter den andra (med bibehållen riktning) Storleken på summan av två vektorer beräknas som hypotenusan på den rätvinkliga triangel som ritas ut mellan startpunkt på den ena vektorn och slutpunkt på den andra vektorn. Termerna i en vektoraddition kallas för komposanter och summan av komposanterna kallas resultant.
I ruta fyra visas hur vektorer subtraheras. När den blå vektorn subtraheras från den röda så vänds dess riktning åt motsatt håll. Storleken på differensen av två vektorer beräknas som hypotenusan på den rätvinkliga triangel som ritas ut mellan startpunkt på den ena vektorn och slutpunkt på den andra vektorn.
Ändra värden på variablerna för de två vektorerna och kontrollera att storlek (längd) blir det samma som om du beräknar det manuellt.
Vektorer för hastighet och acceleration
Först ska vi gå igenom ett nytt koncept i JavaScript . The Constructor Function. Det är ett sätt att skriva kod om du vill återanvända koden för ett antal objekt.
En Constructor function för personer där förnamn , efternamn och ålder ska anges skrivs så här:
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
Funktionens namn Person skrivs med STOR bokstav för att visa att det är en constructor. I koden används engelska ord, inte för att det måste vara så, utan för att svenska ord innehåller så många å, ä och ö och de fungerar inte i JavaScript. De tre parametrarna firstName, lastName och age som står i parentesen efter funktionens namn specificeras sen i funktionen med ett kodord som heter this .
När man sen vill använda sin constructor till att skapa information till nya personer skapar man en variabel som beskriver vem personen är. Man skriver new Person och anger personens data som argument där parametrarna firstName, lastName och age står.
let myFather = new Person("John", "Blad", 50);
let myMother = new Person("Ella", "Blad", 54);
Om man sen vill använda värden från de nya personer som skapats skrivs den nya personens variabelnamn följt av en punkt och den parameter man vill använda (här firstName)
Exempel:
console.log(myMother.firstName); eller text(myMother.firstName, 100,100);
Ändra i koden så att efternamn eller ålder på någon av personerna skrivs ut skrivs ut på canvasen.
kan du skapa en egen ny person?
Nu ska vi skapa ett program som använder en constructor function och vektorer.
Om du klickar på pilen som finns i editorn uppe till vänster om där det står sketch.js så får du fram projekt-foldern. Högerklicka på project-folder och välj Add file och skriv namnet boll.js och klicka add file.
För att den nya filen ska användas i programmet behöver vi göra en ändring i filen som heter index.html .
Klicka på den filen i projekt-foldern och lägg till den rad med text som är markerad i bilden nedan. Tillägget gör att både filen sketch.js och boll.js
kommer att användas i programmet. Alla filer som ingår i ett program måste anges i filen index.html
Gå tillbaka till filen boll.js. Nu ska vi skapa en constructor function med namnet Boll och fyra parametrar som är x. y, vel och acc.
x och y är koordinater på canvasen och kommer att användas i en vektor som får namnet pos. vilket står för position.
vel står för velocity vilket är engelska för hastighet.
acc står för acceleration.
function Boll(x, y, vel, acc) {
this.pos = createVector(x, y);
this.vel = createVector(vel, 0);
this.acc = createVector(0, acc);
}
i funktionen står this.pos = createVector(x, y); Vi skapar alltså en variabel med namnet pos som är en vektor med storlek från origo till (x, y). Värden för x och y bestämmer vi sen när vi skapar en new Boll().
this.vel = createVector(vel, 0); betyder att vi skapar en vektor och har värdet vel i x-led och värdet 0 i y-led. Värdet på vel anger vi när en new Boll() skapas.
this.acc = createVector(0, acc); betyder att vi skapar en vektor och har värdet 0 ix-led och värdet acc i y-led. Värdet på acc anger vi när en new Boll() skapas.
I funktionen Boll (före sista krullparentesen ) skapas två funktioner som uppdaterar och visar bollen.
this.update = function() {
this.vel.add(this.acc);
this.pos.add(this.vel);
}
Eftersom de här funktionerna tillhör vår constructor function så måste de också ha kodordet this. Så istället för att skriva
let update = function(){
}
skriver vi
this.update = function() {
}
och i funktionen skriver vi vad som ska ske när funktionen kallas på. Här ska vi först addera vektor acc med vektor vel. I p5.js används den fördefinierade functionen add() för att addera vektorer. därefterr adderas vel med pos. Även här måste kodordet this användas då det är i constructor funktionen koden skrivs.
this.vel.add(this.acc); this.pos.add(this.vel);
Funktionen för att visa bollen får namnet show. I den sätter vi fill() till svart (0). En ellips ritas ut. för en ellips anges x, y, bredd, höjd. x sätts här till det x-värde som vektorn pos har och y sätts till det y-värde som vektorn pos har. Bredd och höjd sätts till 30 pixlar.
this.show = function() {
fill(0);
ellipse(this.pos.x, this.pos.y, 30, 30);
}
Nu är filen boll.js komplett. Koden skulle kunna ha skrivits i sketch.js men det är bra att dela upp kod i filer för programmets överskådlighet.
Nu ska kod skrivas i sketch.js.
Före setup() skapas två variabler med namnen boll1 och boll2.
let boll1; let boll2;
I setup() skapas en canvas som är 400 * 400 pixlar stor.
boll1 = new Boll(0, height, 1, -0.02); betyder att en boll skapas med alla egenskaper som finns för Boll i constructor function. De parametrar som ska anges för Boll är (x, y, vel, acc).
boll1 får då:
x = 0, y = height, vel = 1 och acc = -0.02
boll2 får då:
x = width/2, y = height, vel = 1.1 och acc = -0.03
Att accelerationen får ett negativt värde beror på att värdet för y minskar uppåt på canvasen.
Sist kommer en ny fördefinierad funktion som heter frameRate(). Den anger hur många gånger per sekund skärmen ska uppdateras. Normalt ligger antal uppdateringar på ca 60/sek (för en skärm på 60 Hertz). För att lättare se vad som sker på skärmen kan takten sättas ner. För debugging av kod är frameRate() också ett bra redskap
function setup() {
createCanvas(400, 400);
boll1 = new Boll(0, height, 1, -0.02);
boll2 = new Boll(width / 2, height,1.1, -0.03);
frameRate(20);
}
I draw() sätts bakgrund till en grå färg och funktionerna update() och show() körs för respektive boll.
function draw() {
background(220);
boll1.update();
boll1.show();
boll2.update();
boll2.show();
}
I programmet nedan är all kod skriven i sketch.js vilket beror på att den widget som gör att koden kan visas så här på webbsidor inte hanterar flera filer.
Ändra värdena för hastighet och acceleration i setup(), där boll1 och boll2 skapas, för att se vad respektive vektor gör.
Nedan finns ett program med två bollar där den ena påverkas av hastighet och den andra påverkas av acceleration.
Kan du få bollarna att stanna när de är på samma höjd på canvasen?
För att stoppa animationen används funktionen noLoop(). Använd en if-sats
if(floor(ball1.___._) == floor(ball2.___._){
noLoop();
}