p5.Framebuffer

August 13, 2021 View Package on NPM View Source on GitHub

A library for efficiently drawing to a texture in p5 WebGL mode.

A Framebuffer is kind of like a p5.Graphics: it lets you draw to a canvas, and then treat that canvas like an image. A Framebuffer, on the other hand:

Read more about the motivation for this and how focal blur shaders work in this blog post on the subject.

Get the library

Add the library to your source code, after loading p5 but before loading your own code:

Via CDN

<script src="https://cdn.jsdelivr.net/npm/@davepagurek/p5.framebuffer@0.0.1/p5.Framebuffer.min.js"></script>

Self-hosted

Download the minified or unminified source code from the releases tab on GitHub, then add it to your HTML:

<script type="text/javascript" src="p5.Framebuffer.min.js"></script>

Usage

Create a Framebuffer in setup and use it in draw:

let fbo

function setup() {
  createCanvas(400, 400, WEBGL)
  fbo = createFramebuffer()
}

function draw() {
  // Draw a box to the Framebuffer
  fbo.draw(() => {
    clear()
    push()
    noStroke()
    fill(255, 0, 0)
    rotateX(frameCount * 0.01)
    rotateY(frameCount * 0.01)
    box(50)
    pop()
  })

  // Do something with fbo.color or dbo.depth
  texture(fbo.depth)
  plane(width, height)
}

Notes:

Examples

More coming soon!