почему функция draw p5. js не работает в реакции? - PullRequest
Новая
       29

почему функция draw p5. js не работает в реакции?

0 голосов
/ 27 января 2020

Я использую p5. js и ml5 в реакции. сначала у меня было много проблем, чтобы запустить камеру и так далее ... Я много искал и нашел способ успешно использовать камеру для съемки. Теперь моя проблема в том, что я хочу рисовать позы, используя p5.draw (позы успешно утешаются), но я не могу. вот мой код: 

import React from "react";
import { Grid, Fab } from "@material-ui/core";
import StopIcon from "@material-ui/icons/Stop";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import * as ml5 from "ml5";
import p5 from 'p5';
// import sketch from './sketch';


export default function Capture() {
  const vidRef = React.useRef(null);


const modelReady=()=> {
  console.log('model ready');
}


  React.useEffect(() => {


    const sketch = new p5();
    const vid = vidRef.current;
    const canvasWidth = sketch.windowWidth;
    const canvasHeight = sketch.windowHeight;
    let p =sketch.createCanvas(canvasWidth, canvasHeight)
    let video = sketch.createCapture(sketch.VIDEO)


   const gotPoses= (poses) => {
    console.log(poses);
    if (poses.length > 0) {
      // nose position
      let newNoseX = poses[0].pose.keypoints[0].position.x;
      let newNoseY = poses[0].pose.keypoints[0].position.y;

      // making delay nose
      noseX = sketch.lerp(noseX, newNoseX, 0.5);
      noseY = sketch.lerp(noseY, newNoseY, 0.5);


    }
  }


   let poseNet = ml5.poseNet(video, modelReady);
  poseNet.on('pose', gotPoses);

  // video.hide();


  sketch.draw=()=>{
    sketch.image(video, 0, 0);
    sketch.fill('green');

    //ellipse(noseX, noseY, 5);               // Nose
    sketch.ellipse(rightEyeX, rightEyeY, 5);         //right eye
    sketch.ellipse(leftEyeX, leftEyeY, 5);           // left eye
     // right ankle

    // Lines
    sketch.stroke(0, 255, 0); // making lines in green
    sketch.strokeWeight(8);
    sketch.line(rightShoulderX, rightShoulderY, leftShoulderX, leftShoulderY);    // right shoulder to left shoulder
  }   


  }, []);


  return (
    <div className={classes.root}>
    <vid ref={vidRef}  className="w-100 h-100"/> 
    </div>
  );
}

ps: ранее я использовал функцию настройки, но она не работает, а затем я нашел следующий путь на сайте (я пропустил его URL), который решил мою проблему сделав новый экземпляр p5.

...