HTX Frederikshavn & Hjørring

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

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

1. Lav først en funktion printStringArray der tager et string array som parameter, og skriver det ud.
2. Byt om elementer i Array så de står i den rigtige rækkefølge, og udskriv igen Array med din printStringArray funktion.
3. 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.

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.
//
}

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:

  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.
  }

• Antag at X tilvæksten er 20-40 pixels
• Ekstra: Tilføje akseetiketter og ændre linjens farve.

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

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.

• Opret et array i Processing med følgende temperaturmålinger:

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

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

• 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()`.

Hint: draw() og drawGraph()

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);
  }
}

Hint: drawBar()

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);
}

Hint: drawThresholdLine()

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);
}

• 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

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:

  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]);
      }
    }
  }

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