如何在一个html/css网格中显示多个p5.js脚本

2022-08-24 00:00:00 p5.js javascript html css

我有多个p5.js脚本，它们都生成100x100的画布。假设我有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;
}

谢谢！

解决方案

您的每个草图都需要在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：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

.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>

相关文章