Moonbase: A plug and play engine for making web animations(moonbase.com)
moonbase.com
Moonbase: A plug and play engine for making web animations
http://moonbase.com/
22 comments
>I don't see any reason why it couldn't be made embeddable
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.
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.
easter egg: CTRL+N and ''audio file", "audio input", "audio output", "grayscale", "hue_adjust", "scale", "sprite"
back on sorting out how to delete a node ;)
back on sorting out how to delete a node ;)
Very nice work. What's the output, canvas + javascript?
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?
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?
Great suggestions and great questions!
> 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.
> 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.
Cool, thanks.
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 ;)
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 ;)
What do you mean by standalone? A situation where you are hosting all of the necessary code to interpret and display what's made with the product? As in, an open sourced version of the graph editor and runtime (GEAR)?
Yeah, basically. Like how processing.js has a small runtime engine that can run processing documents, but you don't need the whole code for the entire authoring environment. Like CSS animations, but what you've got is more than those can really handle.
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 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.
It'd be great if the animation worked with CSS3 in addition to or instead of canvas. I'd love to use some of this on my site without requiring a whole embed.
I love this concept and have been anxious since Pasquale's first Dribbble shot about it to try it out! I had some time to toy with it last night and here's what I came across (in Chrome) -
- 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.
- 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.
Hey guys, I'm William, I'm at Elepath and the lead on Moonbase. I'd love to answer any questions!
Where's the link directly to what it is that your product does? It took me a few seconds to figure it out. If it weren't for the HN link I'd never know.
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.
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.
I disagree. The front page design is perfect. Clean, simple and elegant. Those who can't work it out aren't going to use it anyway.
I'm pretty sure we did not nail the home page and perhaps our approach isn't the best, but I really do appreciate the feedback.
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
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
Are there any boolean logic blocks? I noticed that the Pointer has the "Moving" attribute which returns true or false, but the math block doesn't seem to support boolean functions.
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.
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.
very cool! What's on the road map for Moonbase? Clearly, there are some very interesting things you can do here.
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!
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!
Have you considered Login with Facebook/Twitter using Oauth? I hate creating user accounts on different sites, and I'm sure I'm not alone here.
I hear you, we really should. People should have the option to create an account with just an email address or their existing identities such as Facebook or Twitter. It might not be a top priority, though, but hopefully in the next few weeks it gets implemented!
I'm on Firefox 17.0.1 / Ubuntu 12.04. It doesn't work for me. Is it not intended to work there?
Congratulations to the developer (if he's the OP) this is one of the best websites I've ever been shown on HN. The demo/tutorials are amazing and really display the power of the tool. Additionally, moonbase is downright beautiful and so simple to use.
Congrats to the Elepath team. This is looking really good, especially considering how long you guys have been at it. I can see a huge amount of potential in this Grasshopper-style visual coding approach.
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.
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.
It's cool, but the output needs to be totally exportable, not just hosted. Perhaps I'm a bit of a throwback, but I'm willing to pay for tools that get the job done and give me the output that I need. As it stands, hosted output is NOT what I need, and I don't think I ever will need it.
I agree with you 100%.
This is great fun. I've always enjoyed the graphical programming environments like MAX/MSP and pd. One cool addition would be to connect to the echonest API. This would allow attaching your animations to music metadata such as BPM and tone.
Well, looks awesome and clearly some quality and detailed work here. One thing I would point out is that I have no idea how to use this. Even after trying the demo, still no luck. I finally clicked a logo looking button at the bottom of the page and it linked to an animation that pretty much showed me everything I would want to know up front. Messaging for new internet concepts is a problem I'm familiar with too in building http://2fb.me . Are you noticing that people understand this concept with what you put up on the page (outside of HN)? Also, moonbase.com nice find!
This tool seems to be inspired by Quartz Composer (http://en.wikipedia.org/wiki/Quartz_Composer), a Mac OS X tool for making animations that can be embedded in other programs. You can find QC in /Developer/Applications/ if you have Developer Tools installed. Moonbase’s interface is very similar to [Quartz Composer’s interface](http://upload.wikimedia.org/wikipedia/en/b/bc/QuartzComposer...).
Very cool!
This would really benefit from a gallery. Examples:
http://glsl.heroku.com/
http://codepen.io/
This would really benefit from a gallery. Examples:
http://glsl.heroku.com/
http://codepen.io/
Holy potential. I love when new applications give me that "oh, well, ok, this is awesome" feeling. Can't wait to see where this is going. Nice work, Elepath.
The graphics look very cool and the tutorial is quick and easy. If I can make a few point for improvement (based up on a few moments)
- 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 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 couldn't find a way to delete an element after placing it in the workspace.
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.
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.
Bug: In challenge 1, it asks you to set your name in the newly created text box. The help text overlays the name field so that I can't click on the underlying name field and can't continue with the challenge.
Safari 6, OSX
Safari 6, OSX
Any chance we'll get a non-hosted version?
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.
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.
This is really awesome and I liked how clean and well put together the demo was.
I wasn't able to delete any sprites though.
I wasn't able to delete any sprites though.
Very nice. I just miss some way to change the values with the mouse (wheel) - some kind of slider maybe?
Author's website http://elepath.com/
I really like the fact that you provoked an action out of me to connect the dots.
have you considered open sourcing the processing/graph code as well as the graph UI code?
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.