尝试在 p5.js 中使用 createGraphics() 和眼动仪，但它不起作用

Question

I'm still a beginner coder and I'm making a project where the eye positions (networked by socket) of two clients when landing on the same positions on the canvas would play the music note it lands on. I'm still in the beginning stages of this project and currently, I'm trying to draw the client's eye position on the canvas while the grid of music notes on a p5 renderer object.I had coded the grid to add an ellipse to where the mouse has clicked. The grid is successfully drawn but I no longer can interact with the grid ie add or remove ellipses on click. So now I'm a bit lost on how to solve this issue. Before when the eye was being drawn on p5.renderer I also tried the clear() function to get rid of the trails but it didn't work. So I have two problems 1) trying to get rid of eye position trails and 2) using create graphics with mouse pressed function not working in code below.

// NETWORKED + EYE VARIABLES

let socket = io();
let ctracker;
let clients = {};
let data = {};
let w =  1200;
let h =  600;

let leftEyeX, leftEyeY, rightEyeX, rightEyeY;
let cnvPosX;
let cnvPosY;

/// SOUND VARIABLES //
let bell, bell1, bell2, bell3; // contains sound source
let bPat, b1Pat, b2Pat; // an array of no.s that we can use to make beats // 1 = on, 0= off
let bPhrase, b1Phrase, b2Phrase; // defines how the beat pattern is interpreted
let part; // attach all the instruments to the to make it into a machine i.e on/off
let bpmCTRL;
let beatLength; // how big is sequence before it starts looping
let cellSize;
let cnv;
let overlayCnv;
let bg, largeText,smallText, MleftEye, MRightEye;
let row1 =[];


function preload() {
  // background
  bg = loadImage("https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2Fdaw-bg.png?v=1589319965142");
  //main game instruction
  largeText = loadImage("https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2FAsset%2015.png?v=1589381930278");
  // small game description
  smallText = loadImage("https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2FAsset%203.png?v=1589381926354");

  //sound files
  bell = loadSound (
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203490__tesabob2001__g-5.mp3?v=1589326854551",
    () => {}
  );
  bell1 = loadSound (
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203485__tesabob2001__c5.mp3?v=1589326924689",
    () => {}
  );
  bell2 = loadSound (
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203489__tesabob2001__f5.mp3?v=1589326917439",
    () => {}
  );
  bell3 = loadSound (
  "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203491__tesabob2001__g-4.mp3?v=1589326867294", () => {}
  );

};

function setup() {
  cnvPosX = 120;
  cnvPosY = 50;
  // setup camera capture

  var videoInput = createCapture(VIDEO);
  videoInput.size(w,h); 
  videoInput.position(cnvPosX, cnvPosY);
  videoInput.hide();
  // setup canvas


  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);
    noStroke();
  socket.on('getUpdate', function(data){
    clients[data.name] = data;
  });


  cnv = createCanvas(w, h);
  cnv.position(cnvPosX,cnvPosY)
  overlayCnv = createGraphics(w,h);

  // overlayCnv.position(cnvPosX,cnvPosY);
  overlayCnv.mousePressed(canvasPressed);
  beatLength = 6;
  cellSize = 200;
  numOfRows = 3;

  // canvas for eyes



  // basic structure of a DAW

  // time is a sceduled delay in note play time
  bPat =  [0, 0, 0, 0, 0, 0];
  b1Pat = [0, 0, 0, 0, 0, 0];
  b2Pat = [0, 0, 0, 0, 0, 0];

  function selectSong() {
    row1 = [bell3, bell];
    selected = row1[floor(random(2))];
    console.log(selected);
    selected.play();

  }



  // name, callback, array
  bPhrase = new p5.Phrase(
    "bell",
    time => {

      selectSong()
    },
    bPat
  );
  b1Phrase = new p5.Phrase(
    "bell1",
    time => {
      // make a variable to go there insiead of bell -> use random function to give a value to the variable
      bell1.play(time); },
    b1Pat
  );
  b2Phrase = new p5.Phrase(
    "bell2",
    time => {

      bell2.play(time);
    },
    b2Pat
  );



  part = new p5.Part();
  part.addPhrase(bPhrase);
  part.addPhrase(b1Phrase);
  part.addPhrase(b2Phrase);


  bpmCTRL = createSlider(30, 200, 60, 1); // smallest val, highest val, starting val, incremental val
  bpmCTRL.position(10, 10); // x, y
  bpmCTRL.input(() => {
    part.setBPM(bpmCTRL.value());
  });
  part.setBPM("60");

  drawMatrix();

  ///// user interact
  function canvasPressed() {
    console.log("mousepressed")
    let rowClicked = floor(numOfRows * (mouseY / height));
    let columnClicked = floor(beatLength * (mouseX / width));

    if (rowClicked === 0) {
      console.log("first row");
      bPat[columnClicked] = +!bPat[columnClicked];
    } else if (rowClicked === 1) {
      console.log("second row");
      b1Pat[columnClicked] = +!b1Pat[columnClicked];
    } else if (rowClicked === 2) {
      console.log("third row");
      b2Pat[columnClicked] = +!b2Pat[columnClicked];
    }

    drawMatrix();
  }

  /// drawing the grid
  function drawMatrix() {
    overlayCnv.background(bg);

    //line
    overlayCnv.stroke(25,40,100);
    overlayCnv.strokeWeight(2);
    for (let i = 0; i < beatLength + 1; i++) {
      overlayCnv.line(i * cellSize, 0, i * cellSize, height);
    }
    for (let i = 0; i < numOfRows + 1; i++) {
      overlayCnv.line(0, (i * height) / numOfRows, width, (i * height) / numOfRows);
    }

    //circle
    overlayCnv.noStroke();
    overlayCnv.fill(25,40,100);
    for (let i = 0; i < beatLength; i++) {
      if (bPat[i] === 1) {
        overlayCnv.ellipse(i * cellSize + 0.5 * cellSize, 100, 50);
      }
      if (b1Pat[i] === 1) {
        overlayCnv.ellipse(i * cellSize + 0.5 * cellSize, 300, 40);
      }
      if (b2Pat[i] === 1) {
        overlayCnv.ellipse(i * cellSize + 0.5 * cellSize, 500, 30);
      }
    }
  }
  image(overlayCnv, 0, 0);
}

function draw() {

  let positions = ctracker.getCurrentPosition();

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

    // draw ellipse at each position point
    leftEyeX = positions[27][0];
    leftEyeY = positions[27][1];

    rightEyeX = positions[32][0];
    rightEyeY = positions[32][1];


    // ellipse(positions[i][0], positions[i][1], 8, 8);
    fill(255);
    ellipse(rightEyeX, rightEyeY, 18, 18);


    fill(255);
    ellipse(leftEyeX, leftEyeY, 18, 18);

    // formatting each point into a dict entry to send over socket io
    data[(27).toString() + "." + '0'] = leftEyeX;
    data[(27).toString() + "." + '1'] = leftEyeY;

    data[(32).toString() + "." + '0'] = rightEyeX;
    data[(32).toString() + "." + '1'] = rightEyeY;

    // image(eyeCnv,0,0); // x, y relative to canvas x & y

  }

} 




/////// conditional to check if all files are loaded

function keyPressed() {
  if (key === " ") {
    if (bell.isLoaded() && bell1.isLoaded() && bell2.isLoaded()) {
      if (!part.isPlaying) {
        part.loop();
      } else {
        part.stop();
      }
    } else {
      console.log("relax");
    }
  }
}

Answer 1

Nevermind, the error was just that background kept drawing in draw()