let sampleName;

​

let num1;

let num2;

​

let alpha1;

let alpha2;

​

//visual parameters

let var1 = 2; //2

let var2 = 1; //1

let var3 = 3; //3

let var4 = 10;  //100

let var5 = 0.5; //0.5 number of rectangles 

let var6 = 100; //100 frame count speed

// let var7;

​

​

//color control

let stroke2_color = 1; // 1 for color changing 0 for black

let bg_color = 1; // 1 for color changing 0 for black

​

​

//name parameters

let name1 = 15;

let name2 = 16;

​

let narray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

​

​

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 = "Y,B";

​

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

​

  alpha1 = splitString[0];

  alpha2 = splitString[1];

  //uncomment to use the name array where you use the number of each alphabet in alphabetical order and comment the above alpha1 and alpha2

  // alpha1 = narray[name1];

  // alpha2 = narray[name2];

}

​

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);

  if(bg_color == 1)

  {

  // background(r,g,b)

    background(0)

​

  }

  else if(bg_color == 0)

  {

  background(40);

  }

  noFill();

​

  // posisiton of the rect

  translate(width / 2, height / 2);

​

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

    push();

    //rotation (100 is the rotation speed)

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

​

    // 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 * var2, num2 - i * var3, 200 - i);

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

    if(stroke2_color == 0)

      {

            stroke(40)

      }

    rect(0, 0, num2 - i * var4 , 500 - i * var1, 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];

    }

  }

}

​