Seth-Design

My journey through exploration, discovery and innovative creation in design at Victoria University of Wellington, beginning in 2013.

[seth-design]

FInal Animation

This is my final animation for DSDN142.

It is inspired by the poem 'The Sea' by Emily Dickinson.

I chose to focus on using images which I created using the computer as well as photos I took. My intitial concepts involved hand drawn elemtns however I decided to take a different approach and focus only on photographic elemtns to give a more realistic feeling than stylized or abstract.

[seth-design]

Source Images

In order to produce my animation, I used a variety of resources which were fed into processing. This did not just include photographs but images I made using photoshop. This is a heightmap and a colour map which were used to extrude the plane in 3D and texture it.

[seth-design]

My Code

Selected code files. These are the later versions of my .pde files I used to create my animations.

These code snippits do not work by themselves and are meant for viewing only. There output may produce unexpected results due to editing in order to create the different render passes - some lines may need to be uncommented.

They are all made by me except for the water effect which I heavily modified but is based on code from http://www.openprocessing.org/sketch/43543 by Rodrigo Amaya

[seth-design]

Post-Processing in Processing

I took the idea of rendering passes furthur, also looking at how Joshua Davis works; I decided to take the frames which I put together in Adobe After Effects back into processing so I could overlay the rain effects. This was neccessary becuase the rain effect distorts the image behind it. The first image shows the rain itself created in 3D space to allow for the camera rotation to be consistant. The scond shows the frame overlayed with the rain and a motion blur added to enhance the effect. The final frame shows the previous frame which has been put into my droplet code.

[seth-design]

Reference and Source

In order to get the effects I wanted in my animation I looked at the world around me. The photo I took of Oriental Bay was inspiration for water and was also used to make a panoramic shot which was in turn used in the final composite.

The photo of droplets was reference of how light refacts and droplets create distortion of the image behind it.

[seth-design]

Render Passes

I decided early on that the best way to make the finalo composite of my animation would be to use multiple renders of the same scene each with a different goal in mind. I detailed this in my planning stages with some ideas on what I would need.

I find that complexity is best built up using layers and this is true also with video.

I modified my skecth in order to render differently, these layers had different purposes which were easier to use in post production. There are diffuse renders for colour, a specular render for highlighting areas where more light hits and darker renders for increased contrast.

These layers were overlayed and used as masks in Adobe After Effects.

[seth-design]

Open Processing - Review 3

http://www.openprocessing.org/sketch/62776

I like this more abstract approach to representing an image. It uses 3D pyramids to represent each pixel and the height is modified to create waves through a plane. This is similar to what I am doing in my own work where a plane is created in 3D and then modified. This effect is very interesting because the colour also pulses which complements the movement and change in height of the pyramids. Again the usefulness of programming can be seen because the behaviour of the sketch can be changed easily so the image can be changed, the colour and the behaviour of each pyramid.  

[seth-design]

Open Processing - Review 2

http://www.openprocessing.org/sketch/41043

I like this sketch because it takes a very simple idea which seems complex and breaks it down. This looks visually interesting and because it has a limited colour palette it stands out and contains only what it needs to distinguish form and tone. Technically it is a good example of how something can be made and repeated. What it is referred to as the ‘ant’ is made with its task; to draw a single line traversing the image. This is then transferred from the single to multiple scale by making a colony so to speak. This is easy to do in computer generated design because a single task can be repeated with very little repetition in code. I like the idea of focusing on the complexity of a single thing and then expanding this to work with many.

[seth-design]

Open Processing - Review 1

http://www.openprocessing.org/sketch/6147

This sketch is interesting because it is a physics simulation which looks good but is technically very easy to create. Using physics based approach is good because it gives very realistic motion if done correctly and allows for anything to be ‘plugged in’ for a completely different outcome. This is the good thing about parameterized design; subtle changes can be done quickly and efficiently to prototype a variety of ideas. I think from a design perspective it is good because it begins distorted and slowly forms the image. The viewer is unaware of what the image is until it is almost formed.

[seth-design]

Technical Planning In order to spend less time programming I decided to plan how I could make the final composition and how it would work technically. This involved thinking about how different elements could interact with each other and how to make 'tricks' to convey the same amount of information but without  complex code. Not all of these elements were used however by doing this I was able to abstract my code more and seperate it so in the final composition I could just use the sketches I wanted to.

[seth-design]

First Storyboard

This storyboard details some possibilities for developing my sketch. Instead of presenting the plane as a plane, I decided through the help of the tutors to look at making more use of camera angles to mask what it actually is.

[seth-design]

Initial Development

These are some of the initial ideas I had when looking to develop the sketch using the heightmap focusing on poem 'The Sea' by E. Dickinson.

[seth-design]

Short Processing Animation 3

[seth-design]

Short Processing Animation 2

[seth-design]

Short Processing Animation 1

[weandthecolor]

Spherikal - Motion Graphics by Ion

More about the animation on WE AND THE COLOR.

WATC//Facebook//Twitter//Google+//Pinterest

[seth-design]

This is an excellent example motion graphics which explores positive and negative space to create complex and interesting animation.

[seth-design]

Final Web Comic

This is my final web comic. My goal was to remove the normal comic structure which was necessary in the printed Zine. The traditional comic structure allows for the story to flow in the way the author intends it however it has a weakness which is that everything can be seen on a page. Unlike a movie where scenes can only be seen sequentially, a comic has to make use of page turning to hold suspense otherwise the viewer can accidentally see the outcome of the story prematurely.

In my web comic I decided to minimise the interface as much as possible to put emphasis on the content itself. I like this form of the comic because I am able to show motion in a more vivid way. The scenes can also be shown more sequentially. Only the previous and next scene can be seen and only a small portion. 

The other form of interactivity (other than scroll) is hovering over the small glowing buttons. This reveals text boxes, I chose to have some hoverable in less tense moments or scenes which have the protagonist in focus so that it seems more like interacting with the protagonist directly rather than just viewing what is happening.