Sofortkunst.de: Vom JavaScript-Test zum satirischen Kunstgenerator

Aus einem JavaScript-Test wurde ein Kunstautomat

Manche Projekte beginnen mit einem klaren Plan. Andere beginnen mit der einfachen Frage: Was passiert eigentlich, wenn man ein paar moderne JavaScript-Bibliotheken zusammenspannt und ihnen genug Raum für Unsinn gibt?

Genau so entstand Sofortkunst.de. Ursprünglich war das Projekt nicht als fertige Webseite gedacht, sondern als technisches Experiment. Im Mittelpunkt stand zunächst ein sogenannter Nerd-Bereich: ein kleines Labor, in dem verschiedene JavaScript-Bibliotheken getestet werden sollten. Es ging um generative Formen, Farblogik, Canvas-Ausgabe, Zufallsgeneratoren, 3D-Elemente und die Frage, wie weit man mit reinem Frontend-Code gehen kann, ohne daraus gleich ein schwerfälliges System zu machen.

Doch wie es bei Laborprojekten oft passiert, entwickelte sich aus dem technischen Test plötzlich eine Idee mit eigenem Charakter. Aus abstrakten Formen wurde Kunst. Aus einem Button wurde ein Pinsel. Aus einer Spielerei wurde eine satirische Webseite. Und dann trat Jean-Bob Sauçon auf die Bühne.

Der ursprüngliche Nerd-Bereich

Am Anfang stand der Wunsch, verschiedene Bibliotheken im Browser praktisch zu testen. Nicht theoretisch, nicht in einer trockenen Demo, sondern in einem sichtbaren Experiment, das Spaß macht und trotzdem technische Erkenntnisse liefert.

Getestet wurden unter anderem p5.js für generative 2D-Grafik, chroma.js für Farblogik und Farbpaletten sowie Three.js für zusätzliche 3D-Effekte. Dazu kam eine eigene Seed-Logik, damit Ergebnisse nicht völlig beliebig entstehen, sondern kontrolliert zufällig wirken. Der erste Ansatz war also technisch geprägt: Wie entstehen Formen? Wie lassen sich Farben sinnvoll kombinieren? Wie kann man aus Zufall etwas erzeugen, das zumindest so tut, als hätte es Absicht?

Der Nerd-Bereich war damit zuerst ein Testfeld. Er sollte zeigen, wie die einzelnen Bibliotheken zusammenspielen, wo sie sich ergänzen und wo sie zu viel Ballast erzeugen. Besonders wichtig war dabei die Frage, wie sich komplexe visuelle Prozesse so kapseln lassen, dass die Seite trotzdem stabil bleibt.

Jean-Bob Sauçon betritt das Atelier

Der Wendepunkt kam, als aus dem reinen Generator eine Figur wurde: Jean-Bob Sauçon. Plötzlich hatte das Projekt nicht mehr nur Funktionen, sondern eine Bühne. Jean-Bob ist kein normaler Maler, sondern eine satirische Künstlerfigur, die den Kunstbetrieb liebevoll überzeichnet. Er malt nicht einfach Bilder, er erzeugt Bedeutung. Oder zumindest etwas, das sehr überzeugend so aussieht.

Mit Jean-Bob veränderte sich die ganze Richtung des Projekts. Der Button hieß nicht mehr einfach „Generieren“, sondern „Lass ihn malen“. Das Ergebnis bekam einen Werktitel, eine erfundene Kunstrichtung, einen Galeriepreis und ein Artist Statement. Aus einem technischen Test wurde eine kleine Persiflage auf Kunstmarkt, Kuratorensprache und digitale Kreativität.

Das war der Moment, in dem Sofortkunst.de seinen eigenen Ton fand: absurd, bunt, technisch sauber und gleichzeitig herrlich übertrieben.

Die Idee: Kunst ohne Einstellungen, aber mit Haltung

Viele Generatoren überfordern Nutzer mit Optionen. Man kann Regler schieben, Parameter einstellen, Farben auswählen, Stilrichtungen definieren und am Ende weiß man oft gar nicht mehr, ob man ein Bild erzeugt oder eine Steuererklärung ausfüllt.

Sofortkunst.de sollte bewusst anders funktionieren. Die Grundidee lautet: ein Klick, ein Werk. Der Nutzer soll nicht erst Kunstwissenschaft studieren müssen, um etwas zu erzeugen. Stattdessen gibt es wenige spielerische Eingriffe, die mehr nach Kuratorensprache als nach Software-Einstellung klingen.

Aus klassischen Optionen wurden deshalb Begriffe wie Formensprache, chromatische Haltung, kompositorische Methode und emotionale Temperatur. Das ist natürlich nicht komplett ernst gemeint. Aber genau darin liegt der Reiz. Die Seite tut so, als würde jeder Klick eine tiefere Bedeutung erzeugen. In Wahrheit entsteht ein digitales Werk aus Zufall, Logik, Farbe, Form und einer guten Portion Unsinn.

Generative Kunst mit p5.js

Für die zweidimensionale Kunstfläche wurde p5.js eingesetzt. Diese Bibliothek eignet sich besonders gut für kreative Programmierung, weil sie Zeichenprozesse im Browser stark vereinfacht. Formen, Linien, Kreise, Flächen, Transparenzen und Bewegungen lassen sich damit sehr direkt erzeugen.

Im Projekt übernimmt p5.js die eigentliche 2D-Erzeugung der Kunstwerke. Die Formen entstehen dynamisch, abhängig von den gewählten Einstellungen und vom Zufall. Dabei war wichtig, dass die Ergebnisse nicht wie reine Testgrafiken aussehen, sondern wie kleine digitale Kunstwerke. Sie sollten abstrakt, organisch, manchmal seltsam und manchmal überraschend harmonisch wirken.

Ein weiteres Ziel war die sichtbare Malanimation. Das Werk sollte nicht einfach plötzlich erscheinen, sondern entstehen. Dadurch bekommt die Seite mehr Leben. Jean-Bob malt, die Werkfläche füllt sich und der Nutzer sieht, wie aus einer leeren Fläche ein Bild wird.

Farbe als eigene Dramaturgie mit chroma.js

Farben sind bei einem solchen Projekt entscheidend. Eine generative Grafik kann technisch funktionieren und trotzdem langweilig aussehen, wenn die Farbwelt nicht stimmt. Deshalb wurde chroma.js eingebunden, um Farbpaletten und Farbübergänge kontrollierter zu behandeln.

Die Seite arbeitet nicht nur mit einzelnen Farben, sondern mit Haltungen. Die Farbauswahl soll emotional wirken: laut, verspielt, seltsam edel, manchmal fast geschmacklos, aber bewusst. chroma.js hilft dabei, Farbvarianten zu berechnen und harmonische oder bewusst überzeichnete Kombinationen zu erzeugen.

Auch das Design der Benutzeroberfläche greift diese Farbwelt auf. Pink, Cyan, Gelb, Grün und Violett bilden die zentrale visuelle Sprache. Die Farben sind kräftig, plakativ und wirken fast wie gedruckte Risograph-Flächen. Dadurch entsteht ein Look, der zwischen Web-App, Plakatkunst, Kunstmesse und Spielzeugautomat liegt.

Das 3D-Extra mit Aufpreis

Ein besonders schöner satirischer Bestandteil ist das 3D-Extra. Technisch basiert dieser Teil auf Three.js. Inhaltlich ist es natürlich ein Seitenhieb auf digitale Zusatzfunktionen, Upgrades und künstlich erzeugte Wertsteigerung.

Das 3D-Extra wird nicht einfach als Funktion verkauft, sondern als exklusiver Aufpreis von 200 Prozent. Damit spielt die Seite mit der Idee, dass Kunst oft nicht nur durch das Werk selbst, sondern durch Präsentation, Kontext und Behauptung teurer wird. Ein zusätzlicher Effekt, ein anderer Blickwinkel, ein bisschen räumliche Bewegung – und schon wirkt alles bedeutender.

Technisch war dabei wichtig, die 3D-Komponente sauber vom restlichen Generator zu trennen. Three.js kann schnell schwer werden, wenn Objekte nicht richtig entfernt oder neu aufgebaut werden. Deshalb wurde darauf geachtet, 3D-Objekte bei Bedarf zu entsorgen und nicht unnötig im Speicher zu behalten.

Die Oberfläche: Brutalismus, Risograph und Kunstmarkt-Klamauk

Das visuelle Design von Sofortkunst.de ist bewusst laut. Es kombiniert dunkle, strukturierte Hintergründe mit sehr kräftigen Farbflächen, dicken schwarzen Konturen, harten Schatten und leicht schrägen UI-Elementen. Dadurch entsteht ein Stil, der an Risograph-Drucke, brutalistische Weboberflächen, alte Kunstplakate und Comic-Elemente erinnert.

Die Oberfläche ist nicht glattgebügelt. Sie soll Charakter haben. Buttons dürfen schreien, Karten dürfen kippen, Schatten dürfen übertreiben. Genau diese Überzeichnung passt zur Figur Jean-Bob Sauçon und zur Grundidee der Seite.

Gleichzeitig musste das Layout funktional bleiben. Die Werkfläche braucht genug Raum, die Meta-Daten müssen lesbar sein, die Steuerelemente dürfen nicht untergehen und die Figur soll präsent sein, ohne die eigentliche Anwendung zu blockieren. Das Ergebnis ist eine Art digitales Atelier mit Verkaufsraum, Generator, Kunstkritik und Theaterbühne in einem.

Vom abstrakten Generator zum irrealen Realismus

Nach der ersten Version kam eine zweite Ebene hinzu: der Modus „Irrealer Realismus“. Damit sollte Jean-Bob nicht nur abstrakte Formen erzeugen, sondern echte SVG-Motive nachzeichnen können. Die Idee dahinter war, dem Generator eine weitere Spielart zu geben: weniger reine Abstraktion, mehr erkennbare Motive – aber weiterhin mit einem absurden Kunstanspruch.

Dafür wurden SVG-Dateien als Ausgangsmaterial vorgesehen. Jean-Bob kann damit nicht nur freie Formen erzeugen, sondern Pfade nachzeichnen. Aus technischer Sicht ist das interessant, weil SVG-Pfade andere Herausforderungen mitbringen als frei generierte Canvas-Formen. Man muss Pfade zerlegen, animieren, skalieren und in die bestehende Werkfläche integrieren.

Aus gestalterischer Sicht ist der Modus besonders reizvoll, weil er wie ein Widerspruch klingt: irrealer Realismus. Genau diese Art von Begriff passt perfekt zur Seite. Er klingt wichtig, ist aber gleichzeitig herrlich bescheuert.

Artist Statements als Teil des Spiels

Ein Kunstwerk auf Sofortkunst.de besteht nicht nur aus dem Bild. Es bekommt zusätzlich einen Titel, eine Kunstrichtung, einen Preis und ein Artist Statement. Gerade diese Texte machen einen großen Teil des Humors aus.

Die Sprache orientiert sich an überhöhter Kunstvermittlung: bedeutungsvoll, schwer greifbar, manchmal poetisch, manchmal völlig absurd. Ein generiertes Werk kann dadurch plötzlich so wirken, als wäre es Teil einer Ausstellung, obwohl es Sekunden vorher aus einem Klick entstanden ist.

Der Witz liegt darin, dass die Seite nicht einfach nur Unsinn ausgibt. Sie imitiert eine bestimmte Sprache sehr gezielt. Sie spielt mit Worthülsen, Bedeutungsschwere und dem Wunsch, in jedes Bild eine große Erkenntnis hineinzulesen. Genau dadurch entsteht der satirische Kern des Projekts.

Fake-Kauf, PNG-Download und Galeriegefühl

Auch der Erwerbsprozess wurde als Teil der Inszenierung gebaut. Nach dem Erzeugen eines Werks erscheint ein Kaufbereich. Dort kann man das Kunstwerk scheinbar erwerben. Natürlich handelt es sich nicht um einen echten Shop, sondern um eine spielerische Fake-Kaufhandlung.

Der Clou: Erst nach diesem emotionalen Kaufprozess wird der PNG-Download freigegeben. Der Nutzer bekommt also tatsächlich eine Datei, aber der Kauf selbst bleibt satirisch. Damit verbindet die Seite echte Funktionalität mit einer erfundenen Kunstmarktmechanik.

Das macht den Generator greifbarer. Man erzeugt nicht nur etwas Flüchtiges im Browser, sondern kann das Ergebnis speichern. Gleichzeitig bleibt alles im Ton der Seite: Der Kauf ist emotional, der Download ist echt.

Warum die Seite nicht für kleine Handys gedacht ist

Sofortkunst.de ist bewusst nicht als klassische Mobile-First-Anwendung gebaut. Die Seite braucht Fläche. Die Werkfläche, die Steuerung, die Figur und die Meta-Karten leben vom Zusammenspiel auf einem größeren Bildschirm. Auf einem kleinen Smartphone würde der Charakter der Seite verloren gehen.

Deshalb wurde ein Mobile-Gate eingebaut. Statt die Oberfläche auf Krampf in ein kleines Display zu pressen, erklärt die Seite selbstironisch, dass Kunst Raum braucht. Auch das passt zum Projekt. Nicht jede Webseite muss auf jedem Gerät gleich funktionieren. Bei Sofortkunst.de ist die Einschränkung Teil der Inszenierung.

Natürlich ist das technisch ein Sonderweg. Aber in diesem Fall ist er konsequent. Die Seite ist kein Nachrichtenportal und kein Formular, sondern ein digitales Erlebnis. Und dieses Erlebnis braucht mindestens Tablet-, Laptop- oder Desktop-Größe.

Technische Kapselung und saubere Projektstruktur

Trotz aller Albernheit wurde das Projekt technisch bewusst strukturiert aufgebaut. Die Anwendung besteht aus einer statischen HTML-Seite, einer zentralen CSS-Datei, mehreren Bibliotheken und einer eigenen JavaScript-Logik für den Generator.

Wichtig war, dass die verschiedenen Bereiche getrennt bleiben. Die Bibliotheken liegen separat, die Seed-Logik ist ausgelagert, die SVG-Daten können eigenständig gepflegt werden und die Hauptlogik der Kunst-App bleibt als eigenes Modul greifbar. Dadurch lässt sich das Projekt erweitern, ohne alles neu sortieren zu müssen.

Gerade bei experimentellen Projekten ist diese Ordnung wichtig. Sonst wird aus kreativer Freiheit schnell ein unwartbarer Drecks-Hack. Und davon gibt es im Netz schon genug.

Obfuskation als kleiner Schutz vor Copy-Paste-Künstlern

Da die eigentliche Anwendung vollständig im Frontend läuft, liegt ein Teil der Logik zwangsläufig im Browser. Das ist bei solchen Projekten normal. Trotzdem sollte nicht jeder Besucher die Hauptdatei sofort bequem kopieren, lesen und nachbauen können.

Deshalb wurde die öffentliche JavaScript-Datei obfuskiert. Das ist kein absoluter Schutz und soll auch nicht so tun, als wäre es einer. Wer mit genug Zeit und technischer Erfahrung an den Code will, kann ihn grundsätzlich analysieren. Aber gegen schnelles Kopieren, bequemes Nachbauen und oberflächliches Abgreifen hilft Obfuskation durchaus.

Wichtig ist dabei, die lesbare Originaldatei sicher aufzubewahren. Die obfuskierte Datei gehört auf den Server, die verständliche Arbeitsversion bleibt lokal im Projektarchiv. So bleibt das Projekt wartbar, ohne öffentlich völlig offen herumzuliegen.

Rechtliches: Auch Dada braucht Impressum

So verspielt die Seite auch ist, ein paar Pflichtangaben gehören dazu. Deshalb wurden Impressum und Datenschutzerklärung ergänzt. Besonders schön wurde dabei die Idee des „Dada-Schutzes“: eine Datenschutzerklärung, die formal ihren Zweck erfüllt, aber trotzdem zum Ton der Seite passt.

Auch ein Hinweis auf die verwendeten Bibliotheken wurde eingebaut. Das ist fair und sinnvoll, weil p5.js, chroma.js und Three.js wichtige technische Grundlagen des Projekts bilden. Gleichzeitig bleibt klar: Die eigentliche künstlerische Logik, die Figur, die Texte, das Interface und die Inszenierung wurden individuell für Sofortkunst.de entwickelt.

Damit verbindet die Seite Transparenz mit ihrem eigenen Humor. Selbst die Pflichtseiten fühlen sich nicht wie Fremdkörper an, sondern wie ein Teil der Gesamtinszenierung.

SEO und strukturierte Daten

Auch ein satirisches Laborprojekt darf technisch sauber auffindbar sein. Deshalb wurden Meta-Tags, Open-Graph-Daten und strukturierte Daten ergänzt. Besonders wichtig war dabei die Verbindung zur bestehenden Personen-Entität auf rainer-wittmann.de.

Sofortkunst.de steht damit nicht isoliert im Netz, sondern wird als kreatives Webprojekt von Rainer Wittmann eingeordnet. Das Schema verbindet die Seite mit der Person, beschreibt sie als WebApplication, WebSite und CreativeWork und ordnet sie thematisch als digitale, generative und satirische Kunst ein.

Diese Verbindung ist nicht nur für klassische Suchmaschinen interessant, sondern auch für KI-basierte Such- und Antwortsysteme. Je klarer ein Projekt semantisch eingeordnet ist, desto besser kann es später im Gesamtbild der eigenen digitalen Arbeit verstanden werden.

Was ich bei diesem Projekt gelernt habe

Sofortkunst.de zeigt sehr schön, wie schnell aus einem technischen Test ein echtes kleines Produkt entstehen kann, wenn man ihm eine Idee, eine Figur und eine klare Tonalität gibt.

Der wichtigste Lerneffekt: Technik allein macht noch kein Erlebnis. p5.js, chroma.js und Three.js sind leistungsfähige Werkzeuge. Aber erst durch Konzept, Sprache, Gestaltung und Humor entsteht daraus etwas Eigenes. Jean-Bob Sauçon ist deshalb nicht nur eine Figur auf der Seite, sondern der dramaturgische Klebstoff des ganzen Projekts.

Außerdem hat sich gezeigt, dass einfache Bedienung oft stärker ist als maximale Einstellbarkeit. Die Seite funktioniert, weil sie nicht alles erklärt und nicht alles kontrollierbar macht. Sie lädt zum Klicken ein. Sie erzeugt Überraschung. Und sie nimmt sich selbst ernst genug, um gut gemacht zu sein, aber nicht so ernst, dass es anstrengend wird.

Warum Sofortkunst.de gut ins Labor passt

Sofortkunst.de ist kein klassisches Kundenprojekt und auch kein reines Spielzeug. Es ist ein Laborprojekt im besten Sinne: ein Experiment mit echten technischen Bausteinen, eigener Gestaltung, humorvoller Oberfläche und verwertbaren Erkenntnissen für spätere Arbeiten.

Viele Bausteine lassen sich weiterdenken: generative Gestaltung, SVG-Pfadanimation, interaktive Weboberflächen, downloadfähige Canvas-Ergebnisse, KI-nahe Kreativlogik, semantische Projektverknüpfung und satirische Markenbildung. Das alles steckt in einer Seite, die nach außen einfach nur so tut, als würde ein überdrehter Künstler auf Knopfdruck Kunst malen.

Genau deshalb gehört dieses Projekt ins Labor. Es zeigt, dass Webentwicklung nicht nur aus Funktionen, Formularen und SEO besteht. Manchmal darf eine Webseite auch einfach ein kleiner, bunter, technisch sauberer Wahnsinn sein.

Fazit: Ein Klick, ein Werk, ein ziemlich schöner Umweg

Sofortkunst.de begann als Nerd-Test für JavaScript-Bibliotheken. Dann kam Jean-Bob Sauçon. Dann kamen Titel, Preise, Artist Statements, 3D-Aufpreis, Fake-Kauf, PNG-Download, Impressum, Dada-Schutz und strukturierte Daten.

Aus einem Test wurde eine fertige satirische Kunstseite. Aus Code wurde ein kleines Erlebnis. Und aus einem Laborversuch wurde ein Projekt, das genau das zeigt, was gute Experimente ausmacht: Man weiß am Anfang nicht genau, wo man landet. Aber wenn man unterwegs die richtigen Abzweigungen nimmt, steht am Ende plötzlich ein digitaler Künstler im Browser und behauptet, das alles sei sehr bedeutungsvoll.

Und vielleicht ist es das ja sogar.