flexbox中的p5.js脚本

如何解决flexbox中的p5.js脚本

我正在尝试创建一个包含一些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,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>

Id看起来类似于上面的示例，但是使用脚本创建对象

解决方法

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

创建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,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这样的编译器运行它浏览器兼容性。