How to embed Processing.js sketches into Tumblr
Processing.js is "the sister project of the popular Processing visual programming language, designed for the web." What's great about processing.js is that the sketches you write can be placed into scripts, which can then be wrapped up in the HTML5 canvas element. This makes for an easy way of quickly getting your sketches embedded in your website, or in this case, tumblr. What's cool about that is along with text and photos, you'll also be able to include mini-games and other interesting forms of interactive art into your tumblr posts.
I'd like to take a moment to thank the various individuals who provided guides on how to embed processing into tumblr. These resources can be found here: http://forum.processing.org/topic/how-to-run-processing-js-on-tumblr http://tumblrplayr.tumblr.com/ http://artandcode.tumblr.com/ There are a few things you need to do in order to start embedding sketches into tumblr. The first thing you need to do is place this code into your head tag for your tumblr page. To do this, go to the Customize Appearance, then click "Edit HTML" under your theme. Find the <head> tag, which should be towards the top of your code, and copy and paste the above linked code into the head tag. Ensure that you aren't posting it into the middle of any previously existing code. Once finished, save and close, you shouldn't see any difference in the appearance of your blog. The purpose of this code is that it will search any posts you make that include the code:
<script type="application/processing">
This way, you can write your sketch under the processing script, and then point this script to a file hosted elsewhere that interprets what the processing script contains. The next step involves changing your settings under Preferences. Click on Preferences at the top of the screen and find where it says "Edit posts using." Click on the "plain text/html" option, save and close. Note, this step isn't permanent and it's only for when you want to create a text post for your code. If you try coding directly into the Post box, tumblr throws in a bit of extra code for it's purposes, and that will mess up the entire process. So, if you ever want to do regular posts, just go back into preferences and click it back to "Rich text." Now you're finally ready to post some code! Create a new text post and insert tags for both a script and a canvas element. The code looks like this:
<canvas id="canvasName" width="500px" height="280px"> </canvas> <script type="application/processing" target="canvasName"> /*Processing sketch code goes here/* void setup () { ... </script>
Basically, your processing sketch is being wrapped up in a script tag, and then inserted into the HTML5 canvas element, which is used to actually display your finished work. Make sure that the id of your canvas matches the target of the script, this way the script knows where to put itself. The width and height of your canvas can be changed at will, just make sure that the actual size of your processing sketch doesn't interfere with that. The final, and somewhat annoying trick, is that the code has to be done with no carriage returns, as in you can't hit enter and have your code on individual lines. Why, I have no idea. The best option that I found is to take your finished code, paste it into a simple text editor and delete out all of the line breaks. Once finished, it should look like one big blob of code with no paragraph breaks. Paste that code back into tumblr and everything should work out!
