Assignment 2: A Looped State

Design 240

The Brief

To create a looping animation/GIF of the reason behind the why of your chosen statstic exists in its current state. This is to be created with the use of Processing and coding with Java.

Process

I started off this project by looking into the statstic of "3,106 tonnes of clothing are wasted before being sold or worn." and the reason behind why it exists.

From these reasons I had started to create concepts in which I had asked my peers for feedback on which were the best to represent my "why" on the statstic.

I had then started on creating a GIF to then represent the behind the reason to why this statstic exists. I had documented this process within miro which can be looked at below.

Final Output

Artist intent

When expanding on the idea of what were the reasons and the "why" behind my chosen statistic, "3,106 tonnes of clothing are wasted before being sold or worn.", I found that one of the main reasons was changes within a season, retail stores would throw away clothing that doesn't fit the season as customers wouldn't buy them anymore.

From this, I then created my looping gif with the idea of showcasing how clothing would get thrown out as it passes its season and becomes "out-of-date". I showcased this idea with a rotating background with illustrations of each of the seasons; in the foreground, I looked into specific clothing pieces that are linked with each season and showed them coming up to the centre before getting thrown into the bin once the background had turned to the next season. This then becomes a looping cycle of throwing out clothes from stores once they hit past their season.

I also wanted to confirm the themes of each season and make sure each season had a colour palette to help make each season with its specific clothing be with each other. Seasons also often have colours associated with them, helping aid in visual clarity.

Source code

            
PImage background, winter, summer, spring, autumn, binBottom, binLid, binBottomFront;
//Variables being decleared
float c = 0; //Count value - used for rotation
float bgRotation = 0; //Rotation value for background
int pause = 0; //pause value
int y=-200; //y value for the bin animation
int t = 0; //for transparency
int s = 4; //switching clothes drawing

void setup() {
  frameRate(50);
  size(1000, 1000);
  //Loading in the drawings of each asset 
  background = loadImage("assets/background.png");
  winter = loadImage("assets/winter.png");
  summer = loadImage("assets/summer.png");
  spring = loadImage("assets/spring.png");
  autumn = loadImage("assets/autumn.png");
  binBottom = loadImage("assets/binBottom.png");
  binBottomFront = loadImage("assets/binBottomFront.png");
  binLid = loadImage("assets/binLid.png");
}

void draw() {
  //Set the images to translate around the bottom middle area
  //to allow for it to rotate/pivot there. 
  scale(2);
  imageMode(CENTER);
  translate(250, 500);
  
  //Rotation to only apply to the background/seasons
  pushMatrix();
  translate(0, 300);
  noTint();
  rotate(radians(bgRotation));
  image(background, 0, 0);
  popMatrix();
  
  
  clothing(s);

  //Count system so that every 90 degrees it pauses
  c += 1;
  t+=5;
  bgRotation += 0.33;
  if(c%90 == 0){ 
    c -= 1;
    //To stop the bin at the right timing
    bin(y, s);
    if(y<190){
      y+= 3; 
    }
    else{
    //tint variable
    t-=30; 
    }
    pause += 1;
    if(pause == 182){ //Change the value to change the pause time
      c += 2; 
      pause = 0; 
      y = -100; 
      t=0;
      s+=1;
    }
  }
  //Save frames for gif 
  //if(c<1092){
  //  saveFrame("frames/####.png");
  //}
}

void bin(int y, int s ) { //Animation of bin closing
  noTint();
  rotate(radians(-c)); 
  image(binBottom, 0, -55 + -y);
  
  //Sandwich the clotihng inbetween the two layers of the bin
  //so that the clothing looks like its going inside the bin
  pushMatrix();
  clothing(s);
  popMatrix();
  
  noTint();
  image(binBottomFront, 0, -55 + -y);
  image(binLid, -7, -555 + y);
}

void clothing(int s){//Function for clothing animation and swaps
  rotate(radians(c));//Rotations for the clothing
  
  tint(255, t);//Apply transparency
  
  //System where variable s will increase every 90 degrees
  //to switch between each of the 4 clothes
  switch(s%4) {
  case 0:
    image(summer, -250, 0);
    break;
  case 1:
    image(spring, 0, 250);
    break;
  case 2:
    image(winter, 250, 0);
    break;
  case 3:
    image(autumn, 0, -250);
    break;
  }
}
            
        

Reflection

From this assignment I had felt like I learnt some new things with processing, learning how to implement PImage and playing around with the transparent / tint() function.

Looking back on this assignment I do feel like I didn't get enough time to fully do iterations and flesh out the final output due to other courses and self time management, which I would lie to get better at. My main issue was exporting the file, due it to being too large for both Miro and discord and trying to find ways to compress it without damaging its quality was hard and somewhat upsetting that the final output on Miro doesn't fit the final GIF output I had gotten on processing.

Overall this assignment was enjoyable and fun, despite the issues I had to deal with.

Miroboard link: https://miro.com/app/board/uXjVNmcjx3A=/?share_link_id=596633213485