Ableton Push Type

A prototype modular graphics tool for Ableton Push 1 – buttons cycle through geometric modules to build illustrations, icons, and letterforms. Knobs drive real-time shaping functions that animate the grid as a whole.

Note: only tested with Google Chrome and Ableton Push 1. Push 2/3 are currently not supported.

Live Project · Video Demonstration

Color Palettes from Pigment

---

Demo

---

Tech Stack

• Rendering: p5.js
• Audio: Tone.js
• MIDI: webmidi.js
• Language: TypeScript
• Build tool: Vite

---

Prerequisites

• Ableton Push (Push 1 in User Mode)
• Chrome or Edge — WebMIDI is only supported in Chromium-based browsers
• Node.js 18+

---

Quick Start

git clone https://github.com/yourusername/ableton-push-type.git
cd ableton-push-type
npm install
npm run dev

Open http://localhost:3000 in Chrome or Edge.

---

Hardware Setup

1. Connect Ableton Push via USB
2. Set Push to User Mode (hold the User button)
3. Start the app — the grid buttons will light up when a shape is active

---

Controls

Push Hardware

Control	Action
Grid buttons (8×8)	Cycle through shapes on that cell
Left encoder (top)	Cycle grid method (Uniform / Wave / Bezier / …)
Left encoder (second)	Cycle shaping function (linear / sinc / parabola / …)
Knob 1	Cycle color pair
Knob 2	Alley X — gap width between columns
Knob 3	Alley Y — gap width between rows
New button	Toggle reset mode — next grid press resets that cell
Play button	Reset all shapes, clear all LEDs
Record button	Toggle debug overlay

Keyboard

Key	Action
s	Save canvas as PNG
Space	Pause animation

UI

Click the audio button in the top bar to enable sound. Each grid button press triggers a MIDI note via Tone.js.

---

Build

npm run build

---

MIDI Reference

Push 2 MIDI mapping: Ableton Push 2 MIDI & Display Interface