mrben.co.uk

Processing.js - Playing with particles and transitions

June 9, 2010

After having used Processing on and off for a couple of years I decided it was time to have a play with Processing.js. Heavily inspired by this I decided to have a play. This is my current "train-project" to keep me busy on my crazy daily commute - expect lots of changes and hopefully some polish sometime soon.

Oh, you'll need a decent and recent browser (Chrome or Firefox - unfortunately this doesn't work with Safari).

Categories: Fun, Processing

View Comments

Geek Love!

Feb. 14, 2009

Happy (Saint) Valentine's Day!

Today I very quickly sketched an animated Valentine's card in Processing :-). The hearts jiggle about in a heart shape and return home only to jiggle about some more every 15 seconds or so.

Click the heart to start the animation.

Categories: Fun, Processing

View Comments

Dancing Circles

Oct. 13, 2008

OK, it's finally time to show my circles on here. I've tried and tried to make a video of them but the each frame render takes too much time and the video ends up being longer that the actual time I was recording for.

There are workarounds but I like playing the thing "live" - pressing buttons to move the circles about. There are a few photos in my Flickr Processing set.

So .. if you can be bothered there is a 30MB download. It's because Sonia likes Wav files and dislikes MP3s. Like I say, I wanted to stick a video on Vimeo but that was proving a pain. Each circle represents an "FFT bin" and the diameter its level.

Download:

• Mac OS X
• Windows
• Linux

The intention is that the user controls the visualization. Push the circles to the bottom for the quite bits, then explode them up when the music kicks in ... whatever. There's a bug I left in deliberately: after using the hard left or right controls pressing the space bar makes the circles move along the X axis quickly, then the Y axis slowly. It's kinda nice. If it annoys you reset the visualization (see controls below).

Controls (all lower case):

• wasd - hard UP, LEFT, DOWN, RIGHT
• Space - move to random location
• m - move to centre of window
• c - randomize colours
• i - reset circle positions, movement speeds and randomize colours
• r - circles run away from the mouse
• Arrow keys - nudge circles
• q - quit

Source code, created by Processing mangling my source into Java is provided in the download. It's not particularly neat code, but this didn't take particularly long to make!

Take it easy.

Categories: Fun, Processing, Visualization

View Comments