CODEWITHSUNDEEP
javascriptp5.js
DylanYang
DylanYang

Reputation: 11

p5.js seems to have been imported multiple times. Please remove the duplicate import

I use iframe to run P5.js code. When I click Run Button over two times, it always gives the info 'p5.js seems to have been imported multiple times. Please remove the duplicate import'. What happend? How can I solve this problem?

var buttonElement = document.querySelector('button');

buttonElement.addEventListener('click', function(event){
    clearIframe('iframe');
    var idocument = iframe.contentDocument;
    idocument.open();
    idocument.write("");
    idocument.write("<!DOCTYPE html>");
    idocument.write("<html>");
    idocument.write("<head><script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js'></script></head>");
    idocument.write("<body>this is the iframe ");
    idocument.write(editor.getValue());
    idocument.write("</body>");
    idocument.write("</html>");
    idocument.close();
    }, false);

Issue Screenshot

Upvotes: 0

Views: 880

Answers (1)

DylanYang
DylanYang

Reputation: 11

I find the answer from https://github.com/processing/p5.js/wiki/Global-and-instance-mode After I build a new instance for this, it works well.

<script>
if(typeof myp5 === 'undefined' || variable === null){
  let myp5 = new p5(( sketch ) => {

    let x = 100;
    let y = 100;

    sketch.setup = () => {
      sketch.createCanvas(200, 200);
    };

    sketch.draw = () => {
      sketch.background(255, 204, 0);
      sketch.fill(255, 204, 0);
      sketch.rect(x,y,50,50);
    };
  });
}
</script>

Upvotes: 1

Related Questions