03 Dec 2012 by Forrest Oliphant
My work on web media wiring has come a long way in the past year. Most of my module development effort has been focused on 2D canvas animation and effects. Each module that I create can be recombined with the older ones, expanding Meemoo’s potential exponentially.
HTML5 video player (meemoo:video/player). Because of security restrictions, if the video is coming from another domain you can’t manipulate the image data (unless the server is CORS-enabled, which is rare). The workaround is to download the video to the local machine, and then select the file in the module.
Tile (meemoo:image/tile) tiles an image, with options for x/y mirroring for seamless kaleidoscope-like images.
firefox flicks video → tile
Grid (meemoo:image/grid) puts each frame of video into a grid, which animates once the grid is full. This module comes from earlier experiments in Flash that were inspired by Run Lola Run Lola Run Lola Run Lola Run.
Particles (meemoo:image/particles) is the most complicated module so far. You can input an image or animation that will become a particle system, for effects like swarms, branches, smoke, and fire.
Trails (meemoo:image/trails) draws to its canvas without clearing, leaving the trails of moving objects. Initially I forgot to clear the canvas when coding Particles, and got some nice effects. At first I thought about adding a “leave trails” option to Particles, but realized that this effect could be useful in combination with other modules. It is nice to be able to make a code idea into a module for instant reuse.
particles → trails → tile
Animation (meemoo:variable/animation) is a new kind of module that I’m experimenting with. It behaves like an array of canvases, and can be sent to the particles module. I will make it possible to save/load animations as a flat spritesheet image.
Chroma/Luma Key (meemoo:image/chromakey, meemoo:image/lumakey) is useful for making transparent backgrounds for animations. These modules are slower than the others, because they go through each pixel. They have potential to be faster with WebGL (Seriously.js), but I wanted to get it working in the 2D canvas context first.
papercraft → lumakey → animation → particles
I used all of these modules to wire together three hours of live visuals and animation at MozFest’s party at the London Film Museum. The music was live-coded by Slub. Getting this gig was a big motivator for working on and refining these modules.
It was great to be able to play with and wire together many different techniques that I have been experimenting with through the years: stop-motion animation, kaleidoscopes, video feedback loops, slit-scan, particle systems, and all the combinations between, and to do so as performance.
cam → feedback loop (more photos)
Before the gig I imagined that I was the only VJ in London going from shop to shop searching for a glue stick. I was also probably the only VJ that was choosing to work within the limitations of JavaScript and HTML5.
The nice thing about Meemoo is that its capabilities can expand with the browser’s capabilities, which have exploded in the time since I started the project. I hope to attract more HTML5 and creative coding brains to the project, since there is much more potential than this one developer can explore.
My animation workshop was next to MIT Media Lab’s Scratch and MakeyMakey workshops. I was inspired to unpack my MakeyMakey and made a simple camera trigger switch with a piece of cardboard and two pennies. This made it easier to add images to the animation, since we didn’t have to go back to the laptop.
I talked and hacked for a while with Eric Rosenbaum, one of MakeyMakey’s designers. Our projects have similar goals: to encourage hacking and experimentation with zero installing and configuration. The projects compliment each other well, making it very simple to add physical inputs to Meemoo apps.
I put together this clogging/tap dance visualizer in one hour with MakeyMakey + Meemoo. The shoes have foil on the heels and toes, and the foil on the mat is connected to the ground. Each of the four switches triggers a different particle system, and it looks like fireworks when I dance. It would be fun to connect these triggers to different sounds as well… I guess I need to get to work on audio modules!
I got so much inspiration and encouragement this weekend, and hope that I redistributed some % of that back out. #mozfest was serious fun.
Experiments with circle → particles → trails, changing color, size, and particle system variables.