Tuesday, 29 May 2012

Final and evaluation






Pros:
- I think the composition and setting has progressed from my original version (the two characters in the cave). It begins to evoke the sense of the character being within a world, rather than just an abstract space, and you begin to wonder what he is doing there and what the world is.
- I'm glad i stuck to having every part of the image created out of the character, rather than using any of the versions with added elements.
- The character being made out of himself worked well, and he still looks like he is meant to be like that, rather than looking like a bunch of pieces.
- The 3D aspect actually works surprisingly well, and brings another sense of depth and also an element of fun and playfulness to viewing the image.
- I'm happy that i did something a bit different to what you might expect for the brief, using the coding as a tool to control my vector character, rather than the only thing used.

Cons:
- I'm not happy that the solution to my colour problems was to remove them completely. I would have liked to find a colour solution to the image as well, but i've run out of time. However i plan to do this anyway for my own sanity.
-  I think the effectiveness of the character within himself has been lost a little, because the character is now quite small on the screen. I wanted to fix this by having a second image of a close up of the character, but when i tried to scale it up to take this screen shot, i had a problem in that some elements are being called from setup, rather than draw, so the scale wasn't affecting them.
- There are issues with details in the composition seeming a little forced and unnatural, due to their position and composition coming out of very uniform coding. For example a portion of the legs sticking out of the hills all pointing in the same direction doesn't seem very natural.

3D-ness

To solve both issues in one go, the idea came up to turn the image into a 3D image (one that you look at with 3d glass).

This would make it more immersive, and also give the viewer and extra layer of interest and removed the lacking feeling.

It also meant that the colour problem became void, as to do the 3D image, it had to become greyscale, to allow for the red/blue colours to work for the 3d element.

So to make the 3D image, i created two screenshots of my image, and in the second one the foreground elements where shifted to the right a small amount (50px in trial 1, 100px in trial 2).
 
I then followed a tutorial on how to turn these into a single image that works with the 3D glasses.

http://mars3d.jpl.nasa.gov/3DImages.cfm





I found out that the further apart the original two images, the further apart the red and blue lines would be (i guess that's obvious), but then it also effects how far apart the front and back layers look in 3D. I prefered the version below, where they are further apart, as the effect is a little more dramatic.


Once it was in greyscale, i realised the gradient wasn't having a lot of effect, and was also making the bottom left corner seem a bit strange (with the greys merging into each other).

So i just toned the gradient down for the final version.


some critiques

When i showed my latest version in class, it was felt that the colour was a bit too pastel-y, and that they didn't reflect the eerieness of the setting i had created.

Elle also expressed how the image itself, which presented a world and a character, suggested that there was more too it (i.e that it was part of a game or something). But then, because it was just one image, it kind of let the viewer down by not giving them anything else.

So, i had two issues - the colour not relating well to the context, and the image not feeling fully satisfying.

Monday, 28 May 2012

fog, hill, colour


In the last iterations, the background hill had an element of Photoshopping added in, with the top character on the pile not coming from code and rather, being pasted in while i was editing the background. You can also see it in the image below, where there is a characters head at the top of the background hill, that isn't present in the foreground hill (they were meant to be copies of each other).

I did this to save time, i suppose, however I was not happy with that because it felt a little against the spirit of doing a coding paper.

Gradient change

I also found that it was a little more interesting if i changed the direction of the gradient. Previously, it affected the top of the sky and flowed vertically down from the top of the screen. Now, it begins in the bottom left hand corner and is directed towards the top right. This makes it feel as though there is some sort of fog lying low on the ground in between the layers. I also provides a nice contrast for pieces of the foreground  hill to silhouette against.  




Colour In the next version, i added in a background colour. Because my gradient (the green part) has transparency as it fades out, i can simply change the colour it blends in to by changing the background of the code. I went for the blueish purple, as i felt it worked well with the green, but also provided a decent amount of distinction between the fog and sky. It also gives the sky a slightly more alien/surreal look.



In the iterations from the previous post, the background hill had an element of Photoshopping added in, with the top character on the pile not coming from code and rather, being pasted in while i was editing the background. You can also see it in the images above, where there is a characters head at the top of the background hill, that isn't present in the foreground hill (they were meant to be copies of each other).

I did this to save time, i suppose, however I was not happy with that because it felt a little against the spirit of doing a coding paper.

So i therefore took that out, and stuck with the hill sections that was derived from the coding.
It's not a huge difference, but i like the idea of trying to have as much of the image created through coding as possible.



simplifying

So i realised my outer spikes weren't adding much to the composition, and if anything, they were cluttering it.

Removed!



I also didn't like how in the background "hill" you can still see the outline and details of the character. I think it makes the composition too cluttered, when i want the focus to be on the main character, and for the scenery to be the second thing people look at. It's even cool if you don't immediately realise the "hills" are made out of the character.

To make this hill one solid colour, I couldn't just use tint, like i have been. This is because if i wanted it a light grey or something, it would tint all the white parts light gray, but then you'd still see the black details of the character.

So i had to make the background hill a separate image layer, so that i could adjust the colour values and drop it back in. So i did a screen shot of only the background "hill", edited the colour, and dropped it back into the code.



Following on, i wanted to further the use of hierarchy and scale, so i added in a secondary, silhouetted character on top of the background hill. I think this adds a second layer of mystery and depth to the composition, and makes you start to wonder more about what the characters are doing there (on top of piles of themselves). The distorted scale (the foreground character is much bigger than the legs poking out of the hill beneath him, while the background character is smaller) furthers the surreal, strange nature of the composition.


more depth

So to continue adding depth to the composition (not just literally, but in general) i decided to add a gradient colour as the background/sky, rather than a block colour. I used photoshop to create the gradient and imported it as a png with transparency, to overlay it on the image.

I also returned to the green/blue colour from my earlier character colour trials. I felt that, while being a colour i prefer, it also starts to establish an alien-esq, surreal skyline. 


I also added in more spikes on the side, as i felt at the time that it needed more on the sides. In my mind, these spikes directed attention inwards.

I then wanted to balance out the composition in the sky behind the character, as it felt too empty. I decided to put in the characters head like below, inspired by the cinematic shots you often see where a character is silhouetted in a massive moon. Obv in this case, it's not a moon but his head.



I then felt the spikes i added into the sides were a little strange and stuck out. So i tried adjusting the values so that they matched the rest of the composition better.

I also wanted to give the image more of a smog like feel (in terms of the gradient) so i over layed it inbetween layers, rather than at the back. To do this, I had to screen shot out the background "hill" individually and include it in the photoshop png file with the gradient. This was because i struggled to get the gradient to sit in between the two pieces, without filling in on itself because of the looping draw function. I think that's what was happening anyway (when i ran the code, the gradient would start off how it was meant to, and then progress into a solid green colour).




background hill

So after rejecting the idea of using an image, and finding the previous version to look quite flat, i started looking at ways to create layers and depth within the image.

One solution was to have the background "hill" as a lighter value than the foreground. This works to create the illusion of perspective because it is what naturally happens in landscapes. Things in the
distance become lighter due to the atmospheric conditions, and things in the foreground are darker.


So here is the first change.



And with the character in shot as well. The purple colour sits as a place holder colour.



new environment

While i like the direction the project is heading, I also feel as though it needs more. I think the composition at the moment lacks a sense of location or context. It's quite abstract. I like the idea of the character being within a little world (a world still keepin with the idea that it is made out of himself).

In class ideas were talked about, such as a city street scene, or a beach scene etc. I feel like although i want a context, i dont want to take it too literally. I want him to appear to be in a world, but i dont want that world to be obvious as to what or where it is.

So on that thought... I began with placing him within a hill like setting.
 



Slight variations on whether the "hills"are black, or if you can see the details of the character. I'm undecided at this point as to which is better.

As you can see, these images are very very very flat and boring.

So i tried seeing if i could incorporate photography into the project, and place in a background. I felt as though if an image was to be used, it'd need to fit with the surreal/odd feeling the character gives off. I thought perhaps a ruined city or something might work (although it does go against my previous thought to not make it too literal).

I tried it anyway...

This hasn't worked here, as there is way too much of a disconnection between the foreground graphics and the background image. They don't sit together well.

(p.s it is an image i own the copyright too, as i was too the photo while i was in rome).

I also think it's not worth exploring the photo option, because like i keep noting, i really want everything to be made out of the one character, including all the environmental aspects.

colour trials

Next up i did some colour trials. I wanted to add a little bit of subtle colour, to add more depth to the composition. I found i could simply tint parts of the image with colour like this...



Or i could change the colours in my initial character, and it would have a flow on effect to everything the character has been repeated in.

For example..




The colour choice is based off the colour set that i use for... well... most work i do at the moment. I think i'm stuck in a period where i only use these sort of blue/greens and red/oranges. However as it is something i enjoy, and it has been used throughout my work this semester, i decided to stick with it, as it means my work has a reoccurring element.

Anywho, i'll adapt the colour futher as i go and make sure it fits with the actual image, and not just my colour preference in general...

off centre 2 and silhouttes

I didn't completely disregard having things off centre, so i did some more tests. I kept the previous composition in tact, but made the canvas larger so that it became more of a cave that the character is within. I then moved this over to the side, to test whether it would be a more interesting composition.


While it is kind of cool, as it appears like a cave, i felt that making the main forms smaller took away from the effectiveness. I liked being able to see the details within the character, and in this composition it's a little harder.

I also did a test where everything was silhouetted, but i felt too that it took away too much of the interesting detail. In this version, there also isn't enough contrast between the elements.



off centre + dof

I also did some trials with moving the background off centre, for example..


But i preferred the symmetrical version, as it felt like it had a nice ordered structure to it, despite being made up of so many little pieces.

I also had a play with blurring out the background, to mimic a sense of having depth of field.


I liked this effect, but i felt as though it is something i should perhaps explore later on, when i have a final composition decided on.

background

Next i decided to turn it into a composition where the character was standing within an abstracted environment, still made up from himself (translated, rotated, scaled etc).

I first reflected the character, to create a playful sense of there almost being two little guys hanging out. 


Following on, i began to develop the background. In this test, i introduced some spikes.




But i then realised it went completely against my idea of building everything out of the character himself. So i changed it, for a spikey background created through the radial pattern again, but enlarged.

The above pattern has two lots of rotating characters, but it is a little hard to distinguish between them. To make this clearer, i made the section closest to the foreground completely black using a tint. In this version i also tinted the layer behind, to make the two characters in the centre pop out.

This works because the characters become the point of highest contrast between black and white values.


body

So i then took my approach from the earlier, and began by playing with translation and rotation.

Here are a couple of results.




I liked the rotation, so i again followed a previous thought, and began to build my character out of him self, in radial patterns.


back to it

After my little tangent, i made the choice not to restrict myself to coding the character, as i just couldn't see it working. Instead, i created a simply vector character, who had more personality and interest than the coded one.

It looks a little strange on the grey background in this blog, but that's because it's a png image with no background colour and it's drawing in what ever the default is for blogger. It's making the white line around his head look quite strange compared to the body, but on a lighter background, or multi-textured background, it's not so dramatic. 



I also began to take on inspiration from Tim Burton, as i really like his style of both character design, and overall cinematography and set design. I'm sure you know what his work looks like, but here are some images anyway. I thought this kind of surreal, silhouetted imagery could be effective in my design. For that reason my character is quite high contrast and features a lot of black.





tangent

I took a little tangent from my character idea at this point. Not as a rejection of the concept, I was just a little disheartened with my previous attempt. I made a spiral shape, and then played with the transforms and some mouse action.

I can't claim these have a high relevance to my project, i think it was more of a "let's just play about for a bit and come back to the project soon"






I also made another little character who i forgot to post about, so i will have to squeeze it in here.

It was a development of the first coded character. However this one was made in illustrator, but still keeping to very simply elements.

I tried patterning him as well, using translate and rotate + loops





coded character

So then i thought, let's make a character with code. On the off chance you haven't seen how bad it looks as you scrolled through the page,  I'll warn you now that it pretty much failed.

I made him with ellipses and all that. Then i began looking at the idea of a character within a character, by repeating himself in radial patterns over his body and eyes.


Looks lovely right?

Yeah, so then to try and salvage him as something useful, I started putting him into further repeated patterns, adjusting rotation, translation and scale in various trials. See below.