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.
To get something working in processing.js
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
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.