Skolekoding.no > Tekstkoding > p5.js > Kurs > 7. Funksjoner

---

8.1 Hva er en funksjon?

En funksjon er et delprogram. Hvis noen operasjoner skal utføres mange ganger, kan det lønne seg å lage en funksjon. Du har allerede brukt mange funksjoner: ellipse(); random(); setup(); draw(); etc.

Skriv dette i editoren:

• function setup() {
  • createCanvas(600, 400);
• }
• function draw() {
  • background(220);
  • enGulFirkant(); _{// Kaller på funksjonen enGulFirkant og utfører den}
• }
• function enGulFirkant() { _{// Funksjonen ved navn  «enGulFirkant»}
  • fill (255, 255, 0); // gul
  • rect(200, 100, 300, 200);
• }

---

8.2 Parametre

Eksempelet over er ikke noe å hoppe i taket for. Hva er poenget? Poenget blir raskt synlig hvis vi har større funksjoner, og hvis vi bruker funksjonsparametere. Parametere er verdier som vi sender inn i funksjonen fra hovedprogrammet. Parameterne plasseres i parentesen etter funksjonsnavnet.

Skriv dette i editoren:

• function setup() {
  • createCanvas(600, 400);
• }
• function draw() {
  • background(220);
  •   
  • _{// x = 100, y = 50 og gjennomsiktighet = 3} 
  • enGulFirkant(100, 50,  3); 
  •   
  • enGulFirkant(240, 20,  50); 
  • enGulFirkant(300, 10,  100); 
  • enGulFirkant(10,200,  150); 
• }
• function enGulFirkant(x, y,  gjennomsiktighet) {
  • fill (255, 255, 0, gjennomsiktighet);
  • rect(x, y, 300, 200);
• }

---

​Med fargeparameter i tillegg

Skriv dette i editoren:

• function setup() {
  • size(600, 400);
  • colorMode(HSB, 360, 100, 100);
• }
• function draw() {
  • enFargetFirkant(100, 50, 0, 3);  _{// rød}
  • enFargetFirkant(240, 20, 90, 50);  _{// grønn}
  • enFargetFirkant(300, 10, 180, 100); _{// turkis}
  • enFargetFirkant(10, 200, 270, 150); _{// blå}
• }
• function enFargetFirkant(x, y, farge, gjennomsiktighet) {
  • fill (farge, 100, 100, gjennomsiktighet);
  • rect(x, y, 300, 200);
• }

---

8.3 Oppgaver

A) Lag et program med en funksjon som tegner et enkelt hus med fire vegger og tak. Du kan f. eks. bruke rect() og line().
B) Utvid funksjonen med parametere for plassering. Du bør bruke variable på samme måte som for snømannen.
C) Kan du lage en funksjon som tegner din egen snømann.