#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# boundaries and particules

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!

Tagged:

• edited January 2016

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();
``````

"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 ;-)

• edited January 2016

my code so far:

`````` Table table;

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

PImage b;

background(b);

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;
for (int i = 0; i < ellipseCount; i++) {

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

empty line before and after the code

highlight entire Code

hit ctrl-o

• done!

• thanks

I just wait until you followed my steps.

;-)

• edited January 2016

we have no idea what is in these files

• 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

• 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

• 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
} //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
//
``````
• edited January 2016

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