​

function preload() {

  table = loadTable("https://corgis-edu.github.io/corgis/datasets/csv/music/music.csv", "csv", "header");

}

​

function setup() {

  createCanvas(467, 525);

  time = table.getColumn("song.time_signature_confidence");

  bars = table.getColumn("song.bars_confidence");

  beats = table.getColumn("song.beats_confidence");

  tatum = table.getColumn("song.tatums_confidence");

  songkey = table.getColumn("song.key_confidence");

  mode = table.getColumn("song.mode_confidence");

  colorMode(HSB, 255);

  frameRate(10);

  createLoop({duration:5, gif:true});

  background("white");

}

​

function draw() {

  background(255, 0, 255, 10);

  let row = frameCount % table.getRowCount();

  noStroke();

  fill(frameCount % 255, 255, 255, 64); 

  beginShape();

  vertex(time[row] * width, bars[row] * height);

  vertex(beats[row] * width, tatum[row] * height);

  vertex(songkey[row] * width, mode[row] * height);

  endShape();

}