Processing in JS panel

by Reusablecode

HTML

<canvas width="200px" height="200px"></canvas>

CSS

</style> 
<script type="text/javascript">
    window.addEventListener('load',function() {
    var scripts = document.body.getElementsByTagName('script');
    var canvases = document.body.getElementsByTagName('canvas');
    new Processing(canvases[0],scripts[0].text);
}, false);
// Here prevent javascript in body from throwing error
</script>
<style>

JavaScript

/* 
   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;  
 }