let DATA;

​

function setup() {

  createCanvas(600, 600);

​

  loadJSON("https://data.cityofnewyork.us/resource/5jvd-shfj.json", gotData);

  let inp = createInput("");

  inp.position(240, 40);

  inp.size(100);

  inp.input(myInputEvent);

​

}

​

​

function myInputEvent() {

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

  h = arrayCount(DATA, this.value()) * 1.5 - 55;

}

​

function gotData(data) {

  DATA = data;

  let MANHATTANCount = arrayCount(data, "MANHATTAN");

  let BRONXCount = arrayCount(data, "BRONX");

  let BROOKLYNCount = arrayCount(data, "BROOKLYN");

  let STATENISLANDCount = arrayCount(data, "STATEN ISLAND");

  let QUEENSCount = arrayCount(data, "QUEENS");

  console.log(

    MANHATTANCount,

    BRONXCount,

    BROOKLYNCount,

    STATENISLANDCount,

    QUEENSCount

  );

}

​

function arrayCount(array, item) {

  return array.reduce(function (countTotal, value) {

    countTotal += value.boro_nm == item ? 1 : 0;

    // 

    // if (value.boro_nm==item){

    //   countTotal=countTotal+1

    // }

    // else{

    //   countTotal=countTotal+0

    // }

    return countTotal;

  }, 0);

}

​

let f = 0;

let h = 100;

function draw() {

​

  background(0);

  push();

   fill(255);

  strokeWeight(0)

  textFont('Georgia');

  text('Enter the Borough of NYC in capital letter', 180, 30);

  pop();

  f++;

  fill(0);

  stroke(500);

​

  for (y = 350; y < width; y += 5) {

    beginShape();

    for (x = 0; x < width; ++x)

      vertex(

        x,

        y - (h / (1 + pow(x - width / 2, 4) / 8e6)) * noise(x / 30 + f / 50 + y)

      );

    endShape();

  }

}

​