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.
|
Hi, Great work so far. Thanks for your work @Forchapeatl and also thanks for the review @davepagurek I do have some thoughts on this. Let me know what you feel?
The sketch on the reference page looks a bit off. The canvas is 100x100, and we're trying to draw a box of the same size, also it seems slightly shifted or translated. I do have some thoughts on this. |
| * background(0); // Set the background to black | ||
| * noStroke(); | ||
| * fill(255, 0, 0); // Set the fill color to red | ||
| * box(100); // Draw a red box at the center |
There was a problem hiding this comment.
Can we make the size of the box to be 50 i.e. box(50) instead of 100
| * // Get the color of a pixel at the center of the box (in 2D coordinates) | ||
| * myBuffer.loadPixels(); // Load the pixel data for myBuffer | ||
| * let pixelColor = myBuffer.get(100, 100); // Get the color at (100, 100) | ||
| * console.log('Pixel color at (100, 100):', pixelColor); |
There was a problem hiding this comment.
If you run grunt yui:dev. For looking at the pixel color user needs to open dev tools.
Can we use text() for displaying the pixelColor on the canvas or maybe we could add a line to the description saying (this is what we get in console (in your words) maybe).
| * console.log('Pixel color at (100, 100):', pixelColor); | ||
| * | ||
| * // Display the off-screen buffer on the main canvas | ||
| * image(myBuffer, -width / 2, -height / 2); // Draw the buffer on the main canvas |
There was a problem hiding this comment.
we should use -width and -height instead of dividing them with 2.
Resolves #6750
Changes:
Screenshots of the change:
https://editor.p5js.org/forchapearl1/sketches/QilKPDTvv
PR Checklist
npm run lintpasses