boundaries and particules

mcaiai

Hi, i'm trying to do a data visualization about immigration. I have the countries represented as ellipses and i'm trying to put small ellipses inside the "country" ones to represent citizens. My first question is: how do I set the boundaries and make them (the citizens ellipse) not overlap each other.

Second question is (i've imported my data in the format ("year","origin","destination","gender","","value") "how do I 'connect' it to the citizens ellipses and make them move from country to country?

Thank you for you time and forgive my lack of knowledge!

Chrisir

show your entire code please

Chrisir

do you know objects / classes / oop?

1. draw the countries at ellipses (circle)

set the position of the people via random inside the circle

like this

void setup() {
  size(768, 576);
  background(0);
  noFill();
  frameRate(4);
}

void draw() {
  background (0);

  stroke(255);
  ellipse(250, 220, 111*2, 111*2); 

  stroke(random(255), random(255), random(255));
  for (int i=0; i<60; i++) {
    float angle = random(360); 
    float x = 250 + random(111) *sin(radians(angle));
    float y = 220 + random(111) *cos(radians(angle));
    point (x, y);
  } // for
} // func

2.

a)

Let's make a class Citizen as blue print for all citizens.

Make an ArrayList to hold all citizens. Call it citizens.

ArrayList<Citizen> citizens = new ArrayList(); 

now read your list and fill in all citizens with

"year","origin","destination","gender"

(in setup())

b)

also have a class Country and an ArrayList countries that you fill during a)

each country has a name and a screen pos

ArrayList<Country> countries = new ArrayList(); 

from the countries screen pos give all citizen a screen pos around there origin country and around the destination country (see 1. )

(in setup())

c)

display all countries and all citizens

draw lines from origin country to the destination country pos for all citizens

(in draw())

d)

now we want to animate the travel of citizens in draw().

have a single var year and let's say a var day

you increase day (day++;) until 365 and then set day to 0 and year++;

during that check the year of each citizen

when the year match, set a marker in the class Citizen for this person, use lerp() with day to travel from origin to destiny pos while days increase

done.

come back when you have questions.

Best, Chrisir ;-)

mcaiai

my code so far:

 Table table; 

 void setup() { 
  size(700, 679 );   
  surface.setResizable(true); 
  //background(30,30,30); 

  PImage b; 

  b = loadImage("europe4c.jpg"); 

  background(b);

  table = loadTable("total.csv", "header");

  for (TableRow row : table.rows())
  {

    int time = row.getInt("TIME");
    int value = row.getInt("Value");
    String geo = row.getString("GEO");
    String citizen = row.getString("CITIZEN");

    if (value > 0) { 

      println( value  + " citizens emigrated in " + time + " from " + citizen + " to " + geo);
    }
  }
}

void draw() {

  ellipse( 276, 383, 30510/5500, 30510/5500  ); //belgium
  ellipse( 536, 531, 110910/5500, 110910/5500 ); //bulgaria
  ellipse( 398, 410, 78866/5500, 78866/5500  ); //czech
  ellipse( 336, 289, 43094/5500, 43094/5500  ); //denmark
  ellipse( 502, 234, 45339/5500, 45339/5500  ); //estonia
  ellipse( 143, 302, 70273/5500, 70273/5500  ); //ireland
  ellipse( 501, 597, 131940/5500, 131940/5500 ); //greece
  ellipse( 141, 555, 505992/5500, 505992/5500 ); //spain
  ellipse( 238, 450, 551695/5500, 551695/5500 ); //france
  ellipse( 391, 516, 56594/5500, 56594/5500  ); //croatia
  ellipse( 360, 541, 301318/5500, 301318/5500 ); //italy
  ellipse( 360, 550, 9251/5500, 9251/5500   ); //cyprus
  ellipse( 507, 273, 64589/5500, 64589/5500  ); //latvia
  ellipse( 494, 305, 65300/5500, 65300/5500  ); //lithuania
  ellipse( 394, 300, 2586/5500, 2586/5500   ); //luxemburg
  ellipse( 448, 460, 93030/5500, 93030/5500  ); //hungary
  ellipse( 448, 250, 316/5500, 316/5500    ); //malta
  ellipse( 289, 359, 41526/5500, 41526/5500  ); //netherlands
  ellipse( 392, 450, 83858/5500, 83858/5500  ); //austria
  ellipse( 445, 323, 312685/5500, 312685/5500 ); //poland
  ellipse(  61, 548, 91568/5500, 91568/5500  ); //portugal
  ellipse( 525, 476, 238392/5500, 238392/5500 ); //romania
  ellipse( 384, 479, 20273/5500, 20273/5500  ); //slovenia
  ellipse( 454, 424, 49036/5500, 49036/5500  ); //slovakia
  ellipse( 492, 161, 338145/5500, 338145/5500 ); //finland
  ellipse( 407, 155, 449964/5500, 449964/5500 ); //sweden
  ellipse( 209, 333, 244820/5500, 244820/5500 ); //uk
  ellipse( 649, 581, 23507/5500, 23507/5500  ); //turkey
  ellipse( 338, 368, 357158/5500, 357158/5500 ); //germany


  int ellipseCount = 10;
  ellipseMode(RADIUS);
  for (int i = 0; i < ellipseCount; i++) {

    ellipse(random(224, 350), random(368, 380), 10, 10);
    fill(208, 55, 185);
    stop();
  }
}

Chrisir

go hback, edit your post please

empty line before and after the code

highlight entire Code

hit ctrl-o

mcaiai

done!

Chrisir

thanks

I just wait until you followed my steps.

;-)

koogs

b = loadImage("europe4c.jpg");

table = loadTable("total.csv", "header");

we have no idea what is in these files

mcaiai

the image is just a reference of the european map to place the 'countries'. the csv is a spreadsheet that contains ("year","origin","destination","gender","","value") and its values

Chrisir

I think it's no use to draw the values for the countries in this way... better store them to a csv and use them in a ArrayLIst / class as described above

It's fairly complex, so I recommend to read the tutorial about objects first and use this concept as described above

Chrisir

I had time to work a little on it.

it's a mock-up since it uses no csv and no real countries

but here you go

// make an empty ArrayList
ArrayList<Citizen> citizens = new ArrayList();  

// the global year
int yearMy=1949;

// -------------------------------------------------------------------

void setup()
{
  size( 1200, 800);

  // make the citizens 
  for (int i = 0; i < 33; i++) {

    // his / her origin
    PVector origin = positionOfCitizen();
    // make new ciztizen
    Citizen newCitizen = new Citizen (origin.x, origin.y, 
      color (random(255), random(255), random(255)));
    // add him / her to the list 
    citizens.add(newCitizen);
  } //for
} // setup

void draw()
{
  background(255);

  // countries
  countries(); 

  // loop the entire list
  for (int i = 0; i < citizens.size(); i++) {
    // grab the citizen from the list
    Citizen currentCitizen = citizens.get(i);
    // when the year is the year of the flight we start the citizen
    currentCitizen.startWhenYearIsReached();
    // move and display him or her 
    currentCitizen.display();
  }//for

  // output year (the global year)
  fill(0);
  text ("Year: "+yearMy, 19, 19);

  // increase year every 20 frames 
  if (frameCount>44 && frameCount%20==0 && yearMy<=year()) { 
    yearMy++;
  }//if
} // draw

// -----------------------------------------------------------

PVector positionOfCitizen() { 

  // determine the start pos of the citizen based on the country

  // this should really be replaced by the class Country data!!!! 

  // which country; chose by random   
  int countryIndex = int(random(3));

  float centerX=255; 
  float centerY=255;

  switch (countryIndex) {
  case 0: 
    centerX=150; 
    centerY=150;
    break; 
  case 1:
    centerX=width-150; 
    centerY=259;
    break; 
  case 2:
    centerX=350; 
    centerY=height-150;
    break; 
  default:
    println("unknown country : error number 648");
    break;
  }//switch 

  // determine the start pos of the citizen based on the country 
  float angle = random(360);

  // all countries same size 
  float pX = centerX + random(111) * sin(radians(angle));
  float pY = centerY + random(111) * cos(radians(angle));

  return new PVector (pX, pY);
}

void countries() {
  // should also be part of class Country!!!!!!

  // which country
  // i is countryIndex

  for (int i=0; i<3; i++) {

    // default 
    float centerX=255; 
    float centerY=255;

    switch (i) {
    case 0: 
      centerX=150; 
      centerY=150;
      break; 
    case 1:
      centerX=width-150; 
      centerY=259;
      break; 
    case 2:
      centerX=350; 
      centerY=height-150;
      break; 
    default:
      println("unknown country : error number 722");
      break;
    }//switch 

    noFill(); 
    stroke(0, 0, 255); // blue 
    ellipse(centerX, centerY, 112*2, 112*2);
  }
} // func  

// =========================================

class Country {


  // to do !!!!!!!!!!!!!!!!!!!!!!
}

// ==================================

class Citizen {

  // Origin 
  float xOrigin, yOrigin;

  // Destiny is random - it must come from the csv / country !!!!!!!!!!
  float xDestiny=random(0, width), yDestiny = random(0, height);

  float xCurrent, yCurrent; 

  color col=color(random(255), random(255), random(255)); 

  boolean isMoving=false; 
  boolean hasReachedDestiny = false;

  // year is random - it must come from the csv !!!!!!!!!!
  int year = int(random(1950, 2016));

  // for the animation 
  float myFrame=0.0;
  float speed = 0.02;

  // constr
  Citizen(float xOrigin_, float yOrigin_, 
    color col_) {
    xOrigin=xOrigin_;
    yOrigin=yOrigin_;
    col=col_;

    xCurrent= xOrigin;
    yCurrent= yOrigin;
  }// constr

  void display() {

    // move and display 

    // move
    if (isMoving) {
      xCurrent = lerp(xOrigin, xDestiny, myFrame); 
      yCurrent = lerp(yOrigin, yDestiny, myFrame);
      myFrame += speed; 
      // journey / flight over?
      if (myFrame>=1.0) {
        hasReachedDestiny = true; 
        isMoving=false;
      }//if
    }// if 

    // display 
    fill(col);
    // stroke(0);
    noStroke(); 
    ellipse(xCurrent, yCurrent, 7, 7);
  }//method

  void startWhenYearIsReached() {
    // when the year is the year of the flight we start the citizen
    if (frameCount>44 && 
      yearMy>=year &&    
      !hasReachedDestiny) {
      isMoving = true; // start
    }// if
  }// method 
  //
}//class
//

Chrisir

Keywords:

https://forum.processing.org/two/discussion/14280/boundaries-and-particules#latest

boundaries and particles

boundary and particle

Country countries

Migration

Refugees refugee

Citizens Citizen