~~NOTOC~~
==== Øvelse 1 - Der er rod i mit array ====


Ordene i mit sprit nye array har den forkerte rækkefælge :-O.

<code bash>
String[] words = {"over", "quick", "lazy", "fox", "brown", "The", "the", "dog", "jumps"};
</code>
  - Lav først en funktion **printStringArray** der tager et string array som parameter, og skriver det ud.
  - Byt om elementer i Array så de står i den rigtige rækkefølge, og udskriv igen Array med din **printStringArray** funktion.
  - Lav nu en funktion **swapElements** til at håndtere det at skulle bytte om på to elementer i array. swapElements skal tage de to **index** der skal byttes om som parameter.
    * Brug nu denne funktion istedet til at bytte om på elementer i array.


<code csharp>
String[] words = {"over", "quick", "lazy", "fox", "brown", "The", "the", "dog", "jumps"};

printStringArray(words);

swapElements(0, 5);
swapElements(2, 4);
swapElements(4, 8);
swapElements(7, 8);

printStringArray(words);

void swapElements(int a, int b) {

  // din kode som bytter plads på to elementer i array.

}


void printStringArray(String[] arr) {
//
// Her anvender du en løkke til at udskrive Array et element ad gangen.
//
}


</code>




----

==== Opgave 2: Tegn Et Liniediagram ====

**Mål:** Lære at bruge arrays til at tegne et linjediagram.

  * **Beskrivelse:** Opret et array af data og brug en funktion til at tegne linjer mellem punkterne i diagrammet.

**Kodeeksempel:**

<code java>
  int[] data = {50, 80, 150, 120, 90, 160, 110, 130, 170, 200};
  
  void setup() {
    size(500, 400);
    drawLineChart(data);
  }
  
  void drawLineChart(int[] values) {
    stroke(0);
    noFill();

    // Her skal du gennemløbe array  og tegne et liniestykke for hvert element.
  }
</code>
  * Antag at X tilvæksten er 20-40 pixels
  * **Ekstra:** Tilføje akseetiketter og ændre linjens farve.

----

==== Opgave 3  Visualisér temperaturudvikling i vandbad  ====

=== 🎯 Formål ===
Du skal bruge arrays og funktioner i Processing til at visualisere temperaturmålinger over tid i et vandbad.

Du lærer at:
  * gemme måledata i arrays  
  * bruge funktioner til at strukturere din kode  
  * tegne søjlediagrammer  
  * (ekstra) farvekode søjler afhængigt af en grænseværdi

=== 🔬 Fysik ===

I faget Fysik har du varmet vand i et bægerglas og målt temperaturen **hvert minut** i 10 minutter.

Du skal nu visualisere, hvordan temperaturen har ændret sig over tid, og gøre det med god kodestil ved at bruge funktioner.

=== 🧩 Opgave – trin for trin ===

=== ✅ Del 1 – Temperaturdata ===
  * Opret et array i Processing med følgende temperaturmålinger:

<code java>
float[] temperatur = {20, 25, 30, 35, 42, 51, 61, 68, 75, 82, 90};
</code>

  * Hver værdi repræsenterer temperaturen efter 0, 1, 2, ..., 10 minutter.

=== Opret og brug funktioner ===

  * For at få en god struktur på din kode opret følgende funktioner:
    * **void drawGraph(float[] data, float threshold)** 
    * **void drawBar(float x, float value, float w, int index, float threshold)**
    * **void drawThresholdLine(float threshold)**
  * Kald dem inde fra `draw()`.

==== Hints ====

++++ Hint: draw() og drawGraph() |
<code java>
void draw() {
  background(255);
  drawGraph(temperatur, threshold);
  drawThresholdLine(threshold);
}

void drawGraph(float[] data, float threshold) {
  float barWidth = width / data.length;
  for (int i = 0; i < data.length; i++) {
    float x = i * barWidth;
    drawBar(x + 10, data[i], barWidth - 20, i, threshold);
  }
}
</code>
++++

++++ Hint: drawBar() |
<code java>
void drawBar(float x, float value, float w, int index, float threshold) {
  float barHeight = map(value, 0, 100, 0, height - 60);
  float y = height - barHeight - 20;

  if (value > threshold) {
    fill(255, 0, 0); // Rød
  } else {
    fill(0, 100, 255); // Blå
  }

  rect(x, y, w, barHeight);

  fill(0);
  text(value + "°C", x + w / 2, y - 5);
  text(index + " min", x + w / 2, height - 5);
}
</code>
++++

++++ Hint: drawThresholdLine() |
<code java>
void drawThresholdLine(float threshold) {
  float y = height - map(threshold, 0, 100, 0, height - 60) - 20;
  stroke(200, 0, 0);
  line(0, y, width, y);
  noStroke();

  fill(200, 0, 0);
  text("Threshold: " + threshold + "°C", width - 100, y - 10);
}
</code>
++++

=== Ekstra Ekstra – Farvekod søjlerne  ===


  * Opret en variabel: ''float threshold = 60;''
  * Hvis temperaturen er **over threshold**, farv søjlen **rød**
  * Ellers farv den **blå**
  * Brug `drawThresholdLine()` til at vise en tydelig grænse

----

==== Øvelse 4: Stacked Bar Graph ====
**Mål:** Lære at bruge 2D-arrays og tegne et stacked bar chart.

  * **Beskrivelse:** Opret et 2D-array for at gemme lagene i et stacked bar chart og tegn hver bar ved at stable lagene ovenpå hinanden.

**Kodeeksempel:**

<code java>
  int[][] stackedData = {
    {100, 50, 30},  // Bar 1: 100 + 50 + 30
    {120, 60, 20},  // Bar 2: 120 + 60 + 20
    {90, 40, 10},   // Bar 3: 90 + 40 + 10
    {150, 70, 30},  // Bar 4: 150 + 70 + 30
  };
  
  void setup() {
    size(500, 400);
    drawStackedBarGraph(stackedData);
  }
  
  void drawStackedBarGraph(int[][] values) {
    int barWidth = width / values.length;
    for (int i = 0; i < values.length; i++) {
      float x = i * barWidth;
      float y = height;
      for (int j = 0; j < values[i].length; j++) {
        fill(100 + j * 50, 150, 255);  
        y -= values[i][j];
        rect(x, y, barWidth - 10, values[i][j]);
      }
    }
  }

</code>

  * **Øvelse:** Prøv at ændre farverne eller tilføje labels til de forskellige sektioner af hver bar.