Des 240 -Assignment 1

UN development goal: 2. zero hunger

26.4% of the worlds population is affected by moderate or severe food insecurity. Up from 23.2% in 2014%

For this project, my design mission was to visually display my chosen statistic of "26.4% of the worlds population is affected by moderate or severe food insecurity. Up from 23.2% in 2014%" by creating a short sequence of abstract shapes and images that could then be turned into a gif. I created this project in Processing, with all of the code being written in Java. Due to various levels of time mismanagement on my behalf, this project did not exactly turn out the way I wanted it to/hoped. I am extremely happy and thankful for the skills (learning/experience with java) this project has given me however.

Statement of intent:

In order to represent/portray to the viewer that the UN goal I was focusing on was zero hunger (goal 2), I started with a series of white circles appearing inside of a blank black space. This is meant to invoke "bites" being taken out of a larger object, representing food/the act of eating. There are 15 of these bites, with their X and Y position being randomly generated, meaning each time the program is run, a new pattern is created. Due to their size, these Dots take up roughly 26% of the dark area (food).

The other notable component of my design is the encroaching wall of nothingness (white) moving towards the center of the canvas. This represents the people not having any food, and it's ever increasing size symbolizes that the problem has gotten worse over time, from 23% to 26% over six years (the wall itself moves across the screen until it covers roughly 26% of the canvas)

Randomness of the project

In order to save critical programming time, the location of the circles is controlled by a random number generator, meaning each time the program is run, a different pattern of circles occurs.

For example:

This is a gif of the next time I ran my program, with the exact same exact code however due to to where the circles were placed being somewhat random (The X value is generated between 500 and 1000) a different end result occurs every time, at least in terms of where the circles are located.

Creation process:

This project has gone through a number of different narrative designs and iterations, the first of which (my initial idea), is shown below:

This was the first narrative idea I sketched for this project, it involved a pizza being slowly eaten away, leaving only 26% remaining, and was primarily designed around trying to involve as much existing code as I had already created from in class work, in order to try and cut down on the amount of coding I would need to do. This narrative was eventually scrapped, however the idea of an object having "chunks" taken out of it to simulate eating, would go on to influence my final project. In class feedback from Hans, helped me realize the shortcomings of this narrative design.

I then went on to create a multitude of other sketches, exploring a number of different narrative designs and ideas. Once I finished this process, I stepped back and looked at all of my ideas, eventually whittling them down until only my final design remained. I ended up choosing this narrative design for a couple of reasons, firstly I believed it could be completed in the limited time I had left to do this assignment in, this was a critical part of my decision process, and one of the primary reasons that I passed on most of my other ideas and designs, and secondly was because out of all of my ideas, I felt as though it represented the fact that this narrative was about food, the best. When I was sketching and thinking up these ideas, I kept having doubts over whether they could accurately portray to the user what UN goal my design was based one. While in no ways perfect, I believe that my final design represented and portrayed to the user, what the goal was, substantially better then any of my other designs did.

During this testing and ideas phase, I also created a small number of prototype and test projects in processing, in order to help flesh out my ideas more, and let me get a better sense of what my ideas would look like in motion.

Gif of my first narrative design, this constantly growing circle was eventually going to have parts taken out of it, in order to represent bites of food. This design was scrapped after receiving feedback from Hans.

Short Gif of another design idea I had, this shape was created by linking the draw function to my mouse courser, meaning it would draw a line in the direction of where I moved my mouse. While incredibly satisfying to play around in, this design was also eventually scrapped.

Design learnings:

In this course I went from never having coded in java before, to producing numerous java projects within a matter of weeks. While my narrative design still needs work, I believe I now have a somewhat proficient understanding of the coding basics, and if asked, would be able to, at least somewhat, accurately explain them to others. Through this class I have also began to look at data in a new light, with Yuval's Ted talk really opening my eyes to how dangerous data can be, when used by countries/corporations with malicious intent. I will continue to look into, and research this matter in my own time.

Code:

In this segment I will focus on, and talk about interesting or noteworthy pieces of my code, before eventually posting the full wall of text further down below.

randxCirc = random(240,1000);

This small section of my code pertains to how the circles are drawn in. The program picks, at random, a number between 240 and 1000, this number then becomes the X variable for my the circle, created when I press a key. Code further along then changes this Y value slightly, to decrease the chances of two circles overlapping or being drawn in the same spot. While an interesting Idea, I believe I should have just used set X and Y values

for (float y =0; y < 1100; y+=10) { 
    
      pushMatrix(); 
      
      translate(50,0);
      noStroke(); 
      fill(255);                                               
      circle(recX, y, recSize); //Controls the position of the moving rectangle                                   
     
      popMatrix(); 
      
    }

 if (recX < width/4) 
    { 
      recX+=10; 
      delay(1000); //Controls the speed
      //println("Rectangle X position is : ",recX); 
    }

This section of code controls the speed and location of the advancing white rectangle, it is in fact made up of many small circles overlapping each other.

My entire code is posted below:

//My Variables
float randxCirc = 694;
float randyCirc = 75;
int sizeCirc = 50;

float recX = 0; 
float recSize = 100;

int CountCirc = 0;

int endSlide = 0;

//Size and color of background
void setup()
{
  size(1000,1000);
  background(0,0,0);
  noCursor();
}

//Code that Creates the moving rectangle
void draw() {
 
  if (recSize <= width/4) { 

    for (float y =0; y < 1100; y+=10) { 
    
      pushMatrix(); 
      
      translate(50,0);
      noStroke(); 
      fill(255); 
      circle(recX, y, recSize); 
      
      popMatrix(); 
      
    }

    if (recX < width/4) 
    { 
      recX+=10; 
      delay(1000);
      //println("Rectangle X position is : ",recX); 
    }
    
  } 
    else  
      endSlide += 1;
}

//Code that creates circles with a key press, in this case 'd' or 'D'
void keyPressed()
{
     if(key == 'd' && (CountCirc <= 15) || key =='D' && (CountCirc <= 15))
     {
        draw();
        fill(#ffffff);
        noStroke();
        circle(randxCirc,randyCirc,sizeCirc);
        
        randxCirc = random(240,1000);
        //print(randxCirc, " ");
        
        randyCirc = random(240,1000);
        //print(randyCirc);
        
        CountCirc += 1;
        //print(CountCirc, " ");
        
        randxCirc += 50;
        randyCirc += 50;
        saveFrame("output/Circle-######.png");
     }
     

     //Code that creates the end screen message
     if( endSlide == 1 || key == 'f') 
      {
        textSize(12); 
        textAlign(RIGHT); 
        fill(0,0,0);
        text("26.4% of the worlds population\nis affected by food insecurity  \nup from 23.2% in 2014", width/4, height/2);
       }

     //Code that allows the user to manually take screenshots. //Screenshots are also saved every time a circle is created   
     if(key == 'h')
     {
       saveFrame("output/Circle-######.png");
     }
}