尝试在p5.js中将createGraphics（）与眼动仪一起使用，但它不起作用

Question

我仍然是一个初学者，我正在做一个项目，当两个客户的眼睛位置降落在画布上的相同位置时，它们的眼睛位置（通过插座联网）将播放其降落的音符。我仍处于该项目的开始阶段，目前，我正在尝试在画布上绘制客户的眼睛位置，而在p5渲染器对象上绘制音符网格。我已经对网格进行了编码，以在鼠标单击的位置添加一个椭圆。网格已成功绘制，但我无法再与网格交互，即单击时添加或删除椭圆。所以现在我对如何解决这个问题有些迷茫。在关注p5.renderer之前，我还尝试了clear（）函数来摆脱痕迹，但是它没有用。因此，我有两个问题：1）试图摆脱眼睛的位置痕迹； 2）使用鼠标按下功能创建图形在下面的代码中不起作用。

// 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

没关系，错误只是背景一直在draw（）中进行绘制