Design. Isabella

[isabelladsdn]

Final animation - the two codes of animation integrated together, and title, poem, and credits. The quality hasn't come out great but will have to do 

[isabelladsdn]

Final code for the start and end of my animation, I included the same watercolour texture into the head to keep the aesthetic consistent, the white of the circle  expands to eventually create a blanks screen, then reverses this process. 

Below is the code for this animation

PImage head;

PImage colour;

float diameter=700;

float angle = 0;

float angle2 = 0;

float x1,x2;

void setup()

{

  size(1280,720);

  background(200); 

  noFill();

  head = loadImage("head silhouette.png");

  colour = loadImage("water colour.png");

  frameRate(24);

  }

  void draw()

{

  float d1 = 600 + (cos(angle2) * diameter/2) + diameter/2;

  float d2 = 60 + (sin(angle) * diameter/2) + diameter/2;

   x1 = width/2 + (70 * cos(angle));

   x2 = width/2 + (50 * sin(angle));

imageMode(CENTER);

image(colour,width/2,height/2,d1,d1);

image(head,width/2,height/2);

fill(255);

noStroke();

ellipse(x1, height/2 - 120, d2, d2);

ellipse(x1, height/2 - 80, d2, d2);

ellipse(50+ x1, height/2 -100, d2, d2);

  angle+=0.03;

  angle2+=0.01;

}

[isabelladsdn]

Storyboard for my final animation, just to get a better idea of how much time I have to fill, as 15  seconds is pretty short, my original mountain scene itself was 15 second long so I will need to cut that down. 

[isabelladsdn]

looking into the idea of having and opening and end sequence either side of the mountain scene that are as if we are entering  mind and memory, I want the images to be quite simplified like above, and maybe have the white of the brain expand until the screen is blank, at which point the mountain scene will start. I like the idea of linking the start and end so will have the reverse of the beginning at the end s if w are coming back out of the memory, as this is how the william Blake poem ends, with him coming back to reality after reminiscing.

[isabelladsdn]

The mountain scene with more details added, like the wind, birds, stream and adjustments to the clouds and timing etc.  Some parts of the code are from the processing website, 

like the wind sequential animation - http://processing.org/examples/sequential.html

 and the birds which move up and down aswell as across using sine and cosine - http://processing.org/examples/sinecosine.html

I also used alot of 'if' statements for the framecount to make things appear at certain times in the animation.

I didnt want the movements between scenes to be too harsh so i made the end fade into white, because I am considering creating a code for the beginning and end that express the idea that this scene is a memory. 

here is the code of this animation. 

float x=0;

float y=0;

float z=0;

float c=0;

float d=0;

float e=0;

float n=600;

float m=600;

float w=600;

float k=0;

float angle, angle2;

float x1,x2;

int offset;

PShape bird;

PImage mt1,mt2,mt3; 

PImage cloud;

PImage wave;

PImage head;

int numframes = 40;

int frame = 0;

PImage[] image = new PImage[numframes];

void setup() {

  frameRate(25);

  background(255);

  size(1280, 720);

  smooth();

 head = loadImage("head silhouette.png");

  mt1 = loadImage("mt1.png");  

  mt2 = loadImage("mt2.png");  

  mt3 = loadImage("mt3.png");  

  cloud  = loadImage("cloud1.png");

  wave= loadImage("wave.png");

  bird = loadShape("birrrddddd.svg");

     image[0]  = loadImage("1.png");

  image[1]  = loadImage("2.png"); 

  image[2]  = loadImage("3.png");

  image[3]  = loadImage("4.png"); 

  image[4]  = loadImage("5.png");

  image[5]  = loadImage("6.png"); 

  image[6]  = loadImage("7.png");

  image[7]  = loadImage("8.png"); 

  image[8]  = loadImage("9.png");

  image[9]  = loadImage("10.png"); 

  image[10] = loadImage("11.png");

  image[11] = loadImage("12.png");

  image[12]  = loadImage("13.png");

  image[13]  = loadImage("14.png"); 

  image[14]  = loadImage("15.png");

  image[15]  = loadImage("16.png"); 

  image[16]  = loadImage("17.png");

  image[17]  = loadImage("18.png"); 

  image[18]  = loadImage("19.png");

  image[19]  = loadImage("20.png"); 

  image[20] = loadImage("21.png");

  image[21] = loadImage("22.png");

  image[22]  = loadImage("23.png");

  image[23]  = loadImage("24.png"); 

  image[24]  = loadImage("25.png");

  image[25]  = loadImage("26.png"); 

  image[26]  = loadImage("27.png");

  image[27]  = loadImage("28.png"); 

  image[28]  = loadImage("29.png");

  image[29]  = loadImage("30.png"); 

  image[30] = loadImage("31.png");

  image[31] = loadImage("32.png");

  image[32]  = loadImage("33.png");

  image[33]  = loadImage("34.png"); 

  image[34]  = loadImage("35.png");

  image[35]  = loadImage("36.png"); 

  image[36]  = loadImage("37.png");

  image[37]  = loadImage("38.png"); 

  image[38]  = loadImage("39.png");

  image[39]  = loadImage("40.png");

        }

void draw() {

 x1 = 100+(70 * cos(angle));

 x2 = 120+(70 * sin(angle));

          background(255);

    image(cloud, 500+e, 50,200,100);

    image(cloud, -200+d, 100, 350,200);

 image(mt1, 0,30);

  frame = (frame+1) % numframes;

   if(frameCount>40){

    if(frameCount<80){

          image(image[(frame) % numframes], 0, 0);

 }}

 if(frameCount>=80){

   image(image[39],0,0);

       }

      if (frameCount<=50){

        x+=-0.8;}

          shape(bird,50+e,x1,30,8);

         if(frameCount>50){

 shape(bird,d,x1,50,20);

 shape(bird,e,x2,40,10);}

   image(mt2, x,0);

     image(cloud, 300+c, 150,500,300);

      image(cloud, -800+d, 120,250,100);

     offset+=5;

         if(frameCount>85){

          image(wave, 400+m,500, 300, 170);

          image(wave, 400+n,550, 200, 130);                                                                                                                                                                                                            

          image(wave, 400+w,600, 150, 70);

     }

              if(frameCount>95){

          image(wave, 550+m,480, 300, 170);

          image(wave, 550+n,530, 200, 130);  

          image(wave, 550+w,580, 150, 70);

     }

                   if(frameCount>105){

          image(wave, 700+m,460, 300, 170);

          image(wave, 700+n,510, 200, 130);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

          image(wave, 700+w,560, 150, 70);

     }

      image(cloud, d, 80,100,80);

            image(cloud, e, 300,110,80);  

            image(cloud, -500+e, 200,110,80);  

     if (frameCount<=75){

        y+=2;

      }

 image(mt3,-100+y,0);

  z+=.02;

  c+=5;

  d+=3;

  e+=4;

  w+=-2.3;

  n+=-2.6;

  m+=-2.8;

 angle+=0.002;

 angle+=0.02;

   if(frameCount>240){

    rect(0,0,width,height);

    noStroke();

    fill(255,k+=15);

}

    fill(255,100+k--);  

    rect(0,0,width,height);

    noStroke();

}

[isabelladsdn]

Video with the new imagery, similar to the last one but I do like the aesthetic a bit more, next i will just add in details to the scene, like birds, more clouds, and the poems speaks a lot on wind and water so I will integrate some of that sort of imagery. I'm not too interested in describing the poem line by line, but more showing the core ideas of it. 

[isabelladsdn]

Imagery I will use for my final. I'm using this water colour paint as the palette for my animation, I think it fits well into the idea of memory as it is blurred and textural, and the colours aren't representational of the imagery. I've kept each mountain separate so they can each be moved individually, and the cloud can be repeated in different sizes and moving at different paces. 

[isabelladsdn]

Animation of scenery, the code used is really simple but I think the idea was quite effective in making the scene have more depth.  I think this will be the animation that I will develop for my final, but will probably refine the aesthetic more as it looks fairly amateur. 

[isabelladsdn]

Here I was working with the imagery made earlier, making it longer so that in the code I could pan across it as if the camera was moving, and adding a layer of trees in keeping with the style, that would move at a different pace to make the scene appear more 3D.

[isabelladsdn]

Animation testing out the tessellated tree imagery, just simple scale and rotation code, with the background fading through colours. I think that it is fairly effective as an abstract interpretation of the poem, showing the idea of the natural space described in the poem , but the kaleidoscope effect integrating the idea of it being a memory. I'm not sure if using photos will be the most effective way for this animation, as it restrains how i can manipulate them, where as hand made imagery I can create exactly as I wish. 

[isabelladsdn]

Analysing image Manipulation Codes

Image deconstruction – Interlaced  

I really like the idea of working with a simple image and using repetition and movement to abstract it from a simple photo, which the work ‘interlaced’ plays with.  I find this work particularly of interest because it touches on ideas that I wish to explore in my code; the poem I have chosen is about a memory, and the imagery in this of a head in profile is one I could work with when trying to show the idea of getting inside someone’s mind.  I also like the aesthetic of the light opacities over lapping with each other, and the simple idea of mirroring the image mean that it travels in both directions rather that one, which Is made in the code with the simple int mirror = -1 to flip the image. The image is also quite unpredictable even though its movement is conducted by my mouse, with the slight jitter I assume is made by the jerk  = 2; line, which stops it from being smooth and makes it more interesting.

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

Image Driven Drawing Machines - Image based aggression

In this particular code I find really interesting the idea of the image at first seeming abstract and without purpose, but growing to create a figure. The code differs its starting points and how it get the final image each time the code is run, and appears to just be lines at random, but at some point you can recognise a face,  I really enjoy how it plays with the representational and the abstract, and the integration of an image, rather than a picture suddenly appearing.

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

Portraits – Thunderstorm I really like the effect of this code on the image, the way that the movements of the lines that create the face creates a three dimensionality to the image, and their movement which are incremental by the line angle+=0.01; so they move and almost make the figure appear to be moving, and bring life to what would otherwise be a still photo, the movement though is not simply linear, but more interesting and dynamic, which I assume is create though the inclusion on sine a cosine in the lines  co=cos(angle); and   si=sin(angle);

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

[isabelladsdn]

Starting to think more about what sort of aesthetic I want to go for, considering a symplistic abstracted scene like the top image, or using real images of scenery and tescelating them to become more abstract like the second two images. I dont want the images to be too literal becuase the poem is about going into a memory. But I will try out these images in code to see how they look in motion.

[isabelladsdn]

I really liked the aesthetic of James Paterson’s Silent Animation , and the idea of creating a simple loop of images that can be repeated and overlapped seems like a smart way to get the exact imagery that I am after. I gave this sort of animation a go and it worked out quite well, i think I will  use this technique more as I experiment and refine the aesthetic more.

[isabelladsdn]

[isabelladsdn]

Final poem I will be basing my animation on.

Song: Memory, hither come

Memory, hither come,  And tune your merry notes; And, while upon the wind Your music floats, I'll pore upon the stream Where sighing lovers dream, And fish for fancies as they pass Within the watery glass. I'll drink of the clear stream, And hear the linnet's song; And there I'll lie and dream The day along: And, when night comes, I'll go To places fit for woe, Walking along the darken'd valley With silent Melancholy. 

William Blake

[isabelladsdn]

Joshua Davis Lecture– Beyond Play: The Art of Creative Coding

Joshua Davis uses creative coding as his artistic medium, and in this lecture he expresses his ideas on how work and play interweave.   He has a clear passion for using coding to create unique works of art, and his use of processing was fundamental in creating compositions that would be near impossible by hand, which differ each time the code is run. He speaks of his inspiration for making art, often from patterns he finds in everyday life. Inspired by these he starts to produce codes on his own accord, and when designing for a client he adapts these to fit the brief; this is what he sees as the overlap between play and work. He spoke of how more recently he has been bringing these codes into the physical world, by creating a composition in processing and then recreating them in more traditional mediums like simply drawing them. He again reiterates his theme of ‘Beyond Play’; he brings his artwork into another passion of his which is skateboarding, by drawing his coded works onto skateboards. I took particular interest in one quote he mentioned “The type of work you make is the type of work you’ll get hired to do” which was really proven through his work that he spoke of. He showed works that he created on his own account and was inspired to do in his own time, that later became suitable for client  work. I was really inspired by his passion for his work and the idea of interweaving work and play, which he proved was not only possible, but a very successful mind-set.  

[isabelladsdn]

DSDN141 Project 3 Summary

The concept of my object was to portray the ideas of anxiety. More specifically I was interested in the idea of internalized anxiety; the structured, defensive metal exterior covering up an unstable base that you can see right through.  The switch at the apex of the structure is asymmetric; inviting you to flick it to complete the tapered angles, but that small flick sets it off and erupts into a continuous loud noise as if highly irritated. I wanted to exploit the materials to create this representation on anxiety; the cold, hard, sheet metal creating a protective shell which mostly covers the base, representational of trying to suppress anxious tendencies and cover them with a strong exterior. And the resin on the base speaks to the vulnerability that comes with anxiety, the unstable base letting you see right through to internal workings.  The form of each part reflect the same ideas, the metal structured and calculated in contrast to the rounded base that sits unsteadily on a surface.

This project has taught me a lot about making purposeful decisions and having a clear direction in my design process. Because we had to commit to a form early on because we had the switches printed meant that I was dedicated to an idea and focused more on executing it well and smaller details.