var region = [];

var rrr = 0;

var box;

var boxExist = false; // does info box exist?

var boxIndex;

​

function preload() {

  iosevka = loadFont('iosevka-regular.ttf');

}

​

function setup() {

  createCanvas(800, 600);

  noStroke();

  frameRate(60);

  textFont(iosevka);

  margin = 20;

  gap = 14;

​

  // import data

  region[0] = new data('africa', 1287914329, 464923169);

  region[1] = new data('asia', 4207588157, 2062197366);

  region[2] = new data('europe', 827650849, 705064923);

  region[3] = new data('latin america', 652047996, 438248446);

  region[4] = new data('middle east', 254438981, 164037259);

  region[5] = new data('north america', 363844662, 345660847);

  region[6] = new data('oceania', 41273454, 28439277);

​

  // loop region amount of time

  for (i = 0; i < region.length; i++) {

    region[i].x = map(i, 0, region.length, 0, width - margin) + margin / 2 + gap / 2;

    region[i].w = (width - margin) / region.length - gap;

    region[i].h = region[i].user / 2062197366 * (height - 40);

  }

}

​

function draw() {

  background('#273445');

​

  //random generator every 40 frames

  if (rrr > 40) {

    for (i = 0; i < region.length; i++) {

      region[i].ranr = random(-8, 8);

    }

    rrr = 0;

  }

  rrr += 1;

​

  // execute draw functions

  drawBars();

  drawBox();

  drawDescription();

    mouseClicked();

}

​

function data(name, popu, user) {

  this.name = name;

  this.popu = popu;

  this.user = user;

  this.uper = user / popu;

  this.ranr = 0;

  this.r = map(this.uper, 0, 1, 255, 40);

  this.x = 0;

  this.w = 0;

  this.h = 0;

}

​

function drawBars() {

  // loop region amount of time

  for (i = 0; i < region.length; i++) {

    //bars

    fill(region[i].r, region[i].r * 0.66, region[i].r * 1.37);

    rect(region[i].x, height - region[i].h - region[i].ranr - margin / 2, region[i].w, region[i].h + region[i].ranr);

​

    //region names

    fill(212);

    textSize(18);

    text(region[i].name, region[i].x, height - region[i].h - region[i].ranr - 14);

  }

}

​

function mouseClicked() {

  boxExist = false;

  for (i = 0; i < region.length; i++) {

    if (mouseX > region[i].x) {

      if (mouseX < region[i].x + region[i].w) {

        if (mouseY < height - margin / 2) {

          if (mouseY > height - region[i].h - margin / 2) {

            box = new createInfoBox();

            boxExist = true;

            boxIndex = i;}}}}}}

​

function createInfoBox() {

  this.x = mouseX;

  this.y = mouseY;

  this.w = 280;

  this.h = 110;

  this.aX = this.x;

  this.aY = this.y;

  this.bX = 1;

  this.bY = 1;

​

  // shift box position if over edge

  if (mouseX + this.w > width) {

    this.x -= this.w;

    this.bX = -1;

  }

  if (mouseY + this.h > height) {

    this.y -= this.h;

    this.bY = -1;

  }

}

​

function drawBox() {

  // draw information box if it exist

  if (boxExist) {

    fill(16, 192);

    rect(box.x, box.y, box.w, box.h);

    fill(212);

    stroke(212);

    beginShape();

    vertex(box.aX, box.aY);

    vertex(box.aX + 12 * box.bX, box.aY);

    vertex(box.aX, box.aY + 12 * box.bY);

    endShape();

    noStroke();

    text(region[boxIndex].name +

      '\nPopulation: ' + region[boxIndex].popu +

      '\nInternet user: ' + region[boxIndex].user +

      '\nUser per population: ' + int(region[boxIndex].uper * 100) + '%', box.x + 8, box.y + 24, w);

  }

}

​

function drawDescription() {

  x = 488;

  y = 12;

  w = 260;

  h = 108;

  fill(16, 192);

  rect(x, y, w, h);

  fill(212);

  text('POPULATION VS INTERNET USERS' +

    '\nbar height --> population' +

    '\ndarker --> more user dense', x + 8, y + 24, w);

}