---
# System prepended metadata

title: Creatives can code!? SoSe 2024

---



# Creatives can code!? 
Link zum Vorlesungsverzeichnis: [Creatives can code!](https://www.hbksaar.de/vorlesungen/details/3164)


 
 In diesem Kurs lernen wir anhand von „Processing“ (https://processing.org/), einer Programmierumgebung für digitale Kunst & Design, die Grundsätze des Codings in der Programmiersprache Python (https://py.processing.org/). Was sind Variablen, Loops und Rekursionen? Wie baue ich eine interaktive Grafik? Wie kriege ich es hin, dass sie auf Sensoren reagiert? Wie suche und finde ich Fehler in meinem Programm?

Python besitzt eine einfache Syntax besitzt, die das Erlernen des Programmierens für Anfänger erleichtert und ist als allgemeines Werkzeug vielseitig einsetzbar: Es kann nicht nur für Generative Gestaltung in Processing, sondern auch als allgemeine Skripting-Sprache in Design-Umgebungen wie z.B. Blender oder Rhino eingesetzt werden. Darüber hinaus unterstützt Python eine breite Palette von Anwendungen, von Webentwicklung über Datenanalyse bis hin zu maschinellem Lernen oder der Programmierung von Mini-Computern wie den Raspberry Pi.

Der Kurs richtet sich an absolute Anfänger, die sich noch gar nicht oder kaum mit dem Thema Programmierung auseinandergesetzt haben. Wir verteilen wöchentlich Tutorials an die Teilnehmer und besprechen euren Fortschritt, Fragen oder Probleme in unseren wöchentlichen Treffen und üben gemeinsam die Anwendung der erlernten Konzepte. In einem kleinen Abschlussprojekt bringen wir eure Ergebnisse auf die Medienfassade.

Für unsere Treffen benötigen Teilnehmer einen Laptop, ggf. können Leihgeräte organisiert werden, bitte gebt dazu den Bedarf bei der Anmeldung an!



Startdatum: 19.04.2024
Enddatum: 19.07.2021
Freitag: 14:00 - 16:00

Die Treffen finden in der Game Lounge im ehaus statt.

WLan:
SSID: gamelounge
PW: expmedia



### Kontakt Michael / Hannes:
m.schmitz@hbksaar.de / h.kaefer@hbksaar.de

### Teilnehmer*innen

| Email Addresse | Vorname  |
| -------- | -------- |
l.birkholz@hbksaar.de |Lea
|s.dawara@hbksaar.de| Sara
| l.fenrich@hbksaar.de | Laura Fenrich
| j.schwarz@hbksaar.de | Jennifer
| heinz@hbksaar.de | Heinz  
| maib00004@hbksaar.de | Mahmoud
jiyu00003@hbksaar.de|Jiameng Yuan
zhha00001@hbksaar.de|Zhuoran Han
w.wang@hbksaar.de|Wenjia Wang
jiwa00003@hbksaar.de|Jinyu

---

### Ressourcen:
* Allgemeine Processing Seite: processing.org
* Referenz für Processing in Python:  [py.processing.org](https://py.processing.org)
* Cheat Sheet: https://github.com/tabreturn/processing.py-cheat-sheet
* Referenzseite für die Befehle: https://py.processing.org/reference/
    * Installation Python mode für Processing: https://py.processing.org/tutorials/gettingstarted/
* Irgendwas zu [sound](https://publish.illinois.edu/augmentedlistening/tutorials/music-processing/tutorial-1-introduction-to-audio-processing-in-python/)

### Online (Google Drive) Ordner für alle Abgaben: 
[**GDrive Abgaben**](https://drive.google.com/drive/folders/1Y63vGut61HLqBc49MljD0FAmolpsRVFQ?usp=sharing) (Jede Hausaufgabe/Abgabe bekommt einen Unterordner)
Jede Hausaufgabe bitte hier jeweils wieder als Unterordner hinkopieren, nach folgendem Schema:
`Vorname-Nachname-TitelDerArbeit/Aufgabe`, zB: "Michael-Schmitz-kreisendesQuadrat"

(Schreibzugriff für alle mit HBK-Account)

---

# 1. Treffen (19.04.2024)

**Besprechung:**
* Intro von allen Teilnehmern und Dozenten
* Erwartungen an den Kurs abfragen, generelle Motivation, Fragen
* Unseren Lernmodus vorstellen
    * Zuhause Tutorials, im Kurs Besprechungen, Probleme lösen etc (interaktiv)
    * Material:
        * processing.org
        * py.processing.org/
    * HackMD zeigen
    * Google Drive
    * Fragen per Mail
* Überblick Processing, Webseite, Referenzen
* Hausaufgaben vorstellen

### Hausaufgaben:

* Anschauen (5 Min): https://vimeo.com/320513063
* * Durcharbeiten:
    * https://py.processing.org/tutorials/color/
    * https://py.processing.org/tutorials/drawing/
 
* Übungsaufgabe: einen 600x600 Canvas bespielen zum Thema "asymmetrie", dazu 7 von den folgenden Funktionen nutzen: point, line, rect, triangle, ellipse, arc, beginShape, vertex, endShape, fill, stroke, strokeWeight, size, background
* davon einen Screenshot in einen eigenen Bereich Kopieren (s. Beispiel "Celine")
* den Code in den eigenen Ordner im [Google Drive](https://drive.google.com/drive/folders/1Y63vGut61HLqBc49MljD0FAmolpsRVFQ?usp=sharing) kopieren

---

# Abgaben
## Aufgabe 1 - Asymmetrie

### Sara
![Screenshot 2024-04-21 at 13.39.09](https://hackmd.io/_uploads/B1f7sOz-A.png)

### Jiamengs Baer

![Jiameng](https://hackmd.io/_uploads/SyoFE3Z-C.png)
https://drive.google.com/drive/u/1/folders/142uKAeMgTrDKmI5zssRWLquxV6ayOr3x

### Jennifer

![Jennifer-Schwarz-Asymmetrie](https://hackmd.io/_uploads/SkWnNPz-A.jpg)
https://drive.google.com/drive/folders/1yXPcV6U-95nZDaaxlRyGSeMB2TpVf0lu?usp=sharing

### Lea

![HA-Asimmetrie](https://hackmd.io/_uploads/rJnTZvB-A.png)
https://docs.google.com/document/d/1xw8hyLDxJ4fSb7mv6eg9iL4ueaORj4KiY4bIWN-YFkM/edit?usp=sharing
### 

### Mahmoud
![Hausaufgabe_26_4](https://hackmd.io/_uploads/SJ3nn3vZA.png)
https://drive.google.com/file/d/1YsNP54IwD5Ko0cBpB83yvUEBlmg-iKSg/view?usp=drive_link

### Laura

![asymmetrie_L.F.](https://hackmd.io/_uploads/Sy2TJVd-A.png)
https://drive.google.com/drive/u/1/folders/1cZv9QJZJhjjTKD9tFN3rqhWWTwZiUczt

### Zhuoran
![WX20240425-235157@2x](https://hackmd.io/_uploads/Hy7HG8O-R.png)

### Jinyu

![Screenshot 2024-04-26 at 01.41.20](https://hackmd.io/_uploads/Sy5lhvdZA.png)

https://drive.google.com/file/d/13uTwgM4pa03p1sic6Yt4SUCcEE9tdljS/view?usp=share_link

### Wenjia
![cross](https://hackmd.io/_uploads/Hkk2iktWR.jpg)

https://drive.google.com/file/d/1Zfi_AAcuzpWv7SdQADbtg7RYoVUQBJQs/view?usp=drive_link

---

# 2. Treffen (27.04.2024)

**Besprechung:**
* Allgemeine Probleme / Fragen (Laptop??) besprechen
* Hausaufgaben durchgehen
    * Bilder anschauen
    * Probleme besprechen
* Neuer Stoff: [Interaktivität](https://py.processing.org/tutorials/interactivity/)
    * Dynamischer Modus: setup - draw
    * [Variablen](https://tabreturn.github.io/code/processing/python/2018/06/15/processing.py_in_ten_lessons-1.4-_variables.html )
    * System-Variablen (height, width, mouse)
    * [If-Abfragen & Operatoren](https://tabreturn.github.io/code/processing/python/2018/07/02/processing.py_in_ten_lessons-3.2-_conditional_statements.html)
    * Mauseingabe (Click), Keyboard Eingabe
    

**Hausaufgabe:**

* Entwickelt eine interaktive/dynamische Grafik zum Thema "Kollaboration"


--- 
# Abgaben
## Aufgabe 2 - Kollaboration

### Jennifer

![Jennifer-Schwarz-Kollaboration](https://hackmd.io/_uploads/B1saA11M0.jpg)
https://drive.google.com/drive/folders/1jkTpEMAuT_Lb8VRaA8YV30DFdHGanNpt?usp=sharing

### Laura
![Kollaboration_4_L.F.](https://hackmd.io/_uploads/SJ4aQI-fC.png)
https://drive.google.com/drive/u/1/folders/18mImauT9T0EZUV8lakS8NpKn4FDYsThr

### Jiameng
![image](https://hackmd.io/_uploads/BJu48uZfA.png)
https://drive.google.com/drive/u/0/folders/1fFDbLB7RPlsptJuEsEMny-vEEAIOmGRp


### Zhuoran
![截屏2024-05-02 22.43.05](https://hackmd.io/_uploads/rJeDsdZzA.png)
https://drive.google.com/drive/u/0/folders/1GnbsqCYv8O7f3bjuZJRrqtAlimFJBz4g


### Jinyu
![Screenshot 2024-05-03 at 10.37.47](https://hackmd.io/_uploads/Sk5irXzzC.png)

https://drive.google.com/drive/u/1/folders/1b2Eg6AYWcfYK9OHyMmLlxhxP_Ijpx279

### Wenjia
![image](https://hackmd.io/_uploads/S1TafrGzA.png)
https://drive.google.com/file/d/1KrDtZmGPWaCTBy94CtmmXHaLS-Yqg4oF/view?usp=drive_link
### Mahmoud
![Bildschirmfoto 2024-05-03 um 13.40.41](https://hackmd.io/_uploads/SynTaHfGC.png)
https://drive.google.com/file/d/1nK37ybNVR2982YF9HAUSun6WbM3xT-EI/view?usp=drive_link
## Sara
![Screenshot 2024-05-11 at 13.22.36](https://hackmd.io/_uploads/HkigVq44A.png)
https://drive.google.com/drive/u/1/folders/1TM4nIJAY94yBl35kRCddyj4Vofl667ey

---

# 3. Treffen 03.05.

**Themen:**
* Grundsätzliche Probleme bei der Hausaufgabe
* Hausaufgaben durchgehen
* [Processing 3](https://processing.org/releases) evtl. besser als Python 4.x für Python mode - probiert es
* [if](https://tabreturn.github.io/code/processing/python/2018/07/02/processing.py_in_ten_lessons-3.2-_conditional_statements.html) und co detailliert durchgehen
* [Operator Precedence Table ](https://www.upgrad.com/tutorials/software-engineering/python-tutorial/operator-precedence-in-python/)
* [While / For Schleifen](https://tabreturn.github.io/code/processing/python/2018/07/03/processing.py_in_ten_lessons-3.3-_iteration.html)
* Pair-programming: "Four-Square-Task" zu 2. lösen!
* [random()](https://py.processing.org/reference/random)

      
**Hausaufgabe:**
* Erstellt eine Animation, die bei jedem Start anders aussieht! (Keine Interaktion) - Thema: "Untergang"
* Kommentiert ausführlich!


--- 
# Abgaben
## Aufgabe 3 - Untergang

### Jennifer

![Jennifer-Schwarz-Untergang](https://hackmd.io/_uploads/S1v-0TUGR.jpg)
https://drive.google.com/drive/folders/15X_lms8wGSAIOP-e2xBIfNKuc5UxJ8rI?usp=sharing

### Laura
![Screenshot (208)](https://hackmd.io/_uploads/BJ1q6iFfC.png)
https://drive.google.com/drive/folders/1ETZ3IlcOeTb7uevCzTfI0wnCF5KsInjJ

### Jiameng
![image](https://hackmd.io/_uploads/B1ZNET5GC.png)
https://drive.google.com/drive/u/1/folders/1WCihur0UGBvjsiNDbipzkCE1CxOGGekv

### jinyu 
![Screenshot 2024-05-10 at 01.36.51](https://hackmd.io/_uploads/BkkvCCcMA.png)
https://drive.google.com/drive/folders/1aBLznMuuHXFKWCBiq-6ABuHpVrsFHGl-?usp=share_link

### Zhuoran
![WX20240517-144940@2x](https://hackmd.io/_uploads/rkodM0N7R.png)
https://drive.google.com/drive/u/0/folders/1pnXNTRMalQIa3rt7xTbvLaf0fZgfoIKm




----
# 4. Treffen
* Themen: 
    * Hausaufgaben

* Hausaufgabe
    1. 2 Fragen an uns überlegen (damit Erklärungen dazu aufbereiten können)
    2. Remix: Den Source-Code einer anderen Aufgabe kopieren, euch eine Änderung/Ergänzung überlegen und dann umsetzen und hochladen

## Fragesammlung:
* Hier eure Fragen rein...von jedem mind. 2 :)
     * Ein Ball Freier Fall(Beschleunigung)
     * Variablen speichern (history function)
     * Variablen, die width und height beinhalten, als globale Variablen definieren
     * P2D and P3D renderers
     * einzelne Elemente zu einem verschmelzen
     * Jedes Mal, wenn Sie mit der Maus klicken, erscheint ein kleiner Ball, der zurückprallt, wenn er den Rand des Bilderrahmens berührt, und dann kollidieren die kleinen Bälle miteinander (genau wie beim Werfen kleiner Bälle in ein Glas).
     * Wie lasse ich eine Bereichsfolge mit Zeitintervallen erscheinen?--z.B. range(0,500,100),zuerst 100,nach 1 Sekunde kommt 200,nach 1 Sekunde kommt 300,nach 1 Sekunde kommt 400

# Abgaben
## Aufgabe 4 - Remix

### Laura
![Remix_L.F.](https://hackmd.io/_uploads/SkKMUIQQA.png)
https://drive.google.com/drive/folders/144B2s4my2GHJN2YNtqJztcKQERQlTNx7

### Jennifer
![Jennifer-Schwarz-Remix](https://hackmd.io/_uploads/S1X5Du7m0.jpg)
https://drive.google.com/drive/folders/18IjIZ7uoIQEyQn6nhnBmc7cSx7KwVcYn?usp=sharing



### Jiameng
![image](https://hackmd.io/_uploads/SJtHMTV7C.png)
https://drive.google.com/drive/u/1/folders/16lbZeruQC9DU5lj6I4G0xl4upxf8FFqy

### Sara
![Screenshot 2024-05-16 at 22.07.17](https://hackmd.io/_uploads/ryOPm5EER.png)
https://drive.google.com/drive/u/1/folders/1-fAPhRhXYQIl47sFIV7Du7MfmtW3X5fF
https://drive.google.com/file/d/14REejg5eRODBN8xt1z4tzt7ndISlc3F9/view?usp=share_link

---
# 5. Treffen
**Themen:**
    * Hausaufgaben
    * Eure Fragensammlung
    * https://py.processing.org/reference/createshape
    * Bouncing Ball
    
Hier nochmal der code für den Bouncing Ball:


```
rad = 20
 
def setup():
    global xPos, yPos, xSpeed, ySpeed
    size(400, 300)
    frameRate(30)
    xPos = random(0, width)
    yPos = random(0, height)
    xSpeed = random(-20, 20)
    ySpeed = random(-20, 20)


 
def draw():
    global xPos, yPos, xSpeed, ySpeed
    background(0)
    fill(255)
    ellipse(xPos, yPos, rad, rad)

    xPos = xPos + xSpeed
    yPos = yPos + ySpeed
    if xPos <= rad or xPos >= width - rad: 
        xSpeed = xSpeed * -1
    
    if yPos <= rad or yPos >= height - rad:
        ySpeed = ySpeed * -1
```

**Hausaufgabe:**
* Überarbeitet den Bouncing Ball Code in der Form das der Ball immer schneller wird (Beschleunigung) :-)
* Erzeugt ein komplexes Objekt mit dem Befehl "createShape" und benutzt es im Bouncing Ball Sketch (google kann da helfen, aber ihr solltet es erklären können)

# Abgaben
## Aufgabe 5 - Bouncing Ball

### Jennifer
![Jennifer-Schwarz-Stars](https://hackmd.io/_uploads/rJWpUrjmA.jpg)
https://drive.google.com/drive/folders/1BAw1_t9j2_1NdcijZyW29n_ANTG0aknn?usp=sharing

###Sara.
![Screenshot 2024-06-09 at 11.01.14](https://hackmd.io/_uploads/r1R7A2FSA.png)

### Laura
![bouncingBall_L_F.](https://hackmd.io/_uploads/H1ynyXTQ0.png)
https://drive.google.com/drive/folders/1qtXOdPMFXKp-x6hnHohLaDlM5cmmNiq2
Hier nochmal für Alle eine Variante in der der Hintergrund eine andere "Geschwindigkeit" hat:
```
# Radius des großen Sternes
rad = 50
# Beschleunigungsrate
acceleration = 0.1  
# Initialer Rotationswinkel
rotationAngle = 0 
backStars = 20

def setup():
    global xPos, yPos, xSpeed, ySpeed, x, y, xSp, ySp
    size(600, 600)
    frameRate(30)
    # Stern Vodergrund
    # Initiale Position 
    xPos = random(rad, width - rad)
    yPos = random(rad, height - rad)
    # Initiale Geschwindigkeit 
    xSpeed = random(-5, 5)
    ySpeed = random(-5, 5)
    # Hintergrundsterne
    x = []
    y = []
    for i in range(backStars):
        x.append(int(random(width)))
        y.append(int(random(height)))
    xSp = random(-1, 1)
    ySp = random(-1, 1)
    println(x)
def draw():
    global xPos, yPos, xSpeed, ySpeed, rotationAngle, x, y, ySp, xSp
    background(152,5,138) 
    # Rotationsgeschwindigkeit erhöhen
    rotationAngle += 0.1 
     # wenn der Winkel größer als 360 Grad wird er zurückgesetzt
    if rotationAngle > TWO_PI: 
        rotationAngle -= TWO_PI
        # Stern zeichnen
    drawStar(xPos, yPos, rad, 5, rotationAngle)  
    
    # Position aktualisieren
    xPos += xSpeed
    yPos += ySpeed
    
    # Beschleunigung erhöhen
    if xSpeed > 0:
        xSpeed += acceleration
    else:
        xSpeed -= acceleration
    
    if ySpeed > 0:
        ySpeed += acceleration
    else:
        ySpeed -= acceleration
    
    # Kollision mit den linken und rechten Kanten prüfen
    if xPos <= rad or xPos >= width - rad:
        # Horizontale Geschwindigkeit umkehren
        xSpeed *= -1  
        # Zufällige Rotation bei Aufprall
        rotationAngle = random(TWO_PI)  
    
    # Kollision mit den oberen und unteren Kanten prüfen
    if yPos <= rad or yPos >= height - rad:
        # Vertikale Geschwindigkeit umkehren
        ySpeed *= -1
        # Zufällige Rotation bei Aufprall  
        rotationAngle = random(TWO_PI)  

    # Sterne im Hintergrund zeichnen
    
    for i in range(backStars):
        drawRandomStar(x[i], y[i])
        x[i] += xSp
        y[i] += ySp
    for i in range(backStars):
        if x[i] <= 0 or x[i] >= width:
            xSp *= -1
        if y[i] <= 0 or y[i] >= height:
            ySp *= -1
    

def drawStar(x, y, radius, npoints, angle):
    # Stern Vodergrund
    star = createShape()
    star.beginShape()
    star.fill(252,173,0)  
    star.noStroke()
    # Stern zum angegebenen Punkt verschieben
    star.translate(x, y)
    # Stern drehen 
    star.rotate(angle) 
    # Winkel zwischen den Spitzen des Sterns 
    angle = TWO_PI / npoints 
    halfAngle = angle / 2.0
    for i in range(npoints):
        # Äußere Spitze
        sx = cos(i * angle) * radius
        sy = sin(i * angle) * radius
        star.vertex(sx, sy)
        # Innere Spitze
        sx = cos(i * angle + halfAngle) * (radius / 2.5)
        sy = sin(i * angle + halfAngle) * (radius / 2.5)
        star.vertex(sx, sy)
    star.endShape(CLOSE)
    shape(star)

def drawRandomStar(x,y):

    radius = random(5, 10)
    npoints = int(random(5, 10))
    angle = random(TWO_PI)
    drawStar(x, y, radius, npoints, angle)
```

### Jiameng
![image](https://hackmd.io/_uploads/rJ5pagC7C.png)
https://drive.google.com/drive/u/1/folders/1tmLmXZoSS3YmRnOLh7uW_Vl7M1HK9bdj


# 6. Treffen
**Themen:**
    * Hausaufgaben durchgehen
    * Funktionen [link](https://nostarch.com/download/samples/LearnPythonVisually_sampleChapter.pdf)
    * [Transform 2D](https://py.processing.org/tutorials/transform2d/)
 
 **Hausaufgabe:**

 Tutorial [Lists](https://py.processing.org/reference/list) alternativ etwas ausführlicher[Lists] oder die [Python reference](https://docs.python.org/3/tutorial/datastructures.html) (https://tabreturn.github.io/code/processing/python/2019/01/15/processing.py_in_ten_lessons-5.1-_lists.html)
 Tutorial [Two-Dimensional Lists](https://py.processing.org/tutorials/2dlists/) alternativ etwas ausführlicher [List of Lists](https://tabreturn.github.io/code/processing/python/2019/01/17/processing.py_in_ten_lessons-5.3-_lists_of_lists.html)
  Tutorial [Objects](https://py.processing.org/tutorials/objects/)
    
  
# 7. Treffen
**Themen:**
  * Listen
  * Objekte 

 **Hausaufgabe:**
 Entwickelt bitte eine aktive Graphik, in der Listen und Objekte vorkommen zum Thema "regenerativ"!
 
# Abgaben
## Aufgabe 7 - regenerativ

### Jennifer
![Jennifer-Schwarz-regenerativ](https://hackmd.io/_uploads/S1PeOprrC.jpg)
https://drive.google.com/drive/folders/1BAw1_t9j2_1NdcijZyW29n_ANTG0aknn?usp=sharing

### Laura
![Regenerativ_L.F.](https://hackmd.io/_uploads/r1z-oZLrR.png)
https://drive.google.com/drive/u/1/folders/1JFoxOZEq8oUHHXtUvxn6N7CGjU5wiFui

### Jiameng
![image](https://hackmd.io/_uploads/rJgKOWtHR.png)
https://drive.google.com/drive/u/1/folders/1kXXjOyqtA1zY73QJSw2LPN8oj_hb049c
### Sara
https://drive.google.com/file/d/1utRBCRHccRrEbAlaN41kCK4DNA2IhyiD/view?usp=share_link
![Screenshot 2024-06-20 at 17.54.51](https://hackmd.io/_uploads/BkMPcnG8A.png)


# 8. Treffen
**Themen:**
  * [Strings](http://py.kantel-chaos-team.de.s3-website-us-east-1.amazonaws.com/07text/#textverarbeitung-in-processingpy)
  * [Grafiken](http://py.kantel-chaos-team.de.s3-website-us-east-1.amazonaws.com/08images/) 

 **Hausaufgabe:**
 * Eine Animation zum Thema "Rotationen" basierend auf entweder einem Image oder Texten/Strings.
 * Ideen sammeln für einen gemeinsamen inhaltlichen Rahmen für das Abschlussprojekt des Kurses

# Abgaben
## Aufgabe 8 - Rotationen

### Jennifer
![Jennifer-Schwarz-Rotationen](https://hackmd.io/_uploads/SkLQZieI0.jpg)
https://drive.google.com/drive/folders/1OcWDnxw0eF-oqXbyXgdxE0A9Pv2dw579?usp=sharing
**Ideen Abschlussthema**: Kommunikation/Austausch, mentales Wohlbefinden, Natur/Umweltbewusstsein

### Laura
![Screenshot (278)](https://hackmd.io/_uploads/BJILnWzIA.png)
https://drive.google.com/drive/u/1/folders/17hA24ItSIUSUzSQygeFSU9m4-fumtjzw

### Jiameng
![image](https://hackmd.io/_uploads/B1JTFXMUC.png)
https://drive.google.com/drive/u/1/folders/1di1U81icQFAkU8YDZtl9Q6sxn-D_WgDd
Ideen Abschlussthema:Ein kleines interaktives Spiel (an ein bestimmtes Spielthema habe ich noch nicht gedacht)
Leider kann ich am 21.06 nicht kommen🥲.Entschuldigung!!!
### Sara
https://drive.google.com/file/d/1utRBCRHccRrEbAlaN41kCK4DNA2IhyiD/view?usp=share_link
![Screenshot 2024-06-21 at 10.16.56](https://hackmd.io/_uploads/rky7cnGIC.png)


## Themen

Natur / Nachhaltigkeit /Ozeane/Wasser/Luft/
Kommunikation
mentales Wohlbefinden
Gemeinschaft
Wetter
Klima


++++ Gefühle ++++

## Aufgabe 9 - Gefühle

Entwickelt mindestens zwei Konzepte/Ansätze zum Thema "Gefühle" für eine Animation auf der Medienfassade

# Abgaben
## Aufgabe 9 - Gefühle

### Jennifer
![Konzept1](https://hackmd.io/_uploads/S1RZOxhI0.jpg)
![Konzept2](https://hackmd.io/_uploads/HyFGde2LC.jpg)
https://drive.google.com/drive/folders/1J2MPtGF9vIItM4x_oQR_HkGgYIIwVdZ9?usp=sharing
##Sara 
https://drive.google.com/drive/u/1/folders/1Bf-9VvgrLhdnVOAqKvhiEbWV_1NWRC2H
![Screenshot 2024-07-26 at 17.57.41](https://hackmd.io/_uploads/BJ-ADS-FC.png)


### Laura
- Kaleidoskop
https://ravenkwok.com/cb97/

- Particle / Noise
https://youtu.be/6XSinSw9YdY?si=L-zESxICVYl_XI-S

## Inspiration 
- http://ravenkwok.com/50e9/
- https://ravenkwok.com/a-testoni/
- https://30000fps.tumblr.com/
- https://cables.gl/p/gLoLmO
- https://www.youtube.com/watch?v=cnBoUk8bP6c


# Infos für die Produktion des Abschlussprojekts

Hier findet ihr die Arbeiten des letzten Kurses: [drive](https://drive.google.com/drive/folders/1z8Vfhtopy402yUWbj3Z8LUIDD5E8EZng?usp=sharing)
-

Grundsätzlich zu, Abspeichern des Films aus einem Processing Sketch heraus in Medienfassadenformat: 
 * Sketch auf das Format der Medienfassade bringen: 800 (horizontal) x 1200 (vertikal)
* Mit **saveFrame** die Einzelbilder erzeugen und zu einem Video zusammenfügen (H.264) mit dem Befehl: saveFrame("output/vid_####.png") innerhalb von draw()! (siehe auch https://py.processing.org/reference/saveframe)

Ein paar Hinweise zum erstellen des Films, weil es schnell passieren kann, dass der Film sehr ruckelt oder sehr kurz wird:

Wenn ihr mit saveFrame die Bilder abspeichert, kann es sein, dass euer Sketch sehr langsam wird. Das ist nicht schlimm, ihr müsst dann aber länger warten, damit genug Bilder abgespeichert werden. In dem Movie Maker Tool von Processing müsst/könnt ihr die frames per second (FPS) einstellen, sagen wir mal auf 24 fps, was ein Standard (von vielen) ist. D.h. ihr benötigt für eine Sekunde Film 24 Bilder bzw. frames! Und für eine Minute entsprechend 24 * 60 Bilder, also 1440. In Processing gibt es die eingebaut Variable frameCount, die euch sagt, wie viele Frames euer Sketch schon angezeigt (und entsprechend gespeichert habt). Ihr könnt jetzt am Ende euers Sketches diese Zeilen einbauen, damit euer Sketch automatisch beendet wird, wenn genug frames (hier 1440 für eine Minute Film) gespeichert sind:

```
if frameCount == 1440:
    exit()

```

Ihr braucht am Anfang des Sketches den Befehl frameRate(xx) nicht benutzen! Am Ende ist es egal, wenn der Sketch langsam läuft, ihr müsst einfach nur länger warten. Wenn ihr bei saveFrame den Dateinamen selbst vergeben wollt mit zB 

```
saveFrame("output/frame_##.tif")
```

dann achtet darauf, dass ihr 4 Mal das Hash einsetzt, sonst kommt die Sortierung später etwas durcheinander. Das Format *tif* lief bei mir übrigens besser als *png*.

**Zusammengefasst:**

1. Am Ende eures Sketches (innerhalb der draw Funktion) einfügen:

```
    saveFrame("output/frame_####.tif")
    if frameCount == 1440:
      exit()
    
```
(mit 1440 wird es 1 Minute, s.o.)

2. Einstellungen des Movie Makers:
* Den Ordner mit den Einzelbildern
* Width: **8000** x Height: **1200**
* Framerate: 24
* Compression: JPEG

Dann sollte das passen.


# Abschlusstermin: 23.07. 21 Uhr in oder vor der Galerie

# Infos zu Libraries
Die libraries, die ihr über **Sketch/Import Library/Add Library** hinzufügen könnt, sollten auch im Python mode funktionieren, nur leider sind meist die Beispiel nur in Java vorhanden und ihr müsst sie konvertieren. Ich habe mal ein Beispiel (["sound"](https://processing.org/reference/libraries/sound/index.html) von der Processing Foundation) von Java nach Python übersetzt und zwar das Beispiel `AudioWaveform` (man muss hier den Pfad der Sounddatei `beat.aiff` anpassen, wenn man unter Windows arbeitet):

```
add_library('sound')

def setup():
  size(640, 320)
  background(0)
  global samples, sample, waveform
  samples = 100
  sample = SoundFile(this, "/Users/m.schmitz/Documents/Processing/libraries/sound/examples/Soundfile/JumbleSoundfile/data/beat.aiff")
  sample.loop();
  waveform = Waveform(this, samples)
  waveform.input(sample)
  
def draw():
  background(0)
  stroke(255)
  strokeWeight(2)
  noFill()
  global samples, waveform
  waveform.analyze()  
  beginShape()
  i = 0
  while i < samples:
    vertex(map(i, 0, samples, 0, width),map(waveform.data[i], -1, 1, 0, height))
    i += 1
  endShape()
    
```



Jiameng ist krank, kann heute nicht kommen🥲🥲🥲
Ok
Gute Besserung an Jiameng!
Hilft dir das Beispiel oben mit Sound weiter?
Ja!!! Statt einfacher runder Partikel möchte ich Emoji-Bilder verwenden und das Bild der Partikel entsprechend den verschiedenen Sounds ändern. Ich habe die Sound Library- und Minim Library-Funktion heruntergeladen und auch das Audioformat in .wav und .aiff geändert, die beide nicht funktionieren. Ich habe meinen Code in GPT und es sagte, dass mein Code Kompatibilitätsprobleme in der Verarbeitung hatte, dann sagte es mir, Python herunterladen, aber ich folgte den Schritten, die es mir gab und es hielt auch Fehler angezeigt.
https://drive.google.com/drive/u/1/folders/1169RU18xPk7a3_as_raK05azolEXeIXD
Hier sind alle Dateien und Codes, die ich gemacht habe, können Sie mir helfen?

