​

var mapimg;

var bwimg;

var kwimg;

var swimg;

var hbwimg;

​

var clat = 0;

var clon = 0;

​

var zoom = 1;

​

var blueWhales;

var killerWhales;

var spermWhales;

var hbWhales;

​

let num = 0; 

​

var bw = [];

let bwInfo = [];

​

let kw = [];

let kwInfo = [];

​

let sw = [];

let swInfo = [];

​

let hbw = [];

let hbwInfo = [];

​

let bwbutton = {

  w: 50,

  h: 50,

  on: false,

  x: -480,

  y: 100

}

let kwbutton = {

  w: 50,

  h: 50,

  on: false,

  x: -370,

  y: 100

}

let swbutton = {

  w: 50,

  h: 50,

  on: false,

  x: -480,

  y: 175

}

let hbwbutton = {

  w: 50,

  h: 50,

  on: false,

  x: -370,

  y: 175

}

​

function preload() {

  mapimg = loadImage('https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/0,0,1,0,0/1024x512?access_token=pk.eyJ1Ijoic2FyYWtieTExNyIsImEiOiJja2lsdmZsZmswbmV0MnJ1NmMyZDhodWUyIn0.sV1v-5GVoClSosa4FHif0A');

  bwimg = loadImage('Blue Whale.jpg');

  kwimg = loadImage('Killer Whale.jpg');

  swimg = loadImage('Sperm Whale.jpg');

  hbwimg = loadImage('Humpback Whales.jpg');

​

​

  blueWhales = loadJSON('bluewhale.json');

  killerWhales = loadJSON('killerwhale.json');

  spermWhales = loadJSON('spermwhale.json');

  hbWhales = loadJSON('hbwhale.json');

}

​

//scaling map

function mercX(lon) {

  lon = radians(lon);

  var a = (256 / PI) * pow(2, zoom);

  var b = lon + PI;

  return a * b;

}

function mercY(lat) {

  lat = radians(lat);

  var a = (256 / PI) * pow(2, zoom);

  var b = tan(PI / 4 + lat / 2);

  var c = PI - log(b);

  return a * c;

}

​

function setup() {

  createCanvas(1024, 512);

  frameRate(4);

  //equation to scale map

  var cx = mercX(clon);

  var cy = mercY(clat);

​

  //for BlueWhales

  for (let x in blueWhales) {

    let info = {

      lon: blueWhales[x].decimalLongitude,

      lat: blueWhales[x].decimalLatitude,

      date: blueWhales[x].eventDate,

      name: blueWhales[x].scientificName

    };

    bwInfo.push(info);

  }

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

    var lon1 = bwInfo[i].lon;

    var lat1 = bwInfo[i].lat;

    var x1 = mercX(lon1) -cx; 

    var y1 = mercY(lat1) -cy;

    bw[i] = new bWhales(x1, y1, num);

    num ++;

  }

  //for KillerWhales

  for (let x in killerWhales) {

    let info = {

      lon: killerWhales[x].decimalLongitude,

      lat: killerWhales[x].decimalLatitude,

      date: killerWhales[x].eventDate,

      name: killerWhales[x].scientificName

    };

    kwInfo.push(info);

  }

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

    var lon2 = kwInfo[i].lon;

    var lat2 = kwInfo[i].lat;

    var x2 = mercX(lon2) - cx;

    var y2 = mercY(lat2) - cy;

    kw[i] = new kWhales(x2, y2, num);

    num ++;

  }

​

  //for SpermWhales

  for (let x in spermWhales) {

    let info = {

      lon: spermWhales[x].decimalLongitude,

      lat: spermWhales[x].decimalLatitude,

      date: spermWhales[x].eventDate,

      name: spermWhales[x].scientificName

    };

    swInfo.push(info);

  }

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

    var lon3 = swInfo[i].lon;

    var lat3 = swInfo[i].lat;

    var x3 = mercX(lon3) - cx;

    var y3 = mercY(lat3) - cy;

    sw[i] = new sWhales(x3, y3, num);

    num ++;

  }

  //for HumpbackWhales

  for (let x in hbWhales) {

    let info = {

      lon: hbWhales[x].decimalLongitude,

      lat: hbWhales[x].decimalLatitude,

      date: hbWhales[x].eventDate,

      name: hbWhales[x].scientificName

    };

   hbwInfo.push(info);

  }

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

    var lon4 =hbwInfo[i].lon;

    var lat4 =hbwInfo[i].lat;

    var x4 = mercX(lon4) - cx;

    var y4 = mercY(lat4) - cy;

    hbw[i] = new humpbWhales(x4, y4, num);

    num ++; 

  }

}

​

function draw() {

  translate(width / 2, height / 2);

  mapImg();

  bwShow();

  kwShow();

  swShow();

  hbwShow();

  //bw button

  fill(0, 191, 255, 200);

  ellipse(bwbutton.x, bwbutton.y, bwbutton.w, bwbutton.h);

  //kw button

  fill(255);

  ellipse(kwbutton.x, kwbutton.y, kwbutton.w, kwbutton.h);

  //sw button

  fill(199, 21, 133);

  ellipse(swbutton.x, swbutton.y, swbutton.w,swbutton.h);

  //hbw button

  fill(153, 50, 204);

  ellipse(hbwbutton.x, hbwbutton.y, hbwbutton.w,hbwbutton.h);

  bwFacts();

  kwFacts();

  swFacts();

  hbwFacts();

}

​

function mapImg(){

  push();

  imageMode(CENTER);

  image(mapimg, 0, 0);

  pop();

}

​

function bwShow(){

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

    bw[i].display();

  }

}

function kwShow(){

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

    kw[i].display();

  }

}

function swShow(){

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

    sw[i].display();

  }

}

function hbwShow(){

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

    hbw[i].display();

  }

}

​

function bwFacts(){

    if (dist(mouseX -512, mouseY-256, bwbutton.x, bwbutton.y) < bwbutton.w/2){

    fill(255,255,255, 90);

    rect(-420, 0, 500, 200, 20);

    bwimg.resize(200,100);

    image(bwimg, -400, 50);

    fill(255);

    textStyle(BOLD);

    text("Blue Whale", -175, 65);

    textStyle(NORMAL);

    text("Scientific Name: Balaenoptera musculus", -175, 100);

    text("Size: 82 to 105 feet", -175, 115);

    text("Avg Life Span in the Wild: 80 to 90 years", -175, 130);

  }

}

function kwFacts(){

    if (dist(mouseX -512, mouseY-256, kwbutton.x, kwbutton.y) < kwbutton.w/2){

    fill(255,255,255, 90);

    rect(-300, 0, 500, 200, 20);

    kwimg.resize(200,100);

    image(kwimg, -280, 50);

    fill(255);

    textStyle(BOLD);

    text("Orca", -55, 65);

    textStyle(NORMAL);

    text("Scientific Name: Orcinus orca", -55, 100);

    text("Size: 23 to 32 feet", -55, 115);

    text("Avg Life Span in the Wild: 50 to 80 years", -55, 130);

  }

}

function swFacts(){

    if (dist(mouseX -512, mouseY-256, swbutton.x, swbutton.y) < swbutton.w/2){

    fill(255,255,255, 90);

    rect(-420, 0, 500, 200, 20);

    swimg.resize(200,100);

    image(swimg, -400, 50);

    fill(255);

    textStyle(BOLD);

    text("Sperm Whale", -175, 65);

    textStyle(NORMAL);

    text("Scientific Name: Physeter macrocephalus", -175, 100);

    text("Size: 49 to 59 feet", -175, 115);

    text("Weight: 35 to 45 tons", -175, 130);

  }

}

function hbwFacts(){

    if (dist(mouseX -512, mouseY-256, hbwbutton.x, hbwbutton.y) < hbwbutton.w/2){

  fill(255,255,255, 90);

    rect(-300, 0, 500, 200, 20);

    hbwimg.resize(200,100);

    image(hbwimg, -280, 50);

    fill(255);

    textStyle(BOLD);

    text("Humpback Whale", -55, 65);

    textStyle(NORMAL);

    text("Scientific Name: Megaptera novaeangliae", -55, 100);

    text("Size: 48 to 62.5 feet", -55, 115);

    text("Weight: 40 tons", -55, 130);

}

}

​

class bWhales { 

  constructor(x, y, num){

    this.x = x;

    this.y = y;

    this.num = num;

  }

  display(){

    fill(0, 191, 255, 200);

    ellipse(this.x, this.y, random(8,10), random(8,10))

  }

}

class kWhales { 

  constructor(x, y, num){

    this.x = x;

    this.y = y;

    this.num = num;

  }

  display(){

    fill(255);

    ellipse(this.x, this.y, random(8,10), random(8,10))

  }

}

class sWhales { 

  constructor(x, y, num){

    this.x = x;

    this.y = y;

    this.num = num;

  }

  display(){

    fill(199, 21, 133);

    ellipse(this.x, this.y, random(8,10), random(8,10))

  }

}

class humpbWhales { 

  constructor(x, y, num){

    this.x = x;

    this.y = y;

    this.num = num;

  }

  display(){

    fill(153, 50, 204);

    ellipse(this.x, this.y, random(8,10), random(8,10))

  }

}