Delayed Mouse Tracking

by katalin_2003

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 = 16;

    // Setup the Processing Canvas
    void setup() {
        size(200, 200);
        strokeWeight(10);
        frameRate(20);
        X = width / 30;
        Y = width / 30;
        nX = X;
        nY = Y;
    }

    // Main draw loop
    void draw() {

        radius = radius + sin(frameCount / 4);

        // Track  circle to new destination
        X += (nX - X);
        Y += (nY - Y);

        // Fill  canvas grey
        background(100);

        // Set  fill-color to blue
        fill(100, 100, 255);

        // Set  stroke-color white
        stroke(255, 0, 200);

        // 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>

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