U0206 Die 4 Jahreszeiten

Aufgabenstellung:

Visualisiere die vier Jahreszeiten (Frühling, Sommer, Herbst, Winter) mit Hilfe von verschiedenen Punktgrößen. A) Überlege zuerst die typischen Eigenschaften und Gefühle und wie diese visuell am besten umgesetzt werden können. B) Entwickeln Sie in einem zweiten Schritt Hilfswerkzeuge, die Ihnen bei der Umsetzung helfen.

Mein Ergebnis:

ReflexionCode

Für diese Aufgabe habe ich mir zuerst versucht, typische Merkmale jeder Jahreszeit vorzustellen: für den Frühling das Erblühen der Blumen, dann im Sommer die strahlende Sonne, im Herbst den fallenden Regen und schließlich im Winter den fallenden Schnee.

Danach ging es nur noch darum, diese Bilder in Processing darzustellen. Ich muss zugeben, dass ich während einer der Übungen die Darstellung von Regen bei Herrn Fischer gesehen habe, was mich vermutlich beeinflusst hat, es ähnlich darzustellen. Aber der Versuch, das innerhalb von Processing zu programmieren, hat mir sehr viel Spaß gemacht. Der Prozess, visuelle und emotionale Assoziationen mit den Jahreszeiten zu dekonstruieren und sie dann in Processing neu zu visualisieren, war wirklich interessant.

//Screenshot
void screenshot(){
if(key=='s'){
    saveFrame("######.png");
}
}

ArrayList<Dot> dots;

// dragging
Dot selectedDot = null;
float offsetX, offsetY;

// jahreszeit
String clickMode = "Winter"; // Default

void setup() {
size(600, 400);
dots = new ArrayList<Dot>();
}

void draw() {
background(255);

// grid
float padding = 10;
float cellWidth = width / 2;
float cellHeight = height / 2;

for (int i = 0; i < 2; i++) {
    for (int j = 0; j < 2; j++) {
    float x = i * cellWidth + padding / 2;
    float y = j * cellHeight + padding / 2;
    float w = cellWidth - padding;
    float h = cellHeight - padding;

    stroke(50);
    noFill();
    rect(x, y, w, h);
    }
}

// Draw dots
for (Dot d : dots) {
    d.display();
}

}

void mousePressed() {
// move dots
for (Dot d : dots) {
    if (d.isMouseOver()) {
    selectedDot = d;
    offsetX = mouseX - d.pos.x;
    offsetY = mouseY - d.pos.y;
    return;
    }
}

if (clickMode.equals("Frühling")) {
    placeFruehling(mouseX, mouseY);
} else if (clickMode.equals("Sommer")) {
    placeSommer(mouseX, mouseY);
} else if (clickMode.equals("Herbst")) {
    placeHerbst(mouseX, mouseY);
} else if (clickMode.equals("Winter")) {
    dots.add(new Dot(mouseX, mouseY));
}
}

void mouseDragged() {
if (selectedDot != null) {
    selectedDot.pos.x = mouseX - offsetX;
    selectedDot.pos.y = mouseY - offsetY;
}
}

void mouseReleased() {
selectedDot = null;
}

// jahreszeiten dingsbums

void placeFruehling(float x, float y) {
// center dot
dots.add(new Dot(x, y));
// other dots
int petals = 8;
float radius = 20;
for (int i = 0; i < petals; i++) {
    float angle = TWO_PI / petals * i;
    float px = x + cos(angle) * radius;
    float py = y + sin(angle) * radius;
    dots.add(new Dot(px, py));
}
}

void placeSommer(float x, float y) {
// center dot
dots.add(new Dot(x, y)); // center dot
int rays = 5;
float angleStep = TWO_PI / rays;
float length = 15;
// other dots
for (int i = 0; i < rays; i++) {
    float angle = angleStep * i;
    for (int j = 1; j <= 3; j++) {
    float px = x + cos(angle) * length * j;
    float py = y + sin(angle) * length * j;
    dots.add(new Dot(px, py));
    }
}
}

void placeHerbst(float x, float y) {
// center dot
dots.add(new Dot(x, y));
float spacing = 10;
float size = 12;
// other dots
for (int i = 1; i <= 6; i++) {
    float py = y + i * spacing;
    float s = size - i; // progressively smaller
    if (s < 3) s = 3;
    Dot d = new Dot(x, py);
    d.size = s;
    dots.add(d);
}
}

void keyPressed() {
if (key == 'u' || key == 'U') clickMode = "Frühling";
if (key == 'i' || key == 'I') clickMode = "Sommer";
if (key == 'o' || key == 'O') clickMode = "Herbst";
if (key == 'p' || key == 'P') clickMode = "Winter";

// Screenshot
if (key == 's') {
    saveFrame("######.png");
}
}

// dot
class Dot {
PVector pos;
float size = 10;

Dot(float x, float y) {
    pos = new PVector(x, y);
}

void display() {
    fill(0);
    noStroke();
    ellipse(pos.x, pos.y, size, size);
}

boolean isMouseOver() {
    return dist(mouseX, mouseY, pos.x, pos.y) < size / 2;
}
}