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

---

Eksempel fra The Nature of Code av Daniel Shiffman
1.2 Bouncing ball with p5.Vectors

---

1.2 a ellipse()

• ​function setup() {
  • createCanvas(400, 400); _{// Lerret 400×400 punkter}
• }
• function draw() {
  • ellipse(200, 200, 60, 60); _{//Ellipse i punktet (200, 200) med bredde 60 og høyde 60 punkter. Altså en sirkel.}
• ​}

---

Før setup()

1. Vi skriver en overskrift (kommentar) til programmet som hoppes over når programmet kjøres
2. Kommentarer innledes med dobbel skråstrek (shift + 7)

function setup()

1. Setter størrelsen på lerretet med kommandoen createCanvas(). Størrelsen settes til 400 x 400 punkter

function draw()

1. Tegner en ellipse med komandoen ellipse(). Sentrum i x = 200, y = 200. bredde 60 punkter og høyde 60 punkter, altså en sirkel.
2. NB! x = 0 og y = 0 er oppe i venstre hjørnet. x øker mot høyre, y øker nedover. Les mer om koordinatsystem i Processing, p5.js og de fleste andre språk.

Forklaring

1. ​setup() kjøres én gang. Her settes blant annet størrelsen på lerretet.
2. draw() repeteres 60 ganger i sekundet. Sirkelen tegnes på samme plassen 60 ganger i sekundet.
3. Funksjonene starter og slutter med krøllparenteser { } 
   Alt Gr + 7 og Alt Gr + 8. Egne tastekombinasjoner på Mac.
4. Det er vanlig å skrive første krøllparentes på linja etter funksjonsnavnet og siste krøllparentes på egen linje etter siste kommando i funksjonen.
   
5. Innrykk gjør programmet lettere å forstå. Shift + tab rydder automatisk opp i innrykk.
6. Innrykk, linjeskift og mellomrom har ingen betydning for selve programmet.
7. Alle kommandoer avsluttes med semikolon (shift + komma).
8. Funksjonsnavn og kommandoer som er innebygget i p5.js blir uthevet og får blå farge hvis de er skrevet riktig. F. eks.: funksjonene setup() og draw(), og kommandoene createCanvas og ellipse
   
9. Kommentarer som ikke er en del av programmet innledes med dobbel skråstrek (shift + 7)
10. Det kan også være nyttig å dekaktivere en kodelinje ved å omgjøre den til en kommentar.
11. Hurtigtast: ctrl + ‘ (samme tast som asteriks *, ved siden av æ)
12. Stå på linja, trykk og hold ctrl, trykk ‘ uten å slippe ctrl
13. Marker flere linjer, trykk og hold ctrl, trykk ‘ uten å slippe ctrl
    
14. Lerretet er inndelt i punkter vannrett (x-akse) og loddrett (y-akse). Origo (x = 0, y = 0) er i øvre venstre hjørne. Positiv x-akse er vannrett mot høyre. Positiv y-akse er loddrett nedover.
15. Les mer om koordinatsystem i Processing, p5.js og de fleste andre språk.
16. Her er lerretet 400 x 400 punkter
17. Første x-verdi er 0. Siste x-verdi er 399
18. Første y-verdi er 0. Siste y verdi er 399

Oppgaver

1. Endre størrelsen på lerretet
2. Endre plasseringen av sirkelen
3. Endre størrelsen på sirkelen
4. ​Skriv noen innledende kommentarer over setup()
5. Skriv noen forklarende kommentarer i programmet

---

1.2 b background()

• function setup() {
  • createCanvas(400, 400);
• }
• ​
• function draw() {
  • background(220); _{// Lerretet får grå farge}
  • elllipse (200, 200, 60, 60);
• }

---

function draw()

1. Vi setter gåfarge på lerretet med background()

Forklaring

1. Vi kan bestemme fargen på lerretet med kommandoen background()
2. Inne i parentesen kan vi skrive ett, to, tre eller fire tall mellom 0 og 255. Hvorfor 0-255?
3. Ett tall gir gråtone: 0=svart, 255=hvit.
4. To tall gir gråtone + gjennomskinnelighet: 0=helt gjennomsiktig, 255=helt ugjennomsiktig.
5. Tre tall gir farger: RGB: Rød, Grønn, Blå. Fargene blandes som lys ikke som maling. (255, 255, 255) = hvit. 
6. Fire tall gir farge + gjennomskinnelighet.
7. Les mer om farge

Oppgaver

1. Gi lerretet en annen gråtone.
2. Prøv med andre gråtoner.
3. Gi lerretet en farge.
4. Prøv med andre farger. Fargevelger.

---

1.2 c stroke()

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  •  background(220);
  • strokeWeight(2);
  • stroke(255, 0, 0); _{// Rød strekfarge}
  • ellipse (200, 200, 60, 60);
• }

---

function draw()

1. Vi kan bestemme strekfarge på omrisset av sirkelen med kommandoen stroke()​
2. Inne i parentesen kan vi skrive en, to, tre eller fire tall mellom 0 og 255 på samme måte som for background.
3. Vi kan bestemmetykkelsen med strokeWeight()
4. Les mer om omriss

Oppgaver

1. Gi streken en annen gråtone.
2. Endre tykkelsen på streken
3. Gi omrisset en farge.
4. Prøv med andre farger. 
5. Fargevelger.

---

1.2 d fill()

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  •  background(220);
  •  strokeWeight(2);
  •  stroke(255, 0, 0); 
  •  fill(0, 255, 0); _{// Grønn fyllfarge}
  •  ellipse (200, 200, 60, 60);
• }

---

function draw()

1. Vi kan bestemme fyllfargen av sirkelen med kommandoen fill()
2. Inne i parentesen kan vi skrive en, to, tre eller fire tall mellom 0 og 255 på samme måte som for stroke : RGB

Oppgaver

1. Gi sirkelen en annen farge.
2. Gi sirkelen en gråtone.
3. Prøv med andre farger. 
4. Fargevelger.

---

1.2 e createVector()

• let position; _{// Oppretter en variabel med navn «position»}
• function setup() {
  • createCanvas(400, 400);
  • _{// Lager en vektor med x-verdi lik 200 og y-verdi lik 200}
  • position = createVector(200, 200); 
• }
• function draw() {
  • background(220);
  • strokeWeight(2);
  • stroke(255, 0, 0); fill(0, 255, 0);
  • ellipse (position.x, position.y, 60, 60);
• }

---

Før setup()

1. Vi lager en variabel ved å bruke ordet let
2. Variabelen hetter «position»
3. Variabelen er en beholder som bla kan inneholde et tall, en tekst eller en vektor.
4. Vi trenger ikke opprette variabelen før setup(), men ettersom variabelen skal brukes både i setup() og draw() er det ryddig å opprette variabelen her.

function setup()

1. Vi oppretter en vektor med x-verdi lik 100 og y-verdi lik 100.
2. Vektoren tilordnes variabelen position. Vektorens navn blir altså «position»

function draw()

1. Vi bytter ut x- og y-koordinatene i ellipse() med position sin x-verdi og position sin y-verdi. (Vi kan lese punktumet som om det stod sin).

Forklaring

1. Vi kan opprette variabler.
2. Variabler kan inneholde tall, bokstaver, tabeller, vektorer m.m.
3. Vi bruker ordet «let» for å vise at det neste ordet er navnet på en variabel.
4. Vi kan kalle variablene hva vi vil bortsett fra ord som er reservert av p5.js.
5. Reserverte variabelnavn blir røde. Reserverte funksjonsnavn blir uthevet blå.
6. Det er lurt å gi variablene navn som gjør at vi skjønner hva de brukes til.
   
7. Vi kan opprette vektorer.
8. En vektor kan oppfattes som forskjellen mellom to punkter.
9. Hvordan vi kan komme fra ett punkt (x1, y1) til et annet punkt (x2, y2).
10. En vektor har altså både retning og lengde. 
11. For eksempel: vi har en sirkel med sentrum i punktet (100, 200) der vi legger til en hastighetsvektor (10, 50)
12. Hastighetsvektoren forteller at sirkelen skal flyttes 10 punkter langs x-aksen og 50 punkter langs y-aksen.
13. Sirkelen ender opp i punktet (110, 250).
    ​​
14. Et punkt kan også oppfattes som en vektor (en stedsvektor) hvis vi tenker oss origo som utgangspunkt.
15. Stedsvektoren (100, 200) til en sirkel forteller at en sirkel skal plasseres i punket (100, 200).
16. Vi kan tenk oss at sirkelen er flyttet fra (0, 0) til (100, 200).
17. Se figur 1.1 – 1.6 i kapittel 1 av The Nature of Code  

Oppgaver

1. ​Sett inn andre tall enn (100, 100) i createVector()

---

1.2 f add()

• ​let position; 
• let velocity; _{// Vi oppretter en variabel med navn «velocity»}
• function setup() {
  • createCanvas(400, 400);
  • position = createVector(100, 100);
  • velocity = createVector(1, 2); _{// Ny vektor}
• }
• function draw() {
  • background(220);
  • position.add(velocity); _{//Vi legger sammen to vektorer}
  • stroke(0);
  • fill(175);
  • ellipse(position.x, position.y, 16, 16);
• }

---

​
før setup()

1. Vi legger til en ny variabel «velocity»

function setup()

1. ​Variabelen får tildeles en vektor med x-verdi 1 og y-verdi 2

function draw()

1. Vi legger sammen x-verdien til stedsvektoren med x-verdien til hastighetsvektoren.
2. Det samme for y-verdiene. Stedsvektoren får en ny verdi og sirkelen flytter seg.

Forklaring

1. Vi kan legge sammen to vektorer for å få en figur til å flytte seg.​
2. Når vi legger sammen to vektorer adderer vi x-verdiene og y-verdiene hver for seg.
3. Vi legger sammen x-verdien til stedsvektoren med x-verdien til hastighetsvektoren.
4. Det samme for y-verdiene.
5. Stedsvektoren får en ny verdi, og sirkelen flytter seg.
6. ​Se figur 1.6 i kapittel 1 av The Nature of Code
7. Fordi background står inne i draw() vil forrige sirkel fjernes av den nye bakgrunnen. 
8. Vi ser bare den siste sirkelen.

​
Oppgaver

1. ​Sett inn andre tall enn (2.5, 5) i createVector().
2. ​Få sirkelen til å bevege seg brattere oppover mot høyre.
3. Få sirkelen til å bevege seg på skrå ned mot venstre.
4. Få sirkelen til å bevege seg rett oppover eller rett til venstre
5. Flytt background(220) fra draw() til setup()

---

1.2 g if() og height

• ​​let position; 
• let velocity;
• function setup() {
  • createCanvas(400, 400);
  • position = createVector(100, 100);
  • velocity = createVector(1, 2);
• }
• function draw() {
  • background(220);
  • position.add(velocity);
  • if (position.y > height) {
    • velocity.y = velocity.y * -1; 
  • }
  • stroke(0);
  • fill(175); 
  • ellispe(position.x, position.y, 16, 16);
• }

---

​
function draw()

1. VI sjekker om sirkelens y-koordinat er mer enn høyden av lerretet (height). Høyden måles nedover fra øvre kant.
2. Hvis sirkelens y-verdi er større enn lerretets største y-verdi multipliseres verdien med -1.
3. Bevegelsen går motsatt vei.

Forklaring

1. Vi kan sjekke om sirkelen kolliderer med nedre kant av lerretet
2. Vi bruker kommandoen «if ()»
3. I parentesen skriver vi hva som skal sjekkes
4. Deretter skriver vi hva som skal skje hvis svaret på testen er sann.
5. Husk krøllparenteser.
6. Vi kan endre retningen ved å endre fortegnet på hastigheten.
7. Vi endrer fortegn ved å multiplisere med -1.
8. hastighet i y-retning = hastighet i y-retning gange -1.
9. I programmering har et likhetstegn en litt annen betydning enn i matematikk.
10. Her betyr et likhetstegn at vi tilordner en verdi til en variabel.
11. Vi leser baklengs: vi multipliserer hastigheten i y-retning med -1, og legger verdien tilbake i hastighetsvariabelen.
12. Hastigheten i y-retning har blitt endret. Den har fått motsatt fortegn av hva den hadde.

​
Oppgaver

1. Sjekk om sirkelen kolliderer med høyre kant og endre fortegn på velocity.x

---

1.2 h width()

• let position;
• let velocity;
• function setup() {
  • createCanvas(400, 400);
  • position = createVector(100, 100);
  • velocity = createVector(1, 2);
• }
• function draw() {
  • background(220);
  • position.add(velocity);
  • if (position.x > width) { _{// Sjekker om sirkelen kolliderer med høyre kant}
    • velocity.x *= -1; _{// Endrer retning på velocity.x}
  • }
  • if (position.y > height) {
    • velocity.y *= -1; _{// Endrer retning på velocity.y}
  • }
  • stroke(0);
  • fill(175);
  • ellipse(position.x, position.y, 16, 16);
  • }

---

function draw()

1. Vi sjekker kollisjon med venstre kant
2. Vi multipliserer x-veriden med -1
3. Vi bruker en komprimert skrivemåte

Forklaring

1. variabel = variabel * -1;
2. variabel *= -1;
3. Skrivemåten i punkt 1 og 2 betyr det samme.
4. Når vi skal endre verdien til en variabel kan vi bruke den komprimert skrivemåten i punkt 2.

---

1.2 i Eller ||

• ​let position; 
• let velocity;
• function setup() {
  • createCanvas(400, 400);
  • position = createVector(100, 100);
  • velocity = createVector(1, 2);
• }
• function draw() {
  • background(220);
  • position.add(velocity);
  • if (position.x > width) { 
    • velocity.x *= -1; 
  • }
  • if (position.y > height || position.y < 0) { 
    • velocity.y *= -1;
  • }
  • stroke(0);
  • fill(175);
  • ellipse(position.x, position.y, 16, 16);
• }

---

​function draw()

1. Vi sjekker kollisjon med nedre kant eller øvre kant

Forklaring

1. Vi kan gjennomføre to tester i samme if-setning
2. hvis kollisjon med nedre kant eller kollisjon med øvre kant
3. Vi bruker dobbel loddrett strek » || «når vi mener eller 
4. Loddrett strek er ofte tasten lengst oppe til venstre på tastaturet til venstre for 1-tasten.

​
Oppgaver

1. ​Sjekk om sirkelen enten kolliderer med høyre kant eller venstre kant

---

1.2 j Eller igjen

• let position; 
• let velocity;
• function setup() {
  • createCanvas(400, 400);
  • position = createVector(100, 100);
  • velocity = createVector(1, 2);
• }
• function draw() {
  • background(220);
  • position.add(velocity);
    • if (position.x > width || position.x < 0) { 
  • velocity.x *= -1; 
  • }
  • if (position.y > height|| position.y < 0) { 
    • velocity.y *= -1;
  • }
  • stroke(0);
  • fill(175);
  • ellipse(position.x, position.y, 16, 16);
• }

---

​function draw()

1. Vi sjekker kollisjon med venstre kant eller høyre kant

Oppgave

1. Nå returnerer sirkelen når sentrum av sirkelen treffer kanten. Gjør om if-setningene slik at sirkelen spretter tilbake straks kanten av sirkelen treffer kanten av lerretet.

---

1.2 k Kantgjenkjenning

• let pos;
• let radius;
• let velocity;
• function setup() {
  • createCanvas(400, 400);
  • _{// Gir pos-variabelen en tilfeldig startverdi innenfor lerretet.}
  • pos = createVector(random(0, width), random(0, height));
  • _{// Gir radius verdien 16}
  • radius = 8;
  • _{// Gir velocity en tilfeldig x- og y-verdi mellom -4 og 4.}
  • velocity = createVector(random(-4, 4), random(-4, 4)); 
• }
• function draw() {
  • background(220);
  • _{// Oppdaterer posisjon}
  • pos.add(velocity);
  • _{// Sjekker kanter}
  • if (pos.x < 0 + radius || pos.x > width – radius) {
    • velocity.x *= -1;
  • }
  • if (pos.y < 0 + radius || pos.y > height – radius) {
    • velocity.y *= -1;
  • }
  • _{// Viser sirkel}
  • stroke(0);
  • fill(175);
  • ellipse(pos.x, pos.y, radius*2, radius*2);
• }
• let pos;
• let radius;
• let velocity;
• function setup() {
  • createCanvas(400, 400);
  • _{// Gir pos-variabelen en tilfeldig startverdi innenfor lerretet.}
  • pos = createVector(random(0, width), random(0, height));
  • _{// Gir radius verdien 16}
  • radius = 8;
  • _{// Gir velocity en tilfeldig x- og y-verdi mellom -4 og 4.}
  • velocity = createVector(random(-4, 4), random(-4, 4)); 
• }
• function draw() {
  • background(220);
  • _{// Oppdaterer posisjon}
  • pos.add(velocity);
  • _{// Sjekker kanter}
  • if (pos.x < 0 + radius || pos.x > width – radius) {
    • velocity.x *= -1;
  • }
  • if (pos.y < 0 + radius || pos.y > height – radius) {
    • velocity.y *= -1;
  • }
  • _{// Viser sirkel}
  • stroke(0);
  • fill(175);
  • ellipse(pos.x, pos.y, radius*2, radius*2);
• }

---

setup()

1. Vi bruker tilfeldige verdier for posisjonsvektoren
2. x-verdien blr valgt tilfeldig mellom 0 og bredden på lerretet
3. y-verdien blir valgt tilfeldig mellom 0 og høyden på lerretet
4. Hastighetsvektoren får tilfeldige verdierfor x og y mellom -4 og 4.

Forklaring

1. Vi trekker fra radiusen av sirkelen når vi sjekker høyre kant og nedre kant.
2. Vi legger til radiusen av sirkelen når vi sjekker venstre kant og øvre kant.
3. Vi kan bruke random() for å lage tilfeldige verdier.
4. Inne i parentesen skriver vi ett eller to tall.
5. To tall definerer øvre og nedre grense for det tilfeldige tallet.
6. For eksempel: random(5, 10) gir et desimaltall større enn fem og mindre enn ti.
7. Skriver vi ett tall i parentesen er null nedre grense og tallet i parentesen øvre grense.
8. For eksempel: random(10) gir et desimaltall større enn null og mindre enn 10.