Final Images for 'Mind Storm'

Images from my final application 'Mind Storm'. The full application can be found on my open processing page here.

Artists Statement

I really liked the idea that when you aren't thinking there is nothing happening, it is blank, which I represented using a straight line. I wanted to use a user interaction to show what happens when someone thinks because in your head nerves go crazy and in an image form this looks really awesome.

The interaction I originally had was when the user pressed the mouse button, I chose this as it was representative of when the user started to think about the application and then the line turned would turn into these pathways. They were controlled but random as seen in the images of the lightning, plasma balls and especially brain images. They are controlled in the way that they are only allowed in a particular direction but random in the way that they get to their destination.

I decided to go with using the distance function to create this chaotic active state as I decided to have the passive state mildly active also. In this I mean that it floats around the application of its own accord rotating in a particular way. I did this as the more I thought about how people think I realized that no one is ever not thinking. I also found that using the rotating circle looked better from a visual perspective and it also tied in nicely to having the user thinking as they went. When the mouse comes in contact with the rotating passive line it turns into the active electric state. I found this to be representative also of what the user is thinking. When the user is shown the active state it means they have actively sought out this reaction from the application.

The sound I chose for the application makes the interaction a more exciting experience for the user. I chose a quiet woosh noise with a hint of electric capabilities for the mildly active mode

Therefore I created an application that is passive as the user is passive but keeps them entertained through mild active movements which then turn into complete active movements when the user is being active through the application. This is allowing the user and application to interact and react with each other.

Development + Final Song Selection

I decided to use Electric Wooshes by Glaneur de Sons (http://www.freesound.org/people/Glaneur%20de%20sons/sounds/34172/) and Electrocute by Aust_Paul (http://www.freesound.org/people/aust_paul/sounds/30933/ ) in my final one, this was because the woosh sound had a slow and lazy feel to it which was good for the passive mode however it has a small electrical crackle at the end which hints at the potential for the large active mode. In the active mode the electric garring of the second sound was particularly appealing as it was fast and crazy just like the application in this state. I also played with different speeds of rotation, direction, stroke width for both active and passive.

Colours

To select my colours I used a compination of Kuler and the Colour selector in Processing. I liked blues so I looked at those colours

Sounds

Since the application was very close to electricity and lightning I wanted the sounds to reflect this. Similarly with the active and passive modes of the application. I decided I would use two sounds, one for each stage a passive quieter noise hinting at a bigger thing and a louder crazy electric noise for the active stage. I looked at freesound.org a website which users use creative commons licensing on their work.

These were the sounds that I liked and investigated on my project:

http://www.freesound.org/people/aust_paul/sounds/30933/

http://www.freesound.org/people/Deusi/sounds/128740/

http://www.freesound.org/people/LG/sounds/20223/

http://www.freesound.org/people/Glaneur%20de%20sons/sounds/34172/

http://www.freesound.org/people/pushtobreak/sounds/16796/

I looked up tags like Electricity, Electric, Ambient, Water and Wind. I heard lots of sounds but the above sounds were the ones I considered for my application.

New Mouse

Since the lightning interaction was now moving of its own accord I now needed to reintroduce the mouse. The new plan was to take away the click function and use the distance function. The user would have control of the mouse and their would be something to represent the current point of mouse of the screen (not the cursor). If this came into contact with the rotating line then the interaction would take place. I thought this was good progression from just a standard click. The idea of the brain being active and passive is still there however these is a new way of showing it. The user has to become active in order to pursue the rotating line or they can be passive until the line reaches them. This is similar to thoughts, you can be extremely active in them or you can be passive until you have a brainwave. I liked how this turned out.

Directions

After another session talking with my peers and my tutor it became apparent that having the main part of the application move around the page of its own accord would be a cooler action to take place. I learnt how to make this happen which was good for developing my skill set. I also liked the way this looked on the page. However I removed the style from the previous one in order to enable the user and myself to both see the images more clearly.

Spinning and Style

To make the interaction more intersting and after conculting with my tutor I decided to have the line rotating. I had never used rotate and transform functions before so they were good to learn. I also played with the style of the application making it look cobwebby by not calling a new background and making the lines thin and transparent. The effect looks really amazing, very artistic and the reaction/lightning when the mouse is clicked is very effective in this style.

The lines

I added a line to the image and introduced a mouse pressed function. When the mouse is pressed the image just shows a line. However when it is pressed we start to see the beezier curves. For some reason they all went straight up and looked interesting but was not what I wanted. So my next step will be to make the curves more around the line and more random.

The storm

The first thing I decided to do was code the lightning reaction. I decided to use random points using variables and beezier curves as they look really interesting and can be unpredictable but controlled just like lightning. I really liked the effect this created and decided that my next step would be to add a line and an interaction.

What I'm going to do

After viewing some images and thinking about my concept designs I decided on a completely new idea.

I really liked the idea that when you arent thinking there is nothing happening, it is blank, which I decided I wanted to represent using a straight line. I wanted to use a user interaction to show what happens when someone thinks because in your head nerves go crazy and in an image form this looks really awesome. The interaction im going to use is having the line turn into a bunch of lines that look a lot like lightening.

Plan

THE PLAN IMAGE GOES HERE

Nerves

After looking at lightning for so long I started wondering what else in the natural world created patterns and effects like the ones seen with the lightning and plasma. I have many friends doing biology who told me about stem cells particularly in the brain and how their connections can form interesting patterns also.

Precedent Images

After looking at a couple of interactive applications on open processing I decided that I should look up images that I wanted to see in my application. I really liked the idea of lightening or doing some sort of plasma ball. I looked these up and found some really interesting images. I wanted to keep these images as close aesthetically to the design of the application so that it had a natural and exciting look to it.

Looking

I started looking at interactive applications and sound shapes for the third project.

The following two applications have no sound but I spent a very long time playing with them. The first http://www.openprocfdsjgfdessing.org/visuals/?visualID=11948gis a game and the reason I spent a long time playing with it was because the coder had set his personal best at a little over 100,000 and I wanted to beat him. I also found it challenging as there was a constant conversation between me as the user and how the game reacted.

The second application was a sponge that moved in relation to the mouse which I spent along time trying to break. http://www.openprocessing.org/visuals/?visualID=15431

Final

Artists Statement:

I coded an interactive mouse toy in which the user gets to interact with a flashing X made of 4 different colours. I wanted the user to be able to move around the mouse and see a 'ghost' trail in which I really liked the look of when I was doing research earlier on and found other applications which use them. The reason I liked this was because it allowed the user to see where they had been and to create images that faded over time. Another one of my precedents had the object follow the mouse. I liked this too as it meant the user had control over what was happening, but the 'ghost' trail meant that a lag was created meaning the user had a sort of power over the application.

I wanted an unexpected reaction to occur when the user clicked the mouse. In my research I found things that were unexpected made the application more appealing. To achieve this I decided to use mouse pressed. When the user did this the ellipses making up the flashing X grew in size until they were as big as the screen. To add to this I also had the background colour change. I decided to use neutral black and white as the background colours. This was because of my colour choice for the X. In my previous project colour was an issue for my final. I chose a standard green and there was nothing special about it. For this project I looked up art I found particularly appealing with a piece of aboriginal art standing out. The reason I liked it was the variety of colours it used that all worked together. They weren't bright like my last project but were very earthy and natural which I chose on purpose as when the ellipses were in large and moved around they created a fire like look.

I am happy with the turn out of my interactive mouse toy http://www.openprocessing.org/visuals/?visualID=36355

Slowing it Down

I realized that the rate at which the ellipses grow is very fast and doesn't give the user a lot of time to play with them. I decided to slow this down so that the user can see the growth occur and then has time to move the mouse while this is occurring. This created more of a connection between the user and the application.

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

Colour

Using the colours which i'd selected from the aboriginal art piece which I have displayed earlier. I've used each of the colours for one part of the X. This means that when the ellipses grow in size and layer of the top of each other a really neat effect is created.

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

To create more of an interaction between the user and the application by creating something unexpected I decided to code that everytime the mouse is clicked the background changes between black and white. I used colour after this proved to be a success but the colour blending between the two of them when it changes creates a very ugly middle colour that is not pleasant to look at.

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

The conversation: Expansion

I needed to have more of an interaction to occur between the application and the user. To accomplish this I decided that when the mouse was pressed the balls would grow in size. The effect created a vibrating giant ball which looked very appealing. I also coded it so that when the mouse was released the size of the balls went back to normal. The mouse could also move and draw using the giant balls. I liked that this communicated a conversation between the user and the application.

I also inverted the colours to see if white on black would look better than black on white.

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

Flashing X of dots

This development allowed me to explore what happens when a random number is chosen to create a distance between mouseX and the ellipse. The quad turned into a flashing X because of the loop the code was going through and although this wasn't my intended purpose I really liked this result and have decided to use it and continue building on it.

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

Concentrated ellipses

The next step for me was to make the ellipses larger. I also wondered what they would look like closer to the mouse. I liked this look and I think I will code the ellipses to jump back and forth from the mouse to random co-ordinates.

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

Lots of dots

I needed to have more dots in my new design instead of just the one from my earlier code. I made 4 and I also used a rect to create a trail after them which I liked the look of.

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

(The image is of the trail but to take the screenshot the image gets rid of the mouse)

New Direction

After I got feedback on how my project was doing I decided that the final idea would not be interactive enough. This presented a problem as I had no idea as to how to fix this. I decided that I needed to come up with a new concept which had code which was not outside my skill level but looked very pleasing and would require problem solving. I found this website after more research and I liked the simplicity of the idea as it looks very nice and is entertaining also.

http://www.betaruce.com/java/life/applet/

It uses the idea that the 'bugs' follow the food. The food is where the mouse last clicked and the 'bugs' look like they flash as they go. Earlier in the project I coded a series of dots that follow the mouse around. I went back to this code and decided to build upon it.

My new idea is to create balls which follow mouse and after a random amount of time would change colour. Random amounts of time also make the balls grow but when the mouse is pressed the balls shrink back to normal.

Success!

I managed to get the triangles to draw when the user clicks and drags so that the point where the user clicks is the point of the triangle and the point where the user releases the mouse is the base. It took a long time for me to be able to get this to work so i'm very happy. I now need to take away the multiple triangles that are drawn so that it is only one triangle per click. I also need to add the colours.

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

User activates sizes

The next step I went through was to make the triangle appear based on where the user clicked to when the user released the mouse. I managed to achieve the second part of this goal, when the user clicked a triangle appeared but it was always from 0,0 to where the mouse clicked from.

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

Colour Swatch

I picked out the colours I liked from my aboriginal art precedent. I changed the gradient of them at one end to see if the colours would look better darker. I think they look better at the lighter end as they appear brighter and give a more positive feel.

Colour Experimenting

This is a piece of aboriginal art which I love the colour in. I like that the colours are very earthy and natural and work well together. I want to use colours like this in my mouse toy but I will have to experiment as to wether the colours above can be used because even though I think they look really lovely now, it is because there is a variety. In my mouse toy the next colour will only be released when a triangle is 'ripped' into the page. So blue might be too overpowering as a background colour when a beige is ripped. Then again, the more the user rips the more interesting the patterns created by the colours will become.

Transparent Triangles

I built on my previous code and made the triangles transparent with no stroke. This meant that they had a really cool layering effect.

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

Moving Triangles

I started coding triangles that appeared when clicked. The top point of the triangle is at mouse X but I have yet to figure out how to make the triangle draw as the mouse moves. I will have to look at other code on Open Processing to see what other have done in similar projects in order to get an idea of the code involved as I have no idea where to go from here.

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

I would also like to work on the colour and maybe play with transparency. Colour is an important part to achieving the overall result and is a major factor in the interaction.

Dots

In this code I was trying to draw a line from where the mouse was clicked to where the mouse was released. I needed to do this because for my mouse toy I want click and start drawing a triangle from where the mouse is clicked and it would stop drawing it when the mouse is released.

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

Practising

I started to code what I would need for my mouse toy. The first one I did was learn how to use mouse clicked and what it could do. For this I made a rect change colour between black and white.

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

It was simple and easy but it meant I knew how to do this. It also helped me learn more about else and if statements. Something I think I will need in this project.

More inspirational mouse toys!

This is a mouse toy which uses a dancing monkey! http://www.openprocessing.org/visuals/?visualID=4808

This application responds to the position of the mouse and moves parts accordingly. Other body parts of the monkey then respond to these parts moving and thus creates a very interesting, disjointed type movement.

This application: http://www.openprocessing.org/visuals/?visualID=11752 is very simple just consisting of a moving dot which follows the position of the mouse. It looks like an eyeball. I like that it stays within the eyeball itself and doesn't move out and this is why I find this interesting.

http://www.openprocessing.org/visuals/?visualID=6482 is an application which kept me busy for a while. This is because it wants me to 'blow the fish up'. When the mouse moves over the image it dissolves into particles which whip around. I wanted to make the whole fish dissolve and tried to move my mouse around as fast as possible to make this happen. The graphics weren't very good but the idea behind the game was.

http://www.openprocessing.org/visuals/?visualID=11100 This application is called 'Cursor Thief' and it is very cute. A small creature chases your mouse around and tried to steal it. When it does your mouse disappears from the application screen and the creature emits a heart then takes your cursor off screen before it starts again. I like that this application is very simple but you want to do it over and over and over again.

Interactive Mouse Toys

In studio today i'm looking at interactive applications from open processing. So far I have found two that blow my mind.

http://www.openprocessing.org/visuals/?visualID=30891
That link links to an application called Nebula Generator. In this, there is no interaction of the user and the application by clicking or using the mouse, however the user can change the settings which generate the nebula. For example you can change the colours, the style of nebula. I think this is a good reference point in terms of the way colour is used in an application.

The second application that blows my mind is this:
http://www.openprocessing.org/visuals/?visualID=30805
In this link the user moves the mouse around and is chased after by a structure like thing. The way the structure like thing is made can be changed/influenced by the user. This would be a good reference point for me in terms of making something that i constantly being changed by the user and is alwys giving a different reaction.

Final Uploads

The final uploaded images are jpeg format. I will put the pdfs onto the drive at the school where I put 4 images of my development phase on Monday.

Final 8

The final pattern looks like a structure because it has a clear geometric shape. But the lines are curvaceous, it looks like the structures created from light i found in my research. The sructure also has rhythm and repetition can be seen throughout. The structure although made entirely of curves fold in on itself in such a way that it creates triangles and other geometric linear shapes that help to tie the pattern to the first pattern.

Final 7

This structure is one of the last in the set and is at the opposite end of the scale in terms of structure for me. My aim in the series was to create a series of patterns which explored the difference between physical type structures with lines and which would apply by the laws of physics. This structure floats on the page, there are almost no straight lines. The structure also folds in on itself. However its still a structure seeing as it uses rhythm and repetition. The pattern is also a further example of how a light structure looks which has been my inspiration for the creation of the final.

Final 6

This pattern uses clear repetition and rhythm to create a structure. This structure is curvaceous and is mostly fading out the linear type lines that defined the previous final patterns. This pattern is also starting to have more of a floating effect so that it doesn't apply by physical laws. It is showing that a structure can be created digitally. It is also starting to remind me of light structures which I looked at in my research.

Final 5

This structure is starting to showcase some noise, but it is still a clear example of structure. It is starting to abide less by the laws of physics and is less linear than previous structures. There is still a clear rhythm in the pattern and the hierarchy of the curves makes them appear more dominant than the lines which helps the structure of the curves within the pattern stand out more and helps to lead into the next pattern in the set.