Trying to use mousePressed on a button and it ain't working?

Question

I’m running into some errors. I want the user to select an eye player through clicking a button (either left eye or right eye) and then draw to the canvas only the selected input. I am using an eye tracker to draw some png files onto the canvas. I want them to draw only the left eye one if the user clicks on the left button. I'm sorry for the extremely long code, I'm very new to code and don't know how to do it efficiently. The main variables I've been using for my problem is 'left' which is a button I created in setup() and in draw() I go through an array of points (clm eye tracker) and then save the left and right eye positions to objects, I then call the function mouse pressed on the left button.

    // NETWORKED + EYE VARIABLES

let socket = io(); // new socket on client side
let ctracker; // eye tracker obj
let clients = {}; // client object
let data = {}; // data object
let w = 1200; // matrix width
let h = 600; // matrix height
let leftEye, rightEye; // main eye image 
let SleftEye, SrightEye; // shadow eye image 
let leftEyeX, leftEyeY, rightEyeX, rightEyeY; // current user eye data point vars
let cnvPosX, cnvPosY; // postion of main canvas 
let playerLeft = {};
let playerRight = {};
let left,right;

/// SOUND VARIABLES //
let bell, bell1, bell2, bell3; // contains sound source
let bPat, b1Pat, b2Pat; // an array of nums that we can use to make a sequence of beats // 1 = on, 0= off
let bPhrase, b1Phrase, b2Phrase; // defines how the beat pattern is interpreted
let part; // attach all the above (sound,array,phrase) into a machine (part) i.e on/off,looper
let beatLength; // how big is sequence before it starts looping
let cellSize; // each sqauare size contains beat
let row1 = []; // array of sounds in row 1

// DOM variables
let play; // play button
let bg, largeText, smallText; // image variables for game instructions and background
let cnv; // main canvas
let matrixCnv; // canvas that draws the matrix ( music user interface )
let instructCnv; // instruction canvas at the topmost part
let bpmCTRL; // beat per minute slider

// let previousCo = {
//   left: {row: null, column: null},
//   right: {row: null, column:null}
// };



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

  // game main player left eye
  leftEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fleft-eye.png?v=1589284305903"
  );

  // game main player right eye
  rightEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fright-eye.png?v=1589284306011"
  );

  // game shadow player left eye
  SleftEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fother-left-eye.png?v=1589284306106"
  );

  // game shadow player left eye
  SrightEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fother-right-eye.png?v=1589284332165"
  );

  //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 tracker 
  ctracker = new clm.tracker();
  ctracker.init(pModel); // feed it model pca 20
  ctracker.start(videoInput.elt); // feed it video data 

 // open socket io for connections
  socket.on("getUpdate", function(data) {
    clients[data.name] = data;
  });


  instructCnv = createGraphics(w, h);
  instructCnv.background(0);


  matrixCnv = createGraphics(w, h); // matrix canvas of daw
  cnv = createCanvas(w, h); // main canvas that the eys are being drawn on
  cnv.position(cnvPosX, cnvPosY); // main. canvas position

  matrixCnv.mousePressed(canvasPressed); //drawMatrix() function on matrix function
  cnv.mousePressed(canvasPressed); // drawMatrix() function on main function

  beatLength = 6; // number of beats it loops thru && columns of matrix
  cellSize = 200; // size of square
  numOfRows = 3; // rows of matrix

  play = createButton('Play/Pause');
  play.position(1300, 10);
  play.size(80,30);
  play.mousePressed(playAudio);



  // basic structure of a Digital Audio Workstation

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

  // random selection of sound(bell3 or bell) in row 1
  function selectSong() {
    row1 = [bell3, bell];
    selected = row1[floor(random(2))];
    selected.setVolume(0.1);
    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.setVolume(0.1);
      bell1.play(time);
    },
    b1Pat
  );
  b2Phrase = new p5.Phrase(
    "bell2",
    time => {
      bell2.setVolume(0.1);
      bell2.play(time);
    },
    b2Pat
  );

// creating a new part that contains all the above
  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");

  //button left
  left = createButton('Left');
  left.position(300,15);

  // drawing the grid
  drawMatrix();
}



function draw() {

  image(matrixCnv, 0, 0);
  // background(bg);


  let positions = ctracker.getCurrentPosition();

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

    // find in array each position point


    playerLeft = {
    x : positions[27][0],
    y : positions[27][1]


    playerRight = {
    x : positions[32][0],
    y : positions[32][1]
  }



    left.mousePressed(drawLeft(playerLeft.x, playerLeft.y));



    // formatting each point into a dict entry to send over socket io


    data[(27).toString() + "." + "0"] = playerLeft.x;
    data[(27).toString() + "." + "1"] = playerLeft.y;

    data[(32).toString() + "." + "0"] = playerRight.x;
    data[(32).toString() + "." + "1"] = playerRight.y;


    // update client details
    data["name"] = socket.id;
    data["updated"] = new Date().getTime();
    socket.emit("update", data);

    //recieving data by other client and drawing
    var x, y;
    for (var c in clients) {
      if (c == socket.id) {
        // if client is not the the current user
        continue;
      }
      var points = clients[c];

      // console.log(points)

      var leftEyePoint = {
        x: points['27.0'],
        y: points['27.1']
      };

      var rightEyePoint = {
        x: points['32.0'],
        y: points['32.1']
      };

      image(SleftEye, leftEyePoint.x, leftEyePoint.y, 150, 100)
      image(SrightEye, rightEyePoint.x, rightEyePoint.y, 150, 100)

     // canvasEyed(leftEyePoint, rightEyePoint)

    }
  }
  drawMatrix();
}

function drawLeft(x,y) {

    push();
    translate(x, y);
    image(leftEye, 0, 0, 150, 100);
    pop();
}

function drawRight() {
    push();
    translate(playerRight.x, playerRight.y);
    image(rightEye, 0, 0, 150, 100);
    pop();
}
/////// conditional to check if all files are loaded

function playAudio() {
    if (bell.isLoaded() && bell1.isLoaded() && bell2.isLoaded()) {
      if (!part.isPlaying) {
        part.loop();
      } else {
        part.stop();
      }
    } else {
      console.log("relax and wait for sound to load");
    }

}



/// 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];
  }
}

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

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

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

Answer 1

Dan O is right, That is not the correct way of passing variables as arguments in callback functions.

left.mousePressed(drawLeft(playerLeft.x, playerLeft.y));

It Should be:

left.mousePressed( function()=>{

  drawLeft( playerLeft.x, playerLeft.y );

} );

This way you create a new function, an extra step inbetween. The function calls drawLeft(). Then pass that new function as the callback function. It's the same as doing this:

let afterMousePressed = function(){

  drawLeft( playerLeft.x, playerLeft.y );

};

left.mousePressed( afterMousePressed );