let stopButton;

Tone.Transport.bpm.value = 160;

let noteText1 = "";

let noteText2 = "";

let noteText3 = "";

​

const waveform = new Tone.Waveform();

const waveform2 = new Tone.Waveform();

​

polySynth.connect(waveform);

polySynth2.connect(waveform2);

​

const seq1 = new Tone.Sequence(

  (time, note) => {

    polySynth.triggerAttackRelease(note, "4n", time);

    noteText1 = note;

  },

  ["F2", ["E2", "G1"], "G4", "A4"],

  "2n"

).start(0);

​

const seq2 = new Tone.Sequence(

  (time, note) => {

    polySynth.triggerAttackRelease(note, "6n", time);

    noteText2 = note;

  },

  ["G3", "G4", "E4", "D3", ["E2", "D4"], "G5"],

  "4n"

).start(0);

​

const seq3 = new Tone.Sequence(

  (time, note) => {

    polySynth2.triggerAttackRelease(note, "4n", time);

    noteText3 = note;

  },

  ["D3", "E3", "A3"],

  "8n"

).start(0);

​

// function setup() {

//   createCanvas(400, 400);

//   startButton = createButton("start transport");

//   stopButton = createButton("stop transport");

//   startButton.mousePressed(startTransport);

//   stopButton.mousePressed(stopTransport);

// }

​

let toggleButton;

​

function setup() {

  createCanvas(400, 400);

  toggleButton = createButton("01");

  toggleButton.mousePressed(toggleTransport);

}

​

function toggleTransport() {

  if (Tone.Transport.state === "started") {

    Tone.Transport.stop();

  } else {

    Tone.start(); // Ensure audio context is started

    Tone.Transport.start();

  }

}

​

function draw() {

  // Your existing draw() function code

  background("black");

  fill(255);

  // Draw your waveform visualization or other UI elements

}

​

​

​

// function draw() {

//   for (var y = 20; y < height; y += 40) {

//     for (var x = 20; x < width; x += 40) {

//       fill(0, 0, 0, 10);

//       stroke(x, 0, y);

//       rect(x, y, 40, 40);

//       rect(random(x, 400), random(x, 400), random(0, 40));

//     }

//   }

// }

​

function draw() {

  background("black");

  fill(255);

  // text(noteText1, width / 2 - 100, height / 2);

  // text(noteText2, width / 2 + 80, height / 2);

  // text(noteText3, width / 2, height / 2 - 80);

  const values = waveform.getValue();

  const values_2 = waveform2.getValue();

​

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

    const amplitude = values[i];

    const amplitude_2 = values_2[i];

​

    // apply amplitude values to rect width

    let w = amplitude * 100;

    let w_2 = amplitude * 100;

​

    rect(random(400, w), random(400, w_2), w);

  }

​

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

    const amplitude = values_2[i];

    // apply amplitude values to rect width

    let w = amplitude * 200;

    stroke(" pink");

    fill(0, 0, 0, 10);

    circle(width / 2, height / 2, w);

  }

  //     for (let i = 0; i < values.length; i+=5) {

  //     const amplitude = values[i];

  //     const amplitude_2 = values_2[i];

​

  //     // apply amplitude values to rect width

  //     let w = amplitude * 200;

  //     let w_2 = amplitude * 200;

​

  //      rect( random (400,w), random(400,w_2), w);

  //   }

}

​

function startTransport() {

  Tone.start();

  // start the transport

  Tone.Transport.start();

}

​

function stopTransport() {

  // stop the transport

  Tone.Transport.stop();

}

​