如何將單個 p5.js 草圖渲染到多個 div

Question

我正在嘗試在多個 div 中使用單個 p5 草圖。

目前使用下面的代碼。 我曾嘗試使用 class 選擇器，但它似乎只適用於父方法（例如，不適用於 getElementById。）作為另一種解決方法，我也無法讓這個 p5 草圖成為主體選擇器中的背景元素。 謝謝您的幫助！

let theShader;

function preload() {
  theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  pixelDensity(1);
  let myCanvas = createCanvas(windowWidth, windowHeight, WEBGL);
  myCanvas.parent('container1');
}

function draw() {
  shader(theShader);
  theShader.setUniform("u_resolution", [width, height]);
  theShader.setUniform("u_time", millis() / 1000.0);
  theShader.setUniform("u_mouse", [mouseX, map(mouseY, 0, height, height, 0)]);
  rect(0.0, 0.0, 1.0, 1.0);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Answer 1

不確定它是否像那樣工作。 但是您可以嘗試創建 canvas 元素而不是 div 元素。 歸根結底，一個 p5 草圖也是一個 canvas 元素。

然后你應該可以拿到新的 canvas：

let newCanvasCtx = newCanvas.getContext('2d');

然后調用drawImage並傳入p5 canvas：

newCanvasCtx.drawImage(p5Canvas, 0, 0);