尝试 link 更多时没有显示草图

Question

我想把我所有的草图放在一个网站上，并在按下按钮时显示它们。出于测试目的，我简单地放置了一个 no-display class 来隐藏预览。删除标签时，canvas 不会显示。

Here is my website , and 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。在尝试将其扩展到您的整个投资组合之前，先使用两个简单的草图进行操作。

尝试 link 更多时没有显示草图

No sketches show up when trying to link more of them

html

javascript

p5.js