xmlab
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Write
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Engagement control Commenting, Suggest edit, Emoji Reply
    • Invite by email
      Invitee

      This note has no invitees

    • Publish Note

      Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

      Your note will be visible on your profile and discoverable by anyone.
      Your note is now live.
      This note is visible on your profile and discoverable online.
      Everyone on the web can find and read all notes of this public team.
      See published notes
      Unpublish note
      Please check the box to agree to the Community Guidelines.
      View profile
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Emoji Reply
    • Enable
    • Versions and GitHub Sync
    • Note settings
    • Note Insights New
    • Engagement control
    • Make a copy
    • Transfer ownership
    • Delete this note
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Note Insights Versions and GitHub Sync Sharing URL Help
Menu
Options
Engagement control Make a copy Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Owners
  • Owners
  • Signed-in users
  • Everyone
Owners Signed-in users Everyone
Write
Owners
  • Owners
  • Signed-in users
  • Everyone
Owners Signed-in users Everyone
Engagement control Commenting, Suggest edit, Emoji Reply
  • Invite by email
    Invitee

    This note has no invitees

  • Publish Note

    Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

    Your note will be visible on your profile and discoverable by anyone.
    Your note is now live.
    This note is visible on your profile and discoverable online.
    Everyone on the web can find and read all notes of this public team.
    See published notes
    Unpublish note
    Please check the box to agree to the Community Guidelines.
    View profile
    Engagement control
    Commenting
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Suggest edit
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    Emoji Reply
    Enable
    Import from Dropbox Google Drive Gist Clipboard
       Owned this note    Owned this note      
    Published Linked with GitHub
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    # 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?

    Import from clipboard

    Paste your markdown or webpage here...

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lose their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template has been removed or transferred.
    Upgrade
    All
    • All
    • Team
    No template.

    Create a template

    Upgrade

    Delete template

    Do you really want to delete this template?
    Turn this template into a regular note and keep its content, versions, and comments.

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password

    or

    By clicking below, you agree to our terms of service.

    Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
    Wallet ( )
    Connect another wallet

    New to HackMD? Sign up

    Help

    • English
    • 中文
    • Français
    • Deutsch
    • 日本語
    • Español
    • Català
    • Ελληνικά
    • Português
    • italiano
    • Türkçe
    • Русский
    • Nederlands
    • hrvatski jezik
    • język polski
    • Українська
    • हिन्दी
    • svenska
    • Esperanto
    • dansk

    Documents

    Help & Tutorial

    How to use Book mode

    Slide Example

    API Docs

    Edit in VSCode

    Install browser extension

    Contacts

    Feedback

    Discord

    Send us email

    Resources

    Releases

    Pricing

    Blog

    Policy

    Terms

    Privacy

    Cheatsheet

    Syntax Example Reference
    # Header Header 基本排版
    - Unordered List
    • Unordered List
    1. Ordered List
    1. Ordered List
    - [ ] Todo List
    • Todo List
    > Blockquote
    Blockquote
    **Bold font** Bold font
    *Italics font* Italics font
    ~~Strikethrough~~ Strikethrough
    19^th^ 19th
    H~2~O H2O
    ++Inserted text++ Inserted text
    ==Marked text== Marked text
    [link text](https:// "title") Link
    ![image alt](https:// "title") Image
    `Code` Code 在筆記中貼入程式碼
    ```javascript
    var i = 0;
    ```
    var i = 0;
    :smile: :smile: Emoji list
    {%youtube youtube_id %} Externals
    $L^aT_eX$ LaTeX
    :::info
    This is a alert area.
    :::

    This is a alert area.

    Versions and GitHub Sync
    Get Full History Access

    • Edit version name
    • Delete

    revision author avatar     named on  

    More Less

    Note content is identical to the latest version.
    Compare
      Choose a version
      No search result
      Version not found
    Sign in to link this note to GitHub
    Learn more
    This note is not linked with GitHub
     

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub
        • Please sign in to GitHub and install the HackMD app on your GitHub repo.
        • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
        Learn more  Sign in to GitHub

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions
        Include title and tags
        Available push count

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch
        Available push count

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully