Add an example for p5.Framebuffer

[davepagurek]

Increasing Access

Once support for framebuffers is merged in processing/p5.js#6072, it would be great to show a more artistic example of what it might be used for. Currently, the documentation is rather technical (which makes sense, it's currently primarily a reference), but having at least one creative example will help non-experts see what kinds of effects can be achieved with it and hopefully inspire people to make their own interesting art.

Most appropriate sub-area of p5.js?

Home

Feature request details

Some potential inspiration:

• Some (fairly technical) shaders:
  • Using a framebuffer's depth to make fog/snow
  • Using a framebuffer's depth to add focal blur
  • Using blur, plus an additional framebuffer layer to apply a tint + dithering
  • Using a framebuffer's depth to add ambient occlusion shadows
  • Using multiple framebuffers to efficiently apply multiple boolean operations on images (like blend modes, but faster)
  • Using a texture as data in a GPU particle system
• Some maybe easier to parse examples:
  • A slit scan / rolling shutter effect using 120 framebuffers to efficiently store past frames
  • Reading pixels from one framebuffer in a shader to make a dappled light effect

[al6862]

Hi, I'm interested in helping out make an example! I'll get familiar with framebuffer first and send a draft in the following weeks if that sounds good.

[davepagurek]

Thanks @al6862! I'll assign this to you, let me know if you have any questions!

[al6862]

Hi Dave, I'm working with two other students on creating an example. We're all pretty new to the concept of frame buffers, and we're stuck on what unique features we should emphasize in our example. Here's what we have so far!

Could you help us move in a solid direction?

[davepagurek]

Sure thing! So I'd say the unique things you get with a framebuffer are:

• the ability to draw to one and use it as a texture (just like p5.Graphics), but faster, so you can use way more of them
• the ability to read depth information

I see in your code right now you're using the blur renderer from my framebuffer library! That's something that takes advantage of the depth information to do the blur, so a blur example is good. (I'll update the library soon to make use of the new p5 framebuffer class instead of my own, I can let you know when that's ready!)

Some other ideas:

• If you draw a scene to a framebuffer and then use it as a texture it kind of looks like a portal. maybe you could render another scene to a framebuffer, then use that as a texture on some circles that you put inside each ring to lean into the portal aesthetic?
• If you're up for trying to write a shader, you could use the depth information to make a fog effect. Basically for each pixel, tint it more like the fog colour the farther away it is. Like a blur, this could look good on any scene that has objects at varying depths.

Thanks again for your work on this! Let me know if I can answer any other questions, and feel free to reach out on the p5 discord too if you want.

[davepagurek]

Hi again! We're going to start getting the ball rolling on a new p5 release soon. We can add examples after the release comes out so there's no rush, but it might be nice to have maybe one example around for when it comes out, so I could make one simple example now if you want so that we aren't rushing you and your collaborators? And then we can add more interesting examples later in addition to that.

[al6862]

Hi Dave! Apologies for the slow progress--we've all been a little busy since school ended. Yes, totally feel free to make your own example!

[davepagurek]

No worries! Feel free to pick this back up whenever you get the time 🙂