The Circles

The sounds

I experimented with different sounds in garage band and found myself with a large variations of sounds. I made 2 videos to show the possible sounds that could of been used and my final sounds.

I chose these sounds for my final because i wanted the sounds to b pleasant to the ear. It is like a wind chime effect at different levels of pitch.

Development

Once the two had been combined this was the final product of the design.

The Circles

 The basic sound code had been done but it was to plain and it didn't interact with the user as much as i wanted it to so i placed moving circles in over top of the keys. I did these to that while you are making music you are distracted by the balls. so that if you move your mouse around a ball it would also make a musical sound with out the intent of making a sound.

 The Keys

Once one had been made i the duplicated the keys and placed them different heights. I height of the keys determine the pitch of the sound. I also decided to go with the mouseMoved rather then mouseClicked. This is because it seemed it would be easier to interact with and make a relatively nice sounding sequence of noise if the mouse ran over a key

The Key

I want to make a key board like simulator. So the first thing i did was make a single key to try and understand how to place sound just in one key. if i could understand this then i will be able to make a lot more variations with different pitched sounds. after exploring and experimenting i found out how to do this.

Sound and Code

With Ben Jacks  Tutorial i learned how to place sound in a code. Playing with where the sound was played when clicked

Precedents Images

I like the idea of creating something physical through coding and i feel that using the idea of keys could make a nice application

The sound of wind crimes is very pleasant and relaxing. The sounds that they create are very elegant and beautiful. This is how I would like my application to be. I would want it to generate similar sounds.

3 Concepts

Open Processing Problem

Open Processing did not let me upload my codes so I have placed all of them on the R Drive

Final Interaction and Artist Statement

Artist Statement

For this project the main focus was on developing an interactive experience for the user, which included sufficient abstraction from the response of the user and mouse.

My application lets the users experience a 3D canvas that can create beautiful structures and then be reset with the click of a button. It lets the user experiment with different methods in order to create different images. when the mouse is moved along both the X and Y axis the shape is repeated leaving a trail. Not only does it do that the shape changes in length and width and also the shape its self is changed. This allow the images being made to be different every single time captivating the user and not getting bored of it once it has been used once. The user can also experience a throwing and momentum feel which creates a great conversation between the user and the computer. when the mouse is held down the shape stops repeating and the one shape remains. depending on how fast the user moves the mouse depends on how fast it spins. When the mouse is released the shape repeats it self again while it still spins for the momentum. This creates interesting shapes just from the throw of the object. To add on to the interaction aspect the structures change colour depending where the mouse is place.

The user can keep experimenting over and over until they are happy with the creation they have made and then they can make an entirely new one.

Code Nine and Ten - Possible Finals

 Code nine

Code ten

These two codes are my to possible finals that didn't make it.

These two codes are very similar to the final.

I felt that nine was to controlled and ten rotated to slow

Eighth Code - Clearing

Once i had combined all the steps together and tweaked all the little details i needed to find out how to clear the canvas. In this code I managed to understand how to clear the canvas with a click. I did this by moving the background under the mousePressed section of the code. i also played around with fill to get a fade effect when the mouse was released.

Seventh Code - New discovery

I was experimenting and came across a interesting code that i had made. The code makes my 3D object vibrate or pulsate. every time it pulsates it grows larger and larger.

In this experiment i also discovered how to change the colour of the object when moved

Sixth Code - Repeating

This was easier then expected and all it require is for me to move the background from void draw to void setup. This repeated it leaving a nice trail. i also tried experimenting with different functions in this code it is mouseMove.

Fifth Code - New Discovery

I came across i way to change the shape from a rectangle to a four sided shape that has a angle.

This will help when repeated to create different shapes.

Fourth Code - helicopter

 

This was a fun code i stumbled upon when experimenting with different shapes.

It is a rod that spins very fast when the mouse is moved. i thought it could be an opportunity to explore different concepts so i posted it

Third Code - Making the Cube Change as it Moves

The next step is to make the cube change as the mouse moved around. This was difficult is figure out but with a lot of experimenting I eventually got it.  I used a few lines of code from the tutorial from Ben Jack

  xpos = xpos + (mouseX-xpos)/30.0;

  ypos = ypos + (mouseY-ypos)/10.0;

i used this in the code. I then used xpos and ypos as coordinates for the box. because xpos and ypos are changing variables the box changed shape.

Second Code - Making The 3D Box Move

The next stage was to make the box move with the mouse.

After a bit of experimenting with the placement of the mouseX and mouseY functions i began to understand what effects what when functions were placed in curtain parts of the code.

In order for me to be in control of the cube i need to place the mouseX and mouseY functions in the translate part of the code. But i experienced a problem with the cube spinning exceedingly fast when it was moved. To fix this i had to times the rotateX and rotateY by 0.01. This reduced the spinning considerably.

First Code - 3D Box

I thought the best place to start with my code would be to understand the concept of 3D as it is a bit different to 2D shapes. I found a tutorial on how to make a cube on YouTube (The link is here).

This is a very simple tutorial that explains how to make a cube that spins in the middle of the page.

here is the code I managed to create.

Set Goals

This is what i will need to accomplish in order to create my interactive code

1. First I will need to figure out how to make 3D objects
2. I will then need to learn how to control the 3D object with the mouse
3. Then I will need to experiment with the different 3D shape
4. I will also need to understand how to make the shape change as i move it
5. I will then try to understand how to repeat an object.
6. being able to reset the code with out exiting the code

New Concept

At first I like my second concept and the interaction it holds but the after trying it i realized the curves are very hard to code so i decided to drop that idea and come up with a new concept.

For my new concept I want to do some sort of 3D painting interaction.
I want to create a multiple of one shape that continuously changes when moved.

This would create an array of different shapes and compositions.

3 Concepts

Precedents

I really liked this code because of the elegance. The way the specks of light only grow when the curser traces them. The like the way the speaks magnet to the curser but it also gets momentum and flicks around tracking the mouse.

It held my attention for a long time and didn't get boarding to me.

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

I find this code very entertianing and find myself play on it for long periods of time with out realising it. I find it captivating even though it just simulates a curtian.

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


I really like the composition of this picture. the colours relate nicely on to the background.

Final 8 Patterns

 

 

 

 

Links to patterns on Open Processing

Pattern 1: http://www.openprocessing.org/visuals/?visualID=32198
Pattern 2: http://www.openprocessing.org/visuals/?visualID=32495
Pattern 3: http://www.openprocessing.org/visuals/?visualID=32514
Pattern 4: http://www.openprocessing.org/visuals/?visualID=32492
Pattern 5: http://www.openprocessing.org/visuals/?visualID=32521
Pattern 6: http://www.openprocessing.org/visuals/?visualID=32527
Pattern 7: http://www.openprocessing.org/visuals/?visualID=32537
Pattern 8: http://www.openprocessing.org/visuals/?visualID=32542

Development - Pattern8

 playing with where the lines stop

 playing with line thickness

playing with the angles to change the pattern style

Development - Pattern7

 playing with spacing between the lines

 playing with the angles of the lines

playing with how many lines are repeated.

Development - Pattern6

 playing with the amount of lines repeated

 playing with how much times the lines are repeated

playing with the directions of the lines

Development - Pattern5

 playing with the width of the ellipses

 playing with the amount of ellipses

playing with the strokeweight of the lines

Development - Pattern4

 playing with stroke weight

 adding other structures to the pattern

playing with the placement of the circles

Development - Pattern3

 playing with the thickness of the stroke

 playing with transparency of the fill

playing with transparency of the stroke