Added Example on p5.Framebuffer.get method #7166
Conversation
src/webgl/p5.Framebuffer.js
Outdated
| * createCanvas(400, 400, WEBGL); | ||
| * | ||
| * // Create an off-screen WebGL graphics buffer | ||
| * let myBuffer = createGraphics(200, 200, WEBGL); |
There was a problem hiding this comment.
Thanks for adding an example here! Right now this would be using the p5.Graphics get method instead of the p5.Framebuffer one. If we instead do this, I think this will be showing an example on the right class:
let myBuffer = createFramebuffer({ width: 200, height: 200 })
myBuffer.draw(() => {
background(0)
noStroke()
// etc
})
myBuffer.loadPixels();
// ...and then the rest from here looks good!There was a problem hiding this comment.
Thank you ! The code has been updated.
src/webgl/p5.Framebuffer.js
Outdated
| * noStroke(); | ||
| * fill(255, 0, 0); // Set the fill color to red | ||
| * push(); | ||
| * translate(0, 0, 0); |
There was a problem hiding this comment.
We maybe don't need the push/translate/pop since the translation is 0 here, but otherwise this is looking good!
src/webgl/p5.Framebuffer.js
Outdated
| * // The `pixelColor` is logged to the console, returning red with full opacity. | ||
| * | ||
| * function setup() { | ||
| * createCanvas(400, 400, WEBGL); |
There was a problem hiding this comment.
Oh sorry one last thing, 400x400 will be rather large for the reference, where examples are typically use 100x100 for pages like https://p5js.org/reference/p5/createFilterShader/. Could we maybe do the same here? There's also nothing wrong with a framebuffer larger than the main canvas, but it may be helpful for illustration purposes to also make myBuffer fit in that size too.
Resolves #6750
Changes:
Screenshots of the change:
https://editor.p5js.org/forchapearl1/sketches/QilKPDTvv
PR Checklist
npm run lintpasses