Interaktives p5.js-Kunstwerk für CS6310: Leitfaden zum Major Project (Mai 2026)

Einleitung: Dein interaktives Kunstwerk für die neue Medienkunst-Galerie

Im Mai 2026 steht das Major Project für CS6310 (bzw. COMP1720/6720) an: Du entwickelst ein interaktives p5.js-Kunstwerk, das in einer virtuellen Galerie ausgestellt wird. Die Herausforderung: Besucher laufen vorbei, bleiben kurz stehen und interagieren ohne Anleitung. Dein Werk muss in etwa drei Minuten fesseln – sei es durch generative Ästhetik oder eine kleine interaktive Geschichte. Das diesjährige Thema lautet „new“ – neu, frisch, unerwartet. Wie interpretierst du das? Dieser Leitfaden hilft dir, dein Projekt strukturiert und kreativ umzusetzen.

Thema „new“: Frische Ideen für interaktive Erlebnisse

Was bedeutet „new“ für dich? Vielleicht ein Neuanfang, eine unerwartete Wendung oder eine innovative Interaktionsform. In der aktuellen Popkultur erleben wir ständig „neue“ Features: KI-generierte Kunst, virale TikTok-Effekte oder Augmented-Reality-Filter. Dein p5.js-Sketch kann solche Trends aufgreifen – zum Beispiel eine interaktive Punktwolke, die auf Mausbewegungen reagiert und ständig neue Formen erzeugt. Oder du baust eine Mini-Erzählung, bei der der Nutzer durch Klicken neue Kapitel freischaltet. Wichtig: Deine Interpretation sollte im artist-statement.md klar erläutert werden.

Anforderungen im Überblick

Bevor du loslegst, hier die Pflichten aus dem Assignment:

Interaktion: Maus, Tastatur, Mikrofon oder Kamera – mindestens eine Eingabe.
Erlebnisdauer: ca. 3 Minuten fesselnd.
Themenbezug: Sinnvolle Verbindung zu „new“.
Öffentlichkeitstauglich: Keine anstößigen Inhalte.
Code-Qualität: Funktionen, Arrays, Objekte, saubere Struktur.
Dokumente: artist-statement.md (max. 1000 Wörter), interaction-statement.md (max. 500 Wörter), statement-of-originality.yml, thumbnail.png (1280×720).
Responsive: Läuft flüssig in Vollbild bei 1920×1080 bis 2560×1440.
Zurück-Button: Unten rechts (Vorlage vorhanden).

Interaktionsdesign: Wie führst du den Nutzer?

Anders als bei einer App erhält der Galeriebesucher keine Anleitung. Dein Sketch muss intuitiv sein. Überlege dir eine klare Anfangs-, Mittel- und Endphase. Beispiel: In der ersten Phase sieht der Nutzer ein ruhiges Muster – bei Mausbewegung entstehen neue Farbspuren („new“). Nach 30 Sekunden erscheint eine Aufforderung: „Drücke die Leertaste für eine Überraschung“. So entsteht Neugier. Die Interaktion sollte sich belohnend anfühlen, ohne zu überfordern. Schreibe diesen Ablauf im interaction-statement.md detailliert auf.

Code-Organisation: Arrays, Objekte und Funktionen geschickt einsetzen

Dein Code muss „well-organised“ sein. Nutze Arrays, um viele gleichartige Elemente zu verwalten – zum Beispiel Partikel oder Sternschnuppen. Verwende Objekte, um komplexe Entitäten zu kapseln: ein Partikel-Objekt mit Eigenschaften wie Position, Geschwindigkeit und Farbe. Funktionen gliedern den Code in logische Blöcke: setup(), draw(), handleMouse(), updateParticles(). Vermeide globale Variablen, wo möglich. Ein Beispiel für einen Particle-Controller:

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D();
    this.lifespan = 255;
  }
  update() {
    this.pos.add(this.vel);
    this.lifespan -= 2;
  }
  display() {
    fill(255, this.lifespan);
    ellipse(this.pos.x, this.pos.y, 10);
  }
}

Dieser Code ist leicht erweiterbar und wiederverwendbar – perfekt für generative Kunst.

Trends und Inspiration: Von KI bis Gaming

Im Mai 2026 sind KI-generierte Bilder und interaktive Installationen auf der Biennale heiß diskutiert. Du könntest eine p5.js-Interpretation eines neuronalen Netzes bauen, das aus Nutzerklicks neue Muster lernt. Oder du orientierst dich an Spielen wie „The Legend of Zelda: Tears of the Kingdom“ – dort entdecken Spieler ständig neue Fähigkeiten. Dein Sketch könnte dem Nutzer nach und nach neue Interaktionsmöglichkeiten freischalten. Ein weiteres Beispiel: Die App „Lensa“ erzeugt aus Selfies neue Avatare – in p5.js könntest du aus Kamerabildern abstrakte Porträts generieren. Wichtig: Du musst die Quelle angeben, falls du Code oder Assets von Dritten nutzt (statement-of-originality.yml).

Artist Statement: Die Geschichte hinter dem Werk

Im artist-statement.md erklärst du, was der Betrachter denken und fühlen soll. Vermeide eine reine Funktionsbeschreibung. Stattdessen: Warum hast du dich für diese Interpretation von „new“ entschieden? Welche Emotionen löst dein Werk aus? Vielleicht möchtest du, dass der Besucher über Vergänglichkeit nachdenkt – wenn Partikel ständig neu entstehen und vergehen. Oder du thematisierst die Flut neuer Informationen im digitalen Zeitalter. Ein starkes Statement verbindet persönliche Motivation mit universellen Fragen.

Häufige Fehler vermeiden

Zu komplexer Einstieg: Der Nutzer muss sofort verstehen, was zu tun ist.
Fehlende Dokumentation: Vergiss nicht die drei .md-Dateien und das Thumbnail.
Performance-Probleme: Teste auf verschiedenen Bildschirmgrößen (1920×1080 bis 2560×1440). Reduziere die Anzahl der Objekte, falls nötig.
Kein Themenbezug: Dein Werk muss klar erkennen lassen, wie es „new“ interpretiert.
Letzter Commit vergessen: Pushe deine Arbeit rechtzeitig auf den GitLab-Server.

Fazit: Mit Struktur und Kreativität zum Erfolg

Das Major Project ist deine Chance, ein interaktives Kunstwerk zu schaffen, das im Gedächtnis bleibt. Nutze die Freiheit des Themas „new“, um etwas Originelles zu entwickeln. Halte dich an die Anforderungen, dokumentiere deine Gedanken und teste gründlich. Mit sauberem Code und einem durchdachten Interaktionsdesign wird dein p5.js-Sketch in der virtuellen Galerie glänzen. Viel Erfolg!