member since March 6, 2012
profile picture

portfolio of
Joe Dixon



Jerry The Void Fish

Use the letter and number keys to direct Jerry the Void Fish around the screen. Holding a key down will make him swim faster.

Jerry's light attracts precious Void Krill, which will make his light brighter, illuminating the gloom.

Press the same key a lot, quickly, to form a vortex to suck Jerry in. Pressing another key while he's "vortexed" will teleport them to that key's location.

Quickly forming vertical or horizontal lines with keys will make the camera shift with Jerry's movements.

Press too many different keys too quickly and Jerry will explode. Press any key to retrieve him.

[DRAFT] Jerry the Void Fish


Use your letter and number keys to move Jerry around the screen.

Keep making ripples in the same location to create a void, sucking Jerry in. While he's in the void you can teleport him across the screen with a press of a button.

Don't overload him with keys though - he'll probably explode on you.


Use the keyboard to move this guy around.

Made some mainly aesthetic changes, he now has eyes and a tail, and will swim along to a point instead of just bolting there. His explosion if you press too many keys too fast is now a little more epic too. The background will change if you form a horizontal line on the keyboard, but this wont be a permanent thing - more just me playing with how I can integrate the shape recognition I've already coded into the interaction.

Touchkeys 2

An extension on my first applet on TouchKeys.

What's changed?
- Key "squares" have changed to circles. This helps dissociate the "key" from what is happening on the screen - this idea's not about the keys, it's about the movement.
- Shape recognition. Processing will recognise when vertical and horiztonal lines are made on the keyboard. I haven't found a practical use yet, but the lines around the screen will get bigger the better your line. Be quick!
- Characterising elements in the dot: reaction time and meandering once the keyspots disappear.

I feel like I'm getting somewhere. Feels good.


Press your letter and number keys to send the little ball around the page.

An experiment trying to use the keyboard as a continuous form of input (like a mouse) rather than a discrete one (like a... keyboard).

Nothing very polished here - just laying down the intitial skeleton which I can add some guts to later on.


Something a bit more interesting for DSDN142 P2.

You can find my full rant about this at my blog,

Note: The sketch isn't interactive and will run forever. It may be quite processor-intensive - there are a LOT of floats in there...


For DSDN 142 p2.

Me learning how to use objects. The fact I used an object turned out to be not-so-helpful in this, but it's good to have a better understanding nonetheless.

Play around!
y = increase y scatter
u = decrease y scatter
x = increase x scatter
c = decrease x scatter
f = fade off
g = fade on
click = pause
q = start decay
w = keep size
e = start growth
k = less dots

You can make a huge amount of patterns and stuff with those keys. If you don't really understand what one of them does, put it on fade (g) and investigate.

Card Box Changing Attributes

Some on-task work. Pretty boring changing of standard attributes. Probably wont be using any of this, except maybe stroke (in its extremities), curvature, and rotation (if I can talk my way around it).

Press to increase:
h = height
w = width
l = length
t = angle
c = curvature of lines
s = stroke

Card Box Collapse

Applied the gravity equations to my box of cards. Glitches out toward the bottom of the screen, but I only needed the first few bounces for my final work.

Screen's a bit big, so hit the expand screen button on the bottom right to see the full view.


Made gravity. A bit buggy for when it gets to the ground so I kinda cheated with it.

Still a bit buggy in some areas, especially when you increase gravity (the ball just sticks in the ground), but not bad.

UP/DOWN - Decrease/Increase gravity
RIGHT/LEFT - Increase/Decrease speed
ENTER/BACKSPACE - Increase/Decrease ball size.
CTRL - Change background colour (well why not??)


Click and click again to pause and unpause.

Another off-track moment... This time experimentin with redrawing backgrounds with low opacity to create a fade.

Pattern Generator

After trying out how to work "while" loops I ended up with a bunch of "if" statements and a loop anyway. Hurrah!

Keep the generator going for a while - if you stare at it for a bit different shapes and patterns (no!) start to pop out at you. Kinda.

Card Box... Almost

Move the mouse around the screen to change the colour of the shape which is forming. Click to pause, click to resume. Experiment with pause, move mouse far away, unpause, move mouse far away, etc etc. You can get some cool patterns.


I started drawing a 2D image of a box of cards. However, when I changed values of theta to rotate the box, everything seemed to break.

So I set theta to theta=theta+0.01 to where where the errors were occurring. But as it turned out, constantly increasing theta did much cooler things than investigate where my box broke...

"Sidetracked" is an understatement.

Moving Squares

My first play around on Processing after my first DSDN 142 tutorial at university. Pretty basic stuff, but I had a laugh making it. There are probably way easier ways to do the same thing, but I've kinda worked with what I know.

Move the mouse around.

The bottom right corner isn't very exciting, the B value seems to hit zero really fast - not sure why, didn't want to invest too much time in finding out why. Forgive me.
followed by

collections and classrooms

not contributed to any collections or classrooms yet.


Share Share Subscribe to sketches