- p5.js ist eine kostenlose Open-Source-JavaScript-Bibliothek, mit der sich das Lernen von Programmierung und das Erstellen von Kunst im Web beginnen lässt
- Sie richtet sich breit an Künstler:innen, Designer:innen, Anfänger:innen und Lehrende; im Zentrum des Projekts steht eine inklusive Community
- Statt wahllos neue Funktionen hinzuzufügen, verfolgt das Projekt einen Kurs, bei dem nur Funktionen eine Ausnahme bilden, die zur Verbesserung der Barrierefreiheit beitragen
- Es gibt eine Reference, Beispiele, einen Web-Editor und ein interaktives Einführungsvideo, sodass man direkt mit dem Lernen und Erstellen von Animationen, Audio und WebGL beginnen kann
- Download, Spenden, Community-Beteiligung und der Weg zur p5.js 2.0 beta sind an einem Ort zusammengeführt und bilden sowohl für Lernende als auch für Mitwirkende einen Einstiegspunkt
p5.js für Programmierung und Kunst
- p5.js ist eine kostenlose Open-Source-JavaScript-Bibliothek zum Lernen von Programmierung und zum Erstellen von Kunst
- Künstler:innen, Designer:innen, Anfänger:innen und Lehrende sowie viele weitere Nutzergruppen sind willkommen
- Das Projekt wird rund um eine inklusive und fürsorgliche Community betrieben
- Beispiele für Aktivitäten sind ein Coding Club in Korea für Menschen ab 50 sowie Workshops in Nairobi und NYC
- Die Richtlinie zur Erweiterung von Funktionen ist vergleichsweise klar
- Mit Ausnahme von Funktionen zur Verbesserung der Barrierefreiheit werden keine neuen Funktionen hinzugefügt
Wege zum Lernen und Erstellen
- Reference: Referenzdokumentation zur p5.js-Bibliothek
- Examples: Bereich zum Lernen von p5.js anhand von Beispielen
- Start Coding: p5.js-Editor, um direkt im Web mit dem Programmieren zu beginnen
- interactive video: Interaktives Einführungsvideo zu Animation, Audio, WebGL, Barrierefreiheit und Möglichkeiten zur Mitwirkung
- Download Library: Download der p5.js-Bibliothek
Community und Mitmachen
- Community: Seite mit Einblicken in die Community-Aktivitäten von p5.js
- Donate: Spendenmöglichkeit zur Unterstützung des Projekts
- p5.js 2.0 beta: Eigene Beta-Website zum Kennenlernen der neuen Version p5.js 2.0
1 Kommentare
Meinungen auf Hacker News
Der Hauptgrund, warum dieser Link gerade auf HN gelandet ist, scheint die neue Website von p5.js zu sein.
2023 hat der Sovereign Tech Fund dem p5.js-Team 450.000 Euro Förderung für die „Verbesserung der Dokumentationsstruktur und Barrierefreiheit von p5.js“ zugesagt, und das, was man jetzt sieht, scheint das Ergebnis dieser Investition zu sein.
Persönlich finde ich, dass es Wirkung zeigt. Navigation und Suche auf der Website sind deutlich einfacher geworden, und die Informationen sind nützlicher. Es lohnt sich zum Beispiel, die alte und die neue Dokumentation dazu zu vergleichen, wie man den p5.js-Editor und den Canvas mit einem Screenreader nutzt.
[1] - STF announcement/progress - https://p5js.org/events/stf-2024/
[2] - Using p5 with a screen reader (old version) - https://archive.p5js.org/learn/p5-screen-reader.html
[3] - How to Use the p5.js Web Editor with a Screen Reader (new) - https://p5js.org/tutorials/p5js-with-screen-reader/
[4] - Writing Accessible Canvas Descriptions (new) - https://p5js.org/tutorials/writing-accessible-canvas-descrip...
Ich hatte Processing schon vor etwa zehn Jahren genutzt, und es war bereits sehr einfach; in p5.js stieß man dagegen leichter auf Bugs oder fehlende Implementierungen. Eine nahezu identische Portierung war möglich, aber nicht 1:1, und man musste einige APIs dazulernen.
Bei der Performance kommt p5.js weder d3 noch three.js auch nur annähernd nahe. Ehrlich gesagt frage ich mich, welchen Sinn p5.js 2024 außerhalb von Bildungszwecken noch hat. Moderne Webanimationen scheinen heutzutage mit aktuellem CSS3 und Hilfsbibliotheken einfacher zu sein, und auch ein einfacher Workflow von einer kostenlosen Vektor-App zu CSS scheint möglich.
Selbst bei Aufgaben, die Berechnungen auf Pixelebene erfordern, gibt es keine einfache Möglichkeit, die GPU effizient zu nutzen. Deshalb wirkt die Förderung von 450.000 Euro ziemlich merkwürdig, besonders weil sie einem nicht gerade sehr populären Framework zugeteilt wurde.
Allerdings gefällt mir das Layout auf großen Bildschirmen nicht. Das verlinkte Tutorial [1] besteht aus linksbündigen Absätzen mit fester Breite, sodass die rechte Bildschirmhälfte leer bleibt. Umgekehrt werden Elemente wie die Übersicht der Referenzdokumentation [2] über die ganze Bildschirmbreite auf vier Spalten ausgedehnt; wenn man das Browserfenster auf halbe Bildschirmbreite verkleinert, ist das in Ordnung, aber maximiert ist es schwer zu lesen.
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/
[2]: https://p5js.org/reference/
Der Newsletter hat rund 175.000 Abonnenten, daher passiert es häufiger, dass ein dort gesetzter Link ein paar Stunden später auf der HN-Startseite landet. Einen tatsächlichen Zusammenhang nachzuweisen ist fast unmöglich, aber ich sehe das als einen der interessanten Aspekte davon, wie sich Links im Ökosystem verbreiten.
Die neue Website ist stärker für Mobilgeräte optimiert und macht auf hochauflösenden Displays mehr Inhalte gut lesbar. Dass p5.js jetzt erneut Aufmerksamkeit bekommt, ist durchaus nachvollziehbar, und die zugehörigen Videos von Coding Train sind ebenso sehenswert.
ChatGPT kennt sich ziemlich gut mit P5.js aus: Wenn man sagt „Schreib mir ein P5-Programm, das eine Sinuswelle zeichnet und deren Phase per Slider anpassen kann“, erstellt es das sofort.
Mit ChatGPT und P5.js habe ich ein Design-Tool gebaut, um fünf Massen auf einem Kreis auszubalancieren; es war dafür gedacht, einen rotierenden Magnetbogen mit reduzierter harmonischer Verriegelung zu bauen.
Man kann die Eckpunkte des Fünfecks ziehen: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
Ergebnis aus dem 3D-Druck: https://www.instagram.com/p/Cr4ZXGztY27/
Eine wirklich schöne Website. Ich finde es überraschend, dass im About-Bereich nicht erwähnt wird, dass sie die Ideen von Processing weiterführt.
Vielleicht ist p5.js inzwischen bekannter als Processing, oder zumindest bekannter als Processing früher einmal war.
Einer seiner zentralen Kritikpunkte war, dass das p5.js-Projekt die Processing Foundation übernommen und die Entwicklung von Processing zurückgefahren habe.
In einer Zeit, in der es ziemlich schwierig war, Pixel an Stellen wie einem Canvas in einer Webseite zu manipulieren und damit interessante visuelle Experimente zu bauen, war es ein wirklich sinnvolles Werkzeug; auch für Künstler mit wenig Programmiererfahrung war es gut lesbar und zugänglich.
Während des Studiums hatte ich viel Spaß damit, mit p5.js herumzuspielen, und habe früher auch selbst einen kleinen zellulären Automaten gebaut: https://ezhik.me/beyond184/
Zufällig nutzte auch das Werk, das mich erstmals für digitale Kunst interessiert hat – eine Art freudige Hommage an Computing –, p5.js: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
Eine der schwierigsten Aufgaben als Programmierer ist es, durch den Boilerplate-Code zu kommen, bevor man den ersten Pixel auf den Bildschirm setzt. p5.js löst das ziemlich gut und lässt einen stärker auf den kreativen Aspekt des „Creative Coding“ fokussieren.
Für „wirklich große Softwareentwicklung“ würde ich p5.js nicht verwenden, aber wenn ich skizzieren möchte, ist es das digitale Tool, zu dem ich als Erstes greife.
Vor ein paar Jahren habe ich diese Library dank Daniel Shiffman kennengelernt.
Seine Videos waren für meine Entwicklung als Programmierer unverzichtbar.
Eine ziemlich gute Library, um schnell Spiele zu bauen.
Ich habe mit p5.js eine kleine Wassersimulation gebaut und fand wirklich gut, wie leicht p5 zu lernen ist.
[1]: https://github.com/trungdq88/summer
Das ursprünglich Java-basierte Processing hat viele Libraries inspiriert.
Heutzutage findet man in den meisten populären Sprachen eine mehr oder weniger kompatible Library.
Als Sommerprojekt habe ich eine Version für Racket geschrieben: https://docs.racket-lang.org/manual-sketching/
Die größte Inspiration war Daniel Shiffmans YouTube-Kanal „The Coding Train“. Er hat ein Gespür dafür, visuell interessante Probleme und Algorithmen auszuwählen, und seine Begeisterung ist unvergleichlich.
https://thecodingtrain.com/
Ich habe p5.js auch in professionellen Arbeiten viel eingesetzt, aber wer es jetzt verwenden möchte, sollte wissen, was mit einem der Mitgründer der Foundation und dem Schöpfer der ursprünglichen Processing-Sprache, auf der p5 basiert, passiert ist.
https://news.ycombinator.com/item?id=37760363
Da ich nun weiß, was ich jetzt weiß, bereue ich es, die Arbeit der Processing Foundation unterstützt zu haben.
In einer Zeit mit so vielen leistungsfähigen Grafik-APIs versteht man, warum sich Processing/p5 über Jahre hinweg ohne große Veränderungen stagnierend angefühlt hat. Ein trauriges Ende.
Ich mag P5.js wirklich sehr. In der Community OpenProcessing gibt es Tausende großartige Arbeiten, die man leicht ansehen, duplizieren und verändern kann.
Ich nutze hauptsächlich Python, aber das schrittweise Anpassen von P5.js-Programmen hat mir beim Lernen von JavaScript geholfen.
[1] -- https://openprocessing.org/discover/#/trending
Im Playground von p5.js kann man Code direkt im Browser schreiben und ausführen, und man kann ein Konto erstellen, um Code-Sketches zu speichern.
https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH