Skolekoding.no > Tekstkoding > p5.js > Kurs > 10. Tabeller

---

10.1 Hva er tabeller?

Tabeller er en måte å holde orden på mange variabler. Dersom programmet inneholder få variabler, kan de deklareres hver for seg, slik vi har gjort til nå.

• let x;
• let y;
• let speed;

Men dersom programmet inneholder 100 eller 1000 variabler, må vi gjøre det på en annen måte. Da bruker vi en tabell. En tabell er en samling variabler der hver variabel har et løpenummer fra null og oppover. Det kan være en endimensjonal tabell/liste, en todimensjonal tabell eller en flerdimensjonal tabell. Her skal vi bare bruke lister.

---

​10.2 Opprette tabeller 

 p5.js har vi to måter å opprette en tabell på.

1) Vi oppretter en tabell med et fast antall celler:
let x = new Array(20);
Her opprettes det en tabell med 20 celler. Hver har et nummer fra null til 19.

2) Vi oppretter en tom tabell uten celler:
let x = [];
Her opprettes det en tom tabell som vi kan fylle celle for celle så mange celler vi ønsker.

I p5.js er tabeller dynamiske. Vi kan legge til og fjerne celler underveis i programmet.

For å fylle en tabell med verdier kan vi gi hver celle en verdi på samme måte som for andre variabler.

• let x = [];
• x[0] = 50; Første celle får verdien 50
• x[1] = 100; Andre celle får verdien 100
• x[2] = 12;
• x[3] = -17;

---

10.3 Gi tabellvariabler verdi med løkke

Når vi har hundre celler blir dette for tungvint. Da bruker vi i stedet en løkke. Nedenfor lager vi 100 tilfeldig tall med verdi mellom 0 og 600, og plasserer dem i tabellen.

• let x = [];
• let xNum = 100;
• for (let i = 0; i < xNum; i = i + 1) {
  • x[i] = random(0, 600); _{// celle x med nummer [i] får et tilfeldig tall mellom 0 og 600}
• }

---

10.4 Tegne med verdier fra tabell

​Nå kan vi tegne 100 sirkler på skjermen.

• let x = []; 
• let xNum = 100;
• function setup() {
  • createCanvas(400, 400);
  • for (let i = 0; i < xNum; i = i +1) { _{// Når i = 99 avsluttes løkka}
    • x[i] = random(0, width); _{// Tabellen fylles med tilfeldige tall mellom null og bredden på lerretet (400)}
  • }
• }
• function draw() {
  • background(255); _{// Ny hvit bakgrunn for hver runde}
  • fill(150, 20); _{// Grå fyllfarge, med lav fylde (høy gjennomskinnelighet)}
  • for (let i = 0; i < xNum; i = i +1) {
    • ellipse(x[i], height / 2, 50, 50); _{// Tegner 100 sirkler med tilfeldig x-verdi langs en linje midt på skjermen.}
  • }
• }