Question

我想将所有草图放到网站上并在按下按钮时显示它们。出于测试目的，我仅放置了一个no-display类来隐藏预览。删除标签时，画布不会显示。

Here is my website 和this is the source code。

我仅将此功能放在了一些草图上（将草图放在父div中并调整画布的大小），以确保它可以工作。该网站现在简直是骨头，所以我还没有添加隐藏和显示这些草图的功能。

我的问题是，即使删除标签，草图也不会显示。而且我想知道是否有任何方法可以减少那些草图在不显示时的活跃程度，因此该网站不会变得迟钝。

黑色是全屏预览的背景。另外，当仅使用一个脚本时，它可以工作。

Answer 1

所有草图都使用全局模式，这意味着您正在定义如下的全局函数：

function setup(){
  // code
}

function draw(){
  //code
}

您正在每个草图文件中执行此操作，因此您有一堆具有相同名称的函数。我很确定这意味着加载的最后一个草图将覆盖所有其他草图，但是在任何情况下，这绝对都不符合您的期望。

相反，您需要使用实例模式，以便每个草图都是独立的。您可以阅读有关实例模式here的更多信息，但这是一个基本示例：

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

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

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

您将对每个草图进行类似的操作，以使它们独立并且不会覆盖彼此的全局函数。

我还建议您尝试work in smaller steps。在尝试将其扩展到整个产品组合之前，请先使用两个简单的草图进行操作。

尝试链接更多草图时未显示草图

1 个答案: