Created basic WebGL feedback example #1246
Conversation
|
|
||
| function draw() { | ||
| // draw the previous frame | ||
| pg.texture(swap); |
There was a problem hiding this comment.
I notice that a number of people who use WebGL p5.Graphics objects run into issues at first when they don't call reset(), possibly because there aren't many examples that use it. For this example it doesn't matter if you reset or not, but if e.g. you used sphere instead of ellipse then you would see the sphere peeking out through the plane. How would you feel about using reset and sphere just so that people are aware of that method? It might be trying to do too much in one example, let me know what you think!
There was a problem hiding this comment.
That sounds great, I have pushed a new commit using sphere() and reset(). How would you explain reset() to the user? I have added 'p5.Graphics sometimes requires us to use reset() before drawing', but that doesn't feel like it does enough to explain why.
There was a problem hiding this comment.
I guess the main thing that reset does is that it clears the depth buffer, so you can draw new things without the old things going in front. Kind of like ensuring everything from before just becomes background colours instead of 3D content. It also does some other stuff like resets lights though so best practice is probably to do it first thing. Maybe we can move it to the top with a comment like: "Keep the colors from before but reset all 3D information so new shapes always go on top of the existing colors"? Or a more succinct version of that if you can think of something!
There was a problem hiding this comment.
I think it's also worthwhile to comment why reset() isn't used for the swap object.
Generally, maybe it would be worthwhile to think of the simplest possible example using createGraphics that would motivate calling reset(). We do have an example here, but it's not linked from the main reference page: https://p5js.org/reference/#/p5.Graphics/reset (you first have to open the p5.Graphics reference). A good first step could be to add this simple example to createGraphics directly?
Another way I've seen this show up in teaching with a WebGL buffer is that students still expect the matrix transform to be reset with draw(). Could be a more succinct way to explain the concept on its own.
There was a problem hiding this comment.
Hi Austin, this looks good. I suggest updating some of the descriptions, either to provide more context (for the text that appears directly on the page) or a stronger visual description (for the describe/alt text). Shared some thoughts on possible other examples in response to Dave's comments inline.
| @@ -0,0 +1,53 @@ | |||
| /* | |||
| * @name Simple Feedback | |||
| * @arialabel An example of a simple feedback effect using two buffers. | |||
There was a problem hiding this comment.
Here, I think it would be good to expand on this description to motivate why two buffers are required and why WebGL specifically is needed to make this work.
|
|
||
| function draw() { | ||
| // draw the previous frame | ||
| pg.texture(swap); |
There was a problem hiding this comment.
I think it's also worthwhile to comment why reset() isn't used for the swap object.
Generally, maybe it would be worthwhile to think of the simplest possible example using createGraphics that would motivate calling reset(). We do have an example here, but it's not linked from the main reference page: https://p5js.org/reference/#/p5.Graphics/reset (you first have to open the p5.Graphics reference). A good first step could be to add this simple example to createGraphics directly?
Another way I've seen this show up in teaching with a WebGL buffer is that students still expect the matrix transform to be reset with draw(). Could be a more succinct way to explain the concept on its own.
| swap = createGraphics(710, 400, WEBGL); | ||
|
|
||
| describe( | ||
| 'a WebGL example that achieves a simple feedback effect, displaying a slowly moving, radiating white sphere.' |
There was a problem hiding this comment.
I think we can leave out the part that says "a web gl example" and go for something more directly focused on the visuals, like "a slowly oscillating, radiating white sphere that fades into a dark gray background through a feedback visual effect"
|
Hi @aceslowman and @kjhollen, is this PR ready to merge? Thanks. |
|
Thank you for working on it. I added this PR to the p5.js Documentation Update and Organization tracking board, so we can improve this example later. |
Addresses #1228
Changes:
Added a simple feedback effect, adapted in part from an example by @aferriss
cc @kjhollen
I'm not sure if this is appropriate to go in the 3D examples section, but at the moment, non-3d WebGL examples don't seem to have a home. Happy to move it if need be!
Screenshots of the change:
