SummerOfCode/2012/Meemoo

From MozillaWiki
Jump to navigation Jump to search
Meemoo is "the Arduino for Web"

Meemoo (Hackable Web Apps)

Meemoo is a framework for hackable web apps by Forrest Oliphant and an incredible tool for web making. My main goal in the project is to extend Meemoo to make modules creation easier. Based on a collaborative live code editor I want people creating new modules for hackable web apps inside their own browsers, without external tools.

Give Meemoo a try! Go http://meemoo.org/iframework

Fork Meemoo! Go http://github.com/meemoo

Weekly Report

A daily log of my activities around Meemoo GSoC 2012 project is at: http://etherpad.mozilla.org/meemoo2012. Here is a resume of those activities week by week.

Before GSoC period

My first contact with Meemoo was by Alex McLean, who presented Meemoo as an interesting livecoding environment on Web. This was around middle of March and after some days I knew Meemoo was part of Moz GSoC.

At March 29 through April 23 I was in contact with Forrest. First of all I created a hello-world module (now we are calling this external modules by "NodeBox-Iframe") to understand how modules communicates inside Meemoo. I was surprised how easy was that! This first contact with Meemoo generated this tutorial: https://github.com/meemoo/iframework/wiki/Creating-a-Module.

I was amazed with Meemoo and started to write my proposal to Moz GSoC. I read about Moz focus on "creating webmakers" by Mark Surman, Dave Humphrey and others mozillians, so I wanted to join the initiative, and Meemoo seems to be an amazing tool around that. In this meantime I studied Backbone.js, window.postMessage and all the Meemoo's architecture: iframework (the environment) and meemoo.js (the embeddable module lib).

In this period I reported some issues on iframework and created a bunch of simple modules and apps:

I also fixed an issue around actions history:

And at April 23 I was crossing my fingers :-)

Community bonding period

Week 1 (Apr 23 - Apr 30)

For this period I originally proposed: 

   April 23 - May 21 (4 weeks): discussing with my mentor about the exact features and 
   means of implementation around Meemoo, syncing with my mentor works and doing 
   some prototypes.

I started thinking about the live code editor (how to implement that? as a module? how to evaluate the generated code?) and decided to go with an iframe editor using Ace: [1] and [2].

Week 2 (May 1 - May 7)

I discussed some ideas around the live code editor with Forrest and at the end of week Forrest pointed me to Meteor. I studied Meteor planning to use it to make the live code editor collaborative. And with Forrest we planned to use Meteor as a way to make the whole Meemoo (iframework) collaborative! I created a test app using Meteor and feel surprised. I just didn't liked all the magic needed to generate DOM, but we can use something in the middle to make the "view source" work.

Week 3 (May 8 - May 14)

Renato Fabbri invited me to use Meemoo on "Cúpula dos Povos" at "Rio+20" conference, here in Brazil. I planned to create some modules to do photo sequencing and 3D forms synthesis based on parameters extracted from audio tags. I started creating a supershape.js module: http://meemoo.org/iframework/#/gist/2644999

Forrest pointed me to toolness' friendlycode (now the editor behind Moz Thimble) and I got some ideas for the live code editor (mainly the tips thing).

I started to plan how to use the audio APIs (Web Audio, Audio Data, MediaStream) in a compatible manner inside Meemoo. I decided to create a Web Audio API module.

We discovered RecursiveDrawing.com and some ideas exploded :-)

Jussi pointed me to his mike.js (https://github.com/jussi-kalliokoski/mike.js) to get raw data from mic while the W3C Audio spec isn't defined.

Week 4 (May 15 - May 21)

We were getting more and more ideas for apps and modules so we decided to store everything here:

Forrest was working at Hackable Clock app to Moz Summer of Code Party meeting (https://etherpad.mozilla.org/May22 ) and I forked the app with some audio thing: http://meemoo.org/iframework/#gist/2765356 ;-)

I also started to study the Web Audio API (https://gist.github.com/2728285)

Forrest started to design the Native Nodes for iframework and it make my ideas to change a bit. I decided to make the live code editor and the audio nodes as native nodes.

Coding period

Week 5 (May 22 - May 28)

Talked with Joe, the creator of Audiolet, about Web Audio API integration and he gave me some good ideas. But I still need to understand how to use the native Web Audio nodes instead of JavaScriptAudioNode.

Forrest presented Meemoo as a demo day at his University and meet Sebastian, the creator of an awesome WebPd fork!

For this week I originally proposed for GSoC: 

   May 22 - May 28 (1 week): fixing the remaining bugs on iframework and meemoo.js, 
   getting them ready to work on the live code editor.

But Forrest was working on a refactoring, so I delayed the work on iframework and focused on the live code editor and audio nodes. I thought a lot about them and I decided:

  • Having the live code editor as a friendlycode fork (livecode branch) and as a native node invoked by "view source" and "create new module" events inside iframework
  • Having the audio nodes using Web Audio API or Audiolet (selected by browser type, for now) and as native nodes. As we got more resolution from W3C Audio spec we can remove the specific code

Week 6 (May 29 - Jun 4)

For the next two weeks I proposed: 

   May 29 - June 11 (2 weeks): extending iframework to create the code editor. 
   I already have a simple editor implemented using Ace [1] and  another using 
   CodeMirror [2]. I will integrate one of those editors inside iframework.

I implemented some changes on live code editor (now a fork of friendlycode, the core of Moz Thimble).

I created some use cases (see http://etherpad.mozilla.org/meemoo2012, beginning of pad) and tested those with Web Audio API and everything worked well but just in a Chrome canary build. We need to have a node inside Audiolet to get raw data from audio and video tags sources. I have to discuss more with Joe about that.

Google launched Blockly and I planned to use that inside the live code editor, as an optional "mode" (like Emacs modes).

Forrest created a new branch for native nodes and I fetched. Things started to get a form!

Week 7 (Jun 5 - Jun 11)

I worked in the audio nodes and the live code editor. They are not native nodes of Meemoo yet, but standalone pages. I'm planning to integrate them with iframework in 2 or 3 days.

Week 8: (Jun 12 - Jun 18)

Originally proposed: 

   June 12 - June 18 (1 week): integrating the editor with share.js or etherpad-lite, 
   to make possible collaborative coding.

I have to discuss with Forrest because we planned to make the whole iframework collaborative. But for now, maybe we could have just the live code editor collaborative, based on Meteor.

I'm planning to have the editor and audio nodes as native nodes this week too. UPDATE: the audio nodes is dependant of native nodes and we have lots of work before touching the media nodes

I discussed with Forrest and we are concentrating on native nodes for now. I have started a Meteor app to use as an external live code editor while we don't have native nodes. I'm testing how to update the whole iframe every time we change the Meteor editor. When we got native nodes, we are planning to use Meteor to make the whole iframework collaborative, but it is not possible now. 

   Forrest: I think we should experiment with just modules for now, because I'm 
   guessing it will take a bigger rewrite to make iframework work with it. 
   I like the idea of different apps on different systems feeding 
   images/sounds/data into the same meteor module.
   
   Vilson: OK! So a version of the editor in meteor...

Forrest integrated Grunt, so now we can start doing tests and the deploying is much easier.

We also started to think more seriously about an integration with Google Blockly, like a module to do logic operations. I'm planning a Blockly mode for the live code editor to edit JavaScript.

Week 9: (Jun 19 - Jun 25)

Originally proposed: 

   June 19 - June 25 (1 week): creating a Web server based on Django or node.js 
   to store modules created by everyone. Every module is refered by its URL in 
   Meemoo, which makes the server design simple.

Forrest worked on local storage and we are using Gist to store public apps. So, for now we don't need a server. Maybe this will come with the Meteor "backend". We had a big push to iframework repos with all those features. Meemoo is rocking! :-D

In this way I got this week to continue the work on the editor and created a module for mr.doob's Harmony: http://meemoo.org/iframework/#gist/2959806 and we are having fun :-)

So1ik.gif 601267_323131427772915_595524936_n.jpg 550432_323079607778097_1216176047_n.jpg 552783_323134351105956_963782996_n.jpg

Some ideas for the live editor UI from http://codepen.io: 

   Vilson: Lots of good ideas from codepen. I think we can use the live editor 
   for lots of other projects too. Thinking on a editor to use "creative coding" 
   libs like three.js, paper.js or audiolet.

We are using the Facebook page of Meemoo to post some updates, together with Twitter: http://facebook.com/meemooapp

Week 10: (Jun 26 - Jul 2)

Originally proposed: 

   June 26 - July 2 (1 week): beginning creating new modules inside the editor: 
   a processing.js edit-and-run module, an event sequencer and an audio sampler 
  (based on Audiolet's BufferPlayer, using Mozilla's Audio Data API).

The whole media nodes, including audio, are dependant of native nodes. So we are delaying this. I'm creating another modules like meemoo-supershape.js as iframe nodes.

Forrest created math evaluation nodes! And now we can have cool animations like these:

And we continue having lots of fun :-D

548607_326966247389433_427146130_n.jpg jYDuh.gif B67r2.gif sDIz0.gif TcO6N.png Ch1PD.png JR5Zl.png hWdVl.png

I changed my priorities for:

  1. live code editor as meteor app
  2. native nodes
  3. audio nodes using web audio api
  4. app view as "show only this node"
  5. fullscreen view as "show only this node in fs"

Discussed with Forrest about app view and for now we are thinking on a button to hide the whole app but the current module.

Taking some inspiration from https://github.com/sullerandras/collaborative-html-editor-with-meteor to the live code editor refresh iframe thing.

Forrest wrote about his progress on June: http://meemoo.org/blog/2012-06-27-nearing-beta/

nLFKo.gif y2GKs.gif

I'll post mine soon.

Week 11: (Jul 3 - Jul 9)

Originally proposed: 

   July 3 - July 9 (1 week): testing to ensure that the editor perfectly works 
   before the mid-term evaluations, asking for feedback from my mentor and the 
   community.

I have the editor almost done! I'll deploy on meteor.com soon and start testing this weekend!

Thinking together with Forrest about ideas for more Mozilla Webmakers projects like https://wiki.mozilla.org/Webmakers/Projects/MeemooClock-DIY

  • How to create your own GIF?
  • How to create crazy 3D shapes?
  • How to create your meme and publish on Facebook?

More information

The official Meemoo page is: http://meemoo.org

The official project details is in: http://www.google-melange.com/gsoc/project/google/gsoc2012/automata/14001

And the accepted proposal is publicly available at: http://www.google-melange.com/gsoc/proposal/review/google/gsoc2012/automata/1

About the authors

Forrest Oliphant (mentor): http://forresto.com ___ @forresto

Vilson Vieira (student): http://automata.cc ___ @aut0mata

Retrieved from "https://wiki.mozilla.org/index.php?title=SummerOfCode/2012/Meemoo&oldid=447798"