Creative Coding: Programmiere visuelles Material mit JavaScript
A course by Bruno ImbriziKreativer Coder
A course by 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.
What is this course's project?
Im Laufe des Kurses entwirfst du mehrere visuelle Kompositionen, die du anschließend mithilfe von JavaScript implementierst.
Projekte von Kursteilnehmenden
Who is this online course for?
Dieser Kurs richtet sich an alle, die Interesse am Programmieren haben und lernen möchten, visuelle Kompositionen mit JavaScript zu erstellen.
Requirements and materials
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 16 Tagen
Great course, I wish I’d had a stronger foundation in coding before taking it.
- vor 1 Monat
Excellent introductory course
- vor 2 Monaten
Great course!!!
- vor 2 Monaten
I loved this! I learned a lot and I sincerely recommend this course.
- vor 4 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.
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
Creative coding is using programming for artistic or visual expression. This course teaches you how to use JavaScript, HTML, and Canvas to create interactive visuals and generative art through hands-on coding experiments.
This course is designed for intermediate users. Basic familiarity with JavaScript and web development is recommended, but key concepts and tools are explained step by step for those with some coding background.
You'll need a code editor like Sublime Text or Visual Studio Code, Node.js, npm, and a modern web browser. The course also covers installing and setting up all required tools for creative coding projects.
You'll learn to create generative art, interactive visuals, and prototypes using JavaScript, Canvas, and web technologies. Topics include drawing shapes, transformations, animation, exporting graphics, and using libraries like Canvas Sketch.
The course teaches you to use JavaScript Canvas API methods such as fillRect, arc, and fillStyle to draw and style rectangles, circles, and other shapes directly in the browser.
Yes, you'll learn to export your generative sketches as PNG images or video files using Canvas Sketch CLI, along with workflow tips for high-quality exports.
You'll be guided through installing Canvas Sketch, initializing projects, managing dynamic canvas dimensions, and running sketches in your browser or terminal.