NodeBox Port to Javascript Canvas

Hey all. I ported a bunch of NodeBox functions to the HTML 5 element, and I think the result's pretty impressive. What I have is good enough to render both "fireworks" and the first part of "Superfolia" with only minor modification.

Check it out, run the demos, and read the code: http://billmill.org/static/viewji/viewji.html . I've only tested on Mac OS X with Firefox 3b4, Opera 9.5 preview and Safari 3.1, so reports of success or failure on other platforms would be appreciated. (iPhone anyone?)

What's not implemented: transform(mode=CENTER), image(), skew(), choice(), grid(), star(), colormode(), and any of the clipping functions. text() only works with firefox. Animation.

What is implemented: a good portion of the rest.

My question to you is: how interesting is this work? Anyone interested in developing it further?

I think it's got a lot of neat possibilities. It's cross-platform and fairly fast. Furthermore, it requires no server setup and runs in a static html file all on the user side.

If you have any questions or comments, post them here or send them to bill.mill@gmail.com .

That should be the Html 5 < canvas > element, your comment processor swallowed my text inside the less than and greater than.

Hi Bill,

Great!

I started on a similar prototype myself a while ago but stopped development due to time restrictions. I've got some things like image(), choice() and animation. No text though. Only works in Firefox due to CSS stuff.

Here's the source code.

This kind of work could become quite interesting if two major issues are tackled:
1) Make a stable port of NodeBox that can be integrated in a well-known CMS.
2) Implement export functionality. Possibly this could be a server-side process (e.g. PHP GD).

In the long run we could then have a parser that transforms NodeBox Python code to Javascript, this should not be impossible to do.

Right now I don't have the time to work on this myself however.

> No text though

This is where the interesting work would be - I think that there's work out there rendering fonts that could be usable to manually render fonts.

> In the long run we could then have a parser that transforms NodeBox Python code to Javascript, this should not be impossible to do.

No, it's fairly mechanical to do the translation as long as you restrict to a subset of code, I thought of this as well.

> Implement export functionality.

canvas.toDataURL("image/png") should export to png on all conforming browsers, and other formats are optional. Perhaps it would be worthwhile to add implementations of other datatypes to a browser?

Also, if we had a Python -> JS converter, why not reverse? Then we could just feed the script back into nodebox.

Also, your image() function didn't work for me, but I imagine it's just a cross-domain security issue.

Is there a place other than this where I should put progress updates?

Great work, wow.

As for the progress updates, we don't have mailing lists, so the forum seems like the best place for now. If you have some nice things to show, you can also post them in the Flickr group, and they will appear on the "share" page.

I didn't realize Canvas has export functionality these days. That makes it very interesting - I would love to see this project advance. It could have its own spot in the NodeBox family of websites. In the meantime, keep us informed here and via mail.

One thing that worries me a bit is the python-javascript thing. We have to keep on the lookout here that we don't create segmentation in the project.

VERY interested.

I think this is the reason Processing consistently beats Nodebox when the feature comparison is made. I'd love to sketch with Python but the ease of cross platform publishing with Processing.js is thus far unmatched.