Skolekoding.no > Tekst-koding > p5.js > NOC trinn for trinn

---

Eksempel fra The Nature of Code av Daniel Shiffman
1.8 Motion 101 ​(velocity and constant acceleration)

---

1.8 a Akselerasjon

• let pos;
• let velocity;
• let acceleration;
• function setup() {
  • createCanvas(400, 400);
  • pos = createVector(random(width), random(height)); 
  • velocity = createVector(0, 0); _{// Sirkelen ligger i ro. Ingen hastighet verken i x-retning eller i y-retning.}
  • acceleration = createVector(0, 0.01); 
• }
• function draw() {
  • background(220);
  • velocity.add(acceleration);
  • pos.add(velocity);
  • if (pos.y > height) {
    • pos.y = 0;
  • }
  • _{// Viser sirkel}
  • stroke(0);
  • fill(175);
  • ellipse(pos.x, pos.y, 36);
• }

---

før setup()

1. VI lager en variabel for akselerasjonen

setup()

1. Vi gir sirkelen akselerasjon i form av en vektor.

draw()

1. For å øke hastigheten adderer vi hastighetsvektoren med akselerasjonsvektoren.
2. x-verdien til akselerasjonen legges til x-verdien til hastigheten. Det samme for y-verdien.​
3. Vi sjekker om sirkelen er nedenfor lerretet.
4. Sirkelen plasseres i toppen av lerretet.

​
Oppgaver

1. Gi sirkelen en akselerasjon mot høyre
2. Få sirkelen til å komme fram på venstre kant når den forsvinner ut til høyre.
3. Gi sirkelen en akselerasjon mot venstre.
4. Få sirkelen til å komme fram på høyre kant når den forsvinner ut til venstre.
5. Gi sirkelen en akselerasjon mot oppover.
6. Få sirkelen til å komme fram i nedre kant når den forsvinner ut oppe.

---

1.8 b add og limit

• let pos;
• let velocity;
• let acceleration;
• let topSpeed;
• function setup() {
  • createCanvas(400, 400);
  • pos = createVector(random(width), random(height)); 
  • velocity = createVector(0, 0);
  •  acceleration = createVector(-0.001, 0.01);
  • topSpeed = 10;
• }
• function draw() {
  • background(220);
  • velocity.add(acceleration);
  • velocity.limit(topSpeed);
  • pos.add(velocity);
  • if (pos.x > width) { 
  • pos.x = 0; 
  • } else if (pos.x < 0) { 
  • pos.x = width;
  • }​
  • if (pos.y > height) {
  • pos.y = 0; 
  • }
  • if (pos.y < 0) {
  • pos.y = height;
  • }
  • stroke(0);
  • fill(175);
  • ellipse(pos.x, pos.y, 36);
• }

---

Før setup()

1. Lager variabel for topphastighet

​setup()

1. Vi gir sirkelen akselerasjon i form av en vektor.
2. Ny varoabel: «topspeed»
3. ​»topspeed» får verdien 10

draw()

1. For å øke hastigheten adderer vi hastighetsvektoren med akselerasjonsvektoren.
2. x-verdien til akselerasjonen legges til x-verdien til hastigheten. Det samme for y-verdien.​
3. Hastigheten øker for hver runde i draw()
4. Hastigheten begrenses til topSpeed​
5. Sjekker loddrette kanter med if og else if

​
Oppgaver

1. Endre topSpeed
2. Bruk if og else if for å sjekke nedre og øvre kant

---

1.8 c mousePressed()

• let pos;
• let velocity;
• let acceleration;
• let topSpeed;
• function setup() {
•     createCanvas(400, 400);
• ​    pos = createVector(random(width), random(height)); 
•     velocity = createVector(0, 0);
•     acceleration = createVector(-0.001, 0.01);
•     topSpeed = 10;
• }
• function draw() {
•     background(220);
•     velocity.add(acceleration);
•     velocity.limit(topSpeed);
•     pos.add(velocity);
• ​
•     if (pos.x > width) { 
•         pos.x = 0; 
•     } else if (pos.x < 0) { 
•         pos.x = width;
•     }​
•     if (pos.y > height) {
•         pos.y = 0; 
•     } else if (pos.y < 0) {
•         pos.y = height;
•     }
•     stroke(0);
•     fill(175);
•     ellipse(pos.x, pos.y, 36);
• }
• function mousePressed() {
• ​    pos = createVector(random(width), random(height)); 
•     velocity = createVector(0, 0);
•     acceleration = createVector(-0.001, 0.01);
• }

---

draw()

1. Vi bruker if og else if for å sjekke venstre kant

mousePressed()

1. Vi kopierer de linjene fra setup() som inneholder variabler som skal resettes.
2. Disse linjene kjøres når venstre museknapp trykkes.
3. createCanvas() og topspeed trenger ikke være med i function mousePressed()

---

1.8 d objektet «mover»

• let mover;  _{// Oppretter en variabel «mover»}
• function setup() {
  • createCanvas(400, 400);
  • _{// Lager et objekt med klassen «Mover» som mal og gir objektet navnet «mover»}
  • mover = new Mover();   
• }
• ​function draw() {
  • background(220);
  • _{// Kaller på mover sin update-funksjon}
  • mover.update();
  • _{// Kaller på mover sin checkEdges-funksjon}
  • mover.checkEdges(); 
  • _{// Kaller på mover sin display-funksjon}
  • mover.display(); 
• }
• _{// Slutt på draw()}
• function mousePressed() ;
  • mover = new Mover();   
• }
• _{// Klassen Mover. Malen for objektet «mover»}
• class Mover { 
  • constructor() { _{// objektets felt (dvs. variabler). Alle begynner med «this.»}
    • this.pos = createVector(random(width), random(height));
    • this.velocity = createVector(random(-2, 2), random(-2, 2));
    • this.acceleration = createVector(-0.001, 0.01);
    • this.topSpeed = 10;
  • } 
  •  _{// En metode (dvs. funksjon) i klassen Mover. Oppdaterer posisjonen}
  • update() {
    • this.velocity.add(this.acceleration);
    • this.velocity.limit(this.topSpeed;
    • this.pos.add(this.velocity);
  • }
  • _{​// En metode (dvs. funksjon) i klassen Mover}    
  • checkEdges() { 
    • if (this.pos.x > width) {
      • this.pos.x = 0;
    • } else if (this.pos.x < 0) {
      • this.pos.x = width;
    • }
    • if (this.pos.y > height) {
      • this.pos.y = 0;
    • } else if (this.pos.y < 0) {
      • this.pos.y = height;
    • }
  • }
  • _{// En metode (dvs. funksjon) i klassen Mover. Viser sirkelen}
  • display() { 
    • stroke(0);
    • fill(175);
    • ellipse(this.pos.x, this.pos.y, 36);
  • }
• } _{// Slutt på klassem Mover}

---

før setup()

1. Lager en variabel for objektet «mover»
2. I variabelen samles alle funksjoner som angår objektet

​setup()

1. Oppretter objektet «mover» basert på klassen (malen) «Mover»

draw()

1. Kaller på objektets metoder (dvs funksjoner).
2. Bruker objektets navn + punktum + metodenavn
3. Vi kan lese punktumet som «sin»
4. mover sin update-metode
5. mover sin checkEdges-metode

mousePressed()

1. Vi lager et nytt objekt med samme navn som det forrige. Det forrige objektet erstattes.

constructor()

1. Her deklareres klassens variabler
2. Klassens variabler må navngis med this. foran navnet
3. this.velocity får en tilfeldig startverdi mellom -2 og 2

update()

1. Her oppdateres hastighet og posisjon

checkEdges() 

1. Her sjekkes det om objektet kolliderer med kantene

display()

1. Her vises objektet

Forklaring

1. Se Daniel Shiffmans video om objektorientert programmering med p5.js
2. ​Objektorientert programmering i p5.js grunnkurs
3. Hvordan legge klassekode i egne filer for å lette oversikten (14:20 ->)
   

1. Sirkelen har variabler for posisjon, hastighet, akselerasjon og toppfart
2. Sirkelen har kodelinjer for å oppdater posisjon, sjekke kanter og vise sirkel.
3. Vi plasserer alt dette i en egen bolk.
4. Bolken er en mal for hvordan en sirkel skal se ut og oppføre seg.
5. Denne malen kalles en klasse. Med utgangspunkt i malen lages sirkler.
6. Disse sirklene kalles objekter.
7. Det er vanlig å gi klassen samme navn som objektene den er mal for.
8. Det er vanlig å ha stor forbokstav i klassens navn for å vise at det er en klasse.​ 
9. Klassens globale variabler må ha forstavelsen «this» og et punktum.
10. Disse variablene opprettes i konstruktøren og kan brukes av alle metodene.
11. Hvis metodene har egne lokale variable opprettes de med «let» som vanlig
12. I dette eksempelet lager vi bare en sirkel, altså bare ett objekt.
13. Det er når vi skal ha mange objekter at objektorientert programmering virkelig kommer til sin rett.
14. Det er mulig å lage objekter som ser ulike ut selv om de er basert på samme klassen.
15. Klassen er som en pepperkakeform som gir omrisset av en pepperkake.
16. Pepperkaker (objektene) kan dekoreres slik at de fremstår som ulike selv om omrisset (klassen) er det samme.​