Category Archives: Meemoo

the toybox and the toolbox

Talking about design for hackability at Assembly Helsinki Summer 2014:


The first comment was one that we have heard many times. Programmers tend to be dismissive of visual programming, or anything that claims to be for making apps without coding. Visual programming has been around since 1969 in many forms, coders still work primarily in text editors, so visual programming must not work.

Our design has value for both play and serious coding, the toybox and the toolbox. Building modular code has been satisfying for play, VJing, tinkering, and experimentation. Working in a team on ambitious projects, FBP patterns become a powerful coding standard that make it possible to see other people’s work at a high level.

The primary design goal of my work with Flowhub and Meemoo isn’t to replace code with graphs. Rather, I want to be able to “wire in” the correct metaphor for the task at hand. So, editing a curve should happen by moving points on a canvas, keyframed animation in a timeline, tabular data in a spreadsheet, and logical manipulation in code.

We’re finding flow-based programming is a good fit to model UI event listeners, data transformation pipelines, A/V signal processing, electronics sensors and actuators, and Flux-like model/view synchronization for responsive UIs. This isn’t the entirety of programming, but we’re designing Flowhub to be flexible enough to switch and wire together metaphors as needed.

Coming soon: demo of wiring a keyframed timeline widget into a dataflow graph.

Design for Hackability talk at

I finally summoned the courage to watch my talk, and (besides the 30 ums per minute) it isn’t so bad.

I talk about:

  • software eating the world
  • metamedia / metanetwork
  • hacking the wrong tools to get things done
  • potential for ux design in coding:
  • text interfaces to gui to touchscreens invited more people to use software, how can we invite more people to hack software?
  • design not for hackability
    (in this section I talk about how consumer electronics are not hackable, but I was happy to find out how I was wrong about that in this TED talk: Vinay Venkatraman: Technology crafts for the digitally underserved.)
  • layers of abstraction:
    making it easy to dive from gui to dataflow to code and back
  • demos, and the long tail of tool design
  • artistic potential
  • future plans and NoFlo

NoFlo clock demo

I have been working on the NoFlo graph editor, building on my experience making Meemoo.

noflo clock demo
press play on the iframe to start the clock

This graph runs the analog clock in the corner. We’re discussing a few ways that the graph might be simpler. For example, most of the components could be encapsulated into one subgraph, which would output just the numbers and rotation percentages needed to draw the clock.

Also, we’re talking about allowing equations like “=x/(60*1000)” in input ports that expect numbers. When the date is x, that equation will give you the correct rotation of the second hand (60 seconds * 1000 milliseconds). This will be a powerful feature, and reduce the number of nodes in the graph.

If you have ideas for the graph editor or future demos, please chime in.

DACS: digital/analog converter/synthesizer

I’ve been in NYC for a few days to interact directly with Eyebeam and Mozilla people to talk about future plans and potentials for From Thursday to Saturday was Art Hack Day at 319 Scholes in Brooklyn.

This diagram shows a concept that has been in my mind for one way to conceptualize the project: a frictionless digital/analog converter/synthesizer.

digital analog

(Edit 10/01: I realized that the old version of the diagram wasn’t really what I was thinking.)

The idea is that any of these should be easily mashed together to experiment with aesthetic possibilities. WebGL textures projected on clay forms, paper puppets animated with your voice, finger-paint textures on 3D graphics… This concept is extremely broad, and I still need to find ways to narrow the focus on a few easy activities that can introduce newbies to the toolset. I’m making a collection of “hack-tivities” as I come up with them.

We made this animated font in a rainy-day workshop. I snuck in some easy HTML hacking so that anybody can mix the letters into messages:
animated A

These “physical gif” animated images are now easy to make with Meemoo:

I’ll be making more of these introductory pathways to Meemoo as the project progresses.

Open(Art) fellowship announced today

Today Mozilla and Eyebeam are announcing the Open(Art) 2013 fellows, and I’m one of them! 😀
I’ll be using this opportunity to expand the capabilities of Meemoo and extend it into an open source web art community.

Coder analogy: Meemoo is a dataflow framework, where apps are made by connecting modules which encapsulate functionality like visual effects. The output of the apps could be a generative animation, stop-motion GIF, web cam effect, or (in the future) audio composition. These apps can be built, shared, and forked without leaving the browser.

Artist analogy: The community will be like a game of exquisite corpse, where the rules of the game as well as the media can be transformed with each step.

Input welcome!

we didn’t plan this… jyri accused me of being a little over-specced (o_o-)

Meemoo: Hackable Web App Framework (the thesis)

That’s it. That is all of the words. The thesis is done. If I successfully defend it on May 2nd I’ll be a MA.

Check out the awesome art that my buddy Jyri Pieniniemi designed for the project and thesis cover:

Oh no wait, I was zoomed way in. It is actually:
Talk about attention to detail. The screws symbolize hackability, which is the main theme of the research project.

words on paper

If you want to read the paper, be my guest:
Meemoo: Hackable Web App Framework, Forrest Oliphant
It is kind of lame to have a thesis about the web locked in a PDF, so I’ll make an HTML version soon.

The project: