我可以使用p5js

Question

我尝试使用p5js绘制一些它运行良好的点，但我还想要另一个可以显示来自摄像头的实时视频的画布元素。当我添加另一个canvas元素时，第一个画布变为空白。现在我尝试使用多个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放置canvas元素的位置，而不是使用默认画布。如果您有两个容器，则使用：

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

leftSketch和rightSketch将是采用变量p的函数。该变量是p5js的一个实例，您可以分别控制每个canvas元素。

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);
}

结果：