Interactive Sketch

This design is interactive, and there is a subtle, short sound that plays when the mouse is clicked. I used the colour scheme in the triangle sketch (featured in my post 'Transformation') as inspiration for the final colours. I have not yet combined arrays with this code, which will be my next goal, in order to create more movement and interest in the next iteration.

I would like my final result to reflect this design in some manner, so I want to keep the initial star shape as part of the programme. I would also like the triangle sound to reflect the imagery more, so I may combine more triangular shapes, or look at the way the sound waves of a triangle might move. I imagine them as being repetitive and subtle. Thin lines are often used to represent sound waves, and I think this would effectively portray the sound of a triangle being hit. I have done this to some extent in the sketch below, but it is overly simple.

First Experiments

These are my attempts at understanding code, in order to create an interactive design. Initially, I took my storyboard drawings as the basis for my design. This allowed me to create the most basic interactive elements it involved. I used mouseX and mouseY as positions, to enable movement with the mouse, a code I was not previously familiar with. This enabled me to create this basic shape, which follows the mouse and has a mousePressed function.



After experimenting with this code, I was able to create variations on the repetition of the shape. After a lengthy look into Arrays, I tried to integrate that into my code. Subsequent to this decision, I realised my time would be better spent getting to grips with Arrays in an entirely alternate sketch. This is what I came up with.

Finalising Ideas

I drew out a morphological map, because I was unsure of the cohesion of my chosen storyboard. The effect was not simple enough, so I decided to focus on the hexagon shape and the possible movement of and interaction with it.

After completing these plans, I was able to finalise my ideas and pinpoint the shapes that I found the most attractive. There were a few designs which I thought could look effective with dart-like designs integrated into them, so I made a few more storyboard sketches.

I will now attempt to create these in Processing. I want to experiment slightly with each idea, but I like the interaction possibilities with the top concept the most. In the top storyboard, the shape is transformed by the small circles that circulate certain points. The space around the star-shape is transformed by the darts, which interrupt the empty space.

In regards to sound, I want to take my findings in the last post and apply them here. This is that a clean geomoetric can prompt an ambient, layered sound.

Storyboards

In order to form the ideas of whole interaction designs with sound, I sketched two storyboards. After presenting them, I was able to expand on these ideas, and devised of more coherent designs with a clearer vision of what sounds may be relevant to the imagery. Here are the two initial storyboards

The interim presentation led to my decision to further the second one on Processing. Both ideas elaborate on the first panel of my wallpapers. Darts, by the nature of the game, encourage interaction. By hovering over the hexagonal design, you create the targets that the darts hit. I have yet to establish a sound to accompany this visual, but I have a few ideas...

Subsequent to the lecture on synaesthesia, I scanned my interpretations of the two songs that were played for us. The associations I made with the pitch and beats enable to see the links my mind makes between the audible and the visual. This will prove integral to my attempts to integrate sound into my interaction design. It is interesting that the simpler, more minimalistic song prompted the more complex drawing (the first). This demonstrates that a simple image can create an ambient, intricate sound, and vice versa.

Here is my drawing of the first song,

and the second song