From start to almost finished. My programs creation.

This post will be an in depth walk through the stages of my projects creation right up until this current moment.
As most, if not all media projects do, my current one started with a storyboard. I have already posted this some time ago but for the sake of continuity here it is again.

In this storyboard I basically explain that I would like to make a program that makes sounds when the user interacts. This program has an inner square border and balls in the centre that have different patterns and are floating gently around the inside until the user drags them to the border. Only once the balls are on the border will they make a noise. I also state in the storyboard that I would like to have the sounds change when the balls mix together.

So from that I went onto making the first prototype which turned out looking like this.

This version had many faults, as you would expect from a first prototype. In this version I managed to get the ball to appear when the mouse was clicked but after that it would fly to the bottom right corner then move to the left corner and stay there. Also only one ball could be created. Obviously I had much to do.

In the next version I managed to get the ball to stop once the wall was hit but it still wouldn't rebound.

Because I needed to figure out how to get the balls to bounce off I made a sketch with just one side and had the ball spawn and move. I then added some code to try to get the rebound to work. Here is what resulted.

As you can see it worked. The next thing I had to tackle was getting the bouncing to work with the ball on all the sides.

Here is what resulted.

What you can't see from the photo is that it has just bounced off at an angle from the right side and will then bounce off from the bottom. What you can see from this picture is that I have made the ball transparent now and also removed the block black sides. I thought the black was too overpowering compared to the rest of the design at this point and the white inner of the circle was yuck.

At this point in the project I learnt about the need for arrays in a project like the one I was undertaking. I was swift to incorporate them into my code. Once I had the arrays integrated I realised a problem. Each time the user clicked a new ball would be made. That was fine. But in its current state it would have two outcomes, either the ticker would get to 20 and the ball creation would stop or you would just keep clicking and there would be an infinite number of balls being created (which is really, not good).

I then looked back on my storyboard and was reminded that each ball would have a different colour so I created some code which made this happen in the array.

So in this version I had multiple balls being created and each had their own colour. To do this I made a separate .pde file called Ball.pde and imported this into the project and made it part of the array. This file contained the code for drawing the ellipses, colouring the inside of the circles, and the control for the direction and rebounding of the balls on the border.

As you can see the bold black border is back. Once the balls had colour added to them I thought they needed something to visually contrast with so I put it back in there.

At this point I realised that there was not much interaction being required from the user so in the next version I added two new interaction features. I added right click and hold to change the size of the balls (this was also intended to change the volume in future versions) and the mouse position on the Y-axis controls the speed at which the balls travel. I also changed the balls from having colour to having different shades of black. It is difficult to show the interaction features in a picture so here is the link to this version on openprocessing: http://www.openprocessing.org/visuals/?visualID=26392.

Just a quick note about a problem I ran into while trying to add the circle size adjuster if you are interested. Once I thought I had the right code written I played the sketch and found that they would all resize themselves as soon as you clicked and it couldn't be stopped. Trying to fix this took me a wee while but the result still works well.

One other problem I came across with that last version was that the circles didn't spawn on the mouse position. They spawned a random distance from the mouse each time. This was soon fixed thankfully, but was puzzling while the code causing it lasted.

At this stage in the project I added the sound I had imagined would be good with it from the storyboard stage but I thought it didn't really suit it after running the program. I also limited the number of balls at this stage to 10 as opposed to the previous 20. This was because if there were 20 balls and each ball had its own sound then the collective noise would sound like mush. If you wish to see, here is a link to the program as again, it is difficult to show sound in a picture. http://www.openprocessing.org/visuals/?visualID=27764.

After this I experimented with other sounds. For example instead of the piano note in the previous link, I tried the sound of a drum. I found this also didn't suit and so I revised the layout and sound further in my sketch until I came to this.

The current sound is plucking of a stringed instrument and when a ball bounces off the sides it pushed out by an amount as if to look like it was plucked. This fitted nicely with the 'Sound-Objects' we have been encouraged to aim for in our projects. And again you can see the bold black has left the project, this time for the last time. This is what the final look of my project will be and after some minor bug fixes to the program I will include an openprocessing link to the sketch for all to enjoy.

One final note. I am undecided at the moment on whether or not to have the final sketch playing only one note or playing a different note for each ball. That decision will be made imminently and will be talked about in my next either update on this post or on a new post.

UPDATE

Ok so I have spent most of the rest of my day finishing up with this and I can now share my mainly finished product. The openprocessing link is here (http://www.openprocessing.org/visuals/?visualID=27766). Another wee change made today was the right click resize. It is now right click on the right half to make it bigger and right click on the left half and make it smaller. The resizing now properly changes the volume too, with bigger circles making louder sound and vise versa. There is still a slight error that needs fixing as well which is that if you resize a ball beside a border line it will get stuck on it. I know (sort of) the code to put in the program and I will do that tomorrow. Also another condition I need to add is to not allow the creation of the circles outside of the border lines (otherwise it gets messy). I have also come to a decision on the sounds and that is to have multiple sounds and not just one that bangs into your head repeatedly.

UPDATE 2

Alright, what I said I would do yesterday, I have now done.The balls now only spawn in the inner area and the balls never get stuck on the border. My finished code is still on this openprocessing link and is updated with the latest version. Here is the link again (http://www.openprocessing.org/visuals/?visualID=27766). To make it easy to find I will also make a single post with my final in it and a link to the openprocessing sketch. Even though I say it is finished, the sound still delays after the first playback and I cannot see any code that I can edit to stop this. This is only a tiny glitch though and really isn't that noticeable when the circles are all going at once.