Moonbase: A plug and play engine for making web animations
moonbase.com
moonbase.com
Moonbase feels a little toy-ish at the moment, but it doesn't need to. Quartz Composer has a bunch of programming-like features, including nestable sub-compositions, the ability to accept user input, iterators, etc, that make the system really powerful. I hope the moonbase people start copying as many of those features as they can.
It already is embeddable! http://moonbase.com/pasquale/20
Along with Quartz Composer, a number of other node-based graph editing environments have been very inspirational. MaxMSP, vvvv, LabView, and Grasshopper have all provided for great metaphors to learn from and extend.
We decided to launch with just 6 nodes and just a single runtime, from a working total of about 50 nodes spread across 4 different runtimes, including an audio engine built using the Web Audio API, which, funnily enough, was the first runtime.
The theory was that by removing features for the initial launch we could try and polish up a much smaller set of features.
BTW, as a sort of easter egg, all of those additional nodes and runtimes are there... I'll leave that as an exercise for the hackers out there to discover them! We plan on formally exposing them in the coming weeks.
back on sorting out how to delete a node ;)
Love the quartz composer node style interface, it's very well done.
A few suggestions:
When entering in values, have them be saved on blur, not just on return keypress. I lost numbers many times just assuming that typing them in then going to another field would save my input.
I'd love a way to add names to the nodes. I quickly put together a pointer + 3 math nodes + a text node, and would want to add a label to the math node that I used as a multiplier constant for the x and y math nodes...
To that end, instead of having to use a math node of 0 + constant = constant, let me have a 'variable' node that just outputs whatever constant. Oh, full expression support for math too would rock.
It's good that you support multiple outputs per node output. That's how I was able to use a single math node as inputs for 2 other math nodes.
Your node bar should support drag + drop onto your editor area as well as simple clicks. People will try it both ways, it should just work.
How long has this been in development, and how many people have contributed? Using any cool libraries?
> How long has this been in development, and how many people have contributed?
It started as a solo skunkworks project at the end of August with the rest of the Elepath team pitching in during the last few weeks, Pasquale making it look so beautiful and Kyle killing it on the backend.
> Using any cool libraries?
If you're not using RequireJS, you really should. It is super amazing.
Is there any way at all to get a standalone version of our creations saved outside of your service? Without a way to integrate with a web dev workflow (other than an embed) it's hard to put in the effort with this tool to produce something useful.
Just noticed another issue - You make me have to click the save button in the top otherwise I lose data. I created a couple of different projects and then went back to them and nothing was there. It's almost 2013 you shouldn't need to have an explicit save button in your web application ;)
The exported code can be compacted, that's fine.
End goal is that I'd love the ability to save and export my creations and self-host them outside of your tool.
- The blue steps/process didn't stand out very much (see last bullet).
- Couldn't initially tell it was drag-and-drop rather than just click one box to another.
- Wasn't intuitive that where you drag the line to and from are very important to the function you're trying to create. If there were little link icons that showed up for each attribute on element box (node?) hover that when clicked would show the possible attachment points on the other elements, that would have been more straight-forward.
- Don't like having to click an attribute to see and adjust it's value. And I was secretly hoping that there was an invisible slider ala Brett Victor so that I could just drag my cursor and have the value adjusted.
- My window only took up half the screen so when it came to applying the text, it inserted the text layer barely visible in the bottom corner. You could still move the element around, but the black modal that popped up with how to use it stayed on top and had no way of being closed, so my lesson ended there. I think a Layers window like digitalengineer suggested would be helpful here, but also possibly making it so that there's a wizard-like step system with an area underneath for specific instruction so people can see how far along they are and know exactly where to look for help.
Overall, great work! I think this will be a hit with kids and people that enjoy using tools like canv.as and makr.io.
What's the link to elepath doing in the middle of the floating guys? I had no idea what is was and clicked on it. It was something about pictures on the back of a chair. I had no idea how that connected with Moonbase.
Add a splash line or something or if this isn't the main landing page, can you link the main landing page?
Good luck! I hope it works for you guys.
The reasoning behind the current homepage: people were pretty excited when they figured out what to do… it was a little burst of positive feedback that got them to see that their actions were directly responsible for making the little dude move around. And they learned something very important about the tool.
Maybe just a demo video works, maybe links to other people's creations… We're planning on treating it like adults and doing some A/B testing. :)
I agree, that "e" logo need to never be hanging out in the middle of the page like that! I'll get it out of there ASAP. We've been mainly testing on taller browsers! :D
I tried making the box be a different color when the mouse was moving (multiply the boolean by the color?) but couldn't figure out how.
Particularly, I'm interested in the node & connection model. Any chance we'll see custom nodes (followed by sharable nodes, modules)? At the very least, custom equation nodes would make entering math easier and then you wouldn't need to provide a node for all math functions. Notably, `exp` is missing (would be nice to have damping in animations - and then expose the time variable).
At any rate, this makes for a very interesting platform!
When I use Grasshopper, one of the nodes I find really helpful is the note tool, which you can use to watch output from a widget in real time. For example, it'd be great to be able to put one on the output of a math node to see the resulting value of the calculation as it's happening.
One of the things I don't like about Grasshopper is that you can't just output the code from your visual layout. It would be great if your tool could provide this functionality, allowing you to output the resulting JavaScript for inspection and tweaking.
Can't wait to see the new Moonbase nodes as they get added. The audio components you mentioned sound really compelling.
This would really benefit from a gallery. Examples:
- I think it could get confusing rather quickly if the animation is a little more complex - There is no 'undo'? - There is no timeline or layer-palette?
Thinking about these topics because of Edge : http://html.adobe.com/edge/animate/
I also wanted to play with the initial setup but completing the tutorial made a video pop up and there was no way to get back - just an option to start a new workspace.
Safari 6, OSX
This is awesome btw. I'd gladly shell out some cash for a tool that would enable me to generate the corresponding code for these animations.
I wasn't able to delete any sprites though.