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 = 10.0;
 int X, Y;
 int nX, nY;
 int delay = 10;
 
 // Setup the Processing Canvas
 void setup(){
   size( 600,800 );
   strokeWeight( 10 );
   frameRate( 60 );
   X = width / 2;
   Y = width / 2;
   nX = X;
   nY = Y;  
 }
 
 // Main draw loop
 void draw(){
   
   radius = radius + sin( frameCount / 20 );
   
   // Track  circle to new destination
   X+=(nX-X)/delay;
   Y+=(nY-Y)/delay;
   
   // Fill  canvas grey
   background( 50 );
   
   // Set  fill-color to blue
   fill( 0, 121, 184 );
   
   // Set  stroke-color white
   stroke(255,255,255,128); 
   
   // Draw  circle
   ellipse( X+50, Y, radius, radius );  
   ellipse( X, Y, radius*2, radius*2 ); 
 
    for (i=0; i<50; i++){
    
       ellipse( X+5*i, Y+30*i, radius+i, radius+i );                   
    }
 }
 

 void mouseMoved(){
   nX = mouseX;
   nY = mouseY;  
 }
 </script>
<canvas width="600px" height="800px"></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);
        }
    }
}