Fine tuning

After getting feedback I added in a funnel at the top to act as a reservoir for the water and sealed it with electrical tape. The hosing kept curling which was unexpected and was able to solve the problem by strapping them down with cable ties on to the mounting board (as well as the hosing valves). I got feedback from Luke that I should paint the board that the piece is going to be mounted on. White would complement the colours of the water and would be the colour to pull the least amount of attention away from the piece.
I wanted to find out how I was going to hang my piece for exhibition, so I asked John the technician and he directed me to Chris on first floor. He told me the best way was if he hooked up chains and I drilled some holes into my mount, so that my piece would be suspended, much like the hanging walls for exhibitions.

Testing on users.

After I constructed my piece I tested it on my roommate. His thoughts are summarised as follows:
- He was excited by the concept of having different many different tubes with different colours and found the concept easy to understand with little explanation.
- He thought that seeing the sponges were a hindering the overall look.
- He said that adding a funnel at the top, instead of just having a tube would be and easier and more efficient water reservoir.
- Didn’t seem fazed by the look of the taps and connectors.

Research: Showing the flow of running an IF/else statement.

I was able to find proper clear hosing at Bunning’s warehouse but was stuck on whether to use regular hosing valves or ball valves. After extensive research into different types of valves to use I was unable to one with one input and two outputs that could only have one on at a time, so I decided to go with the second best thing; having one input with two outputs that have the option of having the left flowing by itself, right flowing by itself or both at the same time.

After talking to the workshop technician she had the suggestion of drilling a hole in the side of the ball valve so that I could insert the sponge inside and have easy access to re-soaking them with food colouring and also have a good way of secretly containing the sponge from sight. This was taken into serious consideration.
I decided to go with the regular hose fitting because it would be much more cost effective than paying for brass ball valves which would almost double or triple my budget.

Final decision on metaphor: Showing the flow of an IF/else statement.

I decided to go with "Showing the flow of an IF/else statement" because I like how it depicts how the flow of a program is like water that flows downwards and the visuals could be very effective, in the way that the water maps out the path that the program works at. The other concepts were interesting but I felt they lacked a strong metaphor and were perhaps a little too ambitious to complete/construct before the due date.

Showing the flow of IF/else: Equipment, cost and time management

Equipment/cost:
- Hosing 5 outputs
- 6 inputs
- 2 double male inputs
- 2 double tap outputs
- Sponges
- Food colouring
Total cost roughly $85
Time management:
- Research required for different types of connections and valves which I can find out at Bunning’s Warehouse. 1 week
- Assembly wouldn’t take too long approximately half a day, (including mounting).
- Taking into account touch-ups and improvement 4 days.

The steps and levels of IF/else: Equipment, cost and time management

Equipment/cost:
- Metal balls different sizes, possibly have to be custom made
- Wood
- Wire
Total cost roughly: $25 - $30
Time management:
- Collecting materials: A couple of hours for wire and wood, 2 – 3 days for the metal balls.
- Construction: carving out the wood would take up a lot of time, as well as bending and working around the wire. The rest of the time provided for the project, would also possibly take longer.

Right and wrong: Equipment, cost and time management

Equipment/cost:
- Computer and processing.
- No cost.
Time management:
- Gathering images 1 hour.
- Gathering sounds 1 hour.
- Adding images and buttons that work in succession with each other to processing 1.5 weeks.
- Adding sounds to processing 1 week
- With my limited knowledge of processing, length of time to accomplish goals within the estimated might be elongated.

Showing the flow of running an IF/else statement.

This concept uses a series of clear hoses that have water flowing through it, by deciding which path the water takes (left or right), shows whether the statement is true or false. To explain in more depth and to relate my piece back to the programming foundation; the variable (in code) is substituted by water, and each junction in the water flow system is the “IF” statement. The hoses that go off to the right, without coming to a junction again, are the true outputs and the ones that go off to the left are the false statements.

Top 3 Ideas: #2 The steps and levels of IF/else

Metal balls of diffent sizes are dropped at the start and they roll so that only certain balls can reach certain destinations, e.g. smaller balls can take the one path to the far right and the middle sized ball can only reach the second level down to the right before it's stopped by the bump, and the large ball can reach the bottom because of it's weight and the momentum it builds up. It depicts how an IF statement has to stick with certain standards and one outcome can only arrive if the value is right.

Top 3 Ideas: #3 Right and wrong

Mystery animal calls are sounded and if they guess it right, then they win, if they are wrong they guess again. If they are right then they win, if they're wrong again they lose and that signifies the end of the sequence. This metaphor depicts that value has to be in the right field/valid or "correct" so that it makes sense to the program and understands what is being asked of it.

Brainstorm

Showing the flow of a program: Draft and further explanation into programming theory

My piece shows non programmers how a program runs “IF/else” statements in a program, and will be displayed through the medium of water.
In an “IF/else” statement, a series of Boolean decisions are made and are a matter of true or false. In this example below the computer has to work out whether “i” is true to the “IF” statement, or false. In this case if the statement is true, the program draws a line or else it asks another question.

for(int i = 5; i < 95; i += 5) {
if(i < 35) {
line( 30, i, 80, i );
} else if (i < 65) {
line( 20, i, 90, i );
} else {
line( 0, i, 100, i );
}
}

In my piece uses a series of clear hoses that have water flowing through it, the user comes along and decides which path the water takes (left or right) and each path shows a different colour. To explain in more depth and to relate my piece back to the programming foundation; the “i” or variable in the code above is the water, and each junction in the water flow system is the “IF” statement that the user can choose whether it is true or false, (the differentiation between the choices will be obvious due to the different coloured outputs.) The hoses that go off without coming to a junction again are the lines that would be drawn if it were a program.

Project 3: Showing the flow of a program

My piece shows how a program runs “IF/else” statements in a program, and is displayed through the medium of water.

In an “IF/else” statement, a series of true or false questions are asked, if the statement is true, the program does something, or else it asks another question and the process is repeated.

My piece uses a series of clear hoses that have water flowing through it, by deciding which path the water takes (left or right), shows whether the statement is true or false. To explain in more depth and to relate my piece back to the programming foundation; the variable (in code) is substituted by water, and each junction in the water flow system is the “IF” statement. The hoses that go off to the right, without coming to a junction again, are the true outputs and the ones that go off to the left are the false statements.


Alastair Gray

Final

For my final I decided to drop the fills and stoke for the side quadrilaterals by half which gave them a darker/sharper look that makes the 3D look stand out even more and really pop out.

Use headphones or speakers with a subwoofer because the bass is real deep :D

The last Rainbow

To make the colours pop even more I changed the balance from y*.1 to y/2. I then replicated this line of code to match the other sides of the quadrilaterals to make them evenly matched and to make the program more aesthetically pleasing.

I saw that the stroke was so blended in with the black that it lost quite a bit of it's 3D look so I reduced the stroke from 2 to .8, although by making these changes it still hadn't retained it's full 3D essence from just the simple colours of the dull greys and therefore this alteration was rejected from the final.

Rainbow 2

By changing the saturation from y * .55 to
y * .38 it replaced the red with pink and made the colours pop a lot more.

Rainbow 1

For the top quadralateral fill, the colour mode is set to HSB. The settings are as follows:

Hue:-
"Y" ranges from -24 to 24 which is too much range so multiplied by .55 redudes the range to: -13.2 to 13.2, this brought no change except when the "saturation" and "ballance" altered settings are introduced.

Saturation:-
Changed the equation from Y*.1 to Y/.1 but there was no apparent change except for the changes to "balance" (see below)

Balance:-
When -y*.1 was changed to y*.1, together with the settings above made this slight rainbow effect which was on the line for what I'm aiming for.

I needed some help so I took a line of code from another alteration of the original program (by Jared "BlueThen" C, 'Wavy'.). This altered program is by Nate "ZombieProof" called "Wave Optimized". By adding this line of code into my program for the fill of the top quadrilateral, it created this "smokey effect".

lerpColor

I got a little more in depth with trying to make my design more interesting by introducing "lerpColor" into the fills. It helped but still a little off from where I want to be heading. I thought it made the program look tacky and that it lost it's 3D essence.

Black and White

I want to have my have my design to have colour variation depending on the height of the quadrilateral so I changed the Y fill to get a variation of black and white.

Playing with sounds

I messed with the oscillator settings and got this weird sound whenever you keep the cursor still for at least 3 seconds anywhere on the screen.

Sound with "dist"

Although I had the right sound I wanted with my last alteration, I still didn't have the right interaction I wanted when I moved my mouse. I wanted the pitch to drop when I moved the cursor away from the center of the window, so logically I replaced the "freq" and "pan" variables with a very similar distance code I'd used before to program my speed and compressions of the visual wave.

Compression + sound

I decided to change the waves so that they are being pushed out instead of being sucked in to accentuate the controversial idea of industrial cubes slotting in rhythmically, juxtaposed by the organic look of the flowing wave. These contradicting elements when put together give something that looks like an organism that lives and breathes.

Seeing that I am also trying to depict the essence of sound waves I figured using an oscillator would fit perfectly with this program, so I picked out bits of the oscillator code from http://code.compartmental.net/ and altered the portamento speed, frequencies and the amplitude till I was pleased with a sound which I seemed fit.

Compression

This is a step forward from just having the waves speed up when you get closer to the center of the window. By declaring the radians (the distance between the highest box and the lowest box) in the line of code below as a variable called "compression" (also see below), we are able to use "dist" as a way to vary range of the distance between the highest box and the lowest box, i.e. the wave-lenght between the ripples.

int y = int(24 * cos(compression * distance(x,z,0,0) - a));

compression = (width/2-dist(mouseX,mouseY, width/2,height/2))/( dist(0,0, width/2, height/2));

It's saying that the radians will decrease from the center (width/2 and height/2) to the origin (0,0) in the window. In other words the waves will get more spaced out the closer the cursor gets to the sides of the window.

mouse_x_mouse_Y_working_and_speed_WITH_NOSTROKE

A modification of "Colour change from mouseX and mouseY + speed" by changing the stoke to noStroke(); It gives the look of one single form. Unfortunately I feel it loses it's 3D appearance by doing this.

Colour change from mouseX and mouseY + speed

Once I had the ripple following the mouse and having the speed increase the closer cursor was to the center of the screen, I decided I would work on the colour or the form. The original "Wavy" program was working with the color mode RBG, 6 and stroke(0); I changed it to HSB, 10 and stroke(2); . The reasons why I changed the colour to what I did was that I wanted to give the form an ominous and dark appearance, as if it was a living, breathing industrial being.

mouseX and mouseY + speed increaces

Speed increases the closer the cursor gets to the center of the screen.

By adding a variable called "speed", the value "a" is able to be given a new attribute.
"a" is used in the equation for the integer "y" or "int y", ("y" controls the height and length of each wave) to control the speed at which the wave sequence is.
By adding "a -= speed" we make "speed" the same as "a"; the "-" is used to make the waves come from the outside and sink into the middle.

the "speed" equation is as follows:

speed = (width/2-dist(mouseX,mouseY, width/2,height/2)) / (width/2);

It shows that the starting point of the wave is going to be wherever the mouse is and that the speed is going to change depending on how far the cursor is from the center of the window.


We use " / (width/2);" at the end because we need to devide it by two to slow it down even
more.

"width/2-" at the begining to invert where the speed up is occuring.

mouseX mouseY

The center of the ripple follows the mouse around the window.

Storyboard 2 (abandoned)

This is the storyboard that explains the idea I was talking about in "Working with mouseY". Everything fairly similar to origninal idea, except when the mouse is clicked and dragged upwards then released, the height of where the mouse click was released determines how large the ripple is.

Introducing mousePressed

Working around the idea of ripple only happens when you click.

Working with mouseY

I had to take a step back and work out how I was going to introduce the cursor into the program to make it interactive. At this time I was thinking around this new idea that the cursor could determine the height of the wave by where it was on the "Y" origin and then introduce the "X" origin later on. This idea was abandoned because it would take too long to accomplish with the limited time I had to complete the assignment.

Wavy full screen

I decided to change my visual shape from lines to these "3D" looking box but keep my overall idea shown in my storyboard the same. I managed to change the "Wavy" program to extend the length and breadth of the screen.

Wavy transformed 3

Gave my second transformation different colours.

Wavy transformed 2

I played around with the colours and size from my first transformation and ended up with A mesmerizing formation. But I wanted to make a more interactive program so I kept working on it.

Wavy transformed

I played around with the Y shapes position in the "Wavy" code and found this pretty interesting.

Inspiration 3.

I also found this program on open-processing. It is called "Wavy Extended" or "Wavy Optimised" it was created by Nate Wilson. I loved how the colours changed depending on it's depth.

Inspiration 2.

I found this program on open processing it is called "Wavy" and was created by Jared "blueThen".
It instantly got my attention and after I had a look at the code I thought I could probably understand and manipulate it to what I wanted.

Storyboard

My program will start out with lines coming out from the borders and corners of the screen and will gradually circlie in towards the cursor. These lines will follow the cursor around the window, and depending on it's position on the screen the lines will get closer together/more compressed, or further apart/looser. i.e. the closer the the cursor is to the center the more compressed and the further away the looser the lines will be. Also the lines will sink down when they reach within a certain radius around the cursor, creating a "wormhole" effect.

Inspiration.

I like how this program by bitcraft works with the idea that when the cursor gets towrds the center of the window the lines become more comrpressed, and when the cursor gets closer to the borders; they tend to spread out and become loose.

Project 2 Introduction.

I want to work with the essence of sound waves and their physical form and to display them in an asthetically pleasing way.