Tutorial to voice control HTML GIF animation with mobile phone using MaxMSP and Nodejs

A demo and tutorial to voice control HTML GIF animation with mobile phone using OSC + MaxMSP + Nodejs + SocketIO.

Source code:
https://gum.co/whmyz
https://www.patreon.com/posts/35323161

The data flow:
OSC controller —- MaxMSP —- Node for Max —- Animation (HTML Web GIF)

OSC controller:
BugOSC, an OSC controller I developed based of Wechat mini program (微信小程序).
You should install wechat firstly and then search “BugOSC” in it.
Or you can use any other OSC controller like TouchOSC.
BugOSC now (v0.4) supports speech/voice recognition!

MaxMSP:
Receive data from OSC controller using [udpreceive].

Node for Max:
It is part of MaxMSP for connecting Max and Nodejs.
https://cycling74.com/articles/node-for-max-intro-%E2%80%93-let%E2%80%99s-get-started

Animation (HTML Web GIF)
A static HTML Web page served by Nodejs.
And a GIF animation.

SocketIO and Express
Serve the static Web page, and make Node sending data to Web page directly.
https://socket.io/
https://expressjs.com/

GIF author:
Great Kang!
https://twitter.com/kyy921

Bgm:
“Favorite”. Written by Alexander Nakarada. https://freepd.com/electronic.php

Donate:
https://www.patreon.com/avantcontra
There are many articles, patches, source code and some advanced Patron-only content there.

Or you can get a source code/patch directly in gumroad. https://gumroad.com/avantcontra

If you like something, could buy me a coffee 😀