FINAL

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

cut backs

after playing around with variations of my code, developing ideas by adding diverse elements in order to enhance the appearance of the design, i decided on a final that i was happy with.

i decided to cut back on the grid in the background. i felt that it was too much of a distraction in the composition, i wanted the main focus to be the moving line. somehow, even though the grid was a transparent faint white colour, the pink line got lost. by simply removing the grid from the design, i found that my line automatically became stronger and the spike transformations were able to be seen more vividly. so as a paradox i decided that the design bacame more appealing once i removed the element that i previously added with an attempt to enhance the appearance.

another development that i decided against for my final, was the extra line of a different colour. this too distrated the eye from the main focus. the fact that there was now two lines was confusing, and meant that there was now no main foucs, both lines were doing the same thing. however as soon as i took the second line away it bacame clear what i wanted the viewer to interact with.

one thing i did like from my developments was the dotted line that mirrored the movement of the other line. it was a complimenting element that i felt enhanced both the transformation and the interaction. its an addition that not only is coherent with the suprize factor i wanted to convey but it is also subtle enough not to distract from the focus of the design.

developments

 

The code was coming togther =) With more transformations from the striaight line to the spike. I was happy that it was looking more like the intending outcome - the heart-beat monitor.

But, i kept developing the code and decided to overlay two lines, each reacting the same way to the mouse. I did this to add emphasise on the movement. I found that this worked really well and increased the element of surprize. The code was now a lot more interesting and appealing.

I also experimented with grids to add another dimension to the code. Some of the heart monitor examples i got inspiration from had a grid format in the background, which i thought worked well in the composition.

I progressed the developments even further, trying the code with two lines seperated in the composition each a different colour. I also wanted to add an element that is unique to the typical heart monitor. I transformed one of the continuous lines to produce dots instead, in the same reaction to the movement of the mouse. The code began to imitate some form of mathematical graph.  

my first code

This first code that i wrote drew a line continuousely accross the screen at as steady pase, with the spike reacting to the pleacement of the mouse. This was a simple interation, which was coherent with my storyboard of initial ideas. The straight line transforms into a moving zig-zag. However, a problem i found with it was that it was only drawing one spike at a time and it would dissapear off the screen, creating a new spike in the place of the mouse as the new line continued. I want to create more spikes, more interation, and overall a greater element of surprize.

inspiration

shapes not images

With my initial brainstorm i found that i was focusing most of my thoughts on interations with an image. I was imagining images and objects that would move, bounce, float, or react with each other. I wanted to personify an object through code. I began to realise through further brainstorming and development of ideas, that i needed to focus more on shapes, which i personally would be able to create using code. Shapes can be just as exciting, and just as interactively interesting as an image.

So i then came up with three simple shape concepts - pond ripples, heart beat monitor, and an egg timer shape.

• A pond ripple would be activated every mouse click, and gradually expand to become bigger and bigger ellipses. I intended the colours to also grow more transparent as they expanded, and when two ripples collide a noise would be created.
• For the heart-beat code, a line would form in the middle of the frame, which would react to the movement of the mouse, and create a series of spikes.
• Right mouse click would initiate a egg timer on the page which would follow the mouse around the screen. It would twist and turn up-side down, and grains of sand would fall when the direction changed. Sound would be heard when sand touched an edge of the timer.

My favourite idea was the zig-zag effect of the heart monitor. Straight lines, when used in an effective way, can become powerful and suprizing. I wanted to create this aspect of suprize in my code.

So i expanded the idea of the heart-beat.

My initial brainstorm

 

interaction lecture 29 March

This was the drawing i came up with in the lecture on interation and synesthesia. Whilst listening to a tune, we were asked to attempt to draw what we heard. To make things harder we were to do it without looking at the page.

interaction

occurs as two or more objects have an effect upon one another

an exchange of contact between more than one object or person

an element of control or conversation that one subject has with another

sounds - shapes - interaction

project TWO

t r a n s f o r m a t i o n

could it be a physical transition from one medium into another...
or an image using each end of the colour spectrum...
or could it be a simple transformation of a shape altered to become something different...

It is about contrast, form and the idea of movement.

• Spinning
• Deleting
• Reacting
• Moving
• Change