Lunch-time hack: Day 1 – playing with processing.js

June 6, 2011

It’s certainly not the most exciting thing you’ll ever see, but hopefully things will start to change over the coming weeks/months when I really start to get a feel for which effects are created by certain of code.

For my first lunch-time hack, I thought I’d give myself an introduction to processing.js. It’s not very complicated, but it’s got all the basics in there:

Interaction with the mouse
playing with colours
drawing circles and rectangles
basic animation loop

See demo →

The processing.js code

float radius = 5.0;
float diffX = 0, diffY = 0;
int X, Y;

int WIDTH = 500,
	HEIGHT =300;

void setup()
{
  size(WIDTH,HEIGHT);
  strokeWeight (1);
  background(0);
  fill(255);
  frameRate (30);
  X = 50;
  Y = 50;
  colorMode (HSB);
}

void draw(){
	//radius = radius + sin (frameCount / 8);
	fill (0, 0, 0, 25)
	rect (0, 0, WIDTH, HEIGHT);
	fill (frameCount%255, 100, 100);
	ellipse (X, Y, radius + diffX, radius + diffY);
	 }
void mouseMoved () {
	diffX = abs(X - mouseX);
	diffY = abs(Y - mouseY);
	X = mouseX;
	Y = mouseY;
}

If you have no idea what the lunch-time hack is all about, please read this blog post explaining it.

See demo →