Hello Processing 2

by mmansion

HTML

<canvas id="canvas1"></canvas>

CSS

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

JavaScript

function sketch(processing) {
    
    var p = processing;
    
    var max_distance;
    
    p.setup = function() {
        
      p.size(873,648);
      p.background(25);
      p.frameRate(24);
      p.noStroke();
        
      max_distance = p.dist(0, 0, p.width, p.height);
      
    };
        
    p.draw = function() {
        
       p.background(25);
        
        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);
            }
        }
       
    }; //end draw
    
}


//get the canvas element
var canvas = document.getElementById("canvas1");

//attach the sketch function to the canvas
var p = new Processing(canvas, sketch);