Project Three - Final Application

Sounds:

- Paper ripping sound when mouse click is let go.

- Popping sound when the user clicks on the objects.

Interaction:

- Click and drag objects

- Roll over specific ones that isn't visible to make them fill with purple which changes the visual aspect of the object.

http://openprocessing.org/visuals/?visualID=40939

Project Three - Development

I have successfully managed to get my sound clips working in the places and the times that I want them to be.
When the mouse is dragged and released on the object, a 'paper ripping' sound is produced.
When the mouse clicks on the object, a 'popping' sound is produced.

Project Three - Development

I have decided to change the ideas to do with the sound within my application. I have decided to change the way that the sound is projected. Instead of the sound being whne the object hits the walls of the application and when they collide, I have decided to have the sound whne the mous is clicked on the object and when the click is released. I have decided on this change because the fact that there is a 'race' to collect the objects up before there are none left on the screen is a strong interaction therefore I don't want to change that part of the interaction. I have also decided on the change with the mouse click because I like the way that the objects float behind eachother in the application.

The sounds that I am going to use are a paper ripping sound when the mouse is released and the objects float out from behind the top one, and a pop sound when the mouse is clicked.

Project Three - Development

My next step for project three is to figure out how to add sound into my application for specific times during the run time of the application.
I am wanting to add a paper ripping sound when the objects come into contact with each other, and a popping sound when they collide with 'walls' of the application.
In terms of the interaction, the user is already able to click and drag to move the objects around the screen. I am also going to add a mousePressed function to that the application can start over, but am unsure of what other interaction I want to use, or could use.

Project Three - Development

After many hours at trying to put my object into the code which I had succeeded at making the boxes float around the screen with the user able to move each box around the screen, I finally succeeded with a bit of help. My application now has some interaction, and the object that I wanted it to be. All I need to do now is add some sound to the actions of the objects hitting the sides and eachother and some more interaction.

Project Three - Development

I am moving forward with my project step by step. I have been experimenting with the floating option for project three. I have got singular rectangles floating around the screen and the user is able to click on them and move them around the screen. I am yet to figure out how to make the rectangles into my final object that I want to use for this project.

Project Three - Development

I had been playing around long enough with my design to try and make it move etc and wasn't getting anywhere with that so decided to go back to one of my ideas from Project Two.

 I then decided that I didn't want to use a star again for this project so minipulated the image a few times and came out with the following outcomes. The final image is the one that I am hoping to be successful for this project.

Project Research - Arrays

I have been researching Arrays so that I can apply them to Project Three. I came across this array in the Processing Reference Page which I hope will help me with this new Project. 
In this application there are simple balls that when you click they drop form the position of the mouse to the bottom of the screen. When they hit the bottom, they bounce and as they bounce more, their opacity continues to change until they disappear.

Concept Development

After talking to Ben about my design, he suggested that I move away from the circle idea of my concept because when you look at the circle, you know all its properties and know what it looks like and is not entirely interesting to look at. I took this into consideration and have decided to make a different looking image that has moved completely away from the circle idea. I intend to keep the rest of my concept the same with the image floating around, changing colour, producing sounds and the ability to control it with the mouse.

Initial Concept

For Project Three my initial concept was to create an interactive sound application that would contain a few circles that would float freely around the screen. When the circles hit the walls of the application, the inside of the circle would fill up with a bright colour and produce a sound. When the circles collided with each other they would alos create sound but this would be different to when they collide with the walls. The interactive side of the application would be the ability to click and 'chuck' the balls around the screen to create the sounds more frequently.

Precedent Application For Project 3

I have discovered this application through facebook and am going to use it for my precedent for project three.
In this application there are dark grey squares in the form of a grid. You click each square, it lights up white and plays a tune to the squares that have been clicked.

3x Concept Storyboard Proiect Three

Project Three - Research

http://www.youtube.com/watch?v=gvvTTDiHfiU

This is the game that was shown in the first lecture for project three. I found this video quite inspriring and interesting. I didn't manage to get any ideas from this video but thought that it was a good video to use for my research.

 


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

This application is a sound application that is more of a visualizer than an interactive soound application. I didn't find this example very helpful towards my own project as it resembles a visualizer.

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

I found this application particularly helpful in the fact that it was everything that was stated in the lecture, an application that has both sound and visuals. The visual properties also affected the expect sound response.

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

I also found this application helpful because it kept me engaged in the application and it also met the requirements of this project.

 PROJECT THREE - SOUND SHAPE

Project Two Final Artist Explanation & Images

For this project, I have made an interactive application that uses the ‘mousePressed’,  ‘mouseX’, ‘mouseY’, and ‘mouseButton’ functions to create an interesting and engaging experience. I have created a pink star like image that rotates at a speed of 0.25 with a blue background. When the mouse is being moved around the screen, the centre point of the star follows the mouse around the screen while the arms of the star leave a print in their path and as they get older they begin to fade away but not completely. The ‘mousePressed’ function is a left click that make the application restart so that the user can restart the application. The screen goes black and the cycle repeats for the user to start again. The ‘mouseButton’ function is used with the right click and drag to change the colour of the star to yellow. When the right click is dropped, the star returns back to pink. The user is encouraged to use my application as a form of drawing programme that is different and eye-catching. The user is also encouraged to explore the different interactive functions to adjust the colour and restart the application. 
http://openprocessing.org/visuals/?visualID=36371

Application running, but the mouse not moving

Application running, with the mouse moving around the screen

Application when the mousePressed function is used to restart the application

Same as above but a later shot

Application running while the mouseButton function is being used by the right click being held down and the mouse not moving

Application using the mouseButton function and the mouse moving around the screen

Project Two - Development

I have decided to develop my application so that I have another mouse function that with be using the right click and drag that will change the colour of the star and when dragged the star does the same as the beginning but is in yellow instead of pink.

Project Two - Development

I have managed to successfully add a mouse click button into my application that restarts the whole process again. Unfortunately the pause between stopping and restarting the application is faster than I would like so am now going to attempt to figure out if there is a possible way to change the length of time where the application stops and starts from the mouse click.
This is a screen shot of the application when the mouse is being moved. In this screen shot, you can see 3 points at which the center of the star is located and are also able to see the change in opacity where the arms of the star have been.

Project Two - Development

I have successfully managed to add another colour into my application which has alos helped me decide on the spin speed of the star. I have chosen the spin speed to be 0.25 because it allows the blue to come through the cracks of the pink and also makes a pretty pattern when the star is left to spin on its own when the user is not moving the mouse. From here, I now need to attempt to figure out how to put a mouse click into my application to restart the application.
 Spin Speed 0.1











Spin Speed 0.25 (Chosen Speed)

Project Two - Development

I have now developed my application so that it now rotates, follows the mouse and leaves a trail where the mouse is moved. When the mouse is not moving the star continues to spin and makes a spinning wheel image. I have also changed the background to white. The trail that is left behind slowly decreases in opacity over time. I now want to try and add some more colours and add a click button to restart the application. A down side to the developments that I have done, is that I can't decide how fast I want the star to spin.
0.25 Spin Speed

0.1 Spin Speed

Project Two - Development

After playing around with my last idea of having a smaller star instead of having one that covers the whole screen, I change my mind back to my first experimentation with rotation and translation. I have adjusted the amount of arms on the star and also the colour. The rotation is still staying at 0.1 and the center of the star still follows where the mouse is dragged. From now I want to try and add a path left behind the star as the user moves the mouse around. I also want to try and add more colours and have a mouse click function where the application can be restarted.

Project Two - Rotation and Translation Experimentation

I have been doing some further experimentation with my intial experimentation with rotation and translation by changing the code to move more towards my concept. I have changed the length of each arm from the centre point and how fast the star spins, the colour and the gap between each arm.

 

Project Two - Rotation and Translation Experimentation

From my initial experimentation, I have started to minipulate the code so that the programme is starting to move more towards my concept. I have minipulated the code so that there are not so many arms coming off the centre point and at this point, it is not spinning as I am trying to decide how many arms I want to come off the centre point and trying to see by my eye if they are evenly spaced.

Project Two - Rotation and Translation Experimentation

To move forward in Project Two with my chosen concept, I have experimented and been taught how to use rotation and translation in processing to help me achieve my concept.

In this application, there is a new line generated every 2 degrees from the centre point. When the mouse is moved onto the screen, the centre point follows the mouse. The whole application is spinning at a speed of 0.1 as well.

Project Two - Concept Sketches

 

These are my three concept sketches for Project Two - Interactive Mouse Toy. I personally like the second sketch and that one was also the one that got the most feedback from presentation and helpful advice about where to move from here.

Concept One: 

For my first concept, I got my idea from a Mac screensaver. As you move your mouse over the circles they enlarge and possibly even appear from the darker background and change opacity.

  

Concept Two:

For my second concept, I also got my idea from a different Mac screen saver. In this one you click to make a centre point and drag + rotate to create your own design and interesting image.

Project Two - Experimenting

Experiment One:

In this experiment, you start off with plain black squares and as you click and move the mouse the opacity of the squares changes quite fast moving into a white and then restarting.

http://openprocessing.org/visuals/?visualID=33564

Experiment Two:

In this experiment, you begin with a plain black canvas and as you move the mouse around the screen the circle appears from the black becoming white and then going back to black.

http://openprocessing.org/visuals/?visualID=33570  

 

 Experiment Three:

In this experiment there is a small black line that follows the movement of the mouse up and down the page but doesn't move across.

http://openprocessing.org/visuals/?visualID=35662

Interactive Images From Open Processing

Falling Sand:
In this application, you can make obstacles for the sand that is falling through the egg timer. You can also stop the sand going through the tube.

http://openprocessing.org/visuals/?visualID=30775

In this application you can clickand drag the image all over the screen which makes different shapes. You can also adjust the properties of the image.

http://openprocessing.org/visuals/?visualID=30805

In this application you can cliuck and drag the image and rotate it making it look 3D

http://openprocessing.org/visuals/?visualID=30793

Rubic's Snake:
3D rubics snake is an application where you can minipulate the object using the aarow keys and space bar to change the shape of the original straight rectangle.


http://openprocessing.org/visuals/?visualID=5669 

Rotate:
In this application, using your mous and can click and drag or hold down the click to move the stars and change the pattern that stands at the begginning.

http://openprocessing.org/visuals/?visualID=5654