Creative Coding: Programmiere visuelles Material mit JavaScript
Ein Kurs von Bruno ImbriziKreativer Coder
Ein Kurs von Bruno Imbrizi, Kreativer Coder
Lerne die Grundlagen des Programmierens und entdecke, wie man visuelle Inhalte und Texte entwickelt, skizziert und animiert
Creative Coding ist ein Gebiet, das sich ständig weiterentwickelt und immer wieder neue Herausforderungen bringt, wie neue Techniken oder Illustrationsarten.
Für Bruno Imbrizi stellt Creative Coding eine Möglichkeit dar, seine beiden Interessen -- Motion Graphics und visuelle Elemente - miteinander zu verbinden.
Bruno, der mit bekannten Marken wie Adidas, Dell und Universal Music zusammengearbeitet hat, teilt in diesem Kurs sein Fachwissen mit dir und hilft dir dabei, beeindruckende visuelle Elemente mit JavaScript zu erstellen.
Im Laufe dieses Kurses tauchst du in die Welt des Programmierens ein, setzt dich mit ihren Grundlagen auseinander und lernst, mit Creative Coding in JavaScript zu zeichnen.
Möchtest du dein Wissen über Coding vertiefen? Entdecke Brunos zweiten Kurs "Creative Coding 2.0 in JS: Farbe und Animation", in dem er dir fortgeschrittene Programmiertechniken zur Gestaltung von Visuals mit Farbe, Bewegung und Sound in JavaScript beibringt.
Was lernst du in diesem Onlinekurs?
21 Lektionen & 39 Downloads
Eine Umgebung zum Skizzieren
12 Minuten, 39 Sekunden
Netz
7 Minuten, 51 Sekunden
Lärm
6 Minuten, 40 Sekunden
GUI
11 Minuten, 12 Sekunden
Text
9 Minuten, 26 Sekunden
Bitmap
10 Minuten, 34 Sekunden
Was ist in diesem Kurs enthalten?
Zu Beginn des Kurses lernst du den Creative Coder Bruno Imbrizi kennen. Um dich mit seinem beruflichen Werdegang vertraut zu machen, spricht Bruno zunächst von seinen Anfängen als Grafikdesigner und erzählt, wie er diese Tätigkeit schließlich mit seiner Leidenschaft für Creative Coding verbunden hat.
Danach spricht er über die Plattformen, die er gerne nutzt, und Personen, die ihn in seiner Arbeit beeinflusst haben.
Als Nächstes zeigt dir Bruno, wie du die wichtigsten Werkzeuge konfigurierst. Anschließend setzt er sich mit den Programmierkonzepten wie Variablen, Funktionen, Arrays und Loops auseinander und zeigt dir, wie du deine Setups optimierst.
Der nächste Meilenstein des Kurses wird die Erstellung einer digitalen Skizze mit verschiedenen Canvas-Elementen sein. Du lernst, wie du mithilfe der Trigonometrie Formen um einen Kreis herum verteilst.
Daraufhin lernst du, deine Skizzen zu skalieren und erfährst, wie du deine Designs mit verschiedenen Tools zukünftig einfacher gestalten kannst. Danach übst du das Zeichnen von Bögen und experimentierst mit verschiedenen Parametern.
Im nächsten Schritt entwirfst du eine animierte Skizze mit Agenten. Du lernst, auf Abstand basierende Linien zu ziehen und erfährst, wie du deine Animation als Videodatei exportieren und teilen kannst.
Danach experimentierst du mit Rauschgeneratoren und erstellst außerdem ein kleines Bedienfeld, mit dessen Hilfe du deine Skizzen in Echtzeit aktualisieren kannst.
Schließlich erfährst du, wie du einen Text hinzufügen kannst. Bruno zeigt dir, wie du einen erstellst, misst und seine Eigenschaften konfigurierst und wie du deine Letterings mit nur einem Mausklick aktualisierst.
Zum Abschluss des Kurses lernst du, Farbwerte zu lesen und deine Skizze mit abschließenden Feineinstellungen zu perfektionieren.
Was ist das Kursprojekt?
Im Laufe des Kurses entwirfst du mehrere visuelle Kompositionen, die du anschließend mithilfe von JavaScript implementierst.
Projekte von Kursteilnehmenden
An wen richtet sich dieser Onlinekurs?
Dieser Kurs richtet sich an alle, die Interesse am Programmieren haben und lernen möchten, visuelle Kompositionen mit JavaScript zu erstellen.
Anforderungen und benötigte Materialien
Grundkenntnisse in Mathematik werden empfohlen.
Grundkenntnisse in Mathematik werden empfohlen. Sie benötigen einen Computer mit Node.js sowie Zugriff auf einen Webbrowser und einen Texteditor.
Betriebssysteme:
⦁Linux ⦁SmartOS ⦁macOS 10.7 oder höher ⦁Windows 2008 oder höher
System Anforderungen:
⦁4GB RAM ⦁10 GB freier Speicherplatz
Bewertungen
- vor 2 Monaten
Great course, I wish I’d had a stronger foundation in coding before taking it.
- vor 3 Monaten
Excellent introductory course
- vor 3 Monaten
Great course!!!
- vor 4 Monaten
I loved this! I learned a lot and I sincerely recommend this course.
- vor 5 Monaten
Ótimo curso. O professor entende do assunto em profundidade e sabe transmitir muito bem o conteúdo. É uma excelente oportunidade como porta de entrada para a programação criativa.
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
- Einflüsse
- E2
Grundlagen
- Aufstellen
- Variablen und Funktionen
- Arrays und Schleifen
- Eine Umgebung zum Skizzieren
- E3
Skizzentransformation
- Verwandeln
- Winkel
- Dienstprogrammfunktionen
- Bögen
- E4
Sketch-Agenten
- Objekte und Klassen
- Animation
- Linien
- Video-Ausgang
- E5
Skizzenrauschen
- Netz
- Lärm
- GUI
- E6
Skizzentyp
- Text
- Asynchron
- Bitmap
- Glyphen
- AP
Abschlussprojekt
- Einführung in die Codierung für visuelle Designer
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.
Zertifikate
PLUSErhalte als Plus-Mitglied für jeden Kurs ein von deiner Lehrperson personalisiertes und unterzeichnetes Zertifikat. Teile es in deinem Portfolio, in sozialen Netzwerken oder wo immer du möchtest.
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
Creative Coding bedeutet, Programmierung für künstlerischen oder visuellen Ausdruck zu nutzen. In diesem Kurs lernst du, wie du mit JavaScript, HTML und Canvas interaktive Visuals und generative Kunst durch praktische Coding-Experimente erschaffst.
Der Kurs richtet sich an Nutzer mit mittleren Kenntnissen. Grundkenntnisse in JavaScript und Webentwicklung sind empfohlen, aber wichtige Konzepte und Tools werden Schritt für Schritt erklärt – ideal für alle mit etwas Programmiererfahrung.
Du brauchst einen Code-Editor wie Sublime Text oder Visual Studio Code, Node.js, npm und einen modernen Webbrowser. Der Kurs zeigt dir auch, wie du alle nötigen Tools für Creative-Coding-Projekte installierst und einrichtest.
Du lernst, generative Kunst, interaktive Visuals und Prototypen mit JavaScript, Canvas und Webtechnologien zu erstellen. Themen sind unter anderem Formen zeichnen, Transformationen, Animation, Grafikexport und Bibliotheken wie Canvas Sketch.
Der Kurs zeigt dir, wie du mit JavaScript-Canvas-API-Methoden wie fillRect, arc und fillStyle Rechtecke, Kreise und andere Formen direkt im Browser zeichnest und gestaltest.
Ja, du lernst, deine generativen Skizzen als PNG-Bilder oder Videodateien mit Canvas Sketch CLI zu exportieren – inklusive Tipps für hochwertige Exporte.
Du wirst Schritt für Schritt durch die Installation von Canvas Sketch geführt, lernst Projekte zu starten, dynamische Canvas-Größen zu verwalten und Skizzen im Browser oder Terminal auszuführen.