let stars = []

​

// Loading in Total Caches dataframe from International Whaling Comission

// Cleaned up data so only Minke whale catches and year is displayed

let url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSTNy6FZ2TH7tqBN-4lkIS_38UzCkDpVN_Y6E9N_GMe2b_q6BLJD99NS2uMb9ir_QST7L7Dg5VJ_1q_/pubhtml"

​

// Creating variable for dataframe

let data;

​

// Creating variable for whale drawing

let minkeDrawing;

​

function preload(){

// Loading in data frame and table

  data = loadTable(url);

  minkeDrawing = loadImage('WhaleDrawing.png');

}

​

function setup() {

  createCanvas(800,800)

  // Load in catch data

  let minkeCatch = data.getColumn('Minke');

  let year = data.getColumn('Year');

// create stars

  for (i= 0; i< 1000; i++){

    let star = {

      x:random(0,width),

      y:random(0,height)

    };

    stars.push(star);

  }

}

​

function draw() {

  background(0);

​

// Drawing stars on canvas

  for (i=0; i<500; i++){

    let x = stars[i].x;

    let y = stars[i].y;

    fill(255);

    ellipse(x,y,random(1,3),random(1,3));

  }

​

// Set up if-else statements for whale display by years

  if (mouseX < 50){

    displayWhale(4969)

  } else if (mouseX < 100){

    displayWhale(5875)

  } else if (mouseX < 150){

    displayWhale(1040)

  } else if (mouseX < 200){

    displayWhale(389)

  } else if (mouseX < 250){

    displayWhale(844)

  } else if (mouseX < 300){

    displayWhale(427)

  } else if (mouseX < 350){

    displayWhale(395)

  } else if (mouseX < 400){

    displayWhale(539)

  } else if (mouseX < 450){

    displayWhale(672)

  } else if (mouseX < 500){

    displayWhale(740)

  } else if (mouseX < 550){

    displayWhale(920)

  } else if (mouseX < 600){

    displayWhale(1081)

  } else if (mouseX < 650){

    displayWhale(1203)

  } else if (mouseX < 700){

    displayWhale(1290)

  } else if (mouseX < 750){

    displayWhale(1351)

  }

// Drawing timeline

  line(0, height - 25 ,width ,height - 25);

  line(50, height-50, 50, height-25);

  line(100, height-50, 100, height-25);

  line(150, height-50, 150, height-25);

  line(200, height-50, 200, height-25);

  line(250, height-50, 250, height-25);

  line(300, height-50, 300, height-25);

  line(350, height-50, 350, height-25);

  line(400, height-50, 400, height-25);

  line(450, height-50, 450, height-25);

  line(500, height-50, 500, height-25);

  line(550, height-50, 550, height-25);

  line(600, height-50, 600, height-25);

  line(650, height-50, 650, height-25);

  line(700, height-50, 700, height-25);

  line(750, height-50, 750, height-25);

// Adding years to timeline

  text('1985', 35, height-65);

  text('1986', 85, height-65);

  text('1987', 135, height-65);

  text('1988', 185, height-65);

  text('1989', 235, height-65);

  text('1990', 285, height-65);

  text('1991', 335, height-65);

  text('1992', 385, height-65);

  text('1993', 435, height-65);

  text('1994', 485, height-65);

  text('1995', 535, height-65);

  text('1996', 585, height-65);

  text('1997', 635, height-65);

  text('1998', 685, height-65);

  text('1999', 735, height-65);

// Making timeline white

  stroke(255);

}

function displayWhale(num){

  var x = random(width);

  var y = random(height);

  for (let i = 0; i < num; i++){

    image(minkeDrawing,x,y, 50,50)

    x = random(width)

    y = random(height)

  }

  frameRate(1)

  /*var whales = 0;

  for (let i = 0; i < data.getRowCount(); i++){

    if (num == year[i]){

      whales += minkeCatch[i];

    }

  }*/

}

​

/* const W = 800, H = 800;

function setup() {

  createCanvas(W , H);

}

const stars = Array.from({ length: (W * H /250)}, _ => [Math.random() * W, Math.random() * H, Math.random()]);

​

​

function draw() {

  for (const [x,y,alpha] of stars){

    fill(255,255,255,255*Math.sin(FrameCount   / 50 + ALPHA * 100));

    text("x", x,y);

  }

  background(0);

  //displayStars();

}

function displayStars(){

  let stars = '*'

  fill(255)

  for(let i = 0; i <= width; i+=10){

    for(let j = 0; j <= height; j+=10){

       stars[i] = '*';

      text(stars, i,j)

    }

  }

}*/