Live Coding

This archive documents my work in Live Coding class with Melody Loveless, moving from individual code experiments into collaborative audiovisual performance. The class introduced live coding as both a technical practice and a performance language, where code becomes visible, improvised, and directly tied to sound, visuals, and timing.

For the first share-out, I created a Sonic Pi experiment focused on live-coded sound composition.

For the second share-out, I moved into visual coding through Hydra and p5.js, exploring generative visuals, feedback, and real-time image manipulation.

For the midterm, I collaborated with Nikki Tan on an industrial-themed performance. Nikki coded the music, while I coded the visuals. Together, we built a dark, mechanical atmosphere through live sound and reactive visuals. We also created a MIDI synth using Arduino, adding physical interaction and instrumental tones into the performance system.

For the final project, I collaborated with Nikki Tan and Hanna Lee on a performance themed around alien invasion, hacking, and psychedelic interference. Nikki performed the sound in Sonic Pi, Hanna created generative visuals in Hydra, and I coded directly into the browser console to create a glitch-hacking effect that revealed a live map. Since Nikki’s laptop was connected to the projector, I wrote and tested my code through Flok.cc so she could paste and run it from her browser console during the performance.

The result was a layered algorave performance where sound, visuals, and browser-based intervention worked together to create the feeling of an alien transmission taking over the screen. My console code injected an OpenStreetMap iframe into the browser, distorted it through randomized movement, hue shifts, saturation, brightness, and opacity changes, and transformed the browser window into a hacked geographic signal.

00:00 — 13:08 ( our set )

const injectMapGlitch = function(lat, lon) {
    const mapContainer = document.createElement('div');
    mapContainer.style.position = 'fixed';
    mapContainer.style.top = '0';
    mapContainer.style.left = '0';
    mapContainer.style.width = '100%';
    mapContainer.style.height = '100%';
    mapContainer.style.zIndex = '9999';
    mapContainer.style.opacity = '0';
    document.body.appendChild(mapContainer);

    const iframe = document.createElement('iframe');
    iframe.src = `https://www.openstreetmap.org/export/embed.html?bbox=${lon-0.01},${lat-0.01},${lon+0.01},${lat+0.01}&layer=mapnik&marker=${lat},${lon}`;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    mapContainer.appendChild(iframe);

    const glitch = () => {
        const xShift = Math.random() * 20 - 10;
        const yShift = Math.random() * 20 - 10;
        document.body.style.transform = `translate(${xShift}px, ${yShift}px)`;
        mapContainer.style.transform = `translate(${xShift}px, ${yShift}px)`;
        
        const hue = Math.random() * 360;
        const saturation = 100 + Math.random() * 100;
        const brightness = 50 + Math.random() * 50;
        document.body.style.filter = `hue-rotate(${hue}deg) saturate(${saturation}%) brightness(${brightness}%)`;
        mapContainer.style.filter = `hue-rotate(${hue}deg) saturate(${saturation}%) brightness(${brightness}%)`;
        
        const opacity = Math.random() > 0.3 ? '1' : '0.7';
        document.body.style.opacity = opacity;
        mapContainer.style.opacity = opacity;
    };

    let opacity = 0;
    const fadeIn = setInterval(() => {
        opacity += 0.05;
        mapContainer.style.opacity = opacity;
        if (opacity >= 1) clearInterval(fadeIn);
    }, 50);

    const glitchInterval = setInterval(glitch, 50);

    window.cleanupMapGlitch = function() {
        clearInterval(glitchInterval);
        document.body.style.transform = '';
        document.body.style.filter = '';
        document.body.style.opacity = '1';
        mapContainer.remove();
    };
};

injectMapGlitch(40.7372721, -73.9926624);

const injectMapGlitch = function(lat, lon) {
    const mapContainer = document.createElement('div');
    mapContainer.style.position = 'fixed';
    mapContainer.style.top = '0';
    mapContainer.style.left = '0';
    mapContainer.style.width = '100%';
    mapContainer.style.height = '100%';
    mapContainer.style.zIndex = '9999';
    mapContainer.style.opacity = '0';
    document.body.appendChild(mapContainer);

    const iframe = document.createElement('iframe');
    iframe.src = `https://www.openstreetmap.org/export/embed.html?bbox=${lon-0.01},${lat-0.01},${lon+0.01},${lat+0.01}&layer=mapnik&marker=${lat},${lon}`;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    mapContainer.appendChild(iframe);

    const glitch = () => {
        const xShift = Math.random() * 20 - 10;
        const yShift = Math.random() * 20 - 10;
        document.body.style.transform = `translate(${xShift}px, ${yShift}px)`;
        mapContainer.style.transform = `translate(${xShift}px, ${yShift}px)`;
        
        const hue = Math.random() * 360;
        const saturation = 100 + Math.random() * 100;
        const brightness = 50 + Math.random() * 50;
        document.body.style.filter = `hue-rotate(${hue}deg) saturate(${saturation}%) brightness(${brightness}%)`;
        mapContainer.style.filter = `hue-rotate(${hue}deg) saturate(${saturation}%) brightness(${brightness}%)`;
        
        const opacity = Math.random() > 0.3 ? '1' : '0.7';
        document.body.style.opacity = opacity;
        mapContainer.style.opacity = opacity;
    };

    let opacity = 0;
    const fadeIn = setInterval(() => {
        opacity += 0.05;
        mapContainer.style.opacity = opacity;
        if (opacity >= 1) clearInterval(fadeIn);
    }, 50);

    const glitchInterval = setInterval(glitch, 50);

    window.cleanupMapGlitch = function() {
        clearInterval(glitchInterval);
        document.body.style.transform = '';
        document.body.style.filter = '';
        document.body.style.opacity = '1';
        mapContainer.remove();
    };
};

injectMapGlitch(40.7372721, -73.9926624);

The performance became a shared system between three performers: Sonic Pi generated the sonic atmosphere, Hydra produced the visual field, and my browser-console code interrupted the screen with a glitching map interface. Together, the piece created a psychedelic hacking invasion that blurred code, sound, image, and location.