Video-Tutorials zu JavaScript mit D3.js und P5.js

JavaScript
P5.js
D3.js
Generative Art
Visualisierung
Autor:in

Jörg Kantel

Veröffentlichungsdatum

17. Januar 2024

Meine jüngst verkündete Absicht, mich in Zukunft verstärkt der Programmierung mit JavaScript und P5.js zu widmen, um die Resultate besser im Browser und damit auch im Schockwellenreiter präsentieren zu können, hat als Zwischenergebnis dazu geführt, daß ich meinen Feedreader nach (einigermaßen aktuellen) Playlisten mit Tutorials zu P5.js durchforstet habe. Dabei sind mir einige untergekommen, die durchaus auch für Euch da draußen interessant sein könnten:

Constructing Visualization 2024 von Curran Kelleher scheint eine interessante Tutorial-Serie zu D3.js zu werden. Zur Zeit besteht sie aus vier Videos zwischen zehn und zwanzig Minuten Spieldauer. Aber das Jahr ist ja noch jung, eine ähnliche Playlist in 2023 brachte es über das Jahr verteilt auf zwanzig Videos.

Die JavaScript-Visualisierungsbibliothek D3.js hatte ich ja vor ein paar Monaten schon einmal auf dem Schirm, jedoch den Pfad nicht weiter verfolgt. Vielleicht ist dies ein neuer Anstoß? Still digging!

Josef Renner bastelt seit drei Tagen an einer eigenen Physik Engine mit Verlet-Integration in P5.js. In dieser kurzen Zeit hat er zwar schon elf im Schnitt etwa zehnminütige Videos hochladen, aber noch keine Playlist angelegt. Die wird aber sicher noch kommen. Bis dahin solltet Ihr den Kanal im Auge behalten.

Data Science for Everyone bastelt ebenfalls an einer neuen Playlist »JavaScript for Business«, die aktuell aus 22 im Schnitt etwa zwanzigminütigen Videos besteht, aber noch erweitert wird. Über diese bin ich aber auch noch über die Playlist »DataScience for Kids« gestolpert, die sie vor etwa einem Jahr abgeschlossen hatten. Sie besteht ebenfalls aus 22 (im Schnitt aber nur etwa zehnminütigen) Videos und behandelt P5.js!

Auch der hier schon mehrfach erwähnte, äußerst umtriebige Steve von Steve’s Makerspace hat vor wenigen Tagen eine neue Playlist abgeschlossen. Sie heißt »How to Code Generative Art using p5.js« und der Name ist Programm. Die 25 Videos der Reihe sind maximal etwa zwanzig Minuten lang und auf jeden Fall lohnt es sich, einen Blick darauf zu werfen.

Mindestens ebenso umtriebig wie Steve ist die ebenfalls hier schon mindestens einmal erwähnte Patt Vira, die auf ihrem Kanal am laufenden Band Video-Tutorials zu »Generative Art mit P5.js« hochlädt. Diese sind mittlerweile fast alle in ihrer Mega-Playlist »P5.js Coding Tutorial« zu finden, die (Stand heute) aus 51 Videos unterschiedlicher Länge besteht. Aber bei der Geschwindigkeit, mit der die junge Dame Video-Tutorials produziert, sind zum Zeitpunkt der Veröffentlichung dieses Beitrags sicher schon wieder einige hinzugekommen.

War sonst noch was? Ach ja, Observable Plot ist eine JavaScript-Bibliothek zur Datenvisualisierung, die offensichtlich nicht nur gut mit R, sondern auch mit Quarto zusammenspielt. Daher gibt es von den R-Ladies aus Philadelphia eine einstündige Einführung in Observable Plot mit Tanya Shapiro. Und Daniel Shiffman hat das Remake seines Buches »The Nature of Code« (in P5.js statt in Processing/Java) beinahe abgeschlossen. Die Printausgabe soll im Sommer dieses Jahres bei no starch press erscheinen. Shiffman hofft, nun wieder mehr Zeit für seine legendären Video-Tutorials zu haben und feiert dies mit einer neuen Coding Challenge zu eindimensionaln, elementaren zellulären Automaten.

Und last but not least habe ich festgestellt, daß ich noch ein Maskottchen für JavaScript im Allgemeinen und P5.js im Besonderen brauche. Daher habe ich mir – bis ich etwas passenderes gefunden habe – meinen malenden Dachs dafür ausgeguckt. Er wird als Bannerbild all meine JavaScript-/P5.js-Beiträge schmücken, für die ich keinen anderen Eye Catcher gefunden habe.


Bild: Ein Dachs als Künstler, erstellt mit DreamStudio. Prompt: »A badger in a dressing gown stands in front of his den at an easel, holds a palette in his right hand and a brush in his left hand and paints a picture. It’s a sunny spring morning, in the background you can see a quiet river surrounded by willows. colored french comic style«, Modell: stable-diffusion-xl-1024-v1-0, Style: Comic Book.