​

//visuals:

var step = 12;

var w; //individual strip width

var strips = [];

var n = 0;

//harmony:

var synth;

var notes;

var bassNotes = "A2";

​

synth = new Tone.PolySynth({

  "volume": -5,

  "envelope": {

    "attack": 0.5,

    "decay": 2,

    "release": 5,

  }

}).toMaster();

​

synth.set({

    "oscillator" : {

        "type" : "triangle"

    }

});

​

Tone.Transport.bpm.value = 40;

var synthPart = new Tone.Part(function(time, note) {

   //manipulate n in draw loop

    let transposedSynth = Tone.Frequency(note).transpose(n);

    synth.triggerAttackRelease(transposedSynth, "8n", time);

}, [

  ["0:0:0", "Bb3"],

  ["0:0:1", "A3"],

  ["0:0:3", "A3"],

  ["0:1:0", "G#3"],

  ["0:1:2", "G#3"],

  ["0:1:3", "F3"],

  ["0:2:1", "F3"],

  ["0:2:2", "E3"],

​

]).start();

synthPart.loop = true; 

synthPart.loopEnd = "0:3:0";

​

​

var dronePart = new Tone.Part(function(time, note) {

   //manipulate n in draw loop

    let transposedDrone = Tone.Frequency(note).transpose(n);

  synth.triggerAttackRelease(transposedDrone, "8n", time);

}, [

  ["0:0:0", bassNotes],

]).start();

dronePart.loop = true;

dronePart.loopEnd = "16n";

​

​

function setup() {

  //visuals:

  createCanvas(400, 400);

  rectMode(CENTER);

  w = width / (step + 2);

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

    strips[i] = new Strip(w / 2 + (w + 5) * i, height / 2, height / 2 + i * height / (2 * step));

  }

  //harmony:

  synthPart.start();

  dronePart.start();

  Tone.Transport.start();

}

​

function draw() {

  background(0);

  //num of strips displayed, controlled by mouseX

  var num = 1 + floor((mouseX - w / 2) / (w + 5));

  num = constrain(num, 0, step);

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

    strips[i].display();

  }

   n=num;

}

​

​

class Strip {

  constructor(_x, _y, _h) {

    this.x = _x;

    this.y = _y;

    this.h = _h;

  }

  display() {

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

      noStroke();

      fill(0 + i * (255 / 10));

      rect(this.x, this.y, w - 3 * i, this.h - 3 * i);

    }

  }

}