let angle = 0;

​

// loading the table

function preload() {

  artists = loadTable("artists.csv", "csv", "header");

}

​

// adding this function to return "female" from the gender column of the table, so I can then input different colors for male and female artists

function isFemale(gender) {

  return gender.toLowerCase() === "female";

}

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  //   mapping the sin value to different colors

  let sinValue = (sin(angle) + 1) / 2;

​

  let r, g, b;

​

  if (sinValue < 1 / 3) {

    // transitions from black to green

    r = map(sinValue, 0, 1 / 3, 0, 215);

    g = map(sinValue, 0, 1 / 3, 0, 234);

    b = map(sinValue, 0, 1 / 3, 0, 193);

  } else if (sinValue < 2 / 3) {

    // transitions from green to orange

    r = map(sinValue, 1 / 3, 2 / 3, 215, 232);

    g = map(sinValue, 1 / 3, 2 / 3, 234, 103);

    b = map(sinValue, 1 / 3, 2 / 3, 193, 42);

  } else {

    // transitions from orange back to black

    r = map(sinValue, 2 / 3, 1, 232, 0);

    g = map(sinValue, 2 / 3, 1, 103, 0);

    b = map(sinValue, 2 / 3, 1, 42, 0);

  }

​

  background(r, g, b, 70);

​

  let numRows = artists.getRowCount();

  let birthYear = artists.getColumn("Birth Year");

  let deathYear = artists.getColumn("Death Year");

  let gender = artists.getColumn("Gender");

​

  //   mapping the range for the birth year and the death year, to set them as circleX and circleY respectively

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

    let circleX = map(birthYear[i], 1850, 2020, 50, width + 50) + random(-5, 5);

    let circleY =

      map(deathYear[i], 1900, 2017, 50, height + 50) + random(-5, 5);

    //     mapping the sin value to the canvas in order to randomize the pointsize

    let pointSize = map(sin(frameCount * 0.05 + i), -1, 1, 1, 3);

​

    //     if else function to attribute different colors to male and female artists

    if (isFemale(gender[i])) {

      stroke(215, 234, 193);

      strokeWeight(pointSize);

    } else {

      stroke(232, 103, 42);

      strokeWeight(pointSize);

    }

​

    point(circleX, circleY);

  }

  angle += 0.01;

}

​