Did some more searching, but still didn't found any other examples of this type of embedding sketches on Tumblr.
I think the header code is ok...
- <!-- Processing.js Header -->
- <script language='javascript' src='http://www.archive.org/download/Processing.js/processing-1.0.0.min.js'></script>
- <script language='JavaScript'>
- /*Swiped from https://github.com/annasob/processing-js
- * This code searches for all the <script type="application/processing" target="canvasid">
- * in your page and loads each script in the target canvas with the proper id.
- * It is useful to smooth the process of adding Processing code in your page and starting
- * the Processing.js engine.
- */
- if (window.addEventListener) {
- window.addEventListener("load", function() {
- var scripts = document.getElementsByTagName("script");
- var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
- var canvas;
- for (var i = 0, j = 0; i < scripts.length; i++) {
- if (scripts[i].type == "application/processing") {
- var src = scripts[i].getAttribute("target");
- if (src && src.indexOf("#") > -1) {
- canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
- if (canvas) {
- new Processing(canvas, scripts[i].text);
- for (var k = 0; k< canvasArray.length; k++)
- {
- if (canvasArray[k] === canvas) {
- // remove the canvas from the array so we dont override it in the else
- canvasArray.splice(k,1);
- }
- }
- }
- } else {
- if (canvasArray.length >= j) {
- new Processing(canvasArray[j], scripts[i].text);
- }
- j++;
- }
- }
- }
- }, false);
- }
- </script>
But the main problem lies in what/how to post the sketch inside a Tumblr post. I've tried it as normal text or via the HTML post option. The latter does not display the text in the post (which is a somewhat good sign I guess, because the code is not seen as 'normal text'). However no sketch canvas is displayed either. I've tried the example code from the linked page.
- <script type="application/processing" target="can010101">
- int circX, circY;
- void setup() {
- size(500, 280);
- fill(255);
- circX = width/2;
- circY = height/2;
- }
- void draw() {
- ellipse(circX, circY, 100, 100);
- circX = mouseX;
- circY= mouseY;
- if (mousePressed) fill (mouseX + mouseY);
- }
- </script>
- <canvas id="can010101" width="500px" height="280px"></canvas>
But no sketch window is shown on the page.