Linear Distribution

Processing

int[] notes = {0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 7, 0, 4, 7, 0, 4, 0, 2, 9, 2, 5, 9, 2, 5, 0, 2, 9, 2, 5, 9, 2, 5, 11, 2, 7, 2, 5, 7, 2, 5, 11, 2, 7, 2, 5, 7, 2, 5, 0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 9, 4, 9, 9, 4, 9, 0, 4, 9, 4, 9, 9, 4, 9, 0, 2, 6, 9, 2, 6, 9, 2, 0, 2, 6, 9, 2, 6, 9, 2, 11, 2, 7, 2, 7, 7, 2, 7, 11, 2, 7, 2, 7, 7, 2, 7, 11, 0, 4, 7, 0, 4, 7, 0, 11, 0, 4, 7, 0, 4, 7, 0, 9, 0, 4, 7, 0, 4, 7, 0, 9, 0, 4, 7, 0, 4, 7, 0, 2, 9, 2, 6, 0, 2, 6, 0, 2, 9, 2, 6, 0, 2, 6, 0, 7, 11, 2, 7, 11, 2, 7, 11, 7, 11, 2, 7, 11, 2, 7, 11, 7, 10, 4, 7, 1, 4, 7, 1, 7, 10, 4, 7, 1, 4, 7, 1, 5, 9, 2, 9, 2, 2, 9, 2, 5, 9, 2, 9, 2, 2, 9, 2, 5, 8, 2, 5, 11, 2, 5, 11, 5, 8, 2, 5, 11, 2, 5, 11, 4, 7, 0, 7, 0, 0, 7, 0, 4, 7, 0, 7, 0, 0, 7, 0, 4, 5, 9, 0, 5, 9, 0, 5, 4, 5, 9, 0, 5, 9, 0, 5, 2, 5, 9, 0, 5, 9, 0, 5, 2, 5, 9, 0, 5, 9, 0, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 2, 7, 11, 5, 7, 11, 5, 0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 7, 0, 4, 7, 0, 4, 0, 7, 10, 0, 4, 10, 0, 4, 0, 7, 10, 0, 4, 10, 0, 4, 5, 5, 9, 0, 4, 9, 0, 4, 5, 5, 9, 0, 4, 9, 0, 4, 6, 0, 9, 0, 3, 9, 0, 3, 6, 0, 9, 0, 3, 9, 0, 3, 8, 5, 11, 0, 2, 11, 0, 2, 8, 5, 11, 0, 2, 11, 0, 2, 7, 5, 7, 11, 2, 7, 11, 2, 7, 5, 7, 11, 2, 7, 11, 2, 7, 4, 7, 0, 4, 7, 0, 4, 7, 4, 7, 0, 4, 7, 0, 4, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 3, 9, 0, 6, 9, 0, 6, 7, 3, 9, 0, 6, 9, 0, 6, 7, 4, 7, 0, 7, 7, 0, 7, 7, 4, 7, 0, 7, 7, 0, 7, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 2, 7, 11, 5, 7, 11, 5, 0, 0, 7, 10, 4, 7, 10, 4, 0, 0, 7, 10, 4, 7, 10, 4, 0, 0, 5, 9, 0, 5, 0, 9, 0, 9, 5, 9, 5, 2, 5, 2, 0, 2, 7, 11, 2, 5, 2, 11, 2, 11, 7, 11, 2, 5, 4, 2, 0};

void setup() {
  size(900, 900);
}

void draw() {
  background(#f1f1f1);
  noStroke();

  int tilesX = notes.length;
  float tileW = width / float(tilesX);

  for (int i = 0; i < tilesX; i++) {

    float b = map(notes[i], 0, 11, 0, 255);

    fill(b);

    pushMatrix();
    translate(i*tileW, 0);
    rect(0, 0, tileW, height);
    popMatrix();
  }
}

P5.js

let notes = [0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 7, 0, 4, 7, 0, 4, 0, 2, 9, 2, 5, 9, 2, 5, 0, 2, 9, 2, 5, 9, 2, 5, 11, 2, 7, 2, 5, 7, 2, 5, 11, 2, 7, 2, 5, 7, 2, 5, 0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 9, 4, 9, 9, 4, 9, 0, 4, 9, 4, 9, 9, 4, 9, 0, 2, 6, 9, 2, 6, 9, 2, 0, 2, 6, 9, 2, 6, 9, 2, 11, 2, 7, 2, 7, 7, 2, 7, 11, 2, 7, 2, 7, 7, 2, 7, 11, 0, 4, 7, 0, 4, 7, 0, 11, 0, 4, 7, 0, 4, 7, 0, 9, 0, 4, 7, 0, 4, 7, 0, 9, 0, 4, 7, 0, 4, 7, 0, 2, 9, 2, 6, 0, 2, 6, 0, 2, 9, 2, 6, 0, 2, 6, 0, 7, 11, 2, 7, 11, 2, 7, 11, 7, 11, 2, 7, 11, 2, 7, 11, 7, 10, 4, 7, 1, 4, 7, 1, 7, 10, 4, 7, 1, 4, 7, 1, 5, 9, 2, 9, 2, 2, 9, 2, 5, 9, 2, 9, 2, 2, 9, 2, 5, 8, 2, 5, 11, 2, 5, 11, 5, 8, 2, 5, 11, 2, 5, 11, 4, 7, 0, 7, 0, 0, 7, 0, 4, 7, 0, 7, 0, 0, 7, 0, 4, 5, 9, 0, 5, 9, 0, 5, 4, 5, 9, 0, 5, 9, 0, 5, 2, 5, 9, 0, 5, 9, 0, 5, 2, 5, 9, 0, 5, 9, 0, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 2, 7, 11, 5, 7, 11, 5, 0, 4, 7, 0, 4, 7, 0, 4, 0, 4, 7, 0, 4, 7, 0, 4, 0, 7, 10, 0, 4, 10, 0, 4, 0, 7, 10, 0, 4, 10, 0, 4, 5, 5, 9, 0, 4, 9, 0, 4, 5, 5, 9, 0, 4, 9, 0, 4, 6, 0, 9, 0, 3, 9, 0, 3, 6, 0, 9, 0, 3, 9, 0, 3, 8, 5, 11, 0, 2, 11, 0, 2, 8, 5, 11, 0, 2, 11, 0, 2, 7, 5, 7, 11, 2, 7, 11, 2, 7, 5, 7, 11, 2, 7, 11, 2, 7, 4, 7, 0, 4, 7, 0, 4, 7, 4, 7, 0, 4, 7, 0, 4, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 3, 9, 0, 6, 9, 0, 6, 7, 3, 9, 0, 6, 9, 0, 6, 7, 4, 7, 0, 7, 7, 0, 7, 7, 4, 7, 0, 7, 7, 0, 7, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 0, 5, 7, 0, 5, 7, 2, 7, 11, 5, 7, 11, 5, 7, 2, 7, 11, 5, 7, 11, 5, 0, 0, 7, 10, 4, 7, 10, 4, 0, 0, 7, 10, 4, 7, 10, 4, 0, 0, 5, 9, 0, 5, 0, 9, 0, 9, 5, 9, 5, 2, 5, 2, 0, 2, 7, 11, 2, 5, 2, 11, 2, 11, 7, 11, 2, 5, 4, 2, 0];

function setup() {
  createCanvas(900, 900);
}

function draw() {
  background("#f1f1f1");
  noStroke();

  let tilesX = notes.length;
  let tileW = width / tilesX;

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

    let b = map(notes[i], 0, 11, 0, 255);

    fill(b);

    push();
    translate(i * tileW, 0);
    rect(0, 0, tileW, height);
    pop();
  }
}