let img;

let lat;

let lon;

let country;

let countries =[];

let minSpeedX =-1;

let maxSpeedX =1;

let minSpeedY =-2;

let maxSpeedY = 2;

let updateScreen =true;

​

//preload images and csv data to avoid errors/undefined values

function preload() {

  img = loadImage('image/3.png');//2

  // The text from the file is loaded into an array.

  strings = loadStrings("world.csv");

}

​

//set up a canvas

function setup() {

    createCanvas(600, 500);

    smooth();

    background(220);  

    image(img, 0, 0);

    //frameRate(50);

  // Top-left corner of the img is at (0, 0)

  // Width and height are the img's original width and height

  if (strings == null) {

    print("failed to load the file, stopping here");

    // this is an endless loop; it's a common way

    // to prevent a program from continuing when

    // something is so wrong that there is no sense

    // in continuing

    while (true) {}

  }

  print(

    "strings loaded from file successfully, read " + strings.length + " lines"

  );

  //use countries data from csv to find name, latitude, and longitude of each country and save each into country objects

  findcountryLocation();

}

function draw()

{

  //user can press mouse to pause and play the motion of the country names

   if(mouseIsPressed){

  if (updateScreen == true)

    {

      updateScreen = false;

    }

     else {

       if (updateScreen == false)

         {

           updateScreen = true;

         }

     }

}

  //whenever update screen is true, allow the countries to update/move

  if (updateScreen==true){

     image(img, 0, 0);

    for (let i = 0; i < countries.length; i++)

    {

      countries[i].update();

    }

  }

}

  //use countries data from csv to find name, latitude, and longitude of each country and save each into country objects

function findcountryLocation(){

  let row =[];

  // loop over each row in the file

  for (let csvRowNumber = 1; csvRowNumber < strings.length; csvRowNumber++) {

    // get a single row and split that row

    // into individual words

    row = split(strings[csvRowNumber], ",");

    lat = row[1];

    lon = row[2];

    country = row[3];

    //print(country, ' ', lat,' ', lon);

    //map the country's longitude and latitude within the limits of our canvas

    ypos = map(lat, -90, 90, 0, height);

    xpos = map(lon, -180,180, 0, width);

    //create country object to save name, x and y position in an array of countries

    newCountry = new my_country(country, xpos, ypos, random(minSpeedX, maxSpeedX), random(minSpeedY, maxSpeedY));

    countries.push(newCountry);

  } 

}

//class to save data of countries

class my_country {

  constructor(country, x, y, speedX, speedY){

    this.country = country;

    this.x = x;

    this.y = y; 

    this.speedX=speedX;

    this.speedY=speedY;

    this.pointX =x;

    this.pointY =y;

  }

  //function to move the country names

  update(){

    //move/translate the blinking points to center them on canvas

    push();

    translate(0,-80);

    fill(random(255));

    noStroke();

    ellipse(this.pointX,this.pointY,3,3);

    pop();

    //write the country name at x and y and update x and y to move the names

    //if the names touch the canvas boundary, change their direction so they bounce back

    fill('white');

    textSize(8)

    text(this.country, this.x, this.y);

    this.x+=this.speedX;

    this.y+=this.speedY;

    if (this.x > width || this.x < 0){

      this.speedX = -this.speedX

    }

    if (this.y > height || this.y < 0)

      {

        this.speedY = -this.speedY

      }

  }

}

​

​

​

​