ep-426 Interactive Video – Spring 2015 week 14

Jitter programming

Developing with javascript, gen, and external objects.


Jitter in javascript: https://reactivemusic.net/?p=19218


Jitter gen: https://reactivemusic.net/?p=19205



Jitter objects

Writing Jitter external objects: https://reactivemusic.net/?p=19208

Revisiting Vizzie

Even after all that, Vizzie is my first choice when starting a project or building a prototype.

Vine analyzer example:


patch: maxvine-analyzer.maxpat (requires other files in the maxvine folder)

More analog video

media converter demo: https://reactivemusic.net/?p=19173


And topics that didn’t get covered.

Algorithmic video and data visualization
Projection mapping

Cornerpin: https://reactivemusic.net/?p=11838

Lighting control systems

DMX: Andrew Pask tutorial: https://reactivemusic.net/?p=18266

Development tools

60 minutes of whales: https://reactivemusic.net/?p=8433


Do something.

ep-341 Max/MSP – Spring 2015 week 14

(under construction)

Algorithmic composition and generative music – part 3

Sensors, sonification, and data.



Vine API in Max

A Max patch that displays, transforms, and responds to internet data.

building materials
  • Max (6.1.7 or newer)
  • Soundflower –

Both available from Cycling 74 http://cycling74.com/

The Max patch is based on a tutorial by dude837 called “Automatic Silly Video Generator”


The patch at the download link in the video is broken – but the javascript code for the Max js object is intact.

Download the entire patch from the Max-projects archive: https://github.com/tkzic/max-projects folder: maxvine

Internet API’s

API’s (application programming interfaces) provide methods for programs (other than web browsers) to access Internet data. Any app that access data from the web uses an API.

Here is a link to information about the Vine API: https://github.com/starlock/vino/wiki/API-Reference

For example, if you copy this URL into a web browser address bar, it will return a block of data in JSON format about the most popular videos on Vine: https://api.vineapp.com/timelines/popular

HTTP requests

An HTTP request transfers data to or from a server. A web browser handles HTTP requests in the background. You can also write programs that make HTTP requests. A  program called “curl” runs http requests from the terminal command line. Here are examples: https://reactivemusic.net/?p=5916

Response data

Data is usually returned in one of 3 formats:

  • JSON
  • XML
  • HTML

JSON is the preferred method because its easy to access the data structure.

Max HTTP requests

There are several ways to make HTTP requests in Max, but the best method is the js object: Here is the code that runs the GET request for the Vine API:

function get(url)
    var ajaxreq = new XMLHttpRequest();
    ajaxreq.open("GET", url);
    ajaxreq.onreadystatechange = readystatechange;

function readystatechange()
    var rawtext = this._getResponseKey("body");
    var body = JSON.parse(rawtext);
    outlet(0, body.data.records[0].videoUrl);


The function: get() formats and sends an HTTP request using the URL passed in with the get message from Max. When the data is returned to Max, the readystatechange() function parses it and sends the URL of the most popular Vine video out the left outlet of the js object.

Playing Internet audio/video files in Max

The qt.movie object will play videos, with the URL passed in by the read message.

Unfortunately, qt.movie sends its audio to the system, not to Max. You can use Soundflower, or a virtual audio routing app, to get the audio back into Max.

Audio from video


Video from audio


Sonification of Vine videos


patch: maxvine-analyzer.maxpat (requires other files in the maxvine folder)

Steve Hensley example: local file: shensely_maxvine.maxpat


There is a large archive of examples here: Internet sensors: https://reactivemusic.net/?p=5859


There are API services that consolidate many API’s into one API. For example:

Scaling data

Look at the Max tutorial (built in to Max Help) called “Data : data scaling” It contains most of what you need to know to work with streams of data.

Curl examples: https://reactivemusic.net/?p=5916


Algorithmic/generative music. Due in class next week.


ep-426 Interactive Video – Spring 2015 week 13

More analog video

Screen Shot 2015-04-18 at 1.57.01 PM

A scene from a sea otter video processed using ‘Premium Cable’ by BPMC

Not modular

Two weeks ago Christopher Konopka demonstrated modular analog video. This week we will explore analog video made from found objects and circuit bending. https://reactivemusic.net/?p=18982


Kinect is still your friend, especially if you use Windows.

Screen Shot 2015-04-04 at 4.38.25 PM

Kinect – revisited: https://reactivemusic.net/?p=18803

TV and CRT’s

Screen Shot 2015-04-09 at 7.24.11 PM

Jitter and OpenGL

Screen Shot 2015-04-19 at 10.41.42 PM

Claire Steeger wrote a new tutorial (with Max patch) called “Simple Intro to jit.gl.multiple” http://www.clairesteger.com/home/simple-intro-to-jitglmultiple. Its shows several ways to modulate complex 3d shapes using audio and data.


Euphony – A webGL Midi file player

by Xueqiao Xu



I’m thinking of something: http://imthinkingofsomething.com


Short lessons on the topic of algorithmic composition.

By Christopher Dobrian


“… A blog of short lessons on the topic of algorithmic composition — the use of formal systems to generate music (and, by extension, other types of time-based art) with computer programs. The examples in these lessons are provided in the form of Max programs.”

From a Cycling 74 forum post: https://cycling74.com/forums/topic/a-blog-on-algorithmic-composition/

Basic synth in Max – part 2

Yet another Basic synthesizer design

Screen Shot 2015-03-26 at 3.16.19 PM

See part 1 here: https://reactivemusic.net/?p=18511

New features

Drag to select buffer start/end points

waveform~ object

Screen Shot 2015-03-26 at 3.21.17 PM

Sample recording

record~ object.

Screen Shot 2015-03-26 at 3.22.25 PM

How to design voice activated recording?

*Time compress/stretch

groove~ (Max 7 only)


Screen Shot 2015-03-26 at 3.23.30 PM

M4L preset management: https://reactivemusic.net/?p=18557


poly~ object

Polyphonic Midi synth in Max


local: poly-generic-example1.maxpat (polyphonic)

Polyphonic instrument in Max for Live

Wave~ sample player: https://reactivemusic.net/?p=18354

local: m4l: poly-synth1.als (aaa-polysynth2.amxd)

Screen Shot 2015-03-22 at 10.01.22 PM

Max For Live

automation and UI design (review)

Distributing M4L devices

How to create a Live ‘Pack’

by Winksound

  • save set
  • collect all and save
  • file manager
    • manage project
      • packing : create live pack


ep-341 Max/MSP – Spring 2015 week 7

The Live Object Model in Max for Live.

Screen Shot 2015-03-04 at 12.43.39 PM

Several ways of working with Ableton Live parameters in a M4L patch. (This is an improved version of the patch we built in class) https://reactivemusic.net/?p=18401

The Live Object Model description: https://cycling74.com/docs/max5/refpages/m4l-ref/m4l_live_object_model.html

In the coming weeks we will build synthesizers and work with control surfaces in M4L


Build 3 or more M4L devices, including one of each of the following

  • An audio effect
  • An instrument
  • A Midi effect

Its ok to adapt and “improve” an existing device.

Please bring in your work in progress for next week and be prepared to demonstrate something. The entire assignment will not be due until March 31.


ep-426 Interactive video – Spring 2015 week 3

The matrix

(under construction)


Review of Jitter tutorials:

tutorial 1: play a Quicktime movie
  • bang sends a matrix (once)
  • jit.fpsgui for debugging
  • How would you play a movie play backwards?
tutorial 2: build a single plane matrix
  • Anything can be transformed into a matrix
  • Create a matrix, row by row, using math (p fillmatrix)
  • How to get and set individual cells in a matrix
  • jit.matrix
  • How would you make pixel art? a drawing program? a spectrum display?
  • A lot of specialized Jitter objects are abstractions that do what this tutorial demonstrates – i.e.., building or transforming the planes of a matrix
tutorial 3:  math operations on entire matrix/plane
  • @op (is an attribute) : was it good design in Max to have both messages and attributes?
  • scalar, vector
  • pass
  • integer/float
  • What happens in a jit.pwindow with display size smaller than the matrix?
  • upsampling/downsampling
tutorial 4:  movie playback.
  • jit.qt.movie will play back URL’s (audio and images) – but you can’t work with the sound in Max without Soundflower
  • scrubbing and looping produces interesting fx
  • hardware controllers
tutorial 5: ARGBI
  • Rearranging planes
  • 8 bit char data type 0-255
  • line object (grain size)
tutorial 6 : color
  • scalebias:  normalized 0.->1. values, not with 0-255 values (look at the subpatcher)
  • planemap attribute for jit.matrix
tutorial 7: hue and BRCOSA
  • 2 very different ways of transforming (i.e., filtering) color and light
  • Why do we seen green with emphasis and detail?
  • hue angle is a way of gradually shifting around the color wheel.
tutorial 8: simple mixing
  • jit.xfade
  • line object
tutorial 9 – more mixing
  • Using various operators to transition, with jit.op, and using jit.scalebias to scale the input values to prevent clipping
tutorial 10 – chromakey
  • doesn’t need to be green.
  • Could you do a performance where you paste yourself into a band video.
  • napoleon dynamite
  • actual green screen


Max 7 lessons review

  • fantastic sounds
  • RGB music
  • geometric dreams

State of the art:



Design a project that will be due at the mid-term. Send me an email next week describing the project.

Continue working through the Jitter tutorials 4-12

Design a prototype of a synthesizer that generates accompaniment for animated GIF’s


There will be no class next week February 10th


Andrew Benson’s Jitter recipes: https://cycling74.com/search-results/#gsc.tab=0&gsc.q=jitter%20recipes

Screen Shot 2015-02-02 at 12.47.05 AM

Screen Shot 2015-02-02 at 12.47.30 AM

ep-426 Interactive video – Spring 2015 week 1

Interactive video programming and performance

Syllabus: https://reactivemusic.net/?p=18208


Information between words: “Palin Biden Silences” David Tinapple, 2008: http://vimeo.com/38876967

“We used to be Friends” By Benjamin Roberts: https://www.youtube.com/watch?

Reverse engineering example: Naoto Fushimi https://reactivemusic.net/?p=18228

frame sub
vizzie –
case study
attributes : attrui


Read Jitter tutorials 1-3
  • Playing a quicktime movie
  • Create a Matrix
  • Math Operations on a Matrix

Also, be familiar with the difference between messages, attributes, and arguments with Max objects

Do the lessons in Max 7 that use video and computer graphics
  • fantastic sounds
  • RGB music
  • geometric dreams
Reverse engineer a prototype of one of the examples shown in class

“Palin Biden Silences” or “We used to be Friends”

Either sketch out the design, or make an example using Vizzie that demonstrates some aspect of the process.

ep-341 Max/MSP – Spring 2015 week 1

Programming interactive audio software and plugins in Max/MSP

Syllabus: https://reactivemusic.net/?p=18206


  • Making prototypes
  • Connecting things
  • Building tools
  • Design
  • Reverse engineering
  • DSP, plugins
  • Video and computer graphics
  • Experiments



leap motion
midi osc thing / chat
frame subtraction
voice cancellation thing
max for live – granulator or convolution reverb

show basics of max
make a spectrum analyzer
make a pitch detector tweet thing


Read Max tutorials 1-4
  • Hello
  • Bang!
  • Numbers and Lists
  • Metro and Toggle
Build a control panel that does nothing

in Max. It should look amazing. It should be the coolest control panel you can imagine. Use any objects, colors, shapes that you can find. But… it shouldn’t actually control anything.

Be ready to show it in class next week.

Do at least two of the built-in lessons in Max 7

Pick any two.

ep-426 syllabus – Spring 2015

Interactive video programming and performance

Spring 2015

teacher: Tom Zicarelli – http://tomzicarelli.com

You can reach me at:  [email protected]

Office hours: Tuesday 1-2 PM, or Tuesday 4-5PM, at the EPD office #401 at 161 Mass Ave. Please email or call ahead.

Assignments and class notes will be posted to this blog: https://reactivemusic.net before or after the class. Search for: ep-426 to find the notes

Examples, software, links, and references demonstrated in class are available for you to use. If there is something missing from the notes,  please ask about it. This is your textbook.


Everybody calls this course “The Jitter class” – referring to Max/MSP jitter from Cycling 74. You will learn to use Jitter. But the object is to create interactive visual art. Jitter is one tool of many available.

The field of interactive visual art is constantly evolving.

After you take the course, you will have designed projects. You might design a new tool for other artists. You will have opportunities to solve problems.  You will become familiar with how others make interactive art. You will explore the connection between sound, video, graphics, sensors, and data. You will be exposed to to a world of possibilities – which you may embrace or reject.

We will explore a range of methods and have opportunities to use them in projects. We’ll look at examples by artists – asking the question: How does that work?

Topics: (subject to change)

  1. Jitter
  2. Matrixes
  3. Reverse engineering
  4. Visualization of audio
  5. Visualization of live data, API’s
  6. Video analysis (realtime)
  7. Video hardware and controllers
  8. Prototyping
  9. Video signal processing
  10. OpenGL
  11. Other tools: Processing, WebGL, Canvas, 2d graphics
  12. Portfolios
  13. Live performance

Grading and projects:

Grades are based on two projects that you will design – and class participation. Please see Neil Leonard’s EP-426 syllabus for details. I encourage and will give credit for: collaboration with other students, outside projects, performances, independent projects, and anything else that will foster your growth and success.

I am open to alternative projects. For example, if you want to use this course as an opportunity to develop a larger project or continue a work in progress.

Reference material