Circles

HTML

<script type="application/processing">
float max_distance;

void setup() {
  size(400, 400); 
  smooth();
  noStroke();
  max_distance = dist(0, 0, width, height);
}

void draw() 
{
  background(51);

  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= width; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 66;
      ellipse(i, j, size, size);
    }
  }
}
 </script>
<canvas width="200px" height="200px"></canvas>

JavaScript

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);
        }
    }
}