Skip to content

Commit bdff0a4

Browse files
authored
Update README.md
1 parent 0b1221d commit bdff0a4

File tree

1 file changed

+40
-10
lines changed

1 file changed

+40
-10
lines changed

README.md

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ Add the library to your source code, *after* loading p5 but *before* loading you
3434

3535
Create a Framebuffer in `setup` and use it in `draw`:
3636

37+
<table>
38+
<tr>
39+
<td>
40+
3741
```js
3842
let fbo
3943

@@ -51,26 +55,40 @@ function draw() {
5155
fill(255, 0, 0)
5256
rotateX(frameCount * 0.01)
5357
rotateY(frameCount * 0.01)
54-
box(50)
58+
box(150)
5559
pop()
5660
})
5761

5862
// Do something with fbo.color or dbo.depth
5963
texture(fbo.depth)
64+
noStroke()
6065
plane(width, height)
6166
}
6267
```
6368

69+
</td>
70+
<td>
71+
<img src="https://user-images.githubusercontent.com/5315059/178128913-a29bbfbf-a9c2-436d-9329-fbec2b5b2af9.png">
72+
</td>
73+
</tr>
74+
</table>
75+
6476
Notes:
6577
- `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.
6678
- 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.
6779

80+
A live example: https://davepagurek.github.io/p5.Framebuffer/examples/simple
81+
6882
### Depth of field blur
6983

7084
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.
7185

7286
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.
7387

88+
<table>
89+
<tr>
90+
<td>
91+
7492
```js
7593
let blurRenderer
7694

@@ -103,6 +121,13 @@ function draw() {
103121
}
104122
```
105123

124+
</td>
125+
<td>
126+
<img src="https://user-images.githubusercontent.com/5315059/178128839-164de943-960c-4e0a-ba6a-a7aa836ec798.png">
127+
</td>
128+
</tr>
129+
</table>
130+
106131
Methods on `BlurRenderer`:
107132
- `BlurRenderer.prototype.draw(callback: () => void)`
108133
- Draw the scene defined in the callback with blur
@@ -116,14 +141,18 @@ Methods on `BlurRenderer`:
116141
- Control how many random samples to use in the blur shader. More samples will look smoother but is more computationally intensive.
117142
- Defaults to 15
118143

119-
A live example: https://davepagurek.github.io/p5.Framebuffer/examples/shadows
144+
A live example: https://davepagurek.github.io/p5.Framebuffer/examples/blur
120145

121146
### Contact Shadows
122147

123148
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.
124149

125150
Create a shadow renderer and draw inside its `draw` callback. The renderer will add shadows to the result.
126151

152+
<table>
153+
<tr>
154+
<td>
155+
127156
```js
128157
let contactShadowRenderer
129158

@@ -154,6 +183,13 @@ function draw() {
154183
}
155184
```
156185

186+
</td>
187+
<td>
188+
<img src="https://user-images.githubusercontent.com/5315059/178128655-22816bcd-901d-49b5-95db-753815762805.png">
189+
</td>
190+
</tr>
191+
</table>
192+
157193
Methods on `ContactShadowRenderer`:
158194
- `ContactShadowRenderer.prototype.draw(callback: () => void)`
159195
- Draw the scene defined in the callback with shadows added
@@ -168,15 +204,9 @@ Methods on `ContactShadowRenderer`:
168204
- This is defined in *world space,* meaning all transformations are applied when checking distances
169205
- Defaults to 100
170206

207+
A live example: https://davepagurek.github.io/p5.Framebuffer/examples/shadows
208+
171209
## External examples
172-
In this repo:
173-
- `examples/simple`: Drawing both the depth and color buffers of a rotating cube
174-
- Live: https://davepagurek.github.io/p5.Framebuffer/examples/simple
175-
- On the p5 editor: https://editor.p5js.org/davepagurek/sketches/cmAwY6d5W
176-
- `examples/blur`: Using the depth map to blur out-of-focus parts of the sketch
177-
- Live: https://davepagurek.github.io/p5.Framebuffer/examples/blur
178-
- `examples/shadows`: Using the depth map to add ambient occlusion shadows
179-
- Live: https://davepagurek.github.io/p5.Framebuffer/examples/shadows
180210

181211
- <a href="https://openprocessing.org/sketch/1590159">Train Knots</a>
182212
- Uses the depth buffer in a focal blur shader

0 commit comments

Comments
 (0)