Question

通过 p5js 中的对象函数绘制到屏幕外缓冲区

2021-12-08

764

javascript javascript-objects p5.js

我正在尝试编写一个具有两个可视化输出的 p5js 代码：

一个用于查看器
一个隐藏在屏幕外的，仅在模拟结束时绘制并保存为文件。

只要我直接调用 p5js 函数（例如 circle() 或 rect()），屏幕外缓冲区的绘制就可以正常工作，但只要我使用对象，它就会告诉我我的对象未定义。

这是最基本的代码：

let canvas;
let offscreen;
let someobject;

function setup() {
  createCanvas(400, 400); // create main render view
  offscreen = createGraphics(400,400); // create offscreen buffer
  someobject = new SomeObject();
}

function draw() {
  
  // do & draw things onto main render view
  someobject.dothings();
  someobject.drawthings();
  
  if(true //end of simulation){
    offscreen.someobject.drawthings(); // draw to offscreen buffer
    offscreen.save(); // save file
    noLoop(); // stop simulation
  }
}

class SomeObject{
  constructor(){}
  
  doThings(){
    // does things  
  }
  
  drawthings(){
    circle(100,100,100);
  }
}

我理解我收到的错误：

TypeError: offscreen.someobject is undefined

有没有办法在画布和屏幕外缓冲区之间共享对象？或者有没有我遗漏的更明显的解决方案？谢谢

Answer 1

我发现我可以简单地使用 p5js 库的 image() 函数将图像绘制到画布缓冲区中，如下所示：

offscreen.image(canvas,0,0)
offscreen.save(); // save file

Answer 2

这没有意义：

offscreen.someobject.drawthings(); // draw to offscreen buffer

p5.Graphics 对象 offscreen 没有 someobject 属性，即使您使用 offscreen.someobject = someobject; 添加了该属性，也不会导致 someobject.drawthings() 中的绘图函数绘制到 p5.Graphics 而不是主画布。

为了使其正常工作，您需要让 SomeObject 在其渲染函数中接受 p5 实例：

let canvas;
let offscreen;
let someobject;

function setup() {
  createCanvas(400, 400); // create main render view
  offscreen = createGraphics(400,400); // create offscreen buffer
  someobject = new SomeObject();
}

function draw() {
  
  // do & draw things onto main render view
  someobject.dothings();
  // In global mode all of the p5js drawing methods that draw to the main
  // canvas are available globally, i.e. on the window object.
  someobject.drawthings(window);
  
  if(true /* end of simulation */){
    someobject.drawthings(offscreen);
    offscreen.save(); // save file
    noLoop(); // stop simulation
  }
}

class SomeObject{
  constructor(){}
  
  doThings(){
    // does things  
  }
  
  // This function takes an object with p5 drawing functions, such
  // a p5.Graphics object
  drawthings(p){
    p.circle(100,100,100);
  }
}