flexbox 中的 p5.js 脚本

Question

我正在尝试创建一个包含一些 p5.js 项目示例的 flexbox。我只是想知道如何调用 flexbox 部门中的函数。下面是我创建下拉列表的代码示例。在这个 id 中，喜欢展示一些 p5 示例。我该怎么做？

    <button type="button" class="collapsible">Projects</button>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi vitae suscipit tellus mauris a. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nam at lectus
        urna duis convallis convallis tellus id interdum. Lobortis feugiat vivamus at augue eget arcu dictum. Egestas integer eget aliquet nibh praesent tristique magna. Volutpat lacus laoreet non curabitur gravida arcu ac. Massa tincidunt nunc
        pulvinar sapien et ligula ullamcorper malesuada. Sit amet cursus sit amet dictum sit amet justo donec. Magna eget est lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis.</p>
    <hr class="rounded">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi vitae suscipit tellus mauris a. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nam at lectus
        urna duis convallis convallis tellus id interdum. Lobortis feugiat vivamus at augue eget arcu dictum. Egestas integer eget aliquet nibh praesent tristique magna. Volutpat lacus laoreet non curabitur gravida arcu ac. Massa tincidunt nunc
        pulvinar sapien et ligula ullamcorper malesuada. Sit amet cursus sit amet dictum sit amet justo donec. Magna eget est lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis.</p>
    <hr class="rounded">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi vitae suscipit tellus mauris a. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nam at lectus
        urna duis convallis convallis tellus id interdum. Lobortis feugiat vivamus at augue eget arcu dictum. Egestas integer eget aliquet nibh praesent tristique magna. Volutpat lacus laoreet non curabitur gravida arcu ac. Massa tincidunt nunc
        pulvinar sapien et ligula ullamcorper malesuada. Sit amet cursus sit amet dictum sit amet justo donec. Magna eget est lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis.</p>
    <hr class="rounded">

        <div class="flex-container">
            <div>
                <script >
                  // p5.js script here
                </script>
            </div>

            <div>
              <script >
                 // p5.js script here
              </script>
          </div>

          <div>
            <script >
               **// p5.js script here**
            </script>
        </div>
        </div>

</div>

我希望它看起来与上面的示例类似，但使用脚本来创建对象

Answer 1

我将创建三个空的 <div>，其中将包含您将在其中渲染 p5.js 草图的 <canvas>。

当您创建 p5.js 实例时，您可以指定其容器，为构造函数提供第二个参数。查看https://p5js.org/examples/instance-mode-instance-container.html中的最后两个示例

无论如何，您应该能够重复使用下面的代码并根据您的情况进行调整：

// create three divs, pass in each one a pointer and attach them to a different .flex-item element

// p5 sketch 1
const sketch1 = function(p) {
  p.setup = function() {
    p.createCanvas(100, 100);
    p.background(0);
  }
};
const node1 = document.createElement('div');
new p5(sketch1, node1);
window.document.getElementById('p5-1').appendChild(node1);

// p5 sketch 2
const sketch2 = function(p) {
  p.setup = function() {
    p.createCanvas(100, 100);
    p.background(200);
  }
};
const node2 = document.createElement('div');
new p5(sketch2, node2);
window.document.getElementById('p5-2').appendChild(node2);

// p5 sketch 3
const sketch3 = function(p) {
  p.setup = function() {
    p.createCanvas(100, 100);
    p.background(128);
  }
};
const node3 = document.createElement('div');
new p5(sketch3, node3);
window.document.getElementById('p5-3').appendChild(node3);

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.flex-item {
  margin-left: 50px;
}

.flex-item:first-child {
  margin-left: 0;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<button type="button" class="collapsible">Projects</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi vitae suscipit tellus mauris a. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nam at lectus urna duis
    convallis convallis tellus id interdum. Lobortis feugiat vivamus at augue eget arcu dictum. Egestas integer eget aliquet nibh praesent tristique magna. Volutpat lacus laoreet non curabitur gravida arcu ac. Massa tincidunt nunc pulvinar sapien et ligula
    ullamcorper malesuada. Sit amet cursus sit amet dictum sit amet justo donec. Magna eget est lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis.</p>
  <hr class="rounded">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi vitae suscipit tellus mauris a. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nam at lectus urna duis
    convallis convallis tellus id interdum. Lobortis feugiat vivamus at augue eget arcu dictum. Egestas integer eget aliquet nibh praesent tristique magna. Volutpat lacus laoreet non curabitur gravida arcu ac. Massa tincidunt nunc pulvinar sapien et ligula
    ullamcorper malesuada. Sit amet cursus sit amet dictum sit amet justo donec. Magna eget est lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis.</p>
  <hr class="rounded">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi vitae suscipit tellus mauris a. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nam at lectus urna duis
    convallis convallis tellus id interdum. Lobortis feugiat vivamus at augue eget arcu dictum. Egestas integer eget aliquet nibh praesent tristique magna. Volutpat lacus laoreet non curabitur gravida arcu ac. Massa tincidunt nunc pulvinar sapien et ligula
    ullamcorper malesuada. Sit amet cursus sit amet dictum sit amet justo donec. Magna eget est lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis.</p>
  <hr class="rounded">
  <div class="flex-container">
    <div id="p5-1" class="flex-item"></div>
    <div id="p5-2" class="flex-item"></div>
    <div id="p5-3" class="flex-item"></div>
  </div>
</div>

请记住，它使用的是 const 而不是 var（ES6 功能），因此如果您担心跨浏览器兼容性，我建议您通过像 Babel 这样的编译器运行它。