let sampleName;

​

let num1;

let num2;

​

let alpha1;

let alpha2;

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

function preload() {

  createCanvas(windowWidth, windowHeight);

​

  rectMode(CENTER);

  angleMode(DEGREES);

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

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  let alphabet = names.getColumn("alphabet");

  let frequency = names.getColumn("freq");

​

  sampleName = "P,M";

​

  let splitString = split(sampleName, ",");

​

  alpha1 = splitString[0];

  alpha2 = splitString[1];

  fill(50)

  square(0,0,5000,5000)

​

​

//   let inp = createInput('');

//   inp.position(0, 0);

//   inp.size(100);

//   inp.input(myInputEvent);

}

​

function draw() {

  // // changing background color

  var r = map(sin(frameCount), -1, 1, 50, 255);

  var g = map(cos(frameCount / 2), -1, 1, 50, 255);

  var b = map(sin(frameCount / 9), -1, 1, 50, 255);

  background(r,g,b)

  background(40);

  noFill();

​

  // posisiton of the rect

  translate(width / 2, height / 2);

​

  for (var i = 0; i < 200; i+=0.5) {

    push();

    //rotation (100 is the rotation speed)

    rotate(sin(frameCount + i) * 100);

​

    // rect stroke colors

    var r = map(sin(frameCount), -1, 1, 50, 255);

    var g = map(cos(frameCount / 6), -1, 1, 50, 255);

    var b = map(sin(frameCount / 2), -1, 1, 50, 255);

​

    stroke(r, g, b);

​

    num1 = getValue(alpha1);

    num2 = getValue(alpha2);

​

    // the 2 layers of animation

    rect(0, 0, num1 - i * 1, num2 - i * 3, 200 - i);

    // rect(0, 0, num2 - i * 4, num1 - i * 3, 200 - i);

    stroke(40)

    rect(0, 0, num2 - i * 5., 500 - i * 2, 200 - i);

​

    pop();

  }

}

​

function getValue(targetAlphabet) {

  let alphabet = names.getColumn("alphabet");

  let frequency = names.getColumn("freq");

  let rowNum = names.getRowCount();

​

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

    if (alphabet[i] === targetAlphabet) {

      return frequency[i];

    }

  }

}

​

// function myInputEvent() {

​

//   // sampleName = this.value();

//   // console.log('you are typing: ', this.value());

// }

​