Skolekoding.no > Tekstkoding > p5.js > Kurs > 5. Respons

---

function setup()
Enkelte instruksjoner skal utføres når programmet starter. For eksempel det å sette størrelsen på lerretet. Da bruker vi function setup().

function draw()
Når p5.js kommer til function draw(), gjennomføres instruksjonene mellom krøllparentesene. Når siste linje i i function draw() er uført, begynner p5.js på nytt på første linje. Dette gjentas det uendelige. Som standard prøver p5.js å gjennomføre function draw() seksti ganger i sekundet. 

---

​5.2 mouseX og mouseY

Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • circle(mouseX, mouseY, 50);
• }

---

5.3 oppgaver

A) Sett farge på sirkelen med fill()
B) Bruk mouseX og/eller mouseY som parametre i fill()

---

​5.3 Bruk samme lerret

I eksempelet over blir tegningene fra de forrige rundene i function draw() dekket over av background(220). Hver gang function draw() kjører legges det bakgrunnsgfarge over forrige tegning av sirkelen. På samme måte som ved en tegnefilm, eller når man flipper en tegneblokk med like tegninger som er litt forskjøvet fra det forrige arket

Hvis vi flytter background(220) opp i function setup() vil ikke forrige tegning dekkes over for hver runde i draw().

Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
  • background(220);
• }
• function draw() {
  • circle(mouseX, mouseY, 50);
• }

---

5.4 oppgaver

lA) Sett farge på sirklene med fill()
B) Bruk mouseX og/eller mouseY som parametre i fill()
C) Bytt ut 50 i circle() med mouseX eller mouseY

---

​5.5 Hvis så, gjør dette

Vi kan stille spørsmål og la programmet ta ulike veier avhengig av svaret.

hvis (det regner) {
     ta med paraply
  }
ellers {
    ta med sombrero
  }

Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
  • background(220);
• }
• function draw() {
  • if (mouseX < 200) { 
    • fill(0);
  • } else {
    • fill(255);
  • }
  • triangle(mouseX, mouseY, mouseX + 50, mouseY, mouseX + 25, mouseY – 50);
• }

---

5.6 Oppgave

Sett inn noStroke() øverst i function draw()

---

5.7 Hvis en musetast trykkes

I programet nedenfor følger sirkelen musepekeren. Fargen endres når en av museknappene trykkes. Hvis en musetast trykkes settes fylllfargen til grønn, ellers (hvis ikke) er den blå.

Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
  • colorMode(HSB, 360, 100, 100);
• }
• function draw() {
  • background(220);
  • if (mouseIsPressed) {
    • fill(90, 100, 100); _{// grønn}
  • } else {
    • fill(270, 100, 100); _{// blå}
• }
• circle(mouseX, mouseY, 50);
• }

Det er kanskje litt forvirrende at krøllparentesene er plassert slik de er. I prinsippet trenger vi ikke bruke linjeskift slik som i eksempelet. Vi kan i stedet skrive det slik:

if (mousePressed) { fill(90, 100, 100); }
else { fill(270, 100, 100); }

Hvis vi har mange korte if-setninger kan dette være mer oversiktlig, men som hovedregel bør vi bruke linjeskift som i det første eksempelet. Da er det lettere for andre å lese koden. 

---

​5.8 Avstand – dist()

For å beregne avstand mellom to punkter kan vi bruke dist().

Mellom parentesene skriver vi koordinatene til de to punktene vi skal finne avstanden mellom. Hvis vi skal finne avstanden fra punktet (10, 20) til punktet (50, 70), skriver vi dist(10, 20, 50, 70);

Her er et program der sirkelen skifter farge når musepekeren kommer innenfor sirkelen.

Skriv dette i editoren:

• let x, y, r;
• function setup() {
  • createCanvas(400, 400);
  • x = width / 2;
  • y = height / 2;
  • r = 50;
• }
• function draw() {
  • background(100, 250, 0); // grønn
  • if (dist(x, y, mouseX, mouseY) <  r) { 
    • fill(255, 0, 0); // rød
  • } else {
    • fill(0, 0, 255); //  blå
  • }
  • circle(x, y, r);
• }

---

5.9 Oppgave

Lag et program der et kvadrat skifter farge når musepekeren kommer innenfor kvadratet.