top of page
  • Alice

Looped States

Updated: Oct 29, 2021

Research phase

The second assignment of DES240: Designing with Data course was to continue on with the same statistic from the previous assignment and create an animation with graphics created from tools such as Illustrator. We needed to know in-depth as to the reason why that statistic exist hence I went through thorough research of the causes.


Nearly 1 in 4 NZ adults have poor mental wellbeing.

However, the reason why adults may go through poor mental wellbeing was so vast and individualised it was difficult to decide on the right one to work with.


Then I came across this post on Instagram.


As the similarity between what things people are going through worldwide would be the COVID-19 pandemic, I decided to focus on this topic. Then the alert level in New Zealand was raised causing lockdown, which sparked my idea of working with loneliness.


This video helped me a lot to understand loneliness.


 

Process phase

It was only a matter of time to work on ideating and creating the animation.


Rough concepts of ideas:

During progress check with my tutors, they commented that the third idea visualised a wall - the wall building in between people representing lockdown - hence I decided to develop this idea for the final design.


 

Concept video exploring the composition with rough assets drawn from my iPad:


After receiving feedback from peers that the animation appeared visually crowded hence I adjusted the idea for the final animation.


Sketch of how it will appear after the 'wall' is built between them as it looked visually packed before:


More processes can be found here:


 

Final design


Statement of Intent

After exploring my chosen statistic from my previous assignment in-depth, I realised there is a vast number of causes as to why someone may experience poor mental wellbeing. Due to this, I decided to look into a problem that everyone has in common, that everyone experienced - COVID-19. Since everyone in New Zealand and worldwide has experienced being in quarantine and having to stay within their bubble for a long time alone, I realised that poor mental wellbeing could derive from their loneliness due to being in quarantine. Then I developed from that idea by showing the process of people going through lockdown - four different people standing; masks are worn; walls are built; then they are placed in their personal space finding ways to enjoy staying home. However, one person does not cope with this phase and goes through 'loneliness'. Then it rewinds back representing people going back to their normal lives. With this animation sequence, I wanted to represent the different levels we go through during covid lockdown and create awareness of the fact that not everyone can cope with being alone but does not show it.


Final code


PImage people;
PImage mask;
PImage maskbase;
PImage wall;
PImage scene;
PImage end;


int wallY1 = 1000;
int maskY1 = 0;
int transparency1 = 0;
int transparency2 = 0;

int transparency3 = 0;
int transparency4 = 0;
int wallY2 = 0;
int maskY2 = 323;

boolean finish = false;

void setup() {
  size (1000, 1000);
  frameRate(10000); 
  transparency1 = 0;

  people = loadImage("asset 1.jpg");
  mask = loadImage("asset 2.png");
  maskbase = loadImage("asset 2.jpg");
  wall = loadImage("asset 3.png");
  scene = loadImage("asset 4-1.jpg");
  end = loadImage("asset 5.jpg");
}

void draw () {

  image (people, 0, 0);

  if (!finish) {
    step1();
    step2();
    step3();
    step4();
    step5();
    step6();
    step7();
    step8();
    step9();
  }
 
}

void step1 () {
  if (frameCount > 150) {
    image (mask, 98, maskY1);
    maskY1 += 1;
  }
}

void step2 () {
  if (maskY1 >= 323) {
    maskY1 = 323; 
    image (wall, 230, wallY1);
    wallY1 -= 1;
  }
}

void step3 () {
  if (wallY1 <= 0) {
    wallY1 = 0;
    tint (255, transparency1+=3);
    image (scene, 0, 0);
  }
}

void step4 () {
  if (transparency1 >= 255) {
    tint (255, transparency2++);
    image (end, 0, 0);
  }
}

void step5 () {
  if (transparency2 >= 255) {
    tint (255, transparency3+=3);
    image (scene, 0, 0);
  }
}

void step6 () {
  if (transparency3 >=255) {
    tint (255, transparency4+=3);
    image (people, 0, 0);
    image (wall, 230, wallY2);
    image (mask, 98, maskY2);
  }
}

void step7 () {
  if (transparency4 >= 255) {
    wallY2 += 5;
  }
}

void step8 () {
  if (wallY2 >= 1000) {
    maskY2 -= 3;
  }
}

void step9 () {
  if (maskY2 <= -100) {
    finish = true;
  }
}




11 views0 comments

Recent Posts

See All
bottom of page