Meta tags:
description=A library for efficiently drawing to a texture in p5 WebGL mode. - GitHub - davepagurek/p5.Framebuffer: A library for efficiently drawing to a texture in p5 WebGL mode.;

Headings (most frequently used words):

framebuffer, launching, blur, p5, in, footer, license, github, desktop, davepagurek, name, already, use, latest, commit, git, stats, files, readme, md, get, the, library, usage, external, examples, about, releases, packages, languages, via, cdn, self, hosted, base, as, faster, canvas, objects, webgl, floating, point, textures, depth, of, field, contact, shadows, resources, stars, watchers, forks, navigation, sign, required, xcode, visual, studio, code, gaussian, one, pass,

Text of the page (most frequently used words):
the (126), #framebuffer (51), blur (31), this (28), you (27), prototype (25), and (25), draw (25), github (23), will (23), that (21), webgl (19), blurrenderer (19), with (18), use (18), number (17), point (17), more (15), defaults (15), push (15), code (15), pop (14), library (13), for (13), texture (13), focal (13), shadows (13), from (13), your (12), depth (12), davepagurek (12), dof (12), options (12), canvas (12), contactshadowrenderer (11), clear (11), https (10), all (10), control (10), function (10), 400 (10), renderer (9), examples (9), when (9), objects (9), callback (9), floating (9), uses (8), shader (8), how (8), samples (8), but (8), translate (8), range (8), color (8), can (7), mode (7), are (7), intensity (7), 255 (7), fill (7), focushere (7), focus (7), gaussianblurrenderer (7), size (7), create (6), example (6), methods (6), sphere (6), nostroke (6), setup (6), let (6), using (6), unsigned_byte (6), default (6), height (6), width (6), fbonext (6), framecount (6), not (6), branch (6), contact (5), license (5), drawing (5), shadow (5), pixel (5), density (5), many (5), createcanvas (5), other (5), also (5), true (5), colorformat (5), float (5), createframebuffer (5), fboprev (5), frame (5), try (5), fbo (5), min (5), download (5), commit (5), nothing (5), desktop (5), sign (5), tags (5), repository (5), jump (5), out (4), about (4), security (4), 100 (4), packages (4), latest (4), fork (4), readme (4), efficiently (4), previous (4), live (4), defined (4), random (4), computationally (4), intensive (4), numsamples (4), setintensity (4), background (4), add (4), helper (4), one (4), target (4), then (4), lower (4), outside (4), field (4), have (4), should (4), any (4), faster (4), colors (4), alpha (4), specify (4), whether (4), _renderer (4), textures (4), want (4), antialiasing (4), sketch (4), returns (4), script (4), source (4), cdn (4), load (4), work (4), again (4), open (4), launching (4), branches (4), another (3), tab (3), blog (3), 2023 (3), releases (3), stars (3), buffer (3), effect (3), gaussian (3), transformations (3), applied (3), space (3), sets (3), smoother (3), scene (3), void (3), lights (3), its (3), there (3), object (3), get (3), look (3), setsamples (3), value (3), has (3), start (3), distance (3), away (3), setdof (3), farther (3), tell (3), calls (3), pass (3), note (3), firefox (3), setattributes (3), plane (3), box (3), doesn (3), off (3), current (3), only (3), write (3), may (3), show (3), instead (3), pixeldensity (3), automatically (3), match (3), like (3), view (3), name (3), git (3), happens (3), codespaces (3), web (3), actions (3), issues (3), signed (2), window (2), refresh (2), session (2), reload (2), time (2), pricing (2), footer (2), navigation (2), javascript (2), mit (2), resources (2), two (2), framebuffers (2), text (2), store (2), external (2), close (2), need (2), radius (2), blurring (2), inside (2), result (2), provides (2), bundles (2), applies (2), see (2), was (2), adds (2), areas (2), where (2), each (2), set (2), located (2), centre (2), assume (2), becomes (2), smaller (2), amount (2), accumulate (2), which (2), between (2), blurred (2), origin (2), what (2), move (2), based (2), red (2), 300 (2), blue (2), likely (2), render (2), position (2), provided (2), things (2), they (2), must (2), call (2), storage (2), rotatey (2), rotatex (2), sin (2), depth_test (2), leave (2), trail (2), don (2), disable (2), image (2), next (2), center (2), changing (2), just (2), make (2), creating (2), sometimes (2), small (2), change (2), resulting (2), resolution (2), multisampled (2), new (2), camera (2), turns (2), autosizing (2), autosized (2), boolean (2), resizecanvas (2), resize (2), same (2), context (2), rest (2), sure (2), into (2), does (2), main (2), base (2), usage (2), src (2), type (2), self (2), hosted (2), jsdelivr (2), net (2), npm (2), via (2), loading (2), core (2), shaders (2), graphics (2), information (2), message (2), codespace (2), please (2), xcode (2), cli (2), tag (2), already (2), refname (2), could (2), belong (2), insights (2), projects (2), pull (2), requests (2), notifications (2), star (2), manage (2), 2022 (2), feb (2), perform, action, training, api, docs, status, privacy, terms, inc, languages, published, jan, forks, watching, watchers, coming, soon, fog, modern, vampires, city, train, knots, disassemble, feedback, wizard, pondering, orb, 120, frames, video, slit, scanning, rolling, shutter, meaning, checking, distances, world, together, them, cast, setsearchradius, far, extends, pixels, ignoring, setblurradius, setblursamples, accurate, setshadowsamples, dark, full, darkness, added, createcontactshadowrenderer, ambient, occlusion, approximates, would, uniform, light, hitting, sides, practice, createblurrenderer, implementation, single, produce, grainier, might, some, systems, gaussianblur, creategaussianblurrenderer, best, looking, although, passes, slow, anything, drawn, transformed, standard, leaving, 014, normalmaterial, enable, rect, fade, white, slowly, permanent, 003, scale, cut, sube, testing, swap, prev, rectmode, imagemode, rgba, breaks, rgb, bug, fixed, values, optional, modifies, notice, weird, artifacts, due, fact, internally, stored, integers, overlay, very, too, round, integer, compare, quality, formats, works, rendering, forcewebgl1, top, sizes, matches, dimensions, createcamera, associated, defaultcamera, targetdensity, shouldautosize, resizes, specified, simple, accordingly, probably, redraw, had, cached, wrap, ensure, settings, leak, non, notes, webgl1, pseudo, webgl2, available, turn, passing, antialias, unspecified, optionally, separate, graphic, undefined, something, dbo, 150, html, minified, unminified, openprocessing, paste, link, slot, own, without, renderers, before, after, above, screenshot, read, motivation, post, subject, fine, access, letting, comes, shares, copy, extra, data, gpu, kind, lets, treat, hand, helpers, adding, yarn, lock, package, json, prettierrc, gitignore, failed, permalink, files, commits, stats, problem, preparing, once, ready, visual, studio, required, zip, fast, our, official, learn, checkout, svn, url, clone, local, cancel, exists, commands, accept, both, names, cause, unexpected, behavior, switch, public, user, suggested, results, collections, trending, topics, repositories, community, articles, project, fund, developers, sponsors, customer, stories, case, studies, devsecops, devops, automation, solution, education, startups, teams, enterprise, solutions, skills, documentation, features, explore, collaborate, discussions, plan, track, changes, review, better, copilot, instant, dev, environments, find, fix, vulnerabilities, host, automate, workflow, product, toggle, skip, content, wayback, machine, http, archive, org, 20230306090823, com, timestamps, capture, fail, success, 2024, apr, mar, jun, 2026, captures,

Text of the page (random words):
p5 framebuffer a library for efficiently drawing to a texture in p5 webgl mode 7 captures 04 jun 2022 14 feb 2026 feb mar apr 06 2022 2023 2024 success fail about this capture timestamps the wayback machine http web archive org web 20230306090823 https github com davepagurek p5 framebuffer skip to content toggle navigation sign up product actions automate any workflow packages host and manage packages security find and fix vulnerabilities codespaces instant dev environments copilot write better code with ai code review manage code changes issues plan and track work discussions collaborate outside of code explore all features documentation github skills blog solutions for enterprise teams startups education by solution ci cd automation devops devsecops case studies customer stories resources open source github sponsors fund open source developers the readme project github community articles repositories topics trending collections pricing in this repository all github jump to no suggested jump to results in this repository all github jump to in this user all github jump to in this repository all github jump to sign in sign up message davepagurek p5 framebuffer public notifications fork 1 star 37 a library for efficiently drawing to a texture in p5 webgl mode license mit license 37 stars 1 fork star notifications code issues 6 pull requests 0 actions projects 0 security insights more code issues pull requests actions projects security insights davepagurek p5 framebuffer this commit does not belong to any branch on this repository and may belong to a fork outside of the repository main switch branches tags branches tags could not load branches nothing to show refname default view all branches could not load tags nothing to show refname default view all tags name already in use a tag already exists with the provided branch name many git commands accept both tag and branch names so creating this branch may cause unexpected behavior are you sure you want to create this branch cancel create 1 branch 8 tags code local codespaces clone https github cli use git or checkout with svn using the web url work fast with our official cli learn more open with github desktop download zip sign in required please sign in to use codespaces launching github desktop if nothing happens download github desktop and try again launching github desktop if nothing happens download github desktop and try again launching xcode if nothing happens download xcode and try again launching visual studio code your codespace will open once ready there was a problem preparing your codespace please try again latest commit git stats 47 commits files permalink failed to load latest commit information type name latest commit message commit time examples gitignore prettierrc blurrenderer js contactshadowrenderer js gaussianblurrenderer js license readme md renderer js p5 framebuffer js package json yarn lock view code p5 framebuffer get the library via cdn self hosted usage base framebuffer as a faster canvas framebuffer objects webgl 1 floating point textures depth of field blur gaussian blur one pass blur contact shadows external examples readme md p5 framebuffer a library for efficiently drawing to a texture in p5 webgl mode with helpers for adding blur and shadows 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 is faster it shares the same webgl context as the rest of the sketch so it doesn t need to copy extra data to the gpu each frame has more information you can access the webgl depth buffer as a texture letting you do things like write focal blur shaders this library comes with a blur helper and a contact shadow helper is webgl only this will not work in 2d mode p5 graphics should be fine for that read more about the motivation for this and how focal blur shaders work in this blog post on the subject above a screenshot from a sketch using p5 framebuffer to blur out of focus areas get the library add the library to your source code after loading p5 but before loading your own code if you only want the core framebuffer library without blur and shadow renderers load p5 framebuffer core min js instead of just min js via cdn script src https cdn jsdelivr net npm davepagurek p5 framebuffer 0 0 10 p5 framebuffer min js script on openprocessing paste this link into a new library slot https cdn jsdelivr net npm davepagurek p5 framebuffer 0 0 10 p5 framebuffer min js self hosted download the minified or unminified source code from the releases tab then add it to your html script type text javascript src p5 framebuffer min js script usage base framebuffer as a faster canvas 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 150 pop do something with fbo color or dbo depth texture fbo depth nostroke plane width height methods p5 prototype createframebuffer options options options colorformat float unsigned_byte specify whether to use floating point storage for the color texture defaults to unsigned_byte note if you use floating point colors in firefox you must also call setattributes alpha true options size width number height number pixeldensity number undefined optionally specify a size and pixel density separate from the main canvas or graphic if unspecified the framebuffer will resize when its canvas does options antialias boolean turn on antialiasing by passing true webgl2 the default if available will use multisampled antialiasing webgl1 will render at 2x the pixel density of the canvas for pseudo antialiasing notes draw uses the same p5 context as the rest of your sketch make sure to wrap your callback code in a push and pop to ensure your settings don t leak out into your non framebuffer code when you resizecanvas the framebuffer will automatically resize accordingly you probably will want to clear it and redraw to it if you had a texture cached a live example https davepagurek github io p5 framebuffer examples simple framebuffer objects methods framebuffer prototype resizecanvas width number height number resizes the framebuffer to the specified size this turns off autosizing to match the canvas size framebuffer prototype autosized returns whether or not the framebuffer will automatically match the canvas s size framebuffer prototype autosized shouldautosize boolean sets whether or not the framebuffer should automatically match the canvas s size framebuffer prototype pixeldensity returns the current pixel density of the framebuffer framebuffer prototype pixeldensity targetdensity number sets the pixel density of the framebuffer this also turns off autosizing framebuffer prototype defaultcamera returns the camera associated with the framebuffer by default framebuffer prototype createcamera returns a new p5 camera that matches the current dimensions of the framebuffer an example of changing the size https davepagurek github io p5 framebuffer examples sizes webgl 1 by default this library will use webgl 2 instead of webgl 1 to use webgl 1 mode add this to the top of your sketch framebuffer forcewebgl1 true note antialiasing in webgl 1 mode works by rendering at 2x resolution instead of using a multisampled texture at 1x resolution compare the resulting quality using webgl 1 vs 2 in this example https davepagurek github io p5 framebuffer examples formats floating point textures sometimes you want to write code that adds on to or modifies the previous frame you may notice weird artifacts that show up due to the fact that colors are internally stored as integers sometimes if you overlay a color with a very small alpha the change in color is too small to round the resulting color up to the next integer value so it doesn t change at all this can be fixed if you store colors as floating point values you can specify this in an optional options object when creating a framebuffer object let fboprev fbonext let canvas function setup canvas createcanvas 400 400 webgl there s a bug in firefox where you can only make floating point textures if they re rgba and it breaks if it s just rgb setattributes alpha true try changing float to unsigned_byte to see it leave a trail options colorformat float fboprev createframebuffer options fbonext createframebuffer options imagemode center rectmode center nostroke function draw swap prev and next so that we can use the previous frame as a texture when drawing the current frame fboprev fbonext fbonext fboprev draw to the framebuffer fbonext draw clear background 255 disable depth testing so that the image of the previous frame doesn t cut off the sube _renderer gl disable _renderer gl depth_test push scale 1 003 texture fboprev color plane width height pop push fade to white slowly this will leave a permanent trail if you don t use floating point textures fill 255 1 rect 0 0 width height pop _renderer gl enable _renderer gl depth_test push normalmaterial translate 100 sin framecount 0 014 100 sin framecount 0 02 0 rotatex framecount 0 01 rotatey framecount 0 01 box 50 pop clear push texture fbonext color plane width height pop with colorformat float with colorformat unsigned_byte the default methods p5 prototype createframebuffer options options options colorformat float unsigned_byte specify whether to use floating point storage for the color texture defaults to unsigned_byte note if you use floating point colors in firefox you must also call setattributes alpha true depth of field blur the library provides a helper that bundles a framebuffer with a shader that applies focal blur leaving objects at a provided distance in focus and blurring things more the farther away from that point they are create a blur renderer and draw inside its draw callback when you tell it to focushere anything drawn at that transformed position will be in focus you can use standard p5 translate calls to position the focal point gaussian blur this is likely the best looking blur renderer although it uses two render passes start by using this one but look out the other blurrenderer if it s slow let blurrenderer function setup createcanvas 400 400 webgl blurrenderer creategaussianblurrenderer blurrenderer setintensity 0 15 blurrenderer setsamples 20 blurrenderer setdof 50 function draw blurrenderer draw clear push background 255 nostroke lights push fill blue translate 80 80 300 blurrenderer focushere sphere 50 pop push fill red sphere 50 pop pop methods on gaussianblurrenderer gaussianblurrenderer prototype draw callback void draw the scene defined in the callback with blur gaussianblurrenderer prototype focushere tell the renderer what point in space should be in focus it will move based on any calls to translate or other transformations that you have applied defaults to the origin gaussianblurrenderer prototype setintensity intensity number control the intensity of the blur between 0 and 1 the lower the intensity the farther objects have to be from the focal point to be blurred defaults to 0 1 gaussianblurrenderer prototype setdof dof number control the depth of field dof which is the distance away from the focal point that is also in focus from 0 up the lower the dof the smaller range will be that has no blur blur amount will start to accumulate when objects are outside of the dof range the focal target set by focushere is located in the centre of the clear range so assume the focal target s depth value is z then the clear range becomes from z dof 2 to z dof 2 defaults to 0 gaussianblurrenderer prototype setsamples numsamples number control how many random samples to use in the blur shader more samples will look smoother but is more computationally intensive defaults to 20 a live example https davepagurek github io p5 framebuffer examples gaussianblur one pass blur another implementation of blur but using a single shader pass this will likely produce a grainier result but might be faster on some systems let blurrenderer function setup createcanvas 400 400 webgl blurrenderer createblurrenderer function draw blurrenderer draw clear push background 255 nostroke lights push fill blue translate 80 80 300 blurrenderer focushere sphere 50 pop push fill red sphere 50 pop pop methods on blurrenderer blurrenderer prototype draw callback void draw the scene defined in the callback with blur blurrenderer prototype focushere tell the renderer what point in space should be in focus it will move based on any calls to translate or other transformations that you have applied defaults to the origin blurrenderer prototype setintensity intensity number control the intensity of the blur between 0 and 1 the lower the intensity the farther objects have to be from the focal point to be blurred defaults to 0 05 blurrenderer prototype setdof dof number control the depth of field dof which is the distance away from the focal point that is also in focus from 0 up the lower the dof the smaller range will be that has no blur blur amount will start to accumulate when objects are outside of the dof range the focal target set by focushere is located in the centre of the clear range so assume the focal target s depth value is z then the clear range becomes from z dof 2 to z dof 2 defaults to 0 blurrenderer prototype setsamples numsamples number control how many random samples to use in the blur shader more samples will look smoother but is more computationally intensive defaults to 15 a live example https davepagurek github io p5 framebuffer examples blur contact shadows the library provides a helper that bundles a framebuffer with a shader that applies ambient occlusion shadows this approximates the shadows one would see if there was uniform light hitting an object from all sides in practice it adds shadows in areas where objects get close to each other create a shadow renderer and draw inside its draw callback the renderer will add shadows to the result let contactshadowrenderer function setup createcanvas 400 400 webgl contactshadowrenderer createcontactshadowrenderer function draw contactshadowrenderer draw clear push background 255 fill 255 nostroke lights push translate 50 50 10 sphere 50 pop push translate 50 50 10 sphere 90 pop methods on contactshadowrenderer contactshadowrenderer prototype draw callback void draw the scene defined in the callback with shadows added contactshadowrenderer prototype setintensity intensity number control how dark shadows are 0 is no shadows and 1 is full darkness defaults to 0 5 contactshadowrenderer prototype setshadowsamples numsamples number control how many random samples to use in the shadow shader more samples will be more accurate but is more computationally intensive defaults to 15 contactshadowrenderer prototype setblursamples numsamples number control how many random samples to use in the blur shader more samples will be smoother but ...