Final Sound-Shape

In my application users are the weather.  It starts off as a beautiful sunny day with a bright blue sky.  You can then place clouds in the sky by clicking at the top of the screen.  As you keep clicking the weather will get progressively worse allowing users to worsen the weather as fast or slow as they like.  After a while it will start to rain, thunder will sound when clicked in the sky and the wind will pick up.  The rain comes from the mouse allowing users to interact with the rain, making patterns in the sky.  When the weather gets to it's worst a tornado will appear, changing in size depending on where the mouse is.  Throughout the whole application there is a cow standing in the grass.  This cow is rather tolerant of the weather and it's not until the user clicks once more after the tornado that it gets blown away with a loud "moo".  If the user wants to make the weather better they can right click at any time throughout the application.

Development

First attempt at storm:
http://www.openprocessing.org/visuals/?visualID=41457
This was my first attempt at putting all the initial experiments together.  I quite like the sequence it has created.  You click at the top of the screen to place clouds.  These clouds get progressively darker until it starts to rain.  If you keep clicking thunder will sound when clicked in the sky and the wind will increase.  Then lastly a tornado will appear.

Development 1:
I really like the sequence of the previous application but when you reach the tornado I don't want the interaction to just end because users will get bored after they've done it once.  So I thought it might be nice if the user can move back and forward with the weather.  Once they get to the tornado they can keep right clicking and the weather will progressively get better.

I had a lot of problems with getting this to work.  It went nicely back through the application until it got to the very start where it kept coming up with the error that the array was out of bounds. This is why I can't upload these trials to open processing.  But while I was trying to get this to work I improved some other aspects of my application.

I thought the white background was too plain and needed to look more like the sky, therefore I made it blue.  This looked better but the clouds get progressively darker, so it didn't look right that the blue sky stayed blue.  Therefore I also made the sky get progressively darker the worse the storm gets.

The blue sky definitely made the application look more real but without any ground it still didn't look right.  I tried creating the ground in processing but this just looked too fake, so I added in a photo I took.

Original white background

Blue sky when the weather's at its best.

Grey sky when the weathers at it's worse.

I also don't like how the thunder clip is too long as it only plays every 10 or so seconds.  I don't want the thunder to play every click like I had previously as you're clicking too often but I made the thunder sound shorter.

Development 2:
I finally figured out how to make the application able to go backwards by right clicking without crashing at the end.  In this application you'll see the ground and blue sky makes the application look a lot more real and I tried out a few new sounds for the rain and wind.  I like the new wind sound as it's more pleasant to listen to than the previous one, but the rain sound doesn't match the rain visuals.

Development 3:
In the previous applications I only have the wind blowing one way, to the right.  To make the interaction more interesting I want to have it so that the wind can change direction.  I initially thought about adding in mouseDragged to make the wind change direction.  But users probably wouldn't be able to figure out easily that you can use this interaction.  Therefore I wanted the position of the mouse to change the wind direction.  When the mouse is in the centre of the screen, there will be no wind.  When it's over to the left, the wind will blow to the right and when to the right, it will blow left.  I think this makes my application a lot more interesting to interact with.

Development 4:
I definitely think having the wind change direction, because of the position of the mouse, works well.  But the way the sound changes from loud to nothing is too abrupt.  Therefore I won't have the wind stop when the mouse is in the centre of the screen.  I will just have it change direction depending on the side the mouse is on.

In my original concept I wanted to have a person that became unhappier as the storm got worse.  Instead in this application I thought it would be interesting to add in a cow.  The cow will stand there until the tornado starts, where it will be blown off the screen making a "moo" sound.

Start of application.

When the cow gets blown away.

I really like how this application has developed and am happy with this result therefore this will be my final interaction.


I couldn't seem to upload any of my applications to Open Processing other than the first one.

Initial experiments

Thunder:
http://www.openprocessing.org/visuals/?visualID=40212
In the experiment I wanted to the user to be able to create clouds and thunder.  You click up the top of the screen to place clouds.  The clouds will get darker the more you place them.  When they reach a certain darkness thunder will occur when you place a cloud.

Rain:
http://www.openprocessing.org/visuals/?visualID=40218
In this application I was experimenting with rain.  I want the rain to follow the mouse but if you stop moving the mouse the rain will stop.


Tornado:
http://www.openprocessing.org/visuals/?visualID=40281
Here I created a tornado, which increases and decreases in size depending on the height of the mouse.  At the moment I've just got the tornado sound playing when you click but I want the sound to get louder and quieter depending on the size of the tornado.


Rain and wind:
http://www.openprocessing.org/visuals/?visualID=41450
In this application I increased the velocity of the particles as you click.  I want it so that you can make it rain but as you keep clicking the wind will pick up and the wind sound will increase.  I think this will be a nice progression into the tornado.



Rain with help from Daniel Shiffman's Simple Particle System:

http://processing.org/learning/topics/simpleparticlesystem.html

Chosen Concept

Concepts

Concept 1:
I used the memory match game as an inspiration for this concept.  I thought about having the application as an actual game where you flip cards over by clicking on them, to reveal a sound.  Each sound would have a pair and you'd have to find all the matchs to complete the game.  But I think having an end to the game would lose the users attention and I want to make the game more unique.  Therefore I thought about still having the cards that you flip by clicking on them.  But instead they flip and move around depending on how fast and how much you click the card.  When the card has flipped it will still play a sound and reveal a visual but when you "disturb" the card enough it will knock into it's surrounding cards, setting them off and making them flip too.  When you knock the cards hard enought they will shatter.

Concept 2:
For this concept I wanted to use a natural thing, weather.  I want users to be able to create their own weather by the position, speed and force they click and drag the mouse.  The more extreme the movements and clicking of the mouse the more extreme the weather.  The weather I want users to be able to create is rain, thunder, lightning and tornados.  Good weather will occur when the user leaves the application alone.  I also thought about adding a figure to the bottom of the application to make it like the user is the weather and is trying to get the person at the bottom.

Concept 3:
In this concept I wanted to have a sequence.  I decided to use instruments as the visuals and sounds.  I also wanted the sequence to have a clear path, which is why I joined them by the guitar strings.  Users will be able to interact with whatever part of the application they want, to create a different sequence every time.  I will use simple shapes that relate to the sounds of the instruments.

Precedents

Memory Game
http://www.funbrain.com/cgi-bin/fm.cgi
The memory game is a fun, interactive game that you can play with any cards.  You play by memorising where cards are and taking turns to flip over two cards to get a match.  I thought the memory and matching aspects of this game could be interesting to use in my interaction.  I would have to think of a way to add sound into it though.

Sound Waterfall
http://www.openprocessing.org/visuals/?visualID=27992
I got a lot of inspiration from this application I found on Open Processing.  I really liked how they chose a natural thing (a waterfall) and made it into an application using sound and colour the way they did.  It is a really exciting application to interact with.  I want to try and incorporate something from nature in my design of my application.  An aspect of nature I think could be interesting to work with is weather, so below I looked at some photography of weather.

Sound dots
http://www.openprocessing.org/visuals/?visualID=25796
This application is simple but effective.  I really like how it has a sequence and how it continues playing round in a circle while you interact with the circles to change the sound.  I also like it how the visuals are simple but relate to the sound they're making.  I wanted to use this as inspiration for a design that has a continuing sequence where you interact with it to change the sound.  I will make the visuals and sound more complicated though.

Project 3: Sound Shape

Final Interactive Mouse Toy

http://www.openprocessing.org/visuals/?visualID=36210
  
My application gives users a purely visual response to interaction.  Depending on where, the direction and the speed the mouse is moved over the circles, they grow.  As they have low opacities, when overlapped the circles make different shapes where they intersect.  As you move the mouse off them they slowly shrink back to the origional size, leaving behind a trail.  The two black squares are opposites in colour and that when the mouse is moved over the circles on one, the circles on the other are the ones that grow.  When the circles are clicked they disappear allowing you to create patterns in the background and to choose which circles you want to grow and overlap.  With this application I wanted to create an interactive conversation for the user that had a simple movement of the mouse, and opposite reactions to interactions that play with users minds and allowing them to create endless patterns with overlapping circles.

Development

1.
I tried changing the shape from circles to use squares to see whether other shapes would make a better effect and found this also made a different, interesting effect although I think it still needs more to it.
http://www.openprocessing.org/visuals/?visualID=35816

2.
To make my application more interesting I looked at another precedent, a chess board.  I liked how it uses two completely opposite, simple colours, black and white, how when starting the spawns are opposite.  The spawns even have circle base which kind of relate to the circles on my app.  I used this idea of opposites and split the screen into quarters, having a different shape in each quarter.  But I think the circles are the most interesting shape to interact with.  Having all quarters do the same thing isn't exciting enough to make people want to interact with it for more than a few seconds so I think I need to add something different.
http://www.openprocessing.org/visuals/?visualID=35817


3.
I thought about adding something completely different and splitting the screen in two, having the increasing circles on one side and lines that follow the mouse and change colour on the other.  I found this was the most interesting application so far and held the users interest for the longest but I'm still not quite satisfied with it.  The two parts are too different and don't relate to each other at all.
http://www.openprocessing.org/visuals/?visualID=35822

4.
Here I tried to make it so not only the circle that the mouse was on grew, but the surrounding circles also did.  I really like the effect this makes.
http://www.openprocessing.org/visuals/?visualID=36202

5.
In this application I did a similar thing to development 4, and made the surrounding circles affected by the position of the mouse too.  But I made the amount of circles affected more and reversed it so that the further the circles are away from the mouse the bigger they grow.  This can create some interesting patterns as the circles decrease really slowly and won't grow again until they reach the origional size.
http://www.openprocessing.org/visuals/?visualID=36203

6.
This application is very similar to the previous one.  The difference is that I didn't reverse it.  I think the last one was a lot more interesting as its not what you expect.
http://www.openprocessing.org/visuals/?visualID=36205

7.
Here I decided to go back to using the idea opposites with the chess board and the four squares.  I expanded on the idea of opposites though.  When you move the mouse in the black, it makes the opposite circles grow.  Whereas when you click the mouse on the white square it makes the circles in the opposite grow.  I really like this as it kind of plays with your mind a little bit.
In this application I also tried out colour but I think for my final interaction I will go back to using black and white as this fits with the idea of opposites better and relates to the chess board.
http://www.openprocessing.org/visuals/?visualID=36028

Chosen concept

After doing a few simple experiments for each concept I decided to develop on my second concept as I think this one has the most potential to be an interesting interactive toy.  I realised soon after I started writing my code for each individual circle that the code was going to end up being really long, therefore I started using arrays instead.

Concept Two:
http://www.openprocessing.org/visuals/?visualID=35815

After completing this concept I was happy with the idea of the circles increasing and the effect that it made but I need to think of a way to make it more interesting.

Concept Experiments

Concept 1 experiments

http://www.openprocessing.org/visuals/?visualID=33619 : in this application I was trying to see whether I could make the dots stay a certain distance from the position of the mouse and make them slowly move furthur away every time you click.

http://www.openprocessing.org/visuals/?visualID=33618:  in this application I was seeing whether I could split the page up into an invisible grid and wherever you click a shape will appear.  If you keep clicking in the same part of the grid the shape will grow or move.  When you click in another part of the grid, the previous shapes will stay where they are and another shape will appear and grow or move.

Concept 2 experiment

http://www.openprocessing.org/visuals/?visualID=33620:  in this application I was testing whether you can make the circles grow as you move the mouse over them but when you move the mouse off them they will shrink back down to the origional size.  When you click on the circles they will disappear.

Concept 3 experiment

http://www.openprocessing.org/visuals/?visualID=33622: in this application I was testing whether you can make a grid of squares, that when you click on a square it will either move (in any direction), grow (larger or smaller) or do both.  Some clicks will make two squares move or gow as some squares will use the same variables.

Concepts

Precedent Images

I came across an application on Open Processing that used overlapping circles with low opacities which gave me the idea for Concept 2

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

I find the effect that ripples in water make when their rings overlap really interesting.  This is similar to how overlapping circles appear with a low opacity like in the below image.  I want to use these for infuences in my concepts.

I saw this soduku and was interested in how in this image you can find what it seems endless squares and rectangles, all overlayed, different sizes and positions.  I think this idea could be developed into an interesting interactive application.





Some cool applications I found

An interaction is something that a user wants to interact with because it is entertaining.  It is something that holds your attention as it has different outputs depending on the input you put in.
Below are some applications I found on Open Processing that I think are good examples of interactions:

http://www.openprocessing.org/visuals/?visualID=6742 : this one holds your attention and it is entertaining because it is different every time.  Where and how you move the mouse depends on the lines that grow. They never grow the exact same way twice.  You can also change the design by zooming in or out, changing it to crayon and switching between "doodles" by pressing various buttons.  It has an element of repetition (the lines growing) but theres so many different designs you can create that it stays interesting.

http://www.openprocessing.org/visuals/?visualID=31335:  this application also has an element of repetition but is still entertaining as there's so many different things that you can change.  Each change is only small but as you change more and more things the design becomes completely different.

Project 2: Interactive Mouse Toy

Final 8 structures

Created using repeating triangles, that decrease in size but not width.

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


Created using repeated ovals that decrease in width, but not height.

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




Created using circles that decrease in diameter.

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

Created also using circles but smaller ones that are repeated across the y and x axis.  The circles don't decrease in size they just get less with each row.

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

 

Created using repeated rectangles/squares that decrease in width but not height.

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


This structure turned out different from the previous ones.  Yet is created using the same code, with squares that decrease in width and height.

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

Created using lines that decrease in length.

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

 



Created using points.

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

Development

When I started sketching some concepts, I sketched the top structure.  It could be created using lines or using triangles.  I quite like how it gives perspective and is making a 2d shape, look 3d.
Then I thought it could look quite interesting if I repeated that pattern from each side of the square, which created the bottom structure.  This gives the symmetry I was looking for.

I then created this in processing and this is the design which came out of it.  I really like this idea so want to create my 8 structures, similar to this one. 

The above design on processing: http://www.openprocessing.org/visuals/?visualID=31980

To keep the 8 designs consistant but different I thought about using triangles and lines still, but just changing the values, thicknesses etc of the above structure.  But when I tried it out, it didn't turn out how I hoped.  So I thought instead of sticking to one shape I could keep the same star like pattern but just change which shape creates the pattern.  So in the sketches above I sketched some shapes I could use, that when repeated from all four sides of the square would create this star like structure.

After I created all 8 of my structures I then realised that in the brief it says the structures are meant to be rectangle and printed 10cm by 20cm, not square like I'd created.  I thought about stretching the designs like above.  Which I think looks good with this structure, but with some of the others it didn't work.

Therefore I decided to not stretch them, to just cut them in half.  It still has symmetry, and it makes the design, I think even more interesting.

Precedent Images

I quite like the effect that lots of overlapping lines makes, like in the above image.

I think it looks really effective how you can use lines to make something look 3d. 

What I like about these designs is the symmetry. 

What could also be quite interesting is using the outlines of shapes as the lines instead of just straight lines.

More practices

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

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

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

Tutorial 3 exercise

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

Practicing using variables.

Tutorial 2 Exercise

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

Pattern maker exercise

Final pattern

Algorithum

I started with a square piece of paper and a grid 29 squares by 29 squares.  Starting from the top left corner I used 5 patterns.  The first was going across 3 squares, down 1 and drawing the right half of a circle.  Next was going across 4 squares, down 2 and drawing the bottom half of a cirlce.  The third was going across two squares, down 4 and drawing the top half of a circle.  The fourth going across 4 squares, down 4 squares and drawing the left half of a circle.  And lastly going across 3 squares, down 5 and drawing the bottom half of a circle.  I then rotated the page and drew half circles in the above patterns starting from each of the 4 corners of the paper.  I then cut out all the circles and put a gradient behind, making the circles stand out.

Development

Experimenting with overlaying shapes.  I quite like the top right design.  The different line weights makes it really affective.  I think these designs are all too simple though and the bottom design is too busy and looks messy with so many overlapping triangles.



Playing around with squares and circles.  I had the idea to overlap two different patterns to make another more interesting pattern (top left square) but I found that it was too distracting and its better to just stick to one pattern.  I quite like the way the half circles look, especially when they are repeated lots of times to form the top right pattern.



I think this is the most interesting pattern.  I like the complexity of it and how when you first look at it, it looks like all the circles are randomly placed.  But when you look closely you can see its slightly symmetrical and that no matter what way you turn the pattern, it stays the same, because when creating it I turned the paper, starting the pattern from each corner.  I don't think having the circles just drawn on one piece of paper is very interesting though.  To make it more interesting I might cut all the circles out and put a gradient or a texture on another piece of paper behind it.  It might then give some depth to the shapes.