Continuing to Develop

I've been adjusting the visuals to get a more refined look. The sketch appears less cluttered with the lines being thicker and wider apart, adding an overall more bold and impacting effect which suits what is happening with the interaction as the lines light up. I have also adjusted the colours to a more darker blue and reddy-purple when it lights up, these are still contrasting colours but work better together than the orange-red as well as give a stronger sense of depth to the over all aesthetics.

-You have to click to get the sound to work (a technical difficulty still to overcome).

Transformation

I managed to take a screen shot of my sketch playing the sound. You can see the cursor is the black circle and the orange lines mean a sound is playing.

Thought Process

I have found through out this project so far, that by writing down my problems and ideas as I went along really helped me stay on track to achieve my short term goals, without being overwhelmed. Also going back over the problems I have incurred already helped me to think of solutions to new problems. Along with this I also began to think of new ideas of how to make my code more interesting. This is my thought process so far:

x = problem
o = idea
() = solution

o I want to create a series of downward moving lines, each line is to move at a random length between 0-5 and once at the bottom restart.

(Using the "functions_loops" and the "motion_if_else_random" tutorials I managed to form a bit of a code)

x When I take away the while function I can get one line doing what I want but I need a series. Is there and alternative to while? In reference it explains how while will lock up you code if used incorrectly - how do i use it correctly in my code?

(Through watching the YouTube clips I discovered that using a for statement allowed me to achieve a series of (jerky) downward moving lines, I played around with it to see the different effects I could make)

x The loop that is meant to make my lines re-start their movement doesn't appear to be working. Also I just want my lines to move downwards, not upwards too.

(Here Ben showed me how to use arrays and a background element in draw to give the appearance that my lines were starting again, which also made my lines move smoothly. Also after playing around with the code I found that short lines looked better than long ones using this technique, creating the raindrop effect)


x To get the raindrops effect, void draw() has to have a background. The problem is that it means when I try to add interactive circles they get drawn over as well or don't even show up depending on where the is function in my code. When I remove the background element I don't get the rain drop effect the same.

x My sound won't play because it can not find the files even when I create a data file like it says in the tutorial.

o What I want is for when the ellipse has been covered in the lines it plays the sound. OR The sound keeps repeating itself until the ellipse is covered. OR When the droplets hit the ellipse they play the sound.

(Ben suggested here that I should try adding a very transparent black rectangle that fills the page and also gets written over again, purely as an aesthetic to give a fading effect, though by doing this my interaction worked as well. Also here I was talking to my classmates and they said they for some reason sounds that are made from the bfxr website don't seem to work, and that I should use GarageBand on my Mac to generate my sounds. After making these sounds I was able to play them through processing)


o I have created four similar sounds. I want my page to be divided up into four (invisibly) so that when an ellipse is drawn in a certain area of the window, it plays that particular sound. From there the sound keeps repeating itself every time a raindrop hits it, but maybe for only a limited time (e.g 3 secs) then the ellipse disappears.

x Somehow I need to create an if statement that says when the position of the line hits the position of the ellipse it plays the sound. I know where the position of the ellipse is (mouseX,mouseY) and its size (50,20), along with knowing where the line is (yCoord[i] = i + 1?) though this I am unsure of. From here I should be able to work out when the line hits the ellipse and get it to play. - Can you have more than two parts of an expression in the if statement? (e.g if (mouseX<40){song1.loop(0);} convert to if (mouseX&mouseY<40){song1.loop(0);})

(While playing around with the if statements I've managed to get sound to play according to where the mouse is on the screen (though it sounds horrible in some parts). From here I changed the mouse interaction so that you do not have to press the mouse to get an interaction. This makes the visuals look better linked to the sound. I also added noCursor(); to my code which I thought added to the aesthetics)

o I want to leave the changes I have so that somehow, hopefully, when I figure out how to attach the sound in the way I want to, you will be able to play with how fast and how slow you move the mouse to get different sound combinations.

x Need to figure out how to upload open processing. I can see that my files are huge but I've condensed them as much as I can.

(My friend I worked out that we can combine i*space and yCoord[i] with the mouse coordinates in an if statement and no errors occur by typing if(mouseX==i*space&&mouseY==yCoord[i]) {song3.loop(0);})


x Though no errors occurred using this if statement the sound did not play either. We knew this was happening because the statement was too exact to occur, and we needed a dist() statement. - How do you combine the dist() statement with the if statement?

(After playing around with putting the dist() statement in different parts of the code for awhile, it worked out that it can be put right into the if statement itself. Now the sound was kind of playing when the line hit the mouse position)

o One sound playing is not very interesting so somehow we could add more to make the composition more complex.

(Because I had already been experimenting with the sound only playing in different parts of the screen when you moved your mouse into that area, we combined it into the dist()statement to be able to get different sounds in different areas)

x Visually the shape of the ellipse does not fit in with the surrounding moving lines (Ben suggested I change this aspect), and the sound interaction also does not fit well I believe.

o A cool effect would be making the lines change colour somehow when the sound played.

(By adding an extra variable called int coltone and putting it into the if statements that played the sound as well as changing the value slightly under the different statements, along with adding and subtracting the values that controlled the colour of the lines, we ended up getting the lines to turn an orangey-red when the sound plays (the particular colour is high contrasting to the blue, thats why we chose it). Consequently a cool effect occurred where the lines looked more like a series of droplets, the overall effect fitted well with the idea of transformation as the visuals transform when the the sound plays which is initiated by the mouse interaction. To almost finish the sketch off and to make it more interesting, we changed the grey ellipse to more of a large circle shape and made it a very transparent black so you can only just see it (though some people can't). The effect this had made it harder to judge where the mouse is and what you were doing, thus you have to experiment to understand the sketch)


x Still trying to figure out how to upload the file onto Open Processing.

Project 2, Developing Movement and Interaction

Going back a step, Ben showed me this fading trick by simply adding a transparent rectangle that fills the page. This allowed me to get a nice waterfall effect like I originally planned. Though it will be interesting to see how this effect will fit into my idea of droplets falling on the ellipse, which may be better suited to the development before as it is more petit like raindrops, however not as visually interesting as the waterfall effect. The interaction is simple, by clicking a grey ellipse forms (this is meant to represent a pebble or small stone). I plan to develop the sound interaction so that you get the impression that when the water hits the pebble it makes a tinkling sound. There is already meant to be a piano key sound when you click which is purely just experimental, but for some reason it wouldn't load onto open processing?

Project 2, First Stage Of Creating Motion

I first tried this with a series of lines to make it look like a waterfall, like I had planned in my concepts, but after playing around with the code I found that small lines looked a lot better almost like rain. So still staying on the idea of water in nature just in a different setting. I chose to use the typical colour blue to represent the droplets because it makes logical sense, and the black background really makes the droplets stand out with the bold contrast.

Some Really Helpful Tutorials

There are 11 "Processing 101" Tutorials on YouTube all of which I went over, but I found these ones the most useful. In particular I found that even though the final product had nothing to do with what I was trying to achieve in my own sketch, there were lots of little techniques he explains that I was able to apply to my own sketch. The ability to pause and rewind was also a key factor I found when it came to fully understanding each step. I even began to discover that I learn best myself by going over step by step of making someone else's code and picking up tricks they use, rather than sitting down with a code and trying to fill in the gaps.

Some Motion Experiments From The Last Tutorial

Both of these sketches are adaptations from Jim Bumgardner's "Heaven 777". What really interested me about his original sketch was the way he clearly conveyed this complex idea of transformation so beautifully with only three lines of code! I played around with it for awhile to see how i could manipulate the effects by also doing simple things like adding lines and some colour.