const instruments = ["Open Hat", "Close Hat", "Clap", "Kick"];

const padOrder = ["Kick", "Clap", "Close Hat", "Open Hat"];

let canvasWidth = 1200;

let gridHeight = 200;

let visualEffectHeight = 300;

let padHeight = 100;

let canvasHeight = gridHeight + visualEffectHeight + padHeight;

const labelWidth = 80;

const drumPatterns = {

  "Open Hat": new Array(patternSteps).fill(false),

  "Close Hat": new Array(patternSteps).fill(false),

  Clap: new Array(patternSteps).fill(false),

  Kick: new Array(patternSteps).fill(false),

};

let currentStep = 0;

let isPlaying = false;

let players = {};

let playersLoaded = false;

let globalReverb, waveform;

let mixerControls = {};

let instrumentColors;

let pulses = [];

let padFlash = {};

const flashDuration = 200;

let bpmSlider, bpmLabel;

​

function setupBPMControl() {

  let bpmContainer = createDiv();

  bpmContainer.position(0, 0);

  bpmContainer.style("width", canvasWidth + "px");

  bpmContainer.style("padding", "10px");

  bpmContainer.style("background", "linear-gradient(90deg, #4a5a6a, #5e6a7a)");

  bpmContainer.style("color", "#fff");

  bpmContainer.style("font-family", "Georgia, serif");

  bpmContainer.style("text-align", "center");

  bpmLabel = createSpan("BPM: 85");

  bpmLabel.parent(bpmContainer);

  bpmLabel.style("margin-right", "10px");

  bpmSlider = createSlider(60, 180, 85, 1);

  bpmSlider.parent(bpmContainer);

  bpmSlider.style("width", canvasWidth + "px");

  bpmSlider.input(() => {

    Tone.Transport.bpm.value = bpmSlider.value();

    bpmLabel.html("BPM: " + bpmSlider.value());

  });

  return bpmContainer.elt.offsetHeight;

}

​

function createInstrument(url) {

  let player = new Tone.Player(url);

  let volume = new Tone.Volume(0);

  player.chain(volume, globalReverb);

  return { player, volume };

}

​

function repeat(time) {

  instruments.forEach((inst) => {

    if (drumPatterns[inst][currentStep]) {

      players[inst].player.start(time);

      spawnPulse(inst);

    }

  });

  currentStep = (currentStep + 1) % patternSteps;

}

​

function spawnPulse(inst) {

  const col = instrumentColors[inst] || color(255);

  const x = random(width * 0.3, width * 0.7);

  const y = random(gridHeight + 50, gridHeight + visualEffectHeight - 50);

  pulses.push(new Pulse(x, y, col, inst));

}

​

function mousePressed() {

  if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) return;

  if (mouseY < gridHeight) {

    let cellW = (width - labelWidth) / patternSteps;

    let cellH = gridHeight / instruments.length;

    let col = floor((mouseX - labelWidth) / cellW);

    let row = floor(mouseY / cellH);

    if (

      col >= 0 &&

      col < patternSteps &&

      row >= 0 &&

      row < instruments.length

    ) {

      let inst = instruments[row];

      drumPatterns[inst][col] = !drumPatterns[inst][col];

    }

  } else if (

    mouseY >= gridHeight + visualEffectHeight &&

    mouseY < canvasHeight

  ) {

    let padW = width / padOrder.length;

    let padIndex = floor(mouseX / padW);

    if (padIndex >= 0 && padIndex < padOrder.length) {

      let inst = padOrder[padIndex];

      drumPatterns[inst][currentStep] = true;

      padFlash[inst] = millis();

    }

  }

}

​

function keyPressed() {

  if (key === " ") {

    if (isPlaying) {

      Tone.Transport.stop();

      isPlaying = false;

      currentStep = 0;

    } else {

      Tone.start();

      isPlaying = true;

      Tone.Transport.start();

    }

  }

}

​

function draw() {

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

    let inter = map(i, 0, height, 0, 1);

    let c = lerpColor(color(20, 20, 20), color(0, 0, 0), inter);

    stroke(c);

    line(0, i, width, i);

  }

  drawDrumGrid();

  drawVisualEffects();

  drawPads();

}

​

function drawDrumGrid() {

  noStroke();

  fill(0, 0, 0, 150);

  rect(0, 0, width, gridHeight);

  let cellW = (width - labelWidth) / patternSteps;

  let cellH = gridHeight / instruments.length;

  instruments.forEach((inst, i) => {

    fill(50, 50, 80, 180);

    rect(0, i * cellH, labelWidth, cellH);

    fill(255);

    textSize(16);

    textFont("Georgia");

    textAlign(CENTER, CENTER);

    text(inst, labelWidth / 2, i * cellH + cellH / 2);

    for (let j = 0; j < patternSteps; j++) {

      fill(drumPatterns[inst][j] ? instrumentColors[inst] : color(60, 60, 80));

      stroke(80, 80, 100);

      strokeWeight(1);

      rect(labelWidth + j * cellW + 2, i * cellH + 2, cellW - 4, cellH - 4, 4);

    }

  });

  noStroke();

  fill(30, 144, 255, 50);

  rect(

    labelWidth + currentStep * ((width - labelWidth) / patternSteps),

    0,

    (width - labelWidth) / patternSteps,

    gridHeight

  );

}

​

function drawVisualEffects() {

  let startY = gridHeight;

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

    let inter = map(i, 0, visualEffectHeight, 0, 1);

    let c = lerpColor(color(30, 30, 40, 150), color(10, 10, 20, 200), inter);

    stroke(c);

    line(0, startY + i, width, startY + i);

  }

  let waveData = waveform.getValue();

  let waveY = startY + visualEffectHeight * 0.5;

  let waveH = visualEffectHeight * 0.3;

  noFill();

  stroke(100, 200, 255, 120);

  strokeWeight(5);

  beginShape();

  for (let s = 0; s < waveData.length; s++) {

    let x = map(s, 0, waveData.length, 0, width);

    let y = map(waveData[s], -1, 1, waveY + waveH, waveY - waveH);

    curveVertex(x, y);

  }

  endShape();

  stroke(100, 200, 255, 80);

  strokeWeight(3);

  beginShape();

  for (let s = 0; s < waveData.length; s++) {

    let x = map(s, 0, waveData.length, 0, width);

    let y = map(waveData[s], -1, 1, waveY + waveH, waveY - waveH);

    curveVertex(x, y);

  }

  endShape();

  blendMode(ADD);

  for (let i = pulses.length - 1; i >= 0; i--) {

    pulses[i].update();

    pulses[i].display();

    if (pulses[i].isFinished()) {

      pulses.splice(i, 1);

    }

  }

  blendMode(BLEND);

}

​

function drawPads() {

  let startY = gridHeight + visualEffectHeight;

  noStroke();

  fill(40);

  rect(0, startY, width, padHeight);

  let padW = width / padOrder.length;

  let padH = padHeight;

  padOrder.forEach((inst, idx) => {

    let x = idx * padW;

    let y = startY;

    let flashTime = padFlash[inst] || 0;

    let elapsed = millis() - flashTime;

    if (elapsed < flashDuration) {

      fill(instrumentColors[inst]);

    } else {

      fill(80);

    }

    stroke(100);

    strokeWeight(2);

    rect(x + 4, y + 4, padW - 8, padH - 8, 8);

    fill(255);

    noStroke();

    textSize(20);

    textFont("Georgia");

    textAlign(CENTER, CENTER);

    text(inst, x + padW / 2, y + padH / 2);

  });

}

​

class Pulse {

  constructor(x, y, col, inst) {

    this.x = x;

    this.y = y;

    this.col = col;

    this.inst = inst;

    this.outerSize = 0;

    this.outerMaxSize = random(150, 300);

    this.outerGrowth = random(4, 8);

    this.outerAlpha = 200;

    this.innerSize = random(45, 75);

    this.innerShrink = random(1.5, 3);

  }

  update() {

    this.outerSize += this.outerGrowth;

    this.outerAlpha = map(this.outerSize, 0, this.outerMaxSize, 200, 0);

    this.innerSize = max(0, this.innerSize - this.innerShrink);

  }

  isFinished() {

    return this.outerSize > this.outerMaxSize;

  }

  display() {

    if (this.inst === "Kick" || this.inst === "Clap") {

      push();

      noStroke();

      drawingContext.shadowBlur = 20;

      drawingContext.shadowColor = this.col;

      fill(red(this.col), green(this.col), blue(this.col), this.outerAlpha);

      ellipse(this.x, this.y, this.outerSize, this.outerSize);

      pop();

      push();

      noStroke();

      fill(this.col);

      ellipse(this.x, this.y, this.innerSize, this.innerSize);

      pop();

    } else {

      push();

      rectMode(CENTER);

      noFill();

      stroke(red(this.col), green(this.col), blue(this.col), this.outerAlpha);

      strokeWeight(3);

      rect(this.x, this.y, this.outerSize, this.outerSize);

      pop();

      push();

      rectMode(CENTER);

      noStroke();

      fill(this.col);

      rect(this.x, this.y, this.innerSize, this.innerSize);

      pop();

    }

  }

}

​

function setup() {

  let bpmOffsetY = setupBPMControl();

  let cnv = createCanvas(canvasWidth, canvasHeight);

  cnv.position(0, bpmOffsetY);

  background(30);

  instrumentColors = {

    "Open Hat": color(173, 216, 230),

    "Close Hat": color(144, 238, 144),

    Clap: color(255, 255, 224),

    Kick: color(255, 182, 193),

  };

  globalReverb = new Tone.Reverb({ decay: 2, preDelay: 0.01, wet: 0.5 });

  globalReverb.toDestination();

  waveform = new Tone.Waveform(1024);

  Tone.Destination.connect(waveform);

  let rightPanelX = canvasWidth + 20;

  let trackPanelStartY = bpmOffsetY + 20;

  let trackControlHeight = 90;

  instruments.forEach((inst, idx) => {

    let container = createDiv();

    container.position(

      rightPanelX,

      trackPanelStartY + idx * trackControlHeight

    );

    container.style("width", "300px");

    container.style("padding", "8px");

    container.style("background", "linear-gradient(180deg, #424242, #616161)");

    container.style("border", "1px solid #555");

    container.style("border-radius", "4px");

    container.style("font-family", "Georgia, serif");

    container.style("box-shadow", "0px 4px 10px rgba(0,0,0,0.3)");

    let title = createDiv("<strong>" + inst + "</strong>");

    title.parent(container);

    title.style("color", "#fff");

    title.style("margin-bottom", "4px");

    let volLabel = createDiv("Volume: 0 dB");

    volLabel.parent(container);

    volLabel.style("color", "#fff");

    let volSlider = createSlider(-12, 0, 0, 1);

    volSlider.parent(container);

    volSlider.style("width", "270px");

    volSlider.input(() => {

      volLabel.html("Volume: " + volSlider.value() + " dB");

      players[inst].volume.volume.value = volSlider.value();

    });

    mixerControls[inst] = { volSlider, volLabel };

  });

  let clearButton = createButton("Clear Pattern");

  clearButton.position(

    rightPanelX,

    trackPanelStartY + instruments.length * trackControlHeight + 20

  );

  clearButton.style("width", "300px");

  clearButton.style("padding", "8px");

  clearButton.style("background", "linear-gradient(90deg, #616161, #757575)");

  clearButton.style("color", "#fff");

  clearButton.style("font-family", "Georgia, serif");

  clearButton.style("box-shadow", "0px 4px 10px rgba(0,0,0,0.3)");

  clearButton.mousePressed(() => {

    instruments.forEach((inst) => {

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

        drumPatterns[inst][i] = false;

      }

    });

  });

  instruments.forEach((inst) => {

    padFlash[inst] = -flashDuration;

  });

  players = {

    "Open Hat": createInstrument("sounds/openhat.wav"),

    "Close Hat": createInstrument("sounds/closehat.wav"),

    Clap: createInstrument("sounds/clap.wav"),

    Kick: createInstrument("sounds/kick.wav"),

  };

  Tone.loaded().then(() => {

    playersLoaded = true;

  });

  Tone.Transport.scheduleRepeat(repeat, "16n");

  pulses = [];

}

​