Delayed Mouse Tracking

by Kriem

HTML

<script type="application/processing">
 /* 
   PROCESSINGJS.COM  - BASIC EXAMPLE
   Delayed Mouse  Tracking  
   MIT License -  Hyper-Metrix.com/F1LT3R
   Native  Processing compatible 
 */  
 
 // Global variables
 float radius = 20.0;
 int X, Y;
 int nX, nY;
 int delay = 10;
 
 // Setup the Processing Canvas
 void setup(){
   size( 400, 400 );
   strokeWeight( 10 );
   frameRate( 60 );
   X = width / 2;
   Y = width / 2;
   nX = X;
   nY = Y;  
 }
 
 // Main draw loop
 void draw(){
   
   radius = radius + Math.sin( frameCount / 2 );
   
   // 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="400px" height="400px"></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);
        }
    }
}