Estoy tratando de hacer un código p5js que tenga dos salidas visuales:
El dibujo del búfer fuera de pantalla funciona bien siempre que haga llamadas directas a funciones p5js como circle() o rect(), pero tan pronto como uso un objeto, me dice que mi objeto no está definido.
Aquí está el código mínimo:
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); } }Entiendo el error que me sale:
TypeError: offscreen.someobject no está definido
¿Hay alguna manera de compartir los objetos entre el lienzo y el búfer fuera de pantalla? ¿O hay una solución más obvia que me estoy perdiendo? Gracias
Descubrí que simplemente puedo usar la función image() de la biblioteca p5js para dibujar en el lienzo en el búfer de esta manera:
offscreen.image(canvas,0,0) offscreen.save(); // save fileEsto no tiene sentido:
offscreen.someobject.drawthings(); // draw to offscreen buffer El objeto p5.Graphics offscreen tiene una propiedad someobject e incluso si la hubiera agregado con offscreen.someobject = someobject; eso no haría que las funciones de dibujo en someobject.drawthings() dibujaran en p5.Graphics en lugar del lienzo principal.
Para que esto funcione, debe hacer que SomeObject acepte una instancia p5 en su función de representación:
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, ie 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); } }