Skip to content

Commit

Permalink
change to examples and readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@bandaloo
bandaloo committed Nov 16, 2020
1 parent 3e90fa1 commit 93ec84b
Show file tree
Hide file tree
Showing 11 changed files with 103 additions and 4,289 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
post5.js
100 changes: 93 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
# post5

post5 is a library for p5 that enables you to do interesting post-processing
effects with the power of WebGL2. It wraps
effects with the power of WebGL2. You can build it or download it from the
"releases" section on the sidebar in GitHub. It wraps
[merge-pass](https://github.com/bandaloo/merge-pass) and
[postpre](https://github.com/bandaloo/postpre).

Check out the
[merge-pass live example](https://www.bandaloo.fun/merge-pass/example.html)
and the [postpre live example](https://www.bandaloo.fun/postpre/example.html)
to get an idea of how to nest and sequence these effects in interesting ways.
Also check out the included examples in this repo.
Also check out the included examples in this repo or the examples
[in the web editor](https://editor.p5js.org/bandaloo/collections/KKmpKHP-V).

To get started, all you need to do is include the `post5.js` script after
the `p5` script and before your sketch script:
Expand All @@ -18,14 +20,100 @@ the `p5` script and before your sketch script:
<!DOCTYPE html>
<html>
<head>
<script src="p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="post5.js"></script>
<script src="instancesketch.js"></script>
</head>
<body></body>
</html>
```

## Mappings from merge-pass and postpre to post5

This library is really just a thin wrapper for merge-pass and postpre.
(Although the default arguments for the provided functions will get you
pretty far, a number of things could be done to make this easier to use
without TypeScript and the surrounding tooling.) As mentioned previously,
check out the
[merge-pass live example](https://www.bandaloo.fun/merge-pass/example.html)
and the [postpre live example](https://www.bandaloo.fun/postpre/example.html)
for examples on how to use this library. Below is a table to keep track of
the mappings in post5; you want to use the names in the left column. Most are
just changed to camelCase, but some names had to change totally due to naming
conflicts with p5.

| post5 | merge-pass/postpre |
| ----------------- | ------------------ |
| foggyRays | foggyrays |
| vignette | vignette |
| blurAndTrace | blurandtrace |
| lightBands | lightbands |
| noiseDisplacement | noisedisplacement |
| oldFilm | oldfilm |
| kaleidoscope | kaleidoscope |
| effectLoop | loop |
| gauss | gauss |
| fColor | fcolor |
| vec2 | vec2 |
| vec3 | vec3 |
| vec4 | vec4 |
| pVec2 | pvec2 |
| pVec3 | pvec3 |
| pVec4 | pvec4 |
| op | op |
| blur2d | blur2d |
| len | len |
| normalize | norm |
| pixel | pixel |
| pos | pos |
| center | center |
| input | input |
| bright | brightness |
| contrast | contrast |
| grain | grain |
| getComp | getcomp |
| get2Comp | get2comp |
| get3Comp | get3comp |
| get4Comp | get4comp |
| changeComp | changecomp |
| rgbToHsv | rgb2hsv |
| hsvToRgb | hsv2rgb |
| time | time |
| a1 | a1 |
| a2 | a2 |
| fxaa | fxaa |
| channel | channel |
| depthOfField | dof |
| trueDepth | truedepth |
| godrays | godrays |
| depthToOcclusion | depth2occlusion |
| resolution | resolution |
| mouse | mouse |
| rotate2d | rotate |
| translate2d | translate |
| nMouse | nmouse |
| perlin | perlin |
| simplex | simplex |
| motionBlur | motionblur |
| randomFloat | random |
| sobel | sobel |
| bloom | bloom |
| monochrome | monochrome |
| invert | invert |
| edge | edge |
| edgeColor | edgecolor |
| ternary | ternary |
| region | region |
| cFloat | cfloat |
| cVec2 | cvec2 |
| cVec3 | cvec3 |
| cVec4 | cvec4 |
| mut | mut |
| basicFloat | float |
| pFloat | pfloat |
| tag | tag |
| celShade | celshade |

## Building

(This build process will be replaced with an easier one soon. postpre will be
Expand All @@ -35,7 +123,5 @@ This repo includes `p5bundle.js` produced by the `npm run p5` script in the
postpre package available [here](https://github.com/bandaloo/postpre).
Running `sh build.sh` literally justs concatenates `p5bundle.js` with
`p5extensions.js` (which does the extending of the p5 prototype) to produce
`post5.js`. This file is committed for convenience. also, `p5.js` version
1.1.9 is also included so that the examples work out the gate. The included
examples use `post5.js` so run `sh build.sh` after making changes to
`p5extensions.js`.
`post5.js`. The included examples use `post5.js` so run `sh build.sh` after
making changes to `p5extensions.js`.
3 changes: 2 additions & 1 deletion build.sh
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
#!/bin/bash
cat p5bundle.js p5extensions.js > post5.js
echo "/* post5 0.2.1 | (c) 2020, Cole Granof | MIT License */" > post5.js
cat p5bundle.js p5extensions.js >> post5.js
2 changes: 1 addition & 1 deletion examples/blurexample.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="../p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="../post5.js"></script>
<script src="blursketch.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/colordistexample.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="../p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="../post5.js"></script>
<script src="colordistsketch.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/hueexample.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="../p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="../post5.js"></script>
<script src="huesketch.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/inkyexample.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="../p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="../post5.js"></script>
<script src="inkysketch.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/instanceexample.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="../p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="../post5.js"></script>
<script src="instancesketch.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/mandalaexample.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="../p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="../post5.js"></script>
<script src="mandalasketch.js"></script>
</head>
Expand Down
1 change: 1 addition & 0 deletions p5extensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
addToProto(pr, "basicFloat", MP.float);
addToProto(pr, "pFloat", MP.pfloat);
addToProto(pr, "tag", MP.tag);
addToProto(pr, "celShade", MP.celshade);

addToProto(pr, "__info", {
replaced: false,
Expand Down
Loading

0 comments on commit 93ec84b

Please sign in to comment.