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);
}
}
}
<script type="application/processing">
/*
PROCESSINGJS.COM - BASIC EXAMPLE
Delayed Mouse Tracking
MIT License - Hyper-Metrix.com/F1LT3R
Native Processing compatible
*/
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = width / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 100 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle's next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
</script>
<canvas width="200px" height="200px"></canvas>