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 = ['1', '2', '3', '4','5'];

let counts = [];

let c = 0;

​

let x = 100;

let resetTime = 0;

​

let minBPM = 0;

let maxBPM = 500;

​

let durSlider;

​

let osc, env;

let playNote = false;

let freq = 440;

​

let freq1 = 675;

let freq2 = 450;

let freq3 = 550;

let freq4 = 650;

​

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

​

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

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

    x += 100;

  }

}

​

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

  }

​

  if ((mil - resetTime) > durVal * 4) {

    resetTime = mil;

  }

​

  if (mil > resetTime && mil < resetTime + durVal) {

    // counts[0].changeRed();

    playSound(freq1);

  } 

​

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

    // counts[1].changeRed();

    playSound(freq2);

  } 

​

  if (mil > resetTime + durVal * 2 && mil < resetTime + durVal * 3) {

    // counts[2].changeRed();

    playSound(freq3);

  } 

​

  if (mil > resetTime + durVal * 3 && mil < resetTime + durVal * 4) {

    playSound(freq4);

  } 

  if (mil > resetTime + durVal * 4 && mil < resetTime + durVal * 5) {

    playSound(500);

  } 

​

  // 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 = 48;

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

  };

}