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.

Having a play around with bezier curves

 

To begin with I copied this code. Then I decided to play around with it a bit, so I added in some mouse action by changing the control values for the coordinates of the control points of the bezier curves to mouseX and mouseY so I could manipulate the way they moved. I used the sin and cos functions on the first set of control points just to see what would happen, and added the wee circles at the tips and used pink as a fill just for fun. This was more about me trying to learn more about trig, bezier curves and mouse interaction. I was still toying with the idea of using trig in the eyeball program I was working on.

Adding in code I didn’t understand

These clips show what happens when you decide to add some code into yours without knowing what it does. I wanted to make the eyes look like they were watching the cursor. It was beyond my skill level and amount of time I had to do the coding in.

The code I spliced into mine was for static eyeballs and so the results I got with my moving eyeballs were unexpected and weird. I decided that given time constraints I wouldn’t try to figure out why this was so but I think it had something to do with the calculation of the angle between the eye and cursor and the use of noise to create the shape and default movement of the eyeballs. I think it is probably similar to the problem I would’ve had if I had tried to implement a colliding aspect into the code. A friend who is a bit of a whiz with coding, in my opinion, told me it would be easier if I had perfect circles for calculating the angles for the collisions and I  assume this is a similar reason for the troubles I had here. I think because both the cursor and the eyeballs were constantly moving, I needed to do more than calculate the one angle, but I am really not sure. I need to learn about atan2(), pushMatrix(), popMatrix() and translate().

About to post a whole mess of clips

I finally completed my coding assignment. It hasn’t been an easy journey and I have a number of clips of the code in action as I have progressed. I really need to clean up my act and blog after I have done something new. It isn’t good leaving it to build up and then have to remember what I was thinking at the time.

There are a lot of clips, some short; some long; all of it documentation of the process. I will try to add a few words with them. There will be a few with links to the code on the open processing site.

Playing with the Interactive Mouse

This is where I am at so far.

Mouse Interactivity

I could change the colour or size of the stars perhaps even the rate they twinkle depending on where the mouse is on the screen on the x or y-axis or both.

It would be kind of cool to get the eyeballs to follow the mouse as if they are watching it. So I figure those are the first blocks of code I should tackle.

This isn’t going well at all. I have no idea what I am doing and the eyeball watching thing didn’t work. I think it has something to do with how I have the eyeballs moving by default. It makes it hard to pin them down so to speak. As Edina Monsoon from Ab Fab would say, “squish, squish… “.

The swivelling watching eyeballs is out. It’d be easier to do if the eyeballs were static and not floating around, but that wouldn’t be much fun.

I do have them responding to the mouse though. I incorporated some code from a book I got out of the library, so they now look like they are being swiped away by the cursor.  “Pushing” the eyeballs aside causes the irises to turn red as they bounce off the edges and start to crowd back into the middle of the screen.

I’ve had to modify the code a bit though as the noise functionality I had in place was affecting the mouse interaction. The way I had it originally meant that it was difficult to see if the eyeballs were actually interacting with the mouse. So they are no longer moving as freely as they were when not being interfered with by the mouse but they do still float randomly just not as noticeably as before, tending to slow down gradually. They have a nice swarming type of effect going on when the numbers of eyeballs build up.

No collision, focus on the mouse

Angela had a look at where I was up to with my interactive mouse toy and liked my eyeballs in space idea. She liked the way they moved and the transparency of some of them. She told me not to worry about making them collide as she liked the way they floated past each other and the fact that it would take some fairly complex code to get them colliding properly. So I am going to focus on making them interact with the mouse. Angela suggested that I make it fun but not too random. The user has to gain some idea of what is going to happen when they interact with the eyeballs via the mouse but not so much of an idea that the novelty wears off too fast.

So now I have to figure out what to make them do and which methods would be useful. I will have to use conditionals and I was considering the lerp method in some way. Angela told me about map() which I can use to convert values from one thing into another. That sucks as an explanation, I’ll explain it better later when I explain lerp() as I understand it. Though I am not sure I really understand anything. Anyway, I have come across pmouseX and pmouseY which is where the mouse was in the previous frame and I can use methods such as mousePressed(), mouseDragged(), mouseReleased() and mouseMoved(). I just need to decide how to use them to provide the interactivity. I think it may require a bit of playing around…

Figuring Out Collision

I am trying to get my head around making my eyeballs collide with each other. I plan to get them all colliding first before I add in the conditions about opacity affecting collisions. There is a section in chapter six on page 143 of Algorithms for Visual Design (2009) that covers basic collision simulation. I am not even looking at anything to do with physics at the moment. The fact the eyeballs are in space probably doesn’t warrant worrying about it too much anyway.

Back to coding colliding eyeballs…. I am going to try to put what I think needs to happen in order for the eyeballs to collide into based on what I have read. I’ll modify anything I get wrong after I have found some other information on creating collisions, then write-up some pseudocode and attempt to code it.

What I get from the AfVD book on collision is that first I need to identify if two objects, in this case eyeballs, are “touching” each other.
So I need to find the position of one in relation to another one so the distance between the xy axis of them can be found. To do this I need a current element and then loop through the other elements to see if one of them is in contact with the current one and find the distance between the current one and the other elements, using the dist() function so I don’t have to worry about coding crazy math equations to figure it out.
So I have an array of eyeballs already, called Sprites at the moment and I need another array to hold all but the current eyeball for the comparison bit. The code in the book makes use of an ID to identify the current element thus differing it from the other elements so it can be compared against them. Is there another way to do this? I’m not sure I entirely understand this bit.
I think I’ve misunderstood what the code is doing. According to the book I need to assign an ID to the current element and all the other elements are held in another array so that they can then be compared against the current element to determine the distances between them and it.
If there is one within the right distance, in this case twice the radius then the angle of approach is calculated using atan2(). I have no idea what this function does and I don’t get the book’s explanation of it. Something to do with returning the “angle between a line passing from the point and the origin and the x-axis” (pg144, Terzidis, 2009) by taking the difference between the x & y coordinates of the two elements. The angle returned is used to figure out the position of the elements after the collision which is used to reverse the direction of the two elements so they look like they are deflecting off one another. But I need to look a bit further into this bit of code as I don’t think I really understand it. Particularly the trigonometry.