Processing: Simple Sketch

Simple Processing Example in the Fiddle

HTML

<canvas id="canvas1" width="200" height="200"></canvas>

CSS

canvas {
 position: absolute;
 width: 100%;
 height: 100%;
 overflow:hidden;
}

JavaScript

function sketchProc(processing) {
   var p = processing; //p represents

    // Global variables
    var max_distance;
    
    // Setup the Processing Canvas
    p.setup = function() {sdfadsadsadssa
    
    
    
    
        
        p.size( 873, 648 );
        p.smooth();
        p.noStroke();
        
    max_distance = p.dist(0, 0, p.width, p.height);
         
    }; 
  processing.draw = function() {
      
    p.background(51);
   
    for(var i = 0; i <= p.width; i += 20) {

        for(var j = 0; j <= p.width; j += 20) {

            var size = p.dist(p.mouseX, p.mouseY, i, j);

            size = size/max_distance * 66;

            p.ellipse(i, j, size, size);

        }

    }   
   
  };
}

var canvas = document.getElementById("canvas1");

// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it