用p5js观看和移动Midi笔记并做出反应

Question

我想用p5js移动笔记。我正在使用带有p5Wrapper的createGraphics和reactjs，但是我不明白如何做到这一点。 图形不起作用...我的目标是移动带有midi文件的笔记，我想从中提取来自midi文件的笔记并绘制它... 在我使用pixijs之前，但现在我想实现p5js

export default function sketch (p) {
    let height;
    let width;
    const numberOfWhiteKey = 43;
    let wWhiteNotes;
    let wBlackNotes;
    let y;
    let x;
    let h;
    let graph; 



    window.addEventListener('load', ()=>{
                let pianoHeight =  document.getElementById("virtualPiano").clientHeight   
               let headerHeight =  document.getElementById('header').clientHeight

                    height = (window.innerHeight - pianoHeight - headerHeight)
                    width =  window.innerWidth
            })

    p.setup = function () {

        p.createCanvas(width, height);
        graph = p.createGraphics(width, height)
        console.log('TCL: p.setup -> this.graph', graph)
        p.image(graph,0,0, width, height)
        window.addEventListener('resize', ()=>{
            let pianoHeight =  document.getElementById("virtualPiano").clientHeight   
            let headerHeight =  document.getElementById('header').clientHeight

            height = (window.innerHeight - pianoHeight - headerHeight)
            width =  window.innerWidth

            p.resizeCanvas(width, height)
        })
        p.noLoop()
    };

    p.myCustomRedrawAccordingToNewPropsHandler = function (props) {

        if(props.x || props.y || props.h || props.wWhiteNotes|| props.wBlackNotes){
            x = props.x;
            y = props.y + height;
            h = props.h;
            wWhiteNotes = props.wWhiteNotes;
            wBlackNotes = props.wBlackNotes;

            graph.rect(x, y, wWhiteNotes, h);
            graph.rect(x, y,wBlackNotes, h);

        }



    };

    p.draw = function() {
        p.background(100);
        p.stroke(255);

        let ecartOctave = (width / numberOfWhiteKey) + (6*(width / numberOfWhiteKey))
            //Ecart entre chaque octave
        for(var i = ecartOctave ; i < width; i += ecartOctave) { 
            p.line(i,1000, i, 0) 
        }  



      };


  };