我可以使用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

您可能希望使用实例模式.前几个示例使用全局模式,接下来的几个示例使用实例模式.在实例模式中,您可以控制p5js放置canvas元素的位置,而不是使用默认画布.如果您有两个容器,则可以使用:

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

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

Answer 2

官方p5js参考文献中简要提到了这一点.

在草图中多次调用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);
}

结果: