Arrays

Aufgabe 1

Aufgabe 2: Tortendiagramme

Kopiere dir den folgenden Sketch (aufklappen!). Er zeichnet ein Tortendiagramm von den Ergebnissen einer Klassensprecherwahl.

Sketch

int[] daten = new int[] { 10, 9, 6, 4 };
color[] farben = new color[] { #FF0000, #00FF00, #0000FF, #FF00FF };
String[] namen = new String[] { "Jan", "Jasmina", "Merle", "Tobi" };
 
void setup() {
  size(500, 500);
  textFont(createFont("Liberation Mono", 14));
  textAlign(LEFT, TOP);
}
 
void draw() {
  background(255);
 
  int summe = summe(daten);
  float bogenLaengeProStimme = ((2.0 * PI) / summe); 
  float gesamtBogen = 0;
 
  for (int i = 0; i < daten.length; i++) {
    float bogenLaenge = bogenLaengeProStimme * daten[i];
 
    zeichneTortenstueck(gesamtBogen, gesamtBogen + bogenLaenge, farben[i]);
 
    gesamtBogen += bogenLaenge;
  }
 
  for (int i = 0; i < namen.length; i++) {
    zeichneLegende(10, 10 + i * 25, 15, farben[i], namen[i] + " = " + daten[i]);
  }
}
 
void zeichneTortenstueck(float bogenBeginn, float bogenEnde, color farbe) {
  fill(farbe);
  arc(width / 2, height / 2, 2*width / 3, 2*height / 3, bogenBeginn, bogenEnde, PIE);
}
 
void zeichneLegende(int x, int y, int breite, color farbe, String text) {
  fill(farbe);
  rect(x, y, breite, breite);
  fill(0);
  text(text, x + breite + 5, y);
}
 
int summe(int[] array) {
  int summe = 0;
 
  for (int i = 0; i < array.length; i++) {
    summe += array[i];
  }
 
  return summe;
}

Versuche, den Code zu verstehen.
- Identifiziere die Arrays. Warum gibt es drei davon?
- Was bewirkt die Funktion int summe(int[] array)?
- Wie wird ein einzelnes Tortenstück gezeichnet? Wie die Legende?
Modifiziere das Programm so, dass Kim's vergessene fünf Stimmen mit beachtet werden.
Erzeuge mindestens drei weitere Tortendiagramme deiner Wahl. Verändere sowohl die Daten, als auch die Farben und Beschriftungen! Poste Screenshots deiner Tortendiagramme sowie die zugehörigen Array-Definitionen hier.

Unmodifizierter Sketch:

Aufgabe 2b:

Aufgabe 3: Balkendiagramme oder "ThE cAkE iS a LiE"!¹⁾

Modifiziere deinen letzten Sketch so, dass kein Tortendiagramm, sondern ein Balkendiagramm angezeigt wird. Hierzu ein paar Tipps:

Wie breit sollte der Balken mit dem größten Wert sein?
Wie kann man die Breite eines Balkens berechnen?
Welche Funktion anstatt von int summe(int[] array) brauchst du dazu?

Suche dir dann aus den ganzen Tortendiagrammen mehrere aus und modifiziere sie so, sodass jeweils ein Balkendiagramm gezeichnet wird. Poste die Balkendiagramme dann unterhalb der dazu passenden Tortendiagramme.

Lösung zu Aufgabe 3

int[] daten = new int[] { 5, 10, 6, 4 };
color[] farben = new color[] { #FF0000, #00FF00, #7777FF, #FF00FF };
String[] namen = new String[] { "Jan", "Jasmina", "Merle", "Tobi" };
 
void setup() {
  size(500, 500);
  textFont(createFont("Liberation Mono", 14));
  textAlign(LEFT, CENTER);
}
 
void draw() {
  background(255);
 
  float max = maximum(daten);
 
  for (int i = 0; i < daten.length; i++) {
    float breite = (daten[i] / max) * (height - 20);
 
    zeichneSaeule(10, 10 + 35 * i, 25, breite, farben[i], namen[i] + " = " + daten[i]);
  }
}
 
void zeichneSaeule(float x, float y, float hoehe, float breite, color farbe, String text) {
  fill(farbe);
  rect(x, y, breite, hoehe);
  fill(0);
  text(text, x + 5, y + hoehe / 2);
}
 
int maximum(int[] array) {
  int max = 0;
 
  for (int i = 0; i < array.length; i++) {
    if (array[i] > max) {
      max = array[i];
    }
  }
 
  return max;
}

Aufgabe 4 - Liniendiagramme?

Das IT-Unternehmen Großhart möchte seinen Marktwert aus dem Jahr 2022 anschaulich in einem Liniendiagramm visualisieren, aber ihnen liegen die Daten nur in einer Tabelle vor:

Jan	Feb	Mrz	Apr	Mai	Jun	Jul	Aug	Sep	Okt	Nov	Dez
1.5 Mio. €	1.75 Mio. €	2 Mio. €	1.75 Mio. €	2.25 Mio. €	2.5 Mio. €	2.75 Mio. €	3.25 Mio. €	2.75 Mio. €	3.25 Mio. €	2.25 Mio. €	2 Mio. €

Das Diagramm soll am Ende in etwa so aussehen:

Lösung zu Aufgabe 4

float[] daten = new float[] { 1.50, 1.75, 2.00, 1.75, 2.25, 2.50, 2.75, 3.25, 2.75, 3.25, 2.25, 2.00 };
String[] monate = new String[] { "Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez" };
 
void setup() {
  size(450, 300);
  textFont(createFont("Liberation Mono", 10));
  textAlign(CENTER, TOP);
}
 
void draw() {
  background(255);
 
  float max = maximum(daten);
 
  for (int i = 0; i < daten.length; i++) {
    float hoehe = (daten[i] / max) * (height - 20);
 
    strokeWeight(5);
    point(30 + 35 * i, height - hoehe);
    fill(0);
    strokeWeight(1);
    text(monate[i] + "\n" + daten[i], 30 + 35 * i, height - hoehe + 10); 
 
    if (i != 0) {
      float letzteHoehe = (daten[i - 1] / max) * (height - 20);
 
      strokeWeight(1);
      line(30 + 35 * (i - 1), height - letzteHoehe, 30 + 35 * i, height - hoehe);
    }
  }
 
  text("Marktwert der Fa. Großhart", width / 2, height - 40);
  text("Werte in Mio. €", width / 2, height - 20); 
}
 
float maximum(float[] array) {
  float max = 0;
 
  for (int i = 0; i < array.length; i++) {
    if (array[i] > max) {
      max = array[i];
    }
  }
 
  return max;
}

Aufgabe 5

Erstelle eigene Liniendiagramme und poste sie hier.

¹⁾