p5.js flexbox 中的脚本

Question

我正在尝试创建一个 flexbox，其中包含 p5.js 项目的一些示例。我只是想知道如何调用 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>，其中将包含 <canvas>，您将在其中渲染 p5.js 草图。

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

中的最后两个示例

无论如何，您应该能够 re-use 下面的代码并根据您的情况进行调整：

// 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 这样的转译器来运行它，如果您担心 cross-browser 兼容性。

p5.js flexbox 中的脚本

p5.js scripts within a flexbox

html

javascript

css

flexbox

p5.js