This looks like the same basic concept as Apple's Quartz Composer, which was/is really quite awesome (and comes with Apple's developer tools). Except Moonbase is javascript based, and I don't see any reason why it couldn't be made embeddable and (eventually) into a serious tool for web developers.<p>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.
Very nice work. What's the output, canvas + javascript?<p>Love the quartz composer node style interface, it's very well done.<p>A few suggestions:<p>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.<p>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...<p>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.<p>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.<p>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.<p>How long has this been in development, and how many people have contributed? Using any cool libraries?
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) -<p>- The blue steps/process didn't stand out very much (see last bullet).<p>- Couldn't initially tell it was drag-and-drop rather than just click one box to another.<p>- 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.<p>- 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.<p>- 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.<p>Overall, great work! I think this will be a hit with kids and people that enjoy using tools like canv.as and makr.io.
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.<p>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.<p>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.<p>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.
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 <a href="http://2fb.me" rel="nofollow">http://2fb.me</a> . 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 (<a href="http://en.wikipedia.org/wiki/Quartz_Composer" rel="nofollow">http://en.wikipedia.org/wiki/Quartz_Composer</a>), 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](<a href="http://upload.wikimedia.org/wikipedia/en/b/bc/QuartzComposerSnowLeopard.png" rel="nofollow">http://upload.wikimedia.org/wikipedia/en/b/bc/QuartzComposer...</a>).
Very cool!<p>This would <i>really</i> benefit from a gallery. Examples:<p><a href="http://glsl.heroku.com/" rel="nofollow">http://glsl.heroku.com/</a><p><a href="http://codepen.io/" rel="nofollow">http://codepen.io/</a>
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)<p>- 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?<p>Thinking about these topics because of Edge : <a href="http://html.adobe.com/edge/animate/" rel="nofollow">http://html.adobe.com/edge/animate/</a>
I couldn't find a way to delete an element after placing it in the workspace.<p>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.<p>Safari 6, OSX
Any chance we'll get a non-hosted version?<p>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.