Creative Coding 2.0 in JS: Farbe und Animation

Creative Coding 2.0 in JS: Farbe und Animation

“Herzliche Glückwünsche! Sie haben das Ende dieses Domestika-Kurses erreicht. Vielen Dank für Ihre Teilnahme und ich hoffe, es hat Ihnen gefallen. Wir haben zusammen an einigen Kompositionen gearbeitet, aber der wichtigste Teil waren die Techniken, die Sie gelernt haben. Sie können diese jetzt übertragen, woanders erneut anwenden und etwas anderes erstellen! Obwohl wir viel behandelt haben, gibt es immer mehr zu besprechen, also habe ich eine kleine Liste mit Tipps für diese letzte Einheit vorbereitet. Bibliotheken Ich habe während des gesamten Kurses einige davon verwendet, aber es gibt Tausende mehr da draußen. Manche Leute machen gerne alles selbst, aber manchmal ist das wie der Versuch, das Rad neu zu erfinden. Wann immer Sie etwas Bestimmtes brauchen, würde ich empfehlen, zuerst NPM zu durchsuchen. Jemand anderes könnte an diesem Problem bereits gearbeitet haben! Wenn Sie beispielsweise Daten aus einer CSV-Datei laden müssen, gibt es dafür Bibliotheken. Wenn Sie Operationen mit Vektoren durchführen, zwischen verschiedenen Farbräumen konvertieren oder Schriftdateien laden müssen, gibt es dafür Bibliotheken. Erstellung einer Website Eine Skizze kann für sich allein leben. Sie können Ihre Komposition exportieren und ausdrucken oder irgendwo posten. Wenn Sie Ihre Skizzen jedoch online teilen möchten, können Sie dies auch mit einem „--build“-Befehl tun. Es generiert statische JavaScript- und HTML-Dateien, die überall als normale Webseiten gehostet werden können. Falls Sie Ihre Skizze in eine bestehende Website integrieren müssen, denken Sie daran, dass wir immer die native Canvas-API verwenden, sodass Sie relevante Teile Ihres Codes in ein anderes Projekt kopieren und ohne Canvas-Sketch ausführen können. p5.js Viele Leute beschäftigen sich mit der kreativen Programmierung mit Processing oder p5.js, und das macht sehr viel Sinn, sie sind großartige Tools. Ich bin es gewohnt, mit der nativen API zu arbeiten, aber wenn Sie bereits mit p5.js vertraut sind, können Sie es zusammen mit canvas-sketch verwenden. Im obigen Video ist ein einfaches Beispiel enthalten, das Ihnen zeigt, wie das geht. Dokumentation Dies ist eine offensichtliche. Überprüfen Sie unbedingt die Dokumentation. Das gilt nicht nur für canvas-sketch oder Canvas, sondern für jede API, mit der Sie arbeiten. Jemand hat sich die Zeit genommen, seinen Code zu organisieren und zu dokumentieren, damit wir ihn nutzen können. Es ist da, um uns zu helfen. Als nächstes möchte ich noch einmal zusammenfassen, was wir bisher gesehen haben. In diesem Kurs habe ich an fünf kleinen Projekten gearbeitet. Das erste begann mit einem einfachen Rechteck, aber am Ende erforderte es einige Kenntnisse über Trigonometrie, Zufälligkeit, Farbpaletten, Mischmodi und Schnittmasken.

Das zweite Projekt bestand darin, mithilfe von Kurvensegmenten, die als Raster verteilt sind, einige visuelle Elemente zu erstellen, wobei Farben anders verwendet wurden als in der ersten Einheit. Dann habe ich Audiofrequenzdaten verwendet, um einige Visuals zu steuern und zu versuchen, ein paar klassische Posterdesigns mithilfe von Code nachzubilden. In der letzten Skizze dreht sich alles um Partikel! Sie haben gelernt, Kräfte auf sie anzuwenden, indem Sie grundlegende Konzepte aus der Physik wie Geschwindigkeit und Beschleunigung verwenden. Jetzt möchte ich Sie bitten, Ihre Skizzen im Forum zu teilen, indem Sie oben auf die Schaltfläche "Ihr Projekt erstellen" klicken. Es wäre großartig, wenn Sie auch Ihre Entscheidungen erläutern könnten, die Sie unterwegs getroffen haben, und uns mitteilen könnten, wenn Sie irgendwelche Zweifel haben. So lernen wir alle voneinander. Ich werde dort sein, um Fragen zu beantworten und Ratschläge zu geben. Ich bin gespannt, was Sie mit dem, was Sie im Kurs gelernt haben, erschaffen werden. Wir sehen uns dort! ”

Partielle Transkription des Videos

“Abschlussprojekt Hallo zusammen, ich hoffe, euch hat die Reise gefallen. Wir haben zusammen an einigen Kompositionen gearbeitet aber der Hauptteil waren die Techniken, die wir gelernt haben denn jetzt kannst du die hinübertragen, Wenden Sie sie an anderer Stelle erneut an und erstellen Sie etwas anderes. Wir haben viel abgedeckt, aber es gibt immer mehr zu besprechen. Ich habe eine Liste mit Tipps für dieses letzte Video vorbereitet. Bibliotheken, wir haben während des Kurses einige benutzt aber es gibt noch tausende mehr. Manche Menschen machen alles selbst aber manchmal ist es wie der Ver...”

Diese Transkription wurde maschinell erstellt und kann daher Fehler aufweisen.

Zusammenfassung des Kurses: Creative Coding 2.0 in JS: Farbe und Animation

• Niveau: Anfänger
• 99% positive Bewertungen (175)
• 19595 Lernende
• 6 Kurseinheiten
• 28 Lektionen (2 Stdn. 47 Min.)

• Kategorie

  3-D und Animation, Web- und App-Entwicklung

• Bereiche

  JavaScript, Motion Graphics, Multimedia, Programmierung