Processing 01

HTML

<script type="application/processing">
// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
float x;
float y;
float targetX, targetY;
float easing = 0.03;

void setup() 
{
  size(200, 200); 
  smooth();
  noStroke();  
}

void draw() 
{ 
  background( 51 );
  if(mousePressed) {
  targetX = mouseX;
  targetY = mouseY;
}
  float dx = targetX - x;
  float dy = targetY - y;
  if(abs(dx) > 1) {
    x += dx * easing;
  }
  

  if(abs(dy) > 1) {
    y += dy * easing;
  }
  
  ellipse(x, y, 33, 33);
}
 </script>
<canvas width="200px" height="200px"></canvas>

JavaScript

// processing test 01.

var scripts=document.getElementsByTagName("script");
for(var i=0;i<scripts.length;i++) {
    if(scripts[i].type=="application/processing"){
        var src=scripts[i].src,canvas=scripts[i].nextSibling;
        if(src&&src.indexOf("#")){
           canvas=document.getElementById(src.substr(src.indexOf("#")+1));
        }else{
            while(canvas&&canvas.nodeName.toUpperCase()!="CANVAS")
                canvas=canvas.nextSibling;
        }
        if(canvas){
            new Processing(canvas,scripts[i].text);
        }
    }
}