Task 4 – Kinetic Typography

Task 4 was extremely enjoyable and very satisfying after hours of work, taking a piece of speech and creatively subtitling it using layer-by-layer words synced up with the audio track.

Actually very proud of my first attempt, maybe slight timing issues but pleased nonetheless.


A massive amount of layers goes in to the piece as every word needs to be animated seperately


Then each layer is selected and positioned on the timeline, the longer the rectangle, the longer the object stays in frame.


The time it takes to animate each word and just to get everything done in general was the biggest difficulty, going back and having to listen and watch over and over (and over) again from the beginning of the RAM preview to see if one word is on screen for a split second longer than it should be as it finished a fraction before the audio and it just doesn’t sit right in your brain until its in sync. Perhaps in hindsight the word placement is quite messy, distracting from the military tone of the speech. Also I feel I could have developed the pictures accompanying the words, link them together or animate them, or perhaps add some movement to the text itself. Finally, how some of the main keyboard shortcuts do not translate over adobe cs6 (ctrl+alt+drag does not constrain the dimensions when resizing an image) leaving me completely in the dark about that kind of stuff, I do not want to keep hopping from photoshop to after effects every time I resize an image.


HTML Workshop 1

Working with freeware Brackets, we successfully created a basic web page in HTML 5, which we combined with an exported ‘Processing’ file of our choosing.


Everything is inside another bracket, and inner brackets are indented for easy viewing.


The two dummy text paragraphs shown within the ‘div’ (division) brackets under the sub ‘p’ (paragraph) bracket can be seen in the live preview of the web page below.


Though somewhat easy to follow, it is easy to get lost in web design, especially as the designer in me does not want to spend time working out pixels, but the result if patient is satisfactory.

Task 3 – Animation

Much like the Praxinoscope, an animated GIF image uses a series of seperate images or ‘frames’ to create the illusion of an endlessly moving image.

Using a pre drawn selection of images that make up a walking movement, selecting a different image or ‘layer’ for each frame and nudging each movement forward slightly each time I was able to create the illusion of a man walking across the picture.

1: 12 frame animated sequence

The sun and moon cycle was used to showcase the exponential curve of complexity required each time a new moving object is introduced as the process of selecting the right layer for the sun/moon, sky and man each time for each frame.


An extra GIF image done with a sprite sheet and the exact same technique

jordanpantherpanther sc

Screenshot example of layer and frame selection (in descending order)

This is a great way of making very simple animations with one or two components, if you have the patience; I found photoshop animation to be very laborious and extremely repetitive. Organizing all the layers and making sure the right layers were hidden on the right frame was very frustrating especially as every time a new layer is added it is added to all the frames, meaning having to go back and hide the layer from each frame.

Use After Effects, basically.

2: Short experimental sequence

Instead of shooting actual photos for the stop motion, I decided to break down a digital self portrait of me and animate that into stop motion steps:


The drawing ‘comes to life’ over the cycle of the stop motion.

This too faced similar problems to the first GIF animation.

Task 2 – Temporal Expressions PARTS 2 + 3

Part 2- Long exposure is something I turn to a lot, craving colourful, juicy shots and not having to use flash and ruin everything.

Sunsets and cloudy moonlit nights are a great way to produce powerful long exposure images within the theme of ‘Cycle’ due to the cycle of day and night, sunset and moon rise.


Producing beautiful grey and orange, almost volcanic


Or let a little more light in and pastel purples, pinks and oranges, touch that up on Photoshop:


A vibrant, glowing skyscape.


Experiment where sky is reflected and water texture is overlayed on the bottom creating an ‘endless sea’ effect.

I have been unhappy with how low I was at when this taken, I’m certain even a meter or two higher and the result would have been much more powerful, the trees hide the actual sun and while that does break the image up nicely, the glow of the sun would have been the centerpiece to the image and change the dynamic of the image to a much warmer and friendlier one.

The Moon had some very effective and interesting results as well:

DSC_1014 DSC_1016 DSC_1027

Long exposure is a reliable and passionate photography form of mine, short exposure on the other hand I am less interested in, so part 3 – Shot exposure, will be included in this post as well.

Part 3 – Short Exposure

My main example of short exposure photography was a street show on vacation in Florida:

IMG_3749  IMG_3744 IMG_3748


These demonstrate short exposure by preserving moments that in life only happened for a split second, a cycle of movement frozen in time.

Task 2 – Temporal Expressions PART 1

When I think about space and time, my thoughts direct toward deep space, and theories of bending that space to travel massive distances or though ‘time’, how travelling to that part of space would take millions of light years without bending ‘time’ and ‘space’.

David Hockney, though maybe not as inconceivable as bending space and time; did this in a type of way.


David Hockney ‘Pearblossom Highway, 11th to 18th April 1986 No.2′

A quote from the blog ‘thedelightsofseeing‘ says:

“All this took him 8 days so he did not only warped space and distance but also showed the passing of time in one image.”

This image amasses space, time, distance and movement, and warps them all into a layout of an image our brains can put together as a single image.

This is what I have attempted to do in a more ‘fluid’ manner, and instead of merging many pictures of one image, I have merged many pictures from many images to create a superimposed image.

Since the image is rather wide, I have broken it into pieces.

joiner1 joiner2 joiner3

When I lessen the opacity of the layers it becomes clear that they are many separate images, of similar, but not the same subjects.

scjoiner1 scjoiner2 scjoiner3

The theme of the joiner was Florida, (on a vacation in 2012) using shots from many different parts of Florida including Miami, The Keys, and St Petersburg, combining time, space, distance and movement into one, wide, fairly believable image.

While I do feel that the image was successful in demonstrating the same idea warping of space and distance as Hockney, the superimposed, idyllic image created doesn’t present that same euphoric feeling as when looking at Hockney. This I believe is due to the multiple angles and viewpoints he gave the piece, giving an image some imposed curvature instantly adds to the ‘realness’ of the work as it mimics the 360 degree field of vision humans have. In my image the sea line is perfectly straight throughout, though in real life the curve of the earth could not be noticed it is still present, perhaps even the notion of a slightly curved sea line would have made the joiner image much more effective.

Processing Workshop 2 – ‘While loops’

Processing.org’s reference page on ‘While’ loops says:

“Controls a sequence of repetitions. The while structure executes a series of statements continuously while the expression is true. The expression must be updated during the repetitions or the program will never “break out” of while.”

The computer is basically always going to execute whatever is in the ‘while’ while that thing is true, for example:



‘while’ the number of circles is more than 0, the float, fill and ellipse commands will always execute, until the loop is broken by the ‘numberOfCircles’ function that maxes out the circles at 1o.





Pretty stuff.

Processing – Workshop 1

In the first processing workshop we experimented with the ‘draw’ ‘mouseClicked’ and ‘if else’ commands, we had to set up a space for the program to exist in, draw the ellipse where the mouse was pointing (mouseX, mouseY) and the size of the ellipse (80, 80), program what it will do when the mouse is clicked (mouseClicked) and gave it an if and else variable stating that if the mouseX was more than 400 pixels it would erase all the ellipses, if the mouse was less than 400 it would say “Click over to the right”, though a very simple looking program, a fair amount of code went in to building it; this was probably the biggest misconception I had about programming, until you start learning how to do it you take for granted the super-sleek, fluid programs that are immensely powerful (photoshop etc), this did leave me unsettled and feeling a tad out of my depth in regards to getting to a competent level of programming knowledge; obviously much practice is needed.

complete set of code:

void setup() {
  println("Setting up our program");
  size(600, 300);

void draw() { 
  ellipse(mouseX, mouseY, 80, 80); 

void mouseClicked() {
  println("User has clicked the mouse");
  if (mouseX > 400) {
  } else {
    println("Click over to the right");

void clearStage() {
  println("Clear stage function called");

Workshop 1 Screenshot of application in action.

Task 1 – Alphabet Photo Collage

Though fairly unorthodox, my alphabet collage highlights a much more abstract view of everyday life, and rather than searching for bold, obvious letters; I concentrated more on the subtle, ‘suspend your disbelief’ motif.

This did, contrary to the brief required a touch more Photoshop than I imagine others have. But I still believe that this is a creative and different approach to the task.

Alphabet task 1

Click the image for full resolution

In hindsight I would have perhaps liked a narrower theme to work inside and perhaps better lighting on the Y letter.