morphic.js - Morphic for JavaScript

morphic.js - Morphic for JavaScriptDid I mention that I love Morphic?

I am infatuated with touch screen apps and Minority Report like user interfaces. Just imagine how this could change the craft of programming itself! Make scripting more fun and accessible, turn it into an activity that can be carried out anywhere and everywhere. Ubiquitous casual programming. Wouldn’t that be a blast?

A year ago I ported Morphic to Python and PyGame, then I was busy with finishing BYOB 3.0 in time for UC Berkeley’s new CS10 pilot course. At last summer’s Scratch Conference Brian Harvey and I were discussing ways for Scratch/BYOB to run directly in a web browser with our friends at the MIT MediaLab, and Brian Silverman suggested we take a look at JavaScript, which he claimed was a lot like “Scheme in a browser”. John Maloney and the MIT Scratch developers are currently porting Scratch to Flash, and there is also a very cool Scratch-like IDE called DesignBlocksJS written entirely in JavaScript by Evelyn Eastmond. On the last day of the conference John and I wound up wondering whether with all the recent advances in browser technology it would be possible to bypass the browser DOM and CSS and do it all in a single Canvas element instead.

I started out by looking at Dan Ingalls’ Lively Kernel, which, of course, being based on SVG instead of Canvas is not only unspeakably elegant but also the “Gold Standard” in this field. Probably the Lively Kernel offers all that I would ever need or want, but mainly out of wishing to learn JavaScript in the first place I decided to try another JavaScript / HTML5 / Canvas implementation of Morphic myself, even if I might eventually end up throwing it away. Morphic.js began as a more or less direct port of my previous Python implementation, and I refined it and made it more complete along the way, being able to use some parts of the Squeak implementation as well. All the time John Maloney supported me with advice, encouragement and enthusiasm, making my second pass at Morphic even more fun than last year’s.

The result is a limited but solid and (I think) snazzy little JavaScript library that turns HTML canvas elements into veritable Morphic worlds right in the browser. It’s a far cry from the Lively Kernel or from current Squeak, but simple enough to get your head around, not unlike the Morphic that’s found in Scratch’s Squeak image. And that’s really what morphic.js is all about: To become a framework for future experimental versions of Elements and BYOB, perhaps even for a General Purpose Blocks Language (GPBL). Ubiquitous casual programming, yeah!

I am releasing morphic.js as free and open software under an MIT license. You can

All the documentation needed to start creating your own Morphic browser projects is embedded in the morphic.js file, including sample HTML code for

To round it off, in case your browser or text editor cannot display JavaScript correctly, I’m also posting the

as a separate text file.

Enjoy!

-Jens Mönig

P.S. Thanks for all the comments and the many individual e-mails in response to this blog post! I’m sorry for having to turn off comments altogether because of all the spam. The web is becoming an increasingly #?=!-up place for original content. You can still e-mail me until I’ll be signing off completely and revert to longhand again :-(

7 Responses to “morphic.js - Morphic for JavaScript”

  1. Twitter Trackbacks for Chirp Blog » Blog Archive » morphic.js - Morphic for JavaScript [scratchr.org] on Topsy.com Says:

    […] Chirp Blog » Blog Archive » morphic.js - Morphic for JavaScript chirp.scratchr.org/blog/?p=34 – view page – cached I am infatuated with touch screen apps and Minority Report like user interfaces. Just imagine how this could change the craft of programming itself! Make scripting more fun and accessible, turn it into an activity that can be carried out anywhere and everywhere. Ubiquitous casual programming. Wouldn’t that be a blast? […]

  2. Mark Lee Smith Says:

    Great work Jens!

    I’ve been quietly following this since your first twitter about it and I have to say, it turned out even more amazing than I’d imagined. So much so that I went and reread all of the original papers on Morphic. Can’t wait to see where this goes.

    Morphic really is a beautifully elegant system. I really hope this encourages more people to take a serious look at Morphic.

  3. Mark Lee Smith Says:

    I just wanted to add a note about the Lively Kernel: Lively is a great project too (you go Dan!), but I find that it lacks the the overall simplicity and relative snappiness of Morphic.js. I can only speak for myself but this was what discouraged me about exploring the Lively Kernel further (though I expect this to change in the future).

  4. Jens Mönig Says:

    Thanks, Mark!

    The grand idea is to re-write BYOB completely in JavaScript at some time in the future (before we add some other features to the current Squeak implementation), but there are many open issues to that which I know nothing about wrt to HTML5 yet (e.g. reading and writing project files, networking, music etc.). Along the way I’d love to represent JavaScript itself as Scratch-like blocks, sort of what Elements does to Squeak. We’ll see…

    Isn’t it wonderful that there’s a renewed interest in Morphic? For some time I had the impression that many active Squeakers blamed Morphic for Squeak not becoming mainstream. I’m very glad that there are now new initiatives to clean up Morphic in Squeak and Pharo. Also, the Lively Kernel has gotten a lot faster since I first tried it. What turned me off about Lively was that I didn’t get its current version at the HPI to run in every browser I own (in fact it only worked decently in Chrome for me). Otherwise I think Lively is the coolest system since Squeak :-)

  5. Mark Lee Smith Says:

    > There are many open issues to that which I know nothing about wrt to HTML5 yet (e.g. reading and writing project files, networking, music etc.)

    At least with regard to read and writing project files projects like Lively Kernel and Clamato are using WebDAV. I haven’t looked at how it works yet but I think it would be very useful in Morphic.js. At least if you want to be able to read and write code inside the Morphic environment.

    > Isn’t it wonderful that there’s a renewed interest in Morphic?

    It’s absolutely fantastic. I just hope it continues!

    > For some time I had the impression that many active Squeakers blamed Morphic for Squeak not becoming mainstream.

    Over the years I think Morphic has been steadily collecting the blame for the confusing combination of Morphic, MVC, Tweak, EToys etc. When Juan Vuletich’s releases his work on Morphic 3.0 I’m sure Morphic will recover but we probably need better housekeeping going forward :).

    I’ve been using Cuis as my main image for a while now and find it very refreshing, mainly because of how it’s Morphic only.

    > What turned me off about Lively was that I didn’t get its current version at the HPI to run in every browser I own (in fact it only worked decently in Chrome for me).

    It’s currently crashing Safari 5 as well, but I’ll certainly be watching Lively as it develops. There’s a lot of potential there.

  6. Markyparky Says:

    Now THAT is EPIC JAVASCRIPT.

  7. Rożne | Wiadomości o technologiach IT Says:

    […] Nowy język – morph – http://www.chirp.scratchr.org/blog/?p=34 […]