我可以使用 p5js 在同一页面上创建多个画布元素吗

Question

我尝试使用 p5js 绘制一些点，它确实工作得很好，但我还想要另一个可以显示来自相机的实时视频的画布元素。当我添加另一个画布元素时，第一个画布变为空白。现在我尝试使用多个 javascript 文件来处理不同的画布。

camera.js

var capture;

function setup() {
  var video=createCanvas(390, 240);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
  capture.hide();
  //set parent to div with id left
  video.parent("left");
}

function draw() {
  background(255);
  image(capture, 0, 0, 320, 240);
  filter('INVERT');
}

drawshapes.js

function setup() {
  // Create the canvas
  var plot=createCanvas(720, 400);
  background(200);
  //set parent to div with id right
  plot.parent("right");
  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
}

index.html

<div class="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

Answer 1

您可能想使用instance mode。前几个示例使用全局模式，接下来的几个示例使用实例模式。在实例模式下，您可以控制 p5js 放置画布元素的位置，而不是使用默认画布。如果你有两个容器，你会使用：

new p5(leftSketch, 'left'); new p5(rightSketch, 'right');

leftSketch 和 rightSketch 将是带有变量 p 的函数。该变量是 p5js 的一个实例，您可以单独控制每个画布元素。

Answer 2

这个在官方p5js reference上有简单的提及。

在草图中多次调用 createCanvas 将导致非常 不可预测的行为。如果您想要多个绘图画布 可以使用createGraphics（默认隐藏但可以显示）。

解决方案

诚然，这不是一个很棒的解决方案，但它确实有效。

1. 为两个“画布”创建 1 个画布。
2. 创建 2 个屏幕外缓冲区，供您绘制。
3. 在您的 draw() 函数中，在每个缓冲区上绘制您想要的任何内容。
4. 然后使用image()将两个缓冲区的内容复制到主画布上。

示例

var leftBuffer;
var rightBuffer;

function setup() {
    // 800 x 400 (double width to make room for each "sub-canvas")
    createCanvas(800, 400);
    // Create both of your off-screen graphics buffers
    leftBuffer = createGraphics(400, 400);
    rightBuffer = createGraphics(400, 400);
}

function draw() {
    // Draw on your buffers however you like
    drawLeftBuffer();
    drawRightBuffer();
    // Paint the off-screen buffers onto the main canvas
    image(leftBuffer, 0, 0);
    image(rightBuffer, 400, 0);
}

function drawLeftBuffer() {
    leftBuffer.background(0, 0, 0);
    leftBuffer.fill(255, 255, 255);
    leftBuffer.textSize(32);
    leftBuffer.text("This is the left buffer!", 50, 50);
}

function drawRightBuffer() {
    rightBuffer.background(255, 100, 255);
    rightBuffer.fill(0, 0, 0);
    rightBuffer.textSize(32);
    rightBuffer.text("This is the right buffer!", 50, 50);
}

结果：