Creative Coding 2.0 in JS: Farbe und Animation
A course by Bruno ImbriziKreativer Coder
A course by Bruno Imbrizi, Kreativer Coder
Erkunde fortgeschrittene Programmiertechniken, um einzigartige Visuals zu erzeugen, die Farbe, Bewegung und Sound in JavaScript kombinieren
Zu programmieren heißt, aus Fehlern zu lernen und es so lange zu versuchen, bis das gewünschte Ergebnis erreicht ist. Bruno Imbrizi ist ein preisgekrönter Grafikdesigner, der die letzten 10 Jahre seiner Karriere der Kunst des Creative Codings gewidmet hat.
Er nutzt JavaScript, um Animationen, Drucke, interaktive Werke und vieles mehr zu gestalten. Im Laufe seiner Karriere hat er mit Marken wie Google, Spotify und Nike zusammengearbeitet und Preise wie den Adobe Cutting Edge Award und den FITC Best Digital Installation gewonnen.
Dies ist Brunos zweiter Domestika-Kurs. In seinem ersten Kurs "Creative Coding: Programmiere visuelles Material mit JavaScript", bringt er dir die Grundlagen des Programmierens und Zeichnens mit JavaScript von Grund auf bei.
Was lernst du in diesem Kurs?
"Ich bringe dir verschiedene Techniken bei, sodass du mit JavaScript einzigartige Visuals gestalten kannst."
Lerne, immersive Visuals mit Sound zu programmieren.
Entwickle programmierte Kompositionen voller Farbe.
Animiere dein Bildmaterial und baue verschiedene Cursor-Interaktionen ein.
Was lernst du in diesem Onlinekurs?
28 Lektionen & 20 Downloads
Das Online-Setup
5 Minuten, 4 Sekunden
Verteilung
4 Minuten, 51 Sekunden
Farben hinzufügen
8 Minuten, 50 Sekunden
Schnittmaske
6 Minuten, 29 Sekunden
Bilddaten
8 Minuten, 53 Sekunden
Was ist in diesem Kurs enthalten?
Zunächst beschäftigst du dich mit den grundlegenden Werkzeugen von JavaScript. Anschließend richtest du eine Entwicklungsumgebung ein, in der du den Code ausführen und mit der Arbeit beginnen kannst.
Danach lernst du, wie du bestimmte Grundformen ausschließlich mit Code zeichnest, Farben hinzufügst und deine Designs streckst und verdrehst.
Im Anschluss erstellst du Kurven für verschiedene Iterationen, von Designelementen bis hin zu Diagrammen, fügst mehrere Punkte entlang eines Segments hinzu, animierst sie und lernst, wie du den Cursor mit Bildern interagieren lassen kannst.
Dann gestaltest du eine Audiovisualisierung, indem du Tondateien abspielst, ihre Daten ausliest und aus den Frequenzen eine Animation erstellst.
Du experimentierst mit Partikeln und lernst, wie du ihr Verhalten bestimmen kannst, indem du sie auf verschiedene Art und Weise beeinflusst und ihre Größe und Farbe veränderst.
What is this course's project?
In diesem Kurs entwickelst du eine Reihe von programmierten Kompositionen mit Farbe und Sound, die in einem Webbrowser ausgeführt werden können.
Projekte von Kursteilnehmenden
Who is this online course for?
Dieser Kurs richtet sich an alle, die ihre Programmierkenntnisse vertiefen möchten, um einzigartige animierte Kompositionen zu gestalten.
Requirements and materials
Für diesen Kurs sind Vorkenntnisse im Programmieren erforderlich.
Was die Ausrüstung angeht, brauchst du Zugang zu einem Gerät mit JavaScript.
Bewertungen
- vor 4 Monaten
Polecam, fajna zabawa
- vor 7 Monaten
Excelente! Buena fuente de inspiración para creativos incursionando en programación
- vor 9 Monaten
I will recommend this to my friend who likes to know more on javascript designing
- vor 9 Monaten
Recomendado para principiantes que quiera incorporar su lado artístico a la codificación.
- chillwill47PLUSvor 11 Monaten
Just getting started into creative coding and this course is definitely a great point to begin at.
Im Laufe seiner 10-jährigen Karriere hat er in Agenturen, Designstudios, Produktionsfirmen und mit bekannten Marken wie Dell, Adidas und Universal Music gearbeitet. Außerdem wurde Bruno in Online-Publikationen wie „WIRED“ und „Londonist“ erwähnt und gewann mehrere Preise, darunter den Adobe Cutting Edge Award und den FITC Best Digital Installation.
Inhalt
- E1
Einführung
- Über mich
- Inspirationen
- E2
Die Einrichtung
- JavaScript-Zusammenfassung
- Das Online-Setup
- Das Offline-Setup
- Canvas-Skizze
- E3
Schräglage
- Zeichnen eines Rechtecks
- Zeichnen eines schiefen Rechtecks
- Verteilung
- Farben hinzufügen
- Schnittmaske
- Festlegen eines zufälligen Seeds
- E4
Kurven
- Zeichnen einer quadratischen Kurve
- Cursor-Interaktion
- Mehrere Punkte
- Erstellen eines Rasters
- Segmente
- Animation
- E5
Das Audio
- Play drücken
- Analysator
- Frequenzen
- Bögen
- Erstellen eines Posters
- E6
Partikel
- Zeichnen eines einzelnen Partikels
- Kräfte anwenden
- Verteilen der Partikel
- Skalierung und Farben ändern
- Bilddaten
- AP
Abschlussprojekt
- Creative Coding 2.0 in JS: Farbe und Animation
Was erwartet dich in einem Domestika-Kurs?
Lerne in deinem Tempo
Lerne bequem von zuhause aus, in deinem eigenen Tempo und ohne festen Zeitplan. Du entscheidest, wann und wo.
Lerne mit den Profis
Lerne die nützlichsten Techniken und Methoden mit den Profis der Kreativbranche.
Tritt mit den erfahrendsten Experten in Kontakt
Jede Lehrperson übermittelt dir in jeder Lektion leidenschaftlich sein/ ihr Wissen mittels ausführlichen Erklärungen aus professioneller Sicht.
Certificates
PLUSIf you're a Plus member, get a personalisiertes und unterzeichnetes Zertifikat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sei ganz vorne mit dabei
Dank hochwertig produzierter und gestochen scharfer Videos entgeht dir kein einziges Detail. Du hast uneingeschränkten Zugriff auf deinen Kurs und kannst dir so alle Videolektionen so oft ansehen, wie du möchtest.
Teile Wissen und Ideen
Stelle deine Fragen, bitte um Meinungen und biete Lösungsansätze. Teile deine Lernerfahrung mit anderen Schüler*innen in der Community, die genauso kreativ sind wie du.
Sei Teil einer globalen kreativen Community
Die Community umfasst Millionen wissbegierige Menschen weltweit, die Freude an kreativem Ausdruck finden.
Arbeite mit von Profis produzierten Kursen
Um eine einzigartige Online-Lernerfahrung zu garantieren, zählt Domestika auf eine sorgfältige Auswahl der Lehrpersonen und produziert jeden Kurs intern.
FAQ
This course is designed for intermediate learners. Basic familiarity with JavaScript and coding concepts is recommended before enrolling to get the most out of the lessons.
You'll need access to a modern web browser, and tools like StackBlitz, CodeSandbox, Node.js, npm, and a code editor such as Sublime Text. No specialized hardware is required.
You'll learn foundational creative coding concepts, how to use JavaScript and Canvas APIs for interactive visuals, generative art techniques, project setup, exporting artwork, and integrating audio for visualization.
The course primarily focuses on 2D creative coding using JavaScript and Canvas APIs, but introduces 3D visualization concepts and frameworks like Processing and OpenFrameworks.
Yes, the course includes detailed instructions for setting up and using StackBlitz and CodeSandbox for browser-based development, making it easy to start coding without local installations.
You'll learn how to export your browser-based generative artwork as high-resolution PNG images, which can then be printed or shared online.
Yes, the course covers creating interactive visuals and animated sketches using JavaScript, the Canvas API, and Canvas Sketch, including frame-based logic and user input.