Skolekoding.no > Tekstkoding > p5.js > Kurs > 4. Variabler

---

4.1 Gjenbruk av verdier

En variabel er en bokstav, eller en tekst som lagrer en verdi. I stedet for å skrive verdien selv, bruker vi variabelen som representerer verdien. Vi bruker variabler for at det skal være lettere å lese og vedlikeholde koden. 

​I de fleste programmeringsspråk må man angi hva slags type verdi variabelen skal inneholde. 

– int r betyr at variabelen r kan inneholde heltall.
– float m betyr at variabelen m kan inneholde desimaltall

I p5.js angir vi ikke type variabel. Vi bruker let foran variabelnavnet uansett innhold.
Tidligere ble var brukt før variabelnavnet. Mer om let vs var.

Skriv dette i editoren:

• let y = 100;
• let r = 40.5;
• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • circle(100, y, r); _{// verdiene for y og r settes inn}
  • circle(150, y, r);
• }

---

​4.2 Regne med variabler

Skriv dette i editoren:

• let x = 200;
• let y1, y2, y3; _{// Vi kan deklarere flere variabler i samme setning}
• let r1 = 50;
• let r2 = 35;
• let r3 = 25;
• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • y1 = height / 2; _{// height er en innebygget variabel som inneholder høyden på lerretet. Kan ikke brukes før setup()}
  • y2 = y1 – r1 – r2; _{// Sentrum av nederste sirkel minus to radier}
  • y3 = y2 – r2 – r3; _{// Sentrum av midterste sirkel minus to radier}
  • circle(x, y3, r3);
  • circle(x, y2, r2);
  • circle(x, y1, r1);
• ​}

---

4.3 Oppgaver

A) Skriv inn koden over, og endre på r1, r2 og r3. 
B) Klarer du å skrive om koden for din egen snømann ved å bruke variabler?

---

4.4 Løkke

Når samme koden skal gjentas bruker vi løkker.
​Uten løkker ville dataprogrammer blitt svært lange.

​Kode uten løkke.
Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • circle(25, 25, 25);
  • circle(75, 25, 25);
  • circle(125, 25, 25);
  • circle(175, 25, 25);
  • circle(225, 25, 25);
  • circle(275, 25, 25);
  • circle(325, 25, 25);
  • circle(375, 25, 25); 
• }

1. En for-løkke lager en tellevariabel som ofte gis navnet i.
2. Deretter kommer en betingelse som bestemmer hvor langt tellevariabelen skal telle.
3. Til slutt skriver vi hvor store hopp tellervariabelen skal gjøre.
4. Innenfor krøllparentesene skriver vi den koden som skal gjentas.

Kode med en for-løkke.
Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • for (let i = 25;   i < 400;   i = i + 50) {
    • circle(i, 25, 25);
  • }
• }

1. Det opprettes en variabel med navn «i». Startverdi 25.
     let i = 25;
2.  Det sjekkes det om «i» er mindre enn 400.
     i < 400;
Hvis «i» er mindre enn bredden, utføres setningen mellom krøllparentesene { }
   circle(i, 25, 25);
3. Deretter økes verdien av «i» med 50
     i = i + 50
Tilbake til punkt 2

---

4.5 Oppgaver

A) Modifiser programmet over slik at det i stedet tegnes en kolonne med sirkler nedover langs venstre kant av lerretet.

I stedet for tallverdien av bredden og høyden kan du bruke variablene width og height. Disse inneholder bredde og høyde som er definert i createCanvas.

B) Lag et program som både tegner sirkler langs øvre kant, og langs venstre kant.

C) Klarer du å fylle lerretet med sirkler? Hint: legg en løkke inne den andre.