CODEWITHSUNDEEP
reactjsp5.js
Bill
Bill

Reputation: 5150

p5.js mousePressed event returns Undefined

I cant get mousePressed to console log the MouseEvent. I'm not even sure if having it in the setup function is the right place?

https://codesandbox.io/embed/withered-monad-jrhyw

import React from 'react';
import Sketch from 'react-p5';

const App: React.FC = () => {
  const setup = (p5: any) => {
    canvas = p5.createCanvas(window.innerWidth, window.innerHeight);

    canvas.mouseWheel((e: MouseEvent) => {
      console.log(e); // Wheel Event
    });

    canvas.mousePressed((e: MouseEvent) => {
      console.log(e); // Undefined
    });

  };

  const draw = (p5: any) => {
    p5.background(50);
    p5.fill(0);
    p5.rect(25, 25, 50, 50);
  };

  return (
    <React.Fragment>
      <Sketch setup={setup} draw={draw} />
    </React.Fragment>
  );
};

export { App };

Upvotes: 0

Views: 912

Answers (2)

user11722559
user11722559

Reputation:

I have answered this question on opened GitHub Issue in order to use only one channel to track this issue and resolve it. Github Issue #16

Upvotes: 0

Julian
Julian

Reputation: 1297

The readme of the react-p5 library indicates that you should use the mousePressed method as a prop, so try and define it outside of setup and then pass it:

const mp = (e: MouseEvent) => {
  console.log(e);
})

<Sketch setup={setup} draw={draw} mousePressed={mp}/>

Nevertheless, I did try defining several other methods inside of setup and all seemed to work normally; mousePressed was the only one that required to be passed as a prop.

Upvotes: 1

Related Questions