let X, Y; // Center of the orbit

let R = 200; // Radius of the orbit

let r = 50; // Radius of the lilac circles

let l = 10; // Length of the cross

​

// Variables for music

let nums = [];

let counts = [];

let resetTime = 0;

​

let minBPM = 0;

let maxBPM = 500;

​

let durSlider;

​

let osc, env;

​

// Godfather theme frequencies

let freqList = [

  220, // A3

  330, // E4

  349, // F4

  392, // G4

  440, // A4

  392, // G4

  349, // F4

  330, // E4

  261, // C4

  330, // E4

  392, // G4

  440, // A4

  494, // B4

  440, // A4

  392, // G4

  349, // F4

  330  // E4

];

​

function setup() {

  createCanvas(550, 550);

​

  // Initialize Troxler variables

  X = width / 2;

  Y = height / 2;

  frameRate(12);

  colorMode(HSB);

  angleMode(DEGREES);

​

  // Initialize music variables

  durSlider = createSlider(minBPM, maxBPM, 80, 1);

  durSlider.position(200, 500);

​

  env = new p5.Env();

  env.setADSR(0.01, 0.5, 0.01, 0.01);

  env.setRange(1, 0);

​

  osc = new p5.Oscillator('sine');

  osc.amp(env);

  osc.start();

​

  // Generate counts for each note

  let x = 50;

  for (let i = 0; i < freqList.length; i++) {

    nums.push((i + 1).toString());

    counts.push(new Count(x, nums[i]));

    x += 30;

  }

}

​

function draw() {

  background(0, 0, 60);

​

  // Draw Troxler fading visuals

  stroke(0, 0, 0);

  strokeWeight(2);

  line(X - l, Y, X + l, Y);

  line(X, Y - l, X, Y + l);

​

  for (let a = 0; a < 360; a += 30) {

    noStroke();

    fill(290, 40, 80);

    circle(X + R * cos(a), Y - R * sin(a), r);

  }

​

  let a = frameCount * 30;

  noStroke();

  fill(0, 0, 60);

  circle(X + R * cos(a), Y - R * sin(a), r);

​

  // Music functionality

  let mil = millis();

  let durValBPM = durSlider.value();

  let durVal = round((60 / durValBPM) * 1000);

​

  for (let i = 0; i < counts.length; i++) {

    counts[i].display();

  }

​

  for (let i = 0; i < freqList.length; i++) {

    if (mil > resetTime + durVal * i && mil < resetTime + durVal * (i + 1)) {

      playSound(freqList[i]);

      counts[i].changeRed();

    } else {

      counts[i].changeBlack();

    }

  }

​

  if ((mil - resetTime) > durVal * freqList.length) {

    resetTime = mil;

  }

​

  // Display BPM

  fill(0);

  textSize(20);

  textAlign(CENTER);

  text('BPM: ' + durValBPM, width / 2, height - 15);

}

​

function playSound(frequency) {

  osc.freq(frequency);

  env.play();

}

​

function Count(xpos, num) {

  this.x = xpos;

  this.y = 100;

  this.size = 20;

  this.col = color(0);

  this.word = num;

​

  this.display = function () {

    fill(this.col);

    textSize(this.size);

    text(this.word, this.x, this.y);

  };

​

  this.changeRed = function () {

    this.col = color(255, 0, 0);

  };

​

  this.changeBlack = function () {

    this.col = color(0);

  };

}

​