如何在 HTML/CSS 网格中显示多个 p5.js 脚本

Question

我有多个 p5.js 脚本，它们都生成 100x100 的 canvas。假设我有 9 个，这是每个的代码：

var canvas_size = 200

function setup() {
  createCanvas(canvas_size, canvas_size);
  frameRate(300);
}

function draw() {
    background(random(255));
}

现在我希望我的 index.html 在网格中显示 9 个脚本中的每一个（列数和行数固定或响应更好）。我正在玩最常见的 CSS 网格示例，实际上没有运气。

这是我的 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <div class="grid-container">
      <div class="grid-item"><script src="sketch1.js"></script></div>
      <div class="grid-item"><script src="sketch2.js"></script></div>
      <div class="grid-item"><script src="sketch3.js"></script></div>
      <div class="grid-item"><script src="sketch4.js"></script></div>
      <div class="grid-item"><script src="sketch5.js"></script></div>
      <div class="grid-item"><script src="sketch6.js"></script></div>
      <div class="grid-item"><script src="sketch7.js"></script></div>
      <div class="grid-item"><script src="sketch8.js"></script></div>
      <div class="grid-item"><script src="sketch9.js"></script></div>
    </div>
  </body>
</html>

和style.css：

html, body {
  margin: 0;
  padding: 0;
}

谢谢！

Answer 1

您的每个草图都需要在 instance mode 中实现。此方法避免在全局范围内声明您的 setup、draw 和其他 p5.js 生命周期函数，这会导致您的不同草图之间发生冲突。

示例：

// all p5.js functions should be called via the p object
let sketch = function(p) {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

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

let myp5 = new p5(sketch);

要使每个草图都出现在特定的网格位置，您可以让每个草图指定一个容器 div id。或者你可以使用 document.currentSketch.parentElement:

.grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid-item {
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Sketch</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>

<body>
  <div class="grid-container">
    <div id="sketchContainer1" class="grid-item">
      <script>
        function sketch1(p) {
          p.setup = () => {
            p.createCanvas(200, 200);
            p.background('cyan');
          };
        }

        new p5(sketch1, "sketchContainer1");
      </script>
    </div>
    <div id="sketchContainer2" class="grid-item">
      <script>
        function sketch2(p) {
          p.setup = () => {
            p.createCanvas(200, 200);
            p.background('magenta');
          };
        }

        new p5(sketch2, "sketchContainer2");
      </script>
    </div>
    <div class="grid-item">
      <script>
        function sketch3(p) {
          p.setup = () => {
            p.createCanvas(200, 200);
            p.background('yellow');
          };
        }

        new p5(sketch3, document.currentScript.parentElement);
      </script>
    </div>
    <div class="grid-item">
      <script>
        function sketch4(p) {
          p.setup = () => {
            p.createCanvas(200, 200);
            p.background('black');
          };
        }

        new p5(sketch4, document.currentScript.parentElement);
      </script>
    </div>
  </div>
</body>

</html>

如何在 HTML/CSS 网格中显示多个 p5.js 脚本

How to display multiple p5.js scripts in a HTML/CSS grid

html

javascript

css

p5.js