portfolio of
Steven Kay

Hilbert Curve Toy

Messing around with the Hilbert Space Filling Curve, Modular arithmetic and binary arithmetic.

Use the keys q,a,w,s,e and d to tweak parameters. Press space to try a random pattern.

Some interesting patterns:-
3/61/OR
12/18/AND
12/34/AND
21/106/AND
9/90/AND

If you find any other interesting settings, let me know!

DEM Browser

Digital Elevation Model (DEM) browser.

Move the mouse to the edge of the sketch to pan across the landscape in that direction.

Press [h] to turn cross-hatching on and off

Tartan generator

Generate random tartan patterns.

Click or press a key to generate a new tartan.
Press [s] to toggle tile edges on/off
Press [o] to zoom out
Press [p] to zoom in

haversine

Hilbert Jelly

Animated Hilbert Curve.

[+] more detail (be careful.. can be slow)
[-] less detail
[SPACE] toggle hilbert curve
[Click] Reset

http://en.wikipedia.org/wiki/Hilbert_curve

Edinburgh One O'Clock Gun

Visualising the speed of sound on a map.

When the one o'clock gun is fired, this sketch shows the sound waves travelling (in real time) on a map of the city. Each red circle represents a second.

[Click] to start again.

(should be real time if you can get 15 fps or more)

ringing the changes

visualizing a complete bell ringing sequence, using the Steinhaus-Johnson-Trotter algorithm. Uses SoundCipher library.

glitch animation

glitch animation.

use the mouse position to change the glitch (y axis) and detail (x axis).

Spirals revisited for processingjs

A straight port of a previous sketch to use processingjs. Done to compare speed and behaviour between the Java and JS versions.

Previous version:-

http://www.openprocessing.org/visuals/?visualID=10144

Seems there's a difference between floating point arithmetic in Java and Javascript, as the sketch appears quite different in the two versions :)

Photo Carousel

photo carousel / slideshow using various fade effects.

Click to go to next photo, using a randomly chosen effect.

You can create your own transition effects by creating a subclass of 'fader'. This should draw a mask image which gradually goes from black to white, which is used to blend between the start and end images.

Hydra

Okay, so recursive tree generation isn't the most original idea, but it is in 3D :-)

The settings give an acceptable frame rate on my machine (about 20-30fps). You might get more interesting results with more processing power and a bit of tweaking.

Shapes will change every so often, or press a key to change manually..

Bomb drop game

Bomb Drop game

Shoot the bombs that fall down the screen.
If a bomb hits the shield at the bottom, it weakens the shield.
The game ends when the shield is destroyed, and a bomb hits the bottom of the screen.

[Click] to fire
Press any key to start a new game.

Personal best is 118840, can you beat this? :-)

sun and moon

Click the mouse to switch between

- Solar corona
- Moon on a cloudy night

Globe

Globe, drawn in real-time using the Orthographic Projection.

Interactivity... Hold down one or more keys to rotate:-

[q] - rotate north
[a] - rotate south
[o] - rotate east
[p] - rotate west

[t] - toggle between nasa blue marble and nasa light pollution
[SPACE] - reset
[Click] - rotate to random place on globe

Edinburgh OpenStreetMap history

Visualising the mapping history of Edinburgh by the OpenStreetMap community. Older data is blue, newer data is red. Based on the timestamps of nodes.

[Click] to restart
[SPACE] to toggle display modes

zebra trails

move the mouse over the sketch to draw a trail.

click to cycle between different views.

zx spectrum loading screen

emulating a zx spectrum loading screen in processing

Galaxy Spirals

watch the spirals evolve and mutate slowly over time

Spirals

Spirals.. click to cycle through the various presets

stained glass

simple example of recursion..

random grid

interactivity:

use - and +/= to change zoom
use [space] to toggle between color and monochrome
[click] to change phase

SRTM Digital Elevation Model Demo

A simple rendering of digital elevation data. The area shown is Norway/Sweden, south of Oslo (Oslo is near the top of the screen).
An example of reading binary data.

This shows a 1x1 degree square; elevations are shown in greyscale (white=higher ground), sea is shown as blue, and void areas are shown in red.

Excitable Media Cellular Automata

yet another CA. Ported from a C# version I wrote a few years back, but now in 3D :)

Based on the idea of 'excitable medium', see the comments and

http://en.wikipedia.org/wiki/Excitable_medium

for more info.

Interactivity:
[Click] to start over

Planets

Using the simple equations of gravity.

Interactivity:
s - turn stroke on/off
t - turn trails on/off
[ - fewer planets
] - more planets
SPACE or click - reset

metaballs

metaballs effect

cannabilized from my earlier SqueezePast sketch

Interactivity
+ and - to add / remove metaball
[ and ] to change metaball radius
SPACE to cycle through colour schemes
q to toggle fast/slow

More info on Metaballs here:-
http://en.wikipedia.org/wiki/Metaballs

24 hours of Flickr geotagged uploads

Visualizing 24 hours of geotagged photos being uploaded to flickr.

Data was captured using the flikr api and written by a python script to a CSV file. So this is playing back historic data (from one day in March 2009).

Each 'flash' represents a single geotagged photo uploaded to Flickr. There is also a grid of 1x1 degree resolution, which are coloured according to the number of photos found in that grid square.

[q] speed up [a] slow down [z] slowest animation
[r] reset
[m] turn map on/off
[g] turn grid on/off
.

contour blur

squeeze past v2

A reworking of a previous sketch, to improve speed, implement some suggestions, and to add some interactivity.

You can see the original (slow) version here..

http://www.openprocessing.org/visuals/?visualID=6417

Optimized for speed by using a pre-computed table of distances, which (for me) improves the frame rate by a factor of 3.

[SPACE] cycles between the three display modes.

[PLUS] adds a new bubble

[MINUS] removes a bubble

[Q] toggles fast/slow - use this to compare the speed difference between using the pre-computed and normal versions.

Bounce game

Bounce and roll the ball along the track.

Use the mouse to move the ball forwards (up/down) and sideways (left/right).

Avoid touching black squares - hitting one loses you one of your five lives.

Yellow squares give a good score.

Cyan squares make you bounce twice as high.

Red squares makes the ball roll along the ground until you hit a cyan square.

You get high scores by doing 'combos' .. an uninterrupted set of bounces on yellow and cyan squares. Hitting any other type of square is a combo breaker ;-)

When it's game over, click to try again.

Harmonograph in 3D

A Harmonograph in 3D.

[Click] to start a new animation.

You can find more info on Harmonographs on wikipedia...

http://en.wikipedia.org/wiki/Harmonograph

Crystallization

a simple crystal growing system

a number of 'species' grow at predetermined speeds to fill the space available.

[Click] to start again

[r] to use random mode. Each species can start in more than one place.

[s] to use sparse mode. Each species starts in only one place.

[g] to toggle grid.

Spherical geometry

spheres rolling around on the surface of a sphere

Ripples in 3D

the effect of ripples in 3D.

Starts with 3 ripples of random amplitude and wavelength.
Ripples eventually fade out; when the surface is nearly flat it will start over again.

Mouse Y position controls tilt.

Press any key to add another random ripple (need to click first to give applet 'focus')

Click to start again.

Lissajous figures

Lissajou figures - click on the sketch to change the x and y frequencies (or wait a while, and they'll change at random)

Dodgeball

a simple game to test your coordination and reaction times.This is a port of a flash game I wrote many years ago.

Move the white ball around to avoid the bouncing red balls.

Use the powerups - some make the game easier, some make it harder (but make it possible to get higher scores). The splash screen gives more info..

mona lisa cube

image spread around a cube, then rotated.

coalescence

a very simple cellular automaton.
the population is randomly scattered between red and blue. on each generation, each cell is influenced to change allegiance to the majority color of its neighbours.

Click on the sketch to start again.

tiny script - binary fractal

doing a simple sierpinski triangle using simple binary arithmetic.

first attempt at a tiny script. Got down to 112 characters.

perlin noise dust field

inspired by this sketch ( http://www.openprocessing.org/visuals/?visualID=1163 ) to try the perlin noise functions.

Press [Space] or click to start again.
Press [t] to turn trails on/off

The pattern alters quite slowly over time.

tonnetzynth - a chord synthesizer

This is an interactive chord synthesizer developed using the minim library.

You can use this to try out chord progressions using a single click of the mouse. Have a play!

Click on the squares on the grid to play new chords; a left-click gives a major chord, a right-click a minor chord.

The waveform is shown too.

If you're wondering where the name comes from, google 'tonnetz' (german for 'tone network').

It's fairly basic at the moment. I'm sure there are lots of improvements that can be made to improve the musical quality...

Chaos Game

A randomized version of the Chaos Game...

Squeeze Past

A Voronoi map created from a set of moving points