FINAL video

Joy Whittington, dsdn 142, Project 3

explination

In this minute long stop-motion video clip, a loop is conveyed effectively, yet simply, through a girl walking up a set of stairs. Before she begins her climb, it is highlighted that she is firstly given a condition in which she must carry out until the statement becomes false. It is expressed using symbols inside her thought-bubble, that whilst there is a step to climb she must step up. On-the-other-hand, shown in the second thought-bubble, while there is no step to climb, she must stop. Thus, the loop continues until the girl reaches the top of the stairs. Once she has mounted the top step, the camera shows us that there are no more steps to climb and that the surface is flat, therefore the girl can now go off as she pleases.

developments

For my video i decided to photograph a series of pictures to make up a stop-motion video. The idea will be put to life by my flatmate, who will be modelling a fine example of a coding while loop. I plan to spend one afternoon doing the photoshoot, so i can then take the rest of the time to edit and develop my photos. Some of my initail photos can be seen below.

I planned to edit every single photo so that the appearance of the clip as a whole would become this exciting, fun and pop-arty expression of my idea. I wanted to explore the path of creative colourings, cartoon forms, and the art of figurative cubism. All this would enhance the overall watchability of my video clip, and highlight the symbolic visuals without the viewer becoming confused and distracted completely. Some of my explorations of edited photos can be seen below...

explorations

 

slow motion video ideas

favourite idea

I decided on an idea that involved just a simple staircase, because i thought it would fit in well with the definitions of a loop i found through research and thorough understanding of code. A series of lines can be created with ease, using just a straight forward while loop in processing. This is done by making a statement, telling the computer to draw a line every X amount of space, while X is less than A amount. I took this basic exampe of computing loops, and i exhanged the drawing of a line each time, to a metaphor of climbing a stair each time.

a loop is like a staircase
--Someone climbing a set of stairs one step at a time.
--The loop ends when the top of the stairs is reached, or until a certain amount of stairs are climbed.

Further Brainstorm

initial ideas

The while construct consists of a block of code and a condition. So i knew i needed to come up with ideas that would involve both of these. In computing language, the condition is then evaluated, and if the condition is true, the code within the block is executed. This repeats until the condition becomes false. Because while loops check the condition before the block is executed.

I did a quick brainstorm of some possible ideas that could be used as a metaphor for a loop.
Some of the initial thoughts which came to me were:

• A flower based idea in which a petal is added until the daisy is formed and fully bloomed. Once petals are all in place (one at a time). petals are removed until flower is bare. 

loves me, loves me not...

• An infinity loop based on the idea of the chicken and the egg, - which comes first? Contineous loop of the chicken or the egg, which could be expressed by simplicity of a poster.

fruit loops?

project THREE

while loop() {

(i researched what a loop really was, and found that it controls a sequence of repetitions) ;

("while structure" executes a series of statements continuously while the specified expression is true) ;

(the code inside the while loop will not finish until the expression inside the while becomes false) ;

}

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

r e f l e c t

From the start of the project to the end, i continuously learnt something new. I felt that the hands-on approach in our tutorials really helped me grasp the concept of code. Learning something new, and straight away being able to physically try it out for ourselves on our computer screens, is the best way i learnt. Also the one-on-one aspect from the tutors is ideal for the technicality of this course, and really helps the learning process.

Ben and Tim got me through the project. Their enthusiasm towards the course helped me to understand code, therefore I was able to work out where my project was heading. They were my motivation. 

Improvements… My goal for the next project is to work on my initial ideas. I want to jot them down straight away, develop and work on them, so I can decide on an overall idea for my project quicker, without changing too much during the process. I want to have a clear theme / direction in my head before I get too involved in the project.

Final Set =D ...

Final Wallpaper - FOUR

Final Wallpaper - THREE

Final Wallpaper - TWO

Final Wallpaper - ONE

My developed ideas...

                         

I like the combination of blue and white, its bright and attractive, i will use this colour scheme to tie my final set together. I still want to achieve stronger similarities between the wallpapers, so i will experiment with more circles and shades of blue. The idea of happiness is going to be more of a symbolic representation, rather than a direct dipiction of things that make us happy.

My first ideas....

          

My first sketches resembled ideas of simple things which make people happy, ie sunshine and lollypops, however i decided that these did'nt really fit together as a set. I took elements of these, keeping with the idea of happiness, inorder to make a series of patterns which were more coherent. Also i wanted to bring more circles into my designs.

The Circle

My favourite shape is the circle. I love it's complete perfection, and the way it can be a symbol of happiness. I choose ellipses as the coherent element of my wallpaper set.

s m i l e

project ONE

Wallpaper


I stood infront of the four studio cupboards, and i imagend what i wanted to see. I then imagend what others wanted to see. My inspiration comes from happiness, i simply want to make people smile when they walk into the first year design studio.

simple