javascript - 尝试链接更多草图时没有显示草图

Question

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

Here is my website ，和this is the source code 。

我只将此功能放在一些草图上(将草图放在父 div 中并调整 Canvas 大小)，以确保它有效。该网站现在还很简陋，所以我还没有添加隐藏和显示这些草图的功能。

我的问题是，即使我删除标签，草图也不会显示。我想知道是否有办法减少这些草图在不显示时的活跃程度，这样网站就不会变得滞后。

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

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 。在尝试将其扩展到您的整个作品集之前，请使用两个简单的草图来完成此工作。