ProcessingJS 101
by Ehsan Ziya
HTML
<canvas id='test'></canvas>JavaScript
var canvas = document.getElementById('test');
//initalize a processing on a canvas elemnt
var processing = new Processing(canvas);
processing.setup = function(){
processing.size(400,400);
processing.background(100);
processing.draw();
}
processing.draw = function(){
processing.loop();
var mX = processing.mouseX;
var mY = processing.mouseY;
//processing.fill( 2, 50 , 200 );
processing.fill( 0, 121, 184 );
processing.ellipse(mX,mY,50,50);
processing.mousePressed = function(){
//console.log('test');
processing.fill(100);
processing.triangle(30, 75, 58, 20, 86, 75);
console.log(mX);
}
}
processing.setup();
//processing.stroke(1);
//processing.ellipse(50, 50, 25, 25);
//
//processing.println("hello web!");
/*
// Click within the image to change
// the value of the rectangle
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mousePressed() {
if(value == 0) {
value = 255;
} else {
value = 0;
}
}
*/