MOTIFLOW

Live Visual Instrument

PROJECT DESCRIPTION

MOTIFLOW is a browser-based live visual instrument developed for creating, transforming, and performing animated patterns in real time. The system combines generative visual structures with direct controls for color, scale, movement, symmetry, sound response, and live interaction. Users can select a pattern, modify its behavior, connect a microphone or audio track, and map visual parameters to a physical MIDI controller. Rather than treating the digital image as a fixed object, MOTIFLOW approaches it as something that can be played. The visual output changes continuously through movement, sound, touch, and performance. The project is designed both as a creative instrument and as an accessible entry point into live visuals, generative image-making, and interactive media.

PROJECT INFORMATION

PROJECT TYPE: Interactive Visual Instrument / Digital Art Tool

MEDIUM: Browser-based visual engine, HTML5 Canvas, JavaScript, Web Audio API, and Web MIDI API

OPEN-SOURCE FOUNDATION: Selected visual pattern modules are adapted from Patternflow, an open-source LED synthesizer created by SeungHun Lee and its credited contributors. The original pattern modules are used and modified under the Creative Commons Attribution-ShareAlike 4.0 International license.

INTERACTION: Pattern selection, real-time image and form controls, microphone and audio-file response, MIDI controller mapping, keyboard interaction, and live performance controls

PRESENTATION: Web application, projection, monitor display, LED screen, installation, and live visual performance

FOCUS: Real-time image-making, sound-reactive visuals, physical interaction, generative patterns, and accessible digital art

STATUS: Working Prototype / Ongoing Development / 2026

CONCEPT / CONTEXT

MOTIFLOW developed from the idea that an image can function like an instrument. In most digital interfaces, the image is treated as a finished object to be viewed. In this project, the image becomes an active and changing system. It can be adjusted, performed, interrupted, frozen, accelerated, or transformed through physical and sonic input. The project also responds to the distance that often exists between audiences and code-based or generative art. Instead of requiring technical knowledge, MOTIFLOW provides a direct interface through which users can select a pattern, move a slider, play an audio track, or turn a MIDI knob and immediately experience the visual result. Through this interaction, image-making becomes less like operating technical software and more like playing a visual instrument.

How It Works

1. Pattern Selection

Users begin by choosing from a library of animated patterns. Each pattern has its own visual logic and a focused set of controls for density, movement, distortion, rhythm, and color, allowing the image to change through direct interaction.

2. Image and Form Control

Global controls adjust brightness, contrast, saturation, scale, pixel spacing, and animation speed. The Form section adds symmetry and pattern-specific parameters, allowing each visual structure to be refined and transformed in real time.

3. Audio Response

MOTIFLOW responds to a live microphone or an uploaded audio track. Users can choose calm, balanced, or rhythmic response modes, while advanced controls adjust sensitivity, room noise, attack, release, and transient behavior.

4. MIDI and Live Performance

A MIDI controller can be connected directly through the browser. Knobs, faders, and buttons can be assigned automatically or manually to visual parameters, transforming the interface into a tactile performance instrument. The Live section also includes display scaling, fullscreen presentation, interface hiding, image freezing, automatic pattern cycling, and short visual impacts for live performance.

Technical Note

MOTIFLOW is a browser-based visual instrument built with HTML5 Canvas and JavaScript. The system integrates selected open-source pattern modules from Patternflow into a newly developed interface for real-time visual creation and performance. MOTIFLOW adds expanded image and form controls, symmetry modes, microphone and audio-file analysis, multiple sound-response behaviors, Web MIDI mapping, preset management, fullscreen display modes, keyboard interaction, live performance tools, and PNG frame export. The control interface can be hidden during presentation while the visual output remains active in fullscreen mode. For microphone and MIDI access, MOTIFLOW is designed to run through a secure HTTPS connection and is recommended for use in Chrome or Edge.

OPEN-SOURCE PATTERN CREDITS

The visual patterns used in MOTIFLOW are adapted from Patternflow by SeungHun Lee and its credited contributors, under the CC BY-SA 4.0 license. All software development, interface design, audio-reactive features, MIDI integration, presets, and performance tools in MOTIFLOW were independently developed by Azmano.

Launch MOTIFLOW

Open MOTIFLOW in your browser. For microphone and MIDI access, use Chrome or Edge.