Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Code that allows you to post and run Processing sketches on Tumblr
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment