Code that allows you to post and run Processing sketches on Tumblr

processingOnTumblr.html

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 
	<script>
// processing.js loader 
// by Abe Pazos - 23.01.2014 - http://funprogramming.org
//      Updated - 04.07.2016

// 1. Install this script:
// A. Your Tumblr html template should include jquery. If missing, paste 
//    the first line above to load jquery. If jQuery is already available
//    in your theme, don't include that line.
// B. Paste this <script ... /script> block inside the head tag.

// 2. How to post a Processing sketch to Tumblr:
// A. Create an "image post" on Tumblr. The image should be a thumbnail of your program.
//    The image is shown if this code does not work.
// B. Paste the source code of your program below the image.
//    The code must include "void setup" somewhere.
// C. DON'T USE // comments, only /* ... */
// D. Surround < and > characters with spaces: "a < 7" instead of "a<7".
// E. Click post.

$(document).ready(function(){
   var p5posts = $("div.photo.post:contains('void setup')");
    if(p5posts) {
        var p5canvasCount = 0;
        var p5loaded = function() {
            p5posts.each(function(index) {
                var p5img = $('img', $(this));
                var p5codeContainer = $('div.caption', $(this));
                if(p5img && p5codeContainer) {
                    var p5code = $(p5codeContainer).text();
                    var rx = /size\s*\(\s*(\d+),\s*(\d+)\s*\)/g;
                    var result = rx.exec(p5code);
                    var w = result[1] || 500;
                    var h = result[2] || 500;
                    var canvasID = "p5_" + (p5canvasCount++);
                    $(p5codeContainer).css({ fontFamily: 'monospace', marginTop: '25px'});
                    $(p5img).hide();
                    $(p5img).last().after('<canvas id="' + canvasID + '" width="' + w + '" height="' + h + '">');
                    new Processing(canvasID, '/* @pjs pauseOnBlur="true"; */ ' + p5code);
                }
            });
        }
        $.getScript('http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js', p5loaded);
    }
});
</script>