COURSEWORK: POPULATION SIZE

For the final project, I will be in a group of 5 (including myself), in my group are:

1. Lukas 
2. Jibraeel 
3. Eleonora 
4. Daniel

Our final project is to use an existing graphic to illustrate/represent the population sizes of each of our own countries; due to the group having a diverse range of nationalities, it was decided that we would use an existing API that shows the population sizes of our countries.

Before we reached this conclusion, originally our idea was to create a map representing the TFL map for underground transport in London, we would then use an API to track when a train would reach a station and leave the station. However, this idea was not "artistic" enough, an would need to be expanded to have more artistic value.

Our second idea was to use a graphic and duplicate that graphic to have 2 separate halves; one half would represent the birth-count of a country and be colour coded white, the other would represent the death-count of a country and be colour coded black. However, this idea was also scrapped, due to there not being an available live API that could give live information on birth and death rates within a particular country.

We later came to the conclusion of representing population size. We decided to use the shape of a circle to represent the scale of a population, we then researched different designs and logos that used a circle as a primary design choice.

A logo we chose to research was the Olympic logo, which consisted of multiple circles with different colours; these colours would represent diversity, which in-turn was perfect for our group, because our group was quite diverse. We took this idea and applied it to our project...

The countries represented were:

1. United Kingdom
2. Uganda
3. Sweden 
4. Italy
5. Jamaica 

We were also inspired by another circular "logo", which is a traditional Sumi art piece:

This traditional art form is where thick rough brush strokes are used; which is an element we wanted to capture in our work using the noise function; which would randomise the ellipses to create an interesting art piece.

My Role:

My role was to work-on/improve the graphic aesthetically; seeing the API was acquired by Eleonora, my role was to manipulate the aesthetics of the graphics within the canvas. The idea was to colour-code each country by their national colour, the circle representing the population of a country would be colour-coded in accordance to that particular country's national colour. 

However, many of the national colours for our countries were too similar and did not contrast very well, making the artwork unappealing, to solve this issue, I decided to research contrasting colour pallets to then represent each country.  

Multiple functions were made to control the colour-mode, stroke-weight, stroke colour, and fill for each country, then added to the draw function:

Final result

To further improve the animated graphic aesthetically, I changed the stroke-weights and opacity. I also attempted to make the graphic translate rotation, however, this caused the graphic to slow down, and create errors within the web-browser inspect-element console.

Unexpected Result (With translate rotation): Console printing error within code

Expected Result (Without translate rotation): Console prints population number

Final Code:

var t;
var uk_population;
var jamaica_population;
var sweden_population;
var uganda_population;
var italy_population;


function setup() {
  createCanvas(1500, 1200);
  loadJSON('http://api.population.io/1.0/population/United%20Kingdom/2018-05-04/?format=json', gotData);
    loadJSON('http://api.population.io/1.0/population/Jamaica/2018-05-04/?format=json', gotData1);
    loadJSON('http://api.population.io/1.0/population/Sweden/2018-05-04/?format=json', gotData2);
    loadJSON('http://api.population.io/1.0/population/Uganda/2018-05-04/?format=json', gotData3);
    loadJSON('http://api.population.io/1.0/population/Italy/2018-05-04/?format=json', gotData4);
  
  background(255);

  t = 0;
}

function gotData(data) {
     //println(data);
    uk_population = data;
    if (uk_population){
        uk_population = uk_population.total_population.population;
        console.log(uk_population);
}
}
function gotData1(data) {
     //println(data);
    jamaica_population = data;
    if (jamaica_population){
        jamaica_population = jamaica_population.total_population.population;
        console.log(jamaica_population);
}
}

function gotData2(data) {
     //println(data);
    sweden_population = data;
    if (sweden_population){
        sweden_population = sweden_population.total_population.population;
        console.log(sweden_population);
}
}

function gotData3(data) {
     //println(data);
    uganda_population = data;
    if (uganda_population){
        uganda_population = uganda_population.total_population.population;
        console.log(uganda_population);
}
}

function gotData4(data) {
     //println(data);
    italy_population = data;
    if (italy_population){
        italy_population = italy_population.total_population.population;
        console.log(italy_population);
}
} //added colours
  function italyColor() {
      colorMode(RGB, 255, 255, 255, 51)
   strokeWeight(1);
  stroke(123,212,204, 10);
  noFill();
  
  }  
  function ugandaColor(){
      colorMode(RGB, 255, 255, 255, 30)
  stroke(0,40,31, 2);
  noFill();
  }

  function swedishColor(){
      colorMode(RGB, 255, 255, 255, 51)
  stroke(190,164,46, 4);
  noFill();
  }

  function jamaicaColor(){
      colorMode(RGB, 255, 255, 255, 51)
  stroke(50,87,175, 1);
  noFill();
  }

  function ukColor(){
      colorMode(RGB, 255, 255, 255, 30)
  stroke(184,62,116, 4);
  noFill();
  }
    
function draw() {
  
  translate(width/3, height/2); //Changed width from 2 to 3
  beginShape();
  for (var i = 0; i < 200; i++) {
    var ang = map(i, 0, 200, 0, TWO_PI);
    var rad = uk_population/100000 * noise(i * 0.01, t * 0.005);
    var x = rad * cos(ang);
    var y = rad * sin(ang);
    
    curveVertex(x, y);
      
      ukColor();
      
  }
  endShape(CLOSE);

  t += 1;
    
    
  beginShape();
    translate(width/-5, height/5);
  for (var i = 0; i < 200; i++) {
    var ang = map(i, 0, 200, 0, TWO_PI);
    var rad = sweden_population/100000 * noise(i * 0.01, t * 0.005);
    var x = rad * cos(ang);
    var y = rad * sin(ang);
    curveVertex(x, y);
      swedishColor();
  }
  endShape(CLOSE);

  t += 1;
    
    translate(width/3, height/-10,5);
  beginShape();
  for (var i = 0; i < 200; i++) {
    var ang = map(i, 0, 200, 0, TWO_PI);
    var rad = jamaica_population/100000 * noise(i * 0.01, t * 0.005);
    var x = rad * cos(ang);
    var y = rad * sin(ang);
    curveVertex(x, y);
      jamaicaColor();
  }
  endShape(CLOSE);

  t += 1;
    
      translate(width/8, height/-5);
  beginShape();
  for (var i = 0; i < 200; i++) {
    var ang = map(i, 0, 200, 0, TWO_PI);
    var rad = italy_population/100000 * noise(i * 0.01, t * 0.005);
    var x = rad * cos(ang);
    var y = rad * sin(ang);
    curveVertex(x, y);
      italyColor();
  }
  endShape(CLOSE);

  t += 1;
    
      translate(width/8, height/5);
  beginShape();
  for (var i = 0; i < 200; i++) {
    var ang = map(i, 0, 200, 0, TWO_PI);
    var rad = uganda_population/100000 * noise(i * 0.01, t * 0.005);
    var x = rad * cos(ang);
    var y = rad * sin(ang);
    curveVertex(x, y);
      ugandaColor();
  }
  endShape(CLOSE);

  t += 1;
    



  // clear the background every 600 frames using mod (%) operator
  if (frameCount % 500 == 0) {
background(255);
  }

}

SOURCE OF INFORMATION:

Here is the source containing the code for the original graphic, which also explains how the nose function operates. The code was edited to suit the desired outcomes for our project:

http://genekogan.com/code/p5js-perlin-noise/

This is the source of the API:

http://api.population.io/