Hello Processing

Simple Processing Example in the Fiddle

by mmansion

HTML

<div id="wrapper">

<h1>Hello Processing.js</h1>

<p><canvas id="canvas1" width="200" height="200"></canvas></p>
    
</div><!-- end wrapper -->

CSS

h1 {
 color: brown;   
}

canvas {
    
 border: thin black solid;   
}

JavaScript

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

    // Global variables
    var max_distance;
    
    // Setup the Processing Canvas
    p.setup = function() {
        
        p.size( 873, 648 );
        p.smooth();
        p.noStroke();
            
        max_distance = p.dist(0, 0, p.width, p.height);
         
    };

    // Main draw loop
    p.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