The lunch-time hack: Day 1 - Playing with processing.js

This demo is part of a series call 'the lunch-time hack' where I have 15 minutes to create a cool demo. Read more about the project. Read the blog post for this demo.

Follow @iblamefish

Aim

To get something working in processing.js

Description

Move your mouse around the black rectangle. The circles with distort based on the motion of your mouse, and the colour will cycle through the HSB space every ~10 seconds

The 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;
}


Created by Clinton Montague (@iblamefish) as part of the lunch-time hack series

Read more about the project. Read the blog post for this demo.