Creative Coding: Programmiere visuelles Material mit JavaScript

Einführung in die Codierung für visuelle Designer

“Hallo und willkommen zum Ende dieses Domestika-Kurses. In dieser letzten Lektion fassen wir das bisher Gesehene zusammen und fügen einige Tipps hinzu, die Ihnen auf Ihrem Weg zum kreativen Programmieren helfen. Code ist eine Sprache. Um eine Metapher mit gesprochener Sprache zu verwenden, wenn wir etwas ausdrücken wollen, geht es nicht darum, wie viele Wörter wir verwenden, sondern wie wir die Wörter, die wir kennen, zusammensetzen. Wir sind weit gekommen. Wir begannen mit einer leeren Datei, mit grundlegenden Konzepten wie Variablen und Funktionen. Ich erwähnte, dass wir sie überall verwenden würden, und das taten wir. Der beste Weg, um zu lernen, ist immer mit gutem Beispiel und wir haben einige gesehen. Wir haben auch Arrays, Schleifen, Bedingungen und Zufallszahlen gesehen. Und wir haben gesehen, wie viel wir mit diesen wenigen Konzepten erreichen können. Die Umgebung, die wir für die Ausführung unseres Codes gewählt haben, war der Browser, der sehr zugänglich und vertraut ist. Jetzt wissen wir, dass wir es auch zum Erstellen von Visuals verwenden können. Wir haben gesehen, wie man eine HTML-Seite erstellt und JavaScript darin schreibt. Dann sahen wir ein aufwendigeres Setup mit Canvas-Skizze. Es gab uns eine Umgebung mit einigen Vorteilen gegenüber dem Neuanfang, wie z. B. das einfache Ändern der Abmessungen unserer Skizze und das automatische Neuladen der Skizze, sobald der Code gespeichert wurde. Canvas-Sketch hat mehr zu bieten als das, was wir im Kurs gesehen haben, daher empfehle ich Ihnen, einen Blick auf die Dokumentation auf Github zu werfen. Es gibt einige Informationen zum Vorbereiten Ihrer Skizze für den Druck in großen Formaten, zum Exportieren von GIFs und zum Vorbereiten der Grafik für Stiftplotter. Die erste Skizze, die wir zusammen gemacht haben, war ein einfaches Raster. Wir hatten 5 Zeilen und 5 Spalten. Wenn Sie versucht haben, diese Zahl zu ändern, gut gemacht für das Experimentieren. Sie haben vielleicht bemerkt, dass das Raster nicht mehr zentriert ist, weil wir hartcodierte Werte verwendet haben. Später sahen wir eine flexiblere Art, Dinge zu tun. Gehen Sie also ruhig zu Sketch 01 zurück und verbessern Sie ihn mit dem, was Sie jetzt wissen, es ist eine gute Übung.

In unserer zweiten Skizze haben wir ein bisschen Trigonometrie verwendet. Ich wünschte, mein Mathelehrer hätte mir in der Schule gezeigt, wie man mit Trigonometrie kreative Dinge macht. Dies ist eine weitere interessante Sache beim kreativen Codieren, einfache Mathematik geht weit. Sie werden vielleicht feststellen, dass einige mathematische Konzepte endlich Klick machen, das ist mir sicherlich passiert. In unserer dritten Skizze haben wir mehr Mathematik mit Pythagoras gesehen und auch gelernt, wie man es animiert. Der Browser zeichnet die Leinwand ständig neu, daher müssen wir nur die Werte im Laufe der Zeit ändern. Auch hier würde ich Ihnen empfehlen, einen Blick auf die Canvas-Skizze-Dokumentation zu werfen und zu sehen, wie Sie eine animierte Schleife erstellen können, indem Sie sicherstellen, dass sich Ihre Werte ändern und schließlich zu ihrem ursprünglichen Punkt zurückkehren. In unserer vierten Skizze habe ich Ihnen gezeigt, wie Sie einen Wert normalisieren, also seinen ursprünglichen Bereich auf eine Zahl zwischen 0 und 1 ändern. Dies ist sehr nützlich und in allen Bereichen der Programmierung zu sehen. Wenn Sie eines Tages eine Farbe in einen Winkel oder die Dezibel eines Hörbeispiels in die Höhe eines Geländes umwandeln müssen, wissen Sie, dass Sie dies tun können, wenn Sie die Werte normalisieren. Für die letzte Skizze wollte ich Ihnen zeigen, wie Sie Typografie kreativ einsetzen können, aber das vielleicht Interessanteste, was wir dort gelernt haben, war, wie man Farbwerte aus den Pixeln in unserer Leinwand liest. Wir haben einen großen Buchstaben verwendet, aber nichts würde uns davon abhalten, ein anderes Bild zu verwenden. Ein Emoji, ein Icon, ein Logo, das sind alles Pixel und der Effekt würde genauso gut funktionieren. Ich würde wirklich gerne deine Bilder sehen. Haben Sie keine Angst, mit allem zu experimentieren. Ich habe Ihnen einige Hinweise gegeben, aber es geht wirklich nur ums Erkunden. Wenn wir einen Wert auf 5 setzen, versuchen Sie es mit 500. Versuchen Sie, Dinge seitwärts zu drehen, versuchen Sie, Dinge nach oben oder unten zu skalieren, versuchen Sie es mit Kreisen anstelle von Quadraten oder Kreisen über Quadraten. Und vielleicht noch wichtiger, versuchen Sie, Dinge zu mischen, verwenden Sie etwas aus Skizze 02 auf Skizze 05 oder umgekehrt. Teilen Sie Ihre Skizzen im Forum, indem Sie oben auf die Schaltfläche "Projekt erstellen" klicken. So lernen wir alle voneinander. Ich werde da sein, um Fragen zu beantworten und ein paar Tipps zu geben. Es war großartig, meine Erkenntnisse und meine Leidenschaft mit Ihnen zu teilen. Danke und tschüss. ”

Partielle Transkription des Videos

“Abschlussprojekt In dieser letzten Lektion fassen wir das Gelernte zusammen und ich gebe einige Tipps für die kreative Programmierung. Code ist eine Sprache. Mit einer Sprachmetapher: Es geht nicht darum, wie viele Wörter wir verwenden, sondern wie wir die Wörter, die wir kennen, zusammensetzen. Es war ein langer Weg. Angefangen mit einer leeren Datei, über grundlegende Konzepte, wie Variablen und Funktionen. Ich sagte, wir würden sie überall nutzen, und so war es. Am besten lernt man durch Beispiele, und wir haben einige gesehen. Wir sahen auch Arrays, Schleifen, Bedingungen und Zufallszah...”

Diese Transkription wurde maschinell erstellt und kann daher Fehler aufweisen.

Zusammenfassung des Kurses: Creative Coding: Programmiere visuelles Material mit JavaScript

• Niveau: Anfänger
• 97% positive Bewertungen (1209)
• 58297 Lernende
• 6 Kurseinheiten
• 21 Lektionen (2 Stdn. 42 Min.)
• ‌5 Downloads

• Kategorie

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

• Bereiche

  JavaScript, Motion Graphics, Multimedia, Programmierung