The Final Piece

Alien Eyeball Creature in Space code.

I don’t think this interactive mouse toy would be the same without the colours that have been used in it. It would have been less visually interesting if I had left it with twinkling white stars as it would have been one less layer to discover while playing with it. I wasn’t happy with the irises turning and staying red once the mouse had interacted with an eyeball so now every time the mouse interacts with them they turn the colour which has the opposite value to the current colour. This is a subtle change like the star colours changing as the user is more likely to be engaged with making the eyeballs move around for a while before they notice the change of colours. I think the pupil size expanding and contracting in relation to where the mouse is like this too. Another change to the code has been the inclusion of bezier curves that connect the eyeballs together so they become like an organism of individual yet connected beings in space. Joined together and pulling others into the space to see the odd being in front of them, yet acting individually to the interaction with the mouse. I feel this adds a layer of surprise to the interaction and it is essentially a reward for those who pay attention to small details.

I used only four input methods for the mouse:

• mouseMoved()
• mousePressed()
• mouseDragged()
• mouseReleased()

They can be used individually to invoke their own block of code or “combined” to introduce some novelty into the interaction. These effects will come into play when the user experiments with the interaction via the mouse input.

The mouse interactions are easy to learn, move, press, drag and release. I think the fun of it comes from combining the mouse inputs in different ways, playing with the speed you come at the eyeballs and the small changes in details that you notice over time if you’re engaged with the toy. Leave the eyeballs alone and you notice they have their own movement as well and have a tendency to congregate towards the centre of the screen as if swarming in to watch you. Swipe them with the hand and they get out-of-the-way but they come back to watch you again and every time one dies, there is another to replace it. You can’t get rid of them. They are like flies at a picnic on a hot summer’s day.

So a wee list of effects:

• stars change colour when mouse moves along x-axis
• stars change opacity when mouse moves along y-axis
• moving the mouse pushes the eyeballs away from cursor in the same direction the cursor is moving
• dragging the mouse has a similar effect to moving it except that the eyeballs move in the opposite direction to the cursor
• when the mouse in pressed the eyeballs already on the screen snap to the position of the cursor while new ones continue to spawn wherever they want on the screen
• release the mouse and whatever direction the eyeballs were going in is now reversed and they speed up slightly too
• the pupils of the eyes enlarge or contract in relation to the distance of the mouse from them
• the irises of the eyes change between two colours that have opposite values when the mouse comes in contact with the eye

You may notice that some of the irises don’t appear to change colour, this is because of the use of HSB. For some iris colours the opposite value is the same colour as the current value. Kind of like a wheel.

It would be nice to figure out the eye swivelling and implement that as I think that could look quite nifty. I think perhaps it would be good to have some eyeballs appear to go past the frame before bouncing back in. Other than that, I am happy with the interactivity. I think there is enough going on to retain interest for a while. The eyes have a life of their own when not being played with, which I like. There is a slight creepiness factor to the toy the first time it is played with and that may even happen again if you leave it running and then come back to an organism of eyes eyeballing you. Haha, how cool would motion detection be?! Have them swivel to look at you as you move around. But I also think after playing with them for a bit they become less creepy and slightly cute maybe?….

The Journey to the Final Code

I wanted to find a default motion to begin with and came across the noise() function as a way to create a more smooth looking motion than random would.  Ken Perlin created “Perlin noise” to achieve a more organic, smooth-looking randomness than random did.  Noise only computes pseudo-random numbers between 0 and 1, so it has to be multiplied by something such as the width and the height of the screen in this code for the x and y-axises. The result that noise spits out is tied to the input so the same input will always produce the same value, hence the reason for two different starting inputs for x and y and increment the time values for x and y that are the inputs for the noise function. The code for this came from an exercise in Daniel Shiffman’s Learning Processing book that required me to complete some code for using Perlin noise to set the ellipse’s location. I decided to go a step further and add in the contraction and expansion of the ellipse using the values output from the noise function and a little mouse interaction that causes the ellipses to go nuts over time by increasing the increment by the sum of mouseX and Y multiplied by a tiny percentage.

The three ellipses I had created in the noise coding exercise kind of reminded me of eyes so this next clip shows the progression to them resembling eyeballs which felt quite creepy to watch to start with. The background was pretty plain and a friend suggested stars might look quite cool and give it a space theme. Thus, eyeballs in space was spawned. I created an arrayList so that I could have a whole heap of eyeballs spawning and dying and used modulus to control the rate of birth and death. I decided it was best to use a bit of OOP for the coding and created classes for the eyeballs, stars and for arrays of them both given that I wanted a screen of stars and loads of eyeballs. To create twinkling stars, I used a narrow randomized colour spectrum to obtain white and randomised alpha values for the opacity. The function was called within draw so it was continuously called to create the twinkling effect. The code can be found here: http://www.openprocessing.org/sketch/80403

I also rewrote the code to use PVector but I didn’t like the movement of the eyeballs as much so I scrapped it. Vector Eyeballs

I left the randomising white star code in but it was a little boring and I wanted to add something a little subtle as well. The stars are tiny compared to the eyeballs and so I decided to add a little colour into the mix with the stars changing colour and opacity depending on where the cursor was on the screen.

I added this method to the star_nursery class and called it inside the draw method.
public void changeStarColor() {
colorMode(HSB);
for ( int i = 0; i < starCollective.length; i++) {
float hueVal = map(mouseX, 0, height, 0, 255);
float alphaVal = map(mouseY, 0, height, 0, 255);
stroke( hueVal, 255, 255, alphaVal);
starCollective[i].displayStar();
}
colorMode(RGB);
}

I used a couple of new methods: map() and colorMode(). I used HSB values for the colour change as I only wanted to change the hue and I had problems with figuring out how I could easily create the spectrum of colours I wanted using RGB. I found out about using HSB at Fun Programming. For more about HSB, see the wikipedia page. Yes! It is lazy going to wikipedia for information but it is a useful place at times and especially as a beginning point. I had to declare the color mode for HSB before using it and then reset it back to RGB after, because at this point in the code writing, the eyeballs were still RGB values. Don’t do this and you end up with red eyes…

Map() is, I think, my favourite new method. I’ve used it here to change the incoming values from the mouseX from zero to the width of the frame to colour values for the stars between zero and 255, so when the mouse moves along the x-axis the colour of the stars change according. I also did this for the alpha values of the stars using mouseY (moves along y-axis) to change the values.

So we finally get to the mouse and eyeball interaction. I fiddled with the stars a bit more, more twinkling and some randomization using modulus to choose certain stars to have different colours from others. The ones chosen using modulus twinkle with random colours while the others change with the mouse movement.

The eyeballs are constrained within the confines of the frame by using constrain() so when they reach an edge they “bounce” back into the screen. The irises turn red once the mouse has interacted with an eye and mouseMoved() changes the iris red and “pushing” the eye around the screen when the cursor gets within a certain distance of the eye’s position.

The code.

Pretty much the only change here is that the pupil increases and decreases in size depending on where the mouse is in relation to the eyeball.

Had to play around with the code for the pupil size a bit to get it so it didn’t grow larger than the iris or the eyeball. A few times while tweaking, a pupil would become so huge it would blot out the stars.

Some more code.

Clips of Processing coding examples and learning

Many of these are examples from books and sites on the processing language. Some are just me playing around trying to learn. They are in no particular order.

My sources are:

• http://funprogramming.org
• http://www.youtube.com/user/hamoid/videos?flow=grid&view=0
• http://processing.org
• Fry, B. & Reas, C. (2010). Getting Started with Processing. O’Reilly. (Kindle e-book)
• Glassner, A. (2010). Processing for Visual Artists: How to Create Expressive Images & Interactive Art. Natick, Massachusetts, USA: A K Peters, Ltd. (Kindle e-book)
• Shiffman, D. (2009). Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction. Burlington, MA, USA: Morgan Kaufmann. (EBL e-book)
• Terzidis, K. (2009). Algorithms for Visual Design: using the Processing language. Indianapolis, Indiana, USA: Wiley Publishing, Inc.