Run processing.js code in Tumblr

hamoid

I posted this two months ago on Tumblr and I thought it might be interesting for someone:

http://hamoid.tumblr.com/post/74306133277/run-processingjs-on-tumblr

What does it do? It's a bit of JavaScript code you insert in your Tumblr theme, which allows you to post images + processing.js source code to Tumblr, and have that code run.

Why? If you want to post animations to Tumblr, you are extremely limited by animated gifs. An animated gif can easily weigh 1 Mb, and only allows about 40 frames of animation in Tumblr. If you post the code instead, it will probably occupy less than 0.01 Mb, and allow endless animation.

How does it work? The image you post will be shown in your archive and if the JavaScript code fails. When people open the Tumblr post, the JS code will read the source code (which you posted as a description to the image), it will hide the image and insert a canvas object running your program.

Note: the description should be 100% runnable code. It's easy to forget that you are writing code and start writing plain text as you do in other posts, which won't work. If you want to tell a story, begin each line with // .

Firebug is your friend when debugging this. Comments and improvements are welcome :)

dawnspectraa

Cool!

hamoid

By the way, if you ever use this, don't include // comments in your code! Use /* ... */ instead.

I just spent half hour finding out why this did not work. What happened is that my // comments affected not just until the end of the line, but all the following lines too, basically breaking my program. And there are no meaningful errors, so I just kept deleting code until I noticed what was the problem.

I wonder if I could fix the script to respect line ends or automatically transform // comments into /* ... */ comments...