Hip Hop Visual Art aus Berlin

Was Hip Hop Visual Art für uns ist

Hip-Hop war immer mehr als Musik. Graffiti, Breaking, Cover-Art und Flyer gehören von Anfang an dazu. Die Kultur ist laut, und sie ist visuell. Hip Hop Visual Art ist für uns die Verbindung von beidem: Rhythmus, den man sehen kann.

Ein Beat hat eine klare Struktur. Vier Viertel, sechzehn Sechzehntel, Kick auf der Eins, Snare auf der Zwei und Vier. Diese Struktur ist schon ein Bild. Wer einmal eine Drum Machine gesehen hat, kennt das Raster aus Lichtern, das mit dem Takt mitläuft. Genau dieses Raster ist der Ausgangspunkt für alles, was wir bei VARTAKT im Bereich Visual Art bauen: Projektionen, die auf die Kick reagieren, Mappings, die mit dem Takt die Fassade wechseln, und Werkzeuge, mit denen man Rhythmus direkt anfassen kann.

Ein Takt, 16 Steps: Hi-Hat auf jeder Achtel, eine Extra-Note am Ende.

030 HipHop Halloween im Treehouse

Am Samstag, 31. Oktober 2026, läuft im Treehouse in Berlin die 030 HipHop Halloween-Party mit Kostüm-Contest. Der Abend hat zwei Teile.

Ab 21 Uhr gibt es die Jamsession mit Blessing Onuka und Flow. Danach ist Open Jam: Instrument schnappen und mitspielen. Ab 23 Uhr wird daraus der HipHop Club mit Halloween-Kostüm-, RnB- und HipHop-Party. An den Decks stehen The Legend DJ Pete, die Queen of Xberg DJ Aziza A und DJ Chanella.

Mit dabei sind HipHop Ball, bagjack Berlin, die Berlin HipHop Akademie, Treehouse und Club Athleten. VARTAKT ist mit Visual Art dabei: Bilder und Licht, die mit dem Takt der Jamsession und der DJs mitgehen. Wie das bei uns aussieht, zeigen die Videos auf der Mapping-Seite.

Taktwerk: Beats bauen im Browser

Taktwerk ist unser Step-Sequencer für den Browser. Kein Download, kein Login, keine Samples. Du drückst die Tasten A bis K und setzt damit Töne in ein Raster aus 16 Steps. Jeder Takt landet als Kachel in einer Liste. Mehrere Takte markierst du mit Shift und den Pfeiltasten, und mit dem großen LOOP-Button laufen sie als Kombination im Kreis.

Das Interface ist bewusst reduziert: schwarzer Hintergrund, weiße Linien, eine Tabelle. Es sieht aus wie eine Partitur und funktioniert wie eine Drum Machine. Genau so stellen wir uns Hip Hop Visual Art im Kleinen vor: Der Beat ist gleichzeitig Musik und Grafik.

So spielst du Taktwerk

Drückst du im Stop mehrere Tasten fast gleichzeitig, landen sie als Akkord auf demselben Step. Das ist ein kleines Detail, macht aber den Unterschied, wenn man Keys-Flächen für einen Boom-Bap-Beat baut.

Technischer Aufbau

Taktwerk ist eine Seite in unserer React-Website. Der Sequencer selbst ist ein schlankes TypeScript-Modul ohne zusätzliche Bibliotheken. Alles, was du hörst, wird im Moment des Abspielens mit der Web Audio API synthetisiert.

Klangerzeugung

Jedes Instrument ist eine kleine Synthese-Schaltung. Es gibt keine Audiodateien. Das hält die Seite leicht, und jeder Klang lässt sich im Code nachvollziehen.

Timing, das nicht wackelt

JavaScript-Timer sind ungenau. Ein setInterval kann je nach Last ein paar Millisekunden zu spät kommen, und das hört man sofort. Deshalb plant Taktwerk die Noten nicht im Moment, in dem sie klingen sollen, sondern vorher: Alle 25 ms schaut ein Scheduler, welche Steps in den nächsten 120 ms fällig sind, und legt sie exakt auf die Uhr des Audio-Systems.

while (nextTime < audio.currentTime + 0.12) {
  playStep(bar, step, nextTime);   // Noten auf die Audio-Uhr legen
  nextTime += 60 / bpm / 4;        // eine Sechzehntel weiter
  step = (step + 1) % 16;          // nach 16 Steps: nächster Takt im Loop
}

Datenmodell

Ein Takt ist eine Tabelle pro Instrument: 8 Zeilen für die Tasten A bis K, 16 Spalten für die Steps. Eine 1 heißt Note, eine 0 heißt Pause. Der Loop-Bereich ist ein Paar aus Start- und End-Takt. Das ist simpel genug, um es später per MIDI oder OSC an Visual-Software weiterzugeben, damit Projektionen genau auf die gesetzten Steps reagieren.

Vom Beat zum Bild

Bei Live-Visuals stellt sich immer dieselbe Frage: Woher weiß das Bild, was die Musik gerade macht? Auf Partys hören wir meistens auf das Audiosignal und werten Pegel und Frequenzen aus. Das funktioniert, ist aber ungenau. Ein Sequencer weiß dagegen genau, wann welche Note kommt, sogar bevor sie klingt.

Taktwerk ist der erste Schritt in diese Richtung: ein Werkzeug, in dem Rhythmus schon als Daten vorliegt. Als Nächstes wollen wir genau diese Daten an unsere Visual-Setups weitergeben, damit Kick, Snare und Melodie direkt Formen, Farben und Mappings steuern. Wer mitbauen oder das für ein eigenes Event nutzen will, meldet sich bei uns.

Häufige Fragen

Hip hop visual art from Berlin, in short

VARTAKT is a Berlin studio for software and visual art. We built Taktwerk, a free browser-based step sequencer and drum machine: play notes with the keys A to K, collect bars as tiles and loop them in combination. All sounds are synthesized live with the Web Audio API. On Saturday, October 31, 2026, we bring hip hop visual art to the 030 HipHop Halloween Party at Treehouse Berlin, with a jam session by Blessing Onuka and Flow at 9 pm and DJ Pete, DJ Aziza A and DJ Chanella from 11 pm.