p5.j​​s全局和实例模式混淆

Question

我有两张p5草图，我想在网站的同一空间使用它们。这样在单击按钮后，草图切换。所以我制作了三个不同的文件。前两个是草图，它们包含在一个函数中（实例模式）。第三个草图是以全局模式编写的代码，因为它具有在网站首次加入时正确加载按钮的信息，并且它具有包含按钮应该执行的操作的信息：调用其他草图。 代码如下所示：

var playing = false;


var button;

function setup() {
  var col = color(185,185,185,150);
  button = createButton('Play');
  button.position(20,20);
  button.parent('black');
  button.style("background-color", col);
  button.style("padding", "10px 20px");
  button.style("font-size", "14px");

  button.mousePressed(toggleCanvas); // attach button listener

}

function mousePressed() {
}


function toggleCanvas() {
  if (playing) {

          if(myp5r){
                         myp5r.remove();
                         runSketch();
                         button.html('Stop');

                         }else{

                              runSketch();
                              button.html('Stop'); 

                               }
 }else {
       if(myp5){myp5.remove();
                     stopSketch();
                     button.html('Play');
}else{
    stopSketch();
    button.html('Play');}
  }
  playing = !playing;
}

我已被警告，不要混合全局和实例模式，尽管我的常识＆＃34;说可以使用按钮的全局模式。因为我希望它与页面一起首先加载。 但我注意到发生了奇怪的事情。就像，我在页脚下面添加了一个空白区域，看起来很糟糕。而且，更糟糕的是，按钮没有出现在网站的正确位置。我已经知道css有位置：例如亲戚。设计在localhost中工作，但不在网站中。