├── LICENSE
├── README.md
├── assets
    ├── LitSphere_test_04.jpg
    ├── PaintBrushStroke03.png
    ├── PaintBrushStroke05.png
    ├── WaterNormal.jpg
    ├── brush2.png
    ├── brush3.png
    ├── brush4.png
    ├── coc.png
    ├── matball05.jpg
    ├── matcap.jpg
    ├── matcap2.jpg
    ├── matcap3.jpg
    ├── paintbrush-stroke.png
    ├── stroke.png
    └── watercolor-brush-stroke.png
├── css
    └── styles.css
├── fonts
    └── helvetiker_regular.typeface.json
├── index.html
├── js
    ├── Backdrop.js
    ├── CCapture.all.min.js
    ├── Maf.js
    ├── gif.worker.js
    └── three.min.js
├── loops
    ├── 242
    │   ├── glass-fs.js
    │   ├── glass-vs.js
    │   ├── liquid-fs.js
    │   └── liquid-vs.js
    ├── 243
    │   ├── depth-fs.js
    │   └── depth-vs.js
    ├── 245
    │   ├── Speaker.obj
    │   ├── backdrop-fs.js
    │   ├── backdrop-vs.js
    │   ├── shockwave-fs.js
    │   ├── shockwave-vs.js
    │   ├── test_DefaultMaterial_Diffuse.jpg
    │   ├── test_DefaultMaterial_Glossiness.jpg
    │   ├── test_DefaultMaterial_Height.jpg
    │   ├── test_DefaultMaterial_Normal.jpg
    │   ├── test_DefaultMaterial_Reflection.jpg
    │   └── test_DefaultMaterial_ior.jpg
    ├── 246
    │   ├── points-fs.js
    │   └── points-vs.js
    ├── 247
    │   ├── positions-fs.js
    │   ├── positions-vs.js
    │   └── water-fs.js
    ├── 248
    │   ├── combine-fs.js
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── hair-fs.js
    │   └── hair-vs.js
    ├── 249
    │   ├── bkg.jpg
    │   ├── blur-fs.js
    │   ├── combine-fs.js
    │   ├── diffuse.jpg
    │   ├── diffuse.png
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── normal.jpg
    │   ├── occlusion.jpg
    │   ├── opacity.jpg
    │   └── roughness.jpg
    ├── 250
    │   ├── apple.obj
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── stripes-fs.js
    │   └── stripes-vs.js
    ├── 251
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── volumetric-cone-fs.js
    │   ├── volumetric-cone-vs.js
    │   ├── volumetric-glow-fs.js
    │   └── volumetric-glow-vs.js
    ├── 252
    │   ├── Sliced_Bread_Loose_Slice.obj
    │   ├── blur-fs.js
    │   ├── combine-fs.js
    │   ├── diffuse.jpg
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   └── normal.jpg
    ├── 253
    │   ├── blur-fs.js
    │   ├── combine-fs.js
    │   ├── disc-fs.js
    │   ├── disc-vs.js
    │   ├── dust.png
    │   ├── glow-fs.js
    │   ├── glow-vs.js
    │   ├── stars.jpg
    │   ├── swirl.jpg
    │   ├── torus-fs.js
    │   └── torus-vs.js
    ├── 254
    │   ├── blur-fs.js
    │   ├── coffee-fs.js
    │   ├── coffee-vs.js
    │   ├── combine-fs.js
    │   ├── envmap.jpg
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   └── highlight-fs.js
    ├── 255
    │   ├── blur-fs.js
    │   ├── explosion.png
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── fire-fs.js
    │   ├── fire-vs.js
    │   └── highlight-fs.js
    ├── 256
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── star-fs.js
    │   └── star-vs.js
    ├── 257
    │   ├── bokeh-fs.js
    │   ├── cave.jpg
    │   ├── combine-fs.js
    │   ├── crystal.js
    │   ├── depth-fs.js
    │   ├── depth-vs.js
    │   ├── final-color-fs.js
    │   └── final-fs.js
    ├── 258
    │   ├── cmyk-fs.js
    │   └── final-fs.js
    ├── 259
    │   └── final-fs.js
    ├── 260
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── sock-fs.js
    │   ├── sock-vs.js
    │   └── sock.obj
    ├── 261
    │   ├── backdrop-fs.js
    │   ├── backdrop-vs.js
    │   ├── combine-fs.js
    │   ├── final-fs.js
    │   ├── manta.obj
    │   ├── points-fs.js
    │   ├── points-vs.js
    │   └── shadows-fs.js
    ├── 262
    │   ├── combine-fs.js
    │   └── final-fs.js
    ├── 263
    │   ├── candy-fs.js
    │   ├── candy-vs.js
    │   ├── envmap.jpg
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── normal.png
    │   └── texture.jpg
    ├── 264
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   └── printer.obj
    ├── 265
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   └── screwdriver.js
    ├── 266
    │   ├── combine-fs.js
    │   ├── edges-fs.js
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── gbuffer-fs.js
    │   ├── gbuffer-vs.js
    │   ├── scene.bin
    │   ├── scene.gltf
    │   └── sock-fs.textClipping
    ├── 267
    │   ├── LeePerry
    │   │   ├── scene.bin
    │   │   ├── scene.gltf
    │   │   └── textures
    │   │   │   ├── defaultMat_baseColor.jpeg
    │   │   │   ├── defaultMat_metallicRoughness.png
    │   │   │   └── defaultMat_normal.png
    │   ├── blur-fs.js
    │   ├── bun
    │   │   ├── scene.bin
    │   │   ├── scene.gltf
    │   │   └── textures
    │   │   │   ├── 1001_baseColor.png
    │   │   │   ├── 1001_metallicRoughness.png
    │   │   │   └── 1001_normal.png
    │   ├── combine-fs.js
    │   ├── final-color-fs.js
    │   └── final-fs.js
    ├── 268
    │   ├── final-fs.js
    │   ├── glitch-fs.js
    │   ├── scene.bin
    │   └── scene.gltf
    ├── 269
    │   ├── combine-fs.js
    │   ├── donut.js
    │   ├── final-fs.js
    │   ├── frosted-donut.js
    │   ├── gradient-fs.js
    │   ├── gradient-vs.js
    │   └── sprinkled-frosted-donut.js
    ├── 270
    │   ├── backdrop-fs.js
    │   ├── backdrop-vs.js
    │   ├── blur-fs.js
    │   ├── combine-fs.js
    │   ├── computer-scene.js
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── gradient-fs.js
    │   ├── gradient-vs.js
    │   ├── screen-fs.js
    │   ├── screen-vs.js
    │   ├── sphere-fs.js
    │   └── sphere-vs.js
    ├── 354
    │   ├── blur-fs.js
    │   ├── box-fs.js
    │   ├── box-vs.js
    │   ├── combine-fs.js
    │   ├── final-color-fs.js
    │   ├── final-fs.js
    │   ├── highlight-fs.js
    │   └── post.js
    ├── 1.js
    ├── 10.js
    ├── 100.js
    ├── 101.js
    ├── 102.js
    ├── 103.js
    ├── 104.js
    ├── 105.js
    ├── 106.js
    ├── 107.js
    ├── 108.js
    ├── 109.js
    ├── 11.js
    ├── 110.js
    ├── 111.js
    ├── 112.js
    ├── 113.js
    ├── 114.js
    ├── 115.js
    ├── 116.js
    ├── 117.js
    ├── 118.js
    ├── 119.js
    ├── 12.js
    ├── 120.js
    ├── 121.js
    ├── 122.js
    ├── 123.js
    ├── 124.js
    ├── 125.js
    ├── 126.js
    ├── 127.js
    ├── 128.js
    ├── 129.js
    ├── 13.js
    ├── 130.js
    ├── 131.js
    ├── 132.js
    ├── 133.js
    ├── 134.js
    ├── 135.js
    ├── 136.js
    ├── 137.js
    ├── 138.js
    ├── 139.js
    ├── 14.js
    ├── 140.js
    ├── 141.js
    ├── 142.js
    ├── 143.js
    ├── 144.js
    ├── 145.js
    ├── 146.js
    ├── 147.js
    ├── 148.js
    ├── 149.js
    ├── 15.js
    ├── 150.js
    ├── 151.js
    ├── 152.js
    ├── 153.js
    ├── 154.js
    ├── 155.js
    ├── 156.js
    ├── 157.js
    ├── 158.js
    ├── 159.js
    ├── 16.js
    ├── 160.js
    ├── 161.js
    ├── 162.js
    ├── 163.js
    ├── 164.js
    ├── 165.js
    ├── 166.js
    ├── 167.js
    ├── 168.js
    ├── 169.js
    ├── 17.js
    ├── 170.js
    ├── 171.js
    ├── 172.js
    ├── 173.js
    ├── 174.js
    ├── 175.js
    ├── 176.js
    ├── 177.js
    ├── 178.js
    ├── 179.js
    ├── 18.js
    ├── 180.js
    ├── 181.js
    ├── 182.js
    ├── 183.js
    ├── 184.js
    ├── 185.js
    ├── 186.js
    ├── 187.js
    ├── 188.js
    ├── 189.js
    ├── 19.js
    ├── 190.js
    ├── 191.js
    ├── 192.js
    ├── 193.js
    ├── 194.js
    ├── 195.js
    ├── 196.js
    ├── 197.js
    ├── 198.js
    ├── 199.js
    ├── 2.js
    ├── 20.js
    ├── 200.js
    ├── 201.js
    ├── 202.js
    ├── 203.js
    ├── 204.js
    ├── 205.js
    ├── 206.js
    ├── 207.js
    ├── 208.js
    ├── 209.js
    ├── 21.js
    ├── 210.js
    ├── 211.js
    ├── 212.js
    ├── 213.js
    ├── 214.js
    ├── 215.js
    ├── 216.js
    ├── 217.js
    ├── 218.js
    ├── 219.js
    ├── 22.js
    ├── 220.js
    ├── 221.js
    ├── 222.js
    ├── 223.js
    ├── 224.js
    ├── 225.js
    ├── 226.js
    ├── 227.js
    ├── 228.js
    ├── 229.js
    ├── 23.js
    ├── 230.js
    ├── 231.js
    ├── 232.js
    ├── 233.js
    ├── 234.js
    ├── 235.js
    ├── 236.js
    ├── 237.js
    ├── 238.js
    ├── 239.js
    ├── 24.js
    ├── 240.js
    ├── 241.js
    ├── 242.js
    ├── 243.js
    ├── 244.js
    ├── 245.js
    ├── 246.js
    ├── 247.js
    ├── 248.js
    ├── 249.js
    ├── 25.js
    ├── 250.js
    ├── 251.js
    ├── 251b.js
    ├── 252.js
    ├── 253.js
    ├── 254.js
    ├── 255.js
    ├── 256.js
    ├── 257.js
    ├── 258.js
    ├── 259.js
    ├── 26.js
    ├── 260.js
    ├── 261.js
    ├── 262.js
    ├── 263.js
    ├── 264.js
    ├── 265.js
    ├── 266.js
    ├── 267.js
    ├── 268.js
    ├── 269.js
    ├── 27.js
    ├── 270.js
    ├── 271.js
    ├── 272.js
    ├── 273.js
    ├── 274.js
    ├── 275.js
    ├── 276.js
    ├── 277.js
    ├── 278.js
    ├── 279.js
    ├── 28.js
    ├── 280.js
    ├── 281.js
    ├── 282.js
    ├── 283.js
    ├── 284.js
    ├── 285.js
    ├── 286.js
    ├── 287.js
    ├── 288.js
    ├── 289.js
    ├── 29.js
    ├── 290.js
    ├── 291.js
    ├── 292.js
    ├── 293.js
    ├── 294.js
    ├── 295.js
    ├── 296.js
    ├── 297.js
    ├── 298.js
    ├── 299.js
    ├── 3.js
    ├── 30.js
    ├── 300.js
    ├── 301.js
    ├── 302.js
    ├── 303.js
    ├── 304.js
    ├── 305.js
    ├── 306.js
    ├── 307.js
    ├── 308.js
    ├── 309.js
    ├── 31.js
    ├── 310.js
    ├── 311.js
    ├── 312.js
    ├── 313.js
    ├── 314.js
    ├── 315.js
    ├── 316.js
    ├── 317.js
    ├── 318.js
    ├── 319.js
    ├── 32.js
    ├── 320.js
    ├── 321.js
    ├── 322.js
    ├── 323.js
    ├── 324.js
    ├── 325.js
    ├── 326.js
    ├── 327.js
    ├── 328.js
    ├── 329.js
    ├── 33.js
    ├── 330.js
    ├── 331.js
    ├── 332.js
    ├── 333.js
    ├── 334.js
    ├── 335.js
    ├── 336.js
    ├── 337.js
    ├── 338.js
    ├── 339.js
    ├── 34.js
    ├── 340.js
    ├── 341.js
    ├── 342.js
    ├── 343.js
    ├── 344.js
    ├── 345.js
    ├── 346.js
    ├── 347.js
    ├── 348.js
    ├── 349.js
    ├── 35.js
    ├── 350.js
    ├── 351.js
    ├── 352.js
    ├── 353.js
    ├── 354.js
    ├── 355.js
    ├── 36.js
    ├── 37.js
    ├── 38.js
    ├── 39.js
    ├── 4.js
    ├── 40.js
    ├── 41.js
    ├── 42.js
    ├── 43.js
    ├── 44.js
    ├── 45.js
    ├── 46.js
    ├── 47.js
    ├── 48.js
    ├── 49.js
    ├── 5.js
    ├── 50.js
    ├── 51.js
    ├── 52.js
    ├── 53.js
    ├── 54.js
    ├── 55.js
    ├── 56.js
    ├── 57.js
    ├── 58.js
    ├── 59.js
    ├── 6.js
    ├── 60.js
    ├── 61.js
    ├── 62.js
    ├── 63.js
    ├── 64.js
    ├── 65.js
    ├── 66.js
    ├── 67.js
    ├── 68.js
    ├── 69.js
    ├── 7.js
    ├── 70.js
    ├── 71.js
    ├── 72.js
    ├── 73.js
    ├── 74.js
    ├── 75.js
    ├── 76.js
    ├── 77.js
    ├── 78.js
    ├── 79.js
    ├── 8.js
    ├── 80.js
    ├── 81.js
    ├── 82.js
    ├── 83.js
    ├── 84.js
    ├── 85.js
    ├── 86.js
    ├── 87.js
    ├── 88.js
    ├── 89.js
    ├── 9.js
    ├── 90.js
    ├── 91.js
    ├── 92.js
    ├── 93.js
    ├── 94.js
    ├── 95.js
    ├── 96.js
    ├── 97.js
    ├── 98.js
    ├── 99.js
    └── empty.js
├── modules
    ├── aizawa-attractor.js
    ├── akira-capsule.js
    ├── anishchenko-astakhov-attractor.js
    ├── arneodo-attractor.js
    ├── bolt.js
    ├── burke-shaw-attractor.js
    ├── canvas-chromatic-aberration.js
    ├── chen-celikovsky-attractor.js
    ├── context2d.js
    ├── conversions.js
    ├── curl.js
    ├── default.js
    ├── domino-piece.js
    ├── easings.js
    ├── equirectangular-to-cubemap.js
    ├── fbo.js
    ├── floriandelooij.js
    ├── gradient.js
    ├── hadley-attractor.js
    ├── instanced.js
    ├── lemniscate.js
    ├── lines-glow.js
    ├── lines.js
    ├── looper.js
    ├── lorenz-attractor.js
    ├── maf.js
    ├── painted.js
    ├── perlin-functions.js
    ├── points-sphere.js
    ├── qi-chen-attractor.js
    ├── rabinovich-fabrikant-attractor.js
    ├── shader-pass.js
    ├── shader-ping-pong-pass.js
    ├── three-meshline.js
    ├── three-rounded-cylinder.js
    ├── three-rounded-extruded-polygon.js
    ├── three-rounded-flat-torus.js
    ├── three-tube-geometry.js
    └── three.js
├── shaders
    ├── barrel.js
    ├── chromatic-aberration.js
    ├── color-burn.js
    ├── color-dodge.js
    ├── dither-noise.js
    ├── fast-separable-gaussian-blur.js
    ├── functions.js
    ├── fxaa-pixel-shift.js
    ├── fxaa.js
    ├── glitch.js
    ├── grayscale.js
    ├── high-pass.js
    ├── hsl2rgb.js
    ├── levels.js
    ├── lighten.js
    ├── map.js
    ├── noise.glsl
    ├── noise.js
    ├── noise2d.js
    ├── noise3d.js
    ├── ortho.js
    ├── overlay.js
    ├── radial-blur.js
    ├── random.js
    ├── rgb-shift.js
    ├── screen.js
    ├── smootherstep.js
    ├── sobel.js
    ├── sobel2.js
    ├── soft-light.js
    ├── tilt-shift.js
    ├── turbulence.js
    ├── vignette.js
    └── voronoise2d.js
└── third_party
    ├── THREE.BufferGeometryUtils.js
    ├── THREE.CurveExtras.js
    ├── THREE.GLTFLoader.js
    ├── THREE.LoaderUtils.js
    ├── THREE.MarchingCubes.js
    ├── THREE.OBJLoader.js
    ├── THREE.OrbitControls.js
    ├── perlin-functions.js
    ├── perlin.js
    ├── three-rounded-box.js
    └── three.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Jaume Sanchez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # looper
 2 | Looperepool, a tool to create looperinos
 3 | 
 4 | Demo: https://spite.github.io/looper/#4 (Chrome and Safari Tech Preview only)
 5 | 
 6 | Steps:
 7 | 
 8 | - Point a web server to the root folder of the project, for example in port 8000
 9 | 
10 | - Create a loop script on the loops folder, let's say foo.js. The script is basically an ES6 module that has to export three things:
11 | 
12 |   - a ```draw``` method, that can take an optional argument timeStart, in case you want to reset the animation when capture starts
13 |   - ```loopDuration```, the duration of the loop in seconds. This will tell the capturer how many frames to get
14 |   - ```canvas```, the HTMLCanvasElement to use for display and capture.
15 | 
16 |   - 1.js is an example of 2D Canvas
17 |   - 4.js is an example of three.js
18 | 
19 | - Open localhost:8000#foo
20 | 


--------------------------------------------------------------------------------
/assets/LitSphere_test_04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/LitSphere_test_04.jpg


--------------------------------------------------------------------------------
/assets/PaintBrushStroke03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/PaintBrushStroke03.png


--------------------------------------------------------------------------------
/assets/PaintBrushStroke05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/PaintBrushStroke05.png


--------------------------------------------------------------------------------
/assets/WaterNormal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/WaterNormal.jpg


--------------------------------------------------------------------------------
/assets/brush2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/brush2.png


--------------------------------------------------------------------------------
/assets/brush3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/brush3.png


--------------------------------------------------------------------------------
/assets/brush4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/brush4.png


--------------------------------------------------------------------------------
/assets/coc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/coc.png


--------------------------------------------------------------------------------
/assets/matball05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/matball05.jpg


--------------------------------------------------------------------------------
/assets/matcap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/matcap.jpg


--------------------------------------------------------------------------------
/assets/matcap2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/matcap2.jpg


--------------------------------------------------------------------------------
/assets/matcap3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/matcap3.jpg


--------------------------------------------------------------------------------
/assets/paintbrush-stroke.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/paintbrush-stroke.png


--------------------------------------------------------------------------------
/assets/stroke.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/stroke.png


--------------------------------------------------------------------------------
/assets/watercolor-brush-stroke.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/assets/watercolor-brush-stroke.png


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   font-family: 'open sans', sans-serif;
 6 |   font-size: 12px;
 7 | }
 8 | 
 9 | h1 {
10 |   font-family: 'krona one', sans-serif;
11 |   font-size: 2em;
12 |   color: #CD6509;
13 | }
14 | 
15 | h2 {
16 |   font-size: 1em;
17 | }
18 | 
19 | a {
20 |   font: inherit;
21 |   color: inherit;
22 | }
23 | 
24 | a:hover {
25 |   color: #CD6509;
26 | }
27 | 
28 | body {
29 |   padding: 20px;
30 | }
31 | 
32 | header {
33 |   margin-bottom: 20px;
34 | }
35 | 
36 | .recordPanel {
37 |   margin: 10px 0;
38 | }
39 | 
40 | .btn {
41 |   border-radius: 5px;
42 |   padding: 10px 20px;
43 |   text-decoration: none;
44 |   color: #fff;
45 |   position: relative;
46 |   display: inline-block;
47 | }
48 | 
49 | .btn:active {
50 |   transform: translate(0px, 5px);
51 |   -webkit-transform: translate(0px, 5px);
52 |   box-shadow: 0px 1px 0px 0px;
53 | }
54 | 
55 | .orange {
56 |   text-shadow: 0 -1px 0 #CD6509;
57 |   background-color: #e67e22;
58 |   box-shadow: 0px 5px 0px 0px #CD6509;
59 | }
60 | 
61 | .orange:hover {
62 |   background-color: #FF983C;
63 |   color: #CD6509;
64 | }
65 | 
66 | .green {
67 |   text-shadow: 0 -1px 0 #096d14;
68 |   background-color: rgb(15, 145, 30);
69 |   box-shadow: 0px 5px 0px 0px #096d14;
70 | }
71 | 
72 | .green:hover {
73 |   background-color: #26af36;
74 |   color: #096d14;
75 | }
76 | 
77 | canvas {
78 |   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
79 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <title>Looper</title>
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 8 |   <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
 9 |   <link href="https://fonts.googleapis.com/css?family=Krona+One|Open+Sans" rel="stylesheet">
10 | </head>
11 | 
12 | <body>
13 |   <header>
14 |     <h1>Looper</h1>
15 |     <h2>A tool to create looperinos · <a href="https://github.com/spite/looper">GitHub</a></h2>
16 |     <div class="recordPanel">
17 |       <a href="#" class="btn orange" id="start">⚫ Record</a>
18 |       <a href="#" id="snapshotButton" class="btn orange">📸 Snapshot</a>
19 |       <a href="#" id="backButton" class="btn green">◀&nbsp;&nbsp;Previous</a>
20 |       <a href="#" id="nextButton" class="btn green">Next&nbsp;&nbsp;▶</a>
21 |     </div>
22 |   </header>
23 |   <script>
24 |     function getIndex() {
25 |     return parseInt(window.location.hash.replace('#', ''));
26 |   }
27 | 
28 |   function prev(e) {
29 |     let index = getIndex();
30 | 
31 |     // beginning, dont do anything
32 |     if (index === 1) return;
33 |     window.location.hash = `${--index}`;
34 |     e.preventDefault();
35 |   }
36 | 
37 |   function next(e) {
38 |     let index = getIndex();
39 |     window.location.hash = ++index;
40 |     e.preventDefault();
41 |   }
42 | 
43 |   document.getElementById('backButton').addEventListener('click', (e) => prev(e));
44 |   document.getElementById('nextButton').addEventListener('click', (e) => next(e));
45 | 
46 |   const cur = getIndex();
47 |   if (isNaN(cur) || cur === '' || cur === undefined) {
48 |     window.location.hash = 1;
49 |   }
50 |   </script>
51 |   <script src="js/CCapture.all.min.js"></script>
52 |   <script async type="module" src="modules/looper.js"></script>
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/js/Backdrop.js:
--------------------------------------------------------------------------------
 1 | function Backdrop( lightPosition, top, bottom ) {
 2 | 
 3 | 	this.backGeometry = new THREE.IcosahedronBufferGeometry(1,4);
 4 | 	this.backMaterial = new THREE.RawShaderMaterial({
 5 | 		uniforms: {
 6 | 			top: { type: 'c', value: new THREE.Color(top) },
 7 | 			bottom: { type: 'c', value: new THREE.Color(bottom) },
 8 | 			lightPosition: { type: 'v3', value: lightPosition }
 9 | 		},
10 | 		vertexShader: document.getElementById( 'backdrop-vs' ).textContent,
11 | 		fragmentShader: document.getElementById( 'backdrop-fs' ).textContent,
12 | 		side: THREE.BackSide,
13 | 		depthWrite: false
14 | 	});
15 | 	return new THREE.Mesh( this.backGeometry, this.backMaterial );
16 | 
17 | }
18 | 


--------------------------------------------------------------------------------
/loops/1.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | const canvas = context.canvas;
 3 | 
 4 | const loopDuration = 1;
 5 | 
 6 | function drawCircle(ctx, x, y, fx, fy) {
 7 |   ctx.beginPath();
 8 |   ctx.ellipse(x,y, 50*fx, 50*fy, 0, 0, 2 * Math.PI);
 9 |   ctx.lineWidth = 15;
10 |   ctx.strokeStyle = '#fff';
11 |   ctx.stroke();
12 |   ctx.lineWidth = 5;
13 |   ctx.strokeStyle = '#000';
14 |   ctx.stroke();
15 | }
16 | 
17 | const CIRCLES = 5;
18 | 
19 | function draw() {
20 |   context.fillStyle = '#fff';
21 |   context.fillRect(0,0,canvas.width, canvas.height);
22 |   for (let j=0; j<CIRCLES; j++) {
23 |     const t = (.001*performance.now() % loopDuration);
24 |     const t2 = t * 2 * Math.PI / loopDuration + 2 * Math.PI * j / CIRCLES;
25 |     const x = .35 * canvas.width * Math.cos(t2);
26 |     const y = 0;
27 |     const f = Math.abs(Math.sin(t2));
28 |     const fx = 1 + .5 * f;
29 |     const fy = 1 - .5 * f;
30 |     context.save();
31 |     context.translate(.5*canvas.width, .5*canvas.height);
32 |     context.rotate(j * 2 * Math.PI / CIRCLES );
33 |     drawCircle(context,x,y,fx, fy);
34 |     context.restore();
35 |   }
36 | }
37 | 
38 | export { draw, loopDuration, canvas };
39 | 


--------------------------------------------------------------------------------
/loops/114.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import {renderer, getCamera} from '../modules/three.js';
 3 | import {Curves} from '../third_party/THREE.CurveExtras.js';
 4 | import Maf from '../modules/maf.js';
 5 | import easings from '../modules/easings.js';
 6 | 
 7 | const canvas = renderer.domElement;
 8 | const camera = getCamera();
 9 | const scene = new THREE.Scene();
10 | const group = new THREE.Group();
11 | 
12 | const whiteMaterial = new THREE.MeshStandardMaterial({color:0xffffff});
13 | const blackMaterial = new THREE.MeshStandardMaterial({color:0x000000});
14 | 
15 | for (let j=0; j<14; j++) {
16 |   const r = 14-j;
17 |   const h = 1 + .5*j;
18 |   const mesh = new THREE.Mesh(
19 |     new THREE.CylinderBufferGeometry(r,r,h,72,1),
20 |     (j%2)?blackMaterial:whiteMaterial
21 |   );
22 |   mesh.position.x = .9*j;
23 |   if(j>6) {
24 |     mesh.position.x = 12*.9 - .9*j;
25 |   }
26 |   mesh.receiveShadow = mesh.castShadow = true;
27 |   group.add(mesh);
28 | }
29 | group.scale.setScalar(.25);
30 | scene.add(group);
31 | 
32 | const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
33 | directionalLight.position.set(-1,1,1);
34 | directionalLight.castShadow = true;
35 | scene.add( directionalLight );
36 | 
37 | const directionalLight2 = new THREE.DirectionalLight( 0xffffff, .5 );
38 | directionalLight2.position.set(1,2,1);
39 | directionalLight2.castShadow = true;
40 | scene.add( directionalLight2 );
41 | 
42 | const ambientLight = new THREE.AmbientLight(0x808080, .5);
43 | scene.add(ambientLight);
44 | 
45 | const light = new THREE.HemisphereLight( 0xcefeff, 0xb3eaf0, .5 );
46 | scene.add( light );
47 | 
48 | camera.position.set(0,15,0);
49 | camera.lookAt(group.position);
50 | renderer.setClearColor(0xffffff,1);
51 | renderer.shadowMap.enabled = true;
52 | renderer.shadowMap.type = THREE.PCFSoftShadowMap;
53 | 
54 | const loopDuration = 3;
55 | const cameraOffset = new THREE.Vector3();
56 | 
57 | function draw(startTime) {
58 | 
59 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
60 |   const t = time / loopDuration;
61 |   group.rotation.y = t * Maf.TAU;
62 | 
63 |   renderer.render(scene, camera);
64 | }
65 | 
66 | export { draw, loopDuration, canvas };
67 | 


--------------------------------------------------------------------------------
/loops/116.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import {renderer, getCamera} from '../modules/three.js';
 3 | import Maf from '../modules/maf.js';
 4 | import easings from '../modules/easings.js';
 5 | 
 6 | const canvas = renderer.domElement;
 7 | const camera = getCamera();
 8 | const scene = new THREE.Scene();
 9 | const group = new THREE.Group();
10 | 
11 | const whiteMaterial = new THREE.MeshStandardMaterial({color:0xffffff});
12 | const blackMaterial = new THREE.MeshStandardMaterial({color:0x000000});
13 | 
14 | const MAX = 30;
15 | const objects = [];
16 | for (let j=0; j<MAX; j++) {
17 |   const r = MAX-j;
18 |   const h = 1 + .5*j;
19 |   const mesh = new THREE.Mesh(
20 |     new THREE.BoxBufferGeometry(r,h,r),
21 |     (j%2)?blackMaterial:whiteMaterial
22 |   );
23 |   objects.push(mesh);
24 |   mesh.receiveShadow = mesh.castShadow = true;
25 |   group.add(mesh);
26 | }
27 | group.scale.setScalar(.25);
28 | scene.add(group);
29 | 
30 | const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
31 | directionalLight.position.set(-1,1,1);
32 | directionalLight.castShadow = true;
33 | scene.add( directionalLight );
34 | 
35 | const directionalLight2 = new THREE.DirectionalLight( 0xffffff, .5 );
36 | directionalLight2.position.set(1,2,1);
37 | directionalLight2.castShadow = true;
38 | scene.add( directionalLight2 );
39 | 
40 | const ambientLight = new THREE.AmbientLight(0x808080, .5);
41 | scene.add(ambientLight);
42 | 
43 | const light = new THREE.HemisphereLight( 0xcefeff, 0xb3eaf0, .5 );
44 | scene.add( light );
45 | 
46 | camera.position.set(10,15,0);
47 | camera.lookAt(group.position);
48 | renderer.setClearColor(0xffffff,1);
49 | renderer.shadowMap.enabled = true;
50 | renderer.shadowMap.type = THREE.PCFSoftShadowMap;
51 | 
52 | const loopDuration = 3;
53 | const cameraOffset = new THREE.Vector3();
54 | 
55 | function draw(startTime) {
56 | 
57 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
58 |   const t = time / loopDuration;
59 | 
60 |   objects.forEach( (o, id) => {
61 |     o.rotation.y = (.5 + .5 * Math.sin(t*Maf.TAU) ) * .1 * id;
62 |   });
63 |   group.rotation.y = t * Maf.TAU;
64 | 
65 |   renderer.render(scene, camera);
66 | }
67 | 
68 | export { draw, loopDuration, canvas };
69 | 


--------------------------------------------------------------------------------
/loops/118.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import {renderer, getCamera} from '../modules/three.js';
 3 | import Maf from '../modules/maf.js';
 4 | import easings from '../modules/easings.js';
 5 | import RoundedCylinderGeometry from '../modules/three-rounded-cylinder.js';
 6 | 
 7 | const canvas = renderer.domElement;
 8 | const camera = getCamera();
 9 | const scene = new THREE.Scene();
10 | const group = new THREE.Group();
11 | 
12 | const whiteMaterial = new THREE.MeshStandardMaterial({color:0xffffff});
13 | const blackMaterial = new THREE.MeshStandardMaterial({color:0x000000});
14 | 
15 | const MAX = 30;
16 | const objects = [];
17 | for (let j=0; j<MAX; j++) {
18 |   const r = MAX-j;
19 |   const h = 1 + 1 * j;
20 |   const mesh = new THREE.Mesh(
21 |     new RoundedCylinderGeometry(r,h,.1,5),
22 |     (j%2)?blackMaterial:whiteMaterial
23 |   );
24 |   objects.push(mesh);
25 |   mesh.receiveShadow = mesh.castShadow = true;
26 |   group.add(mesh);
27 | }
28 | group.scale.setScalar(.075);
29 | group.rotation.x =- Math.PI / 2;
30 | scene.add(group);
31 | 
32 | const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
33 | directionalLight.position.set(-1,1,1);
34 | directionalLight.castShadow = true;
35 | scene.add( directionalLight );
36 | 
37 | const directionalLight2 = new THREE.DirectionalLight( 0xffffff, .5 );
38 | directionalLight2.position.set(1,2,1);
39 | directionalLight2.castShadow = true;
40 | scene.add( directionalLight2 );
41 | 
42 | const ambientLight = new THREE.AmbientLight(0x808080, .5);
43 | scene.add(ambientLight);
44 | 
45 | const light = new THREE.HemisphereLight( 0xcefeff, 0xb3eaf0, .5 );
46 | scene.add( light );
47 | 
48 | camera.position.set(0,10,0);
49 | camera.lookAt(group.position);
50 | renderer.setClearColor(0xffffff,1);
51 | renderer.shadowMap.enabled = true;
52 | renderer.shadowMap.type = THREE.PCFSoftShadowMap;
53 | 
54 | const loopDuration = 3;
55 | const cameraOffset = new THREE.Vector3();
56 | 
57 | function draw(startTime) {
58 | 
59 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
60 |   const t = time / loopDuration;
61 | 
62 |   objects.forEach( (o, id) => {
63 |     o.rotation.z = t * Maf.TAU + .2 * id;
64 |   });
65 | 
66 |   renderer.render(scene, camera);
67 | }
68 | 
69 | export { draw, loopDuration, canvas };
70 | 


--------------------------------------------------------------------------------
/loops/18.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | const canvas = context.canvas;
 4 | 
 5 | const loopDuration = 2;
 6 | 
 7 | function draw(startTime) {
 8 |   context.fillStyle = '#fff';
 9 |   context.lineWidth = 1;
10 |   context.fillRect(0,0,canvas.width, canvas.height);
11 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
12 | 
13 |   const circleRadius = 3;
14 |   const separation = 3;
15 |   const amplitude = 20;
16 | 
17 |   context.save(),
18 |   context.translate(.5*canvas.width, .5*canvas.height);
19 |   context.fillStyle = '#000';
20 |   for (let radius=0; radius<.75*canvas.width; radius+=circleRadius*separation ) {
21 |     const p = 2 * Math.PI * radius;
22 |     const step = 2 * Math.PI / Math.round( p / (circleRadius*separation));
23 |     for (let angle=0; angle<2*Math.PI; angle+=step) {
24 |       const factor = Math.cos(.02 * radius + time * 2 * Math.PI / loopDuration);
25 |       const offsetx = amplitude * factor;
26 |       //const offsety = amplitude * Math.sin(.02 * radius + time * 2 * Math.PI / loopDuration)
27 |       const offsety = amplitude * factor;
28 |       const scale = .2 + .8 * (.5 + .5 * factor);
29 |       const x = radius * Math.cos(angle+radius) + offsetx;
30 |       const y = radius *  Math.sin(angle+radius) + offsety;
31 |       //context.fillStyle = `hsl(0,0%,${50+factor*25}%)`;
32 |       context.beginPath();
33 |       context.arc(x,y,circleRadius*scale,0,2*Math.PI);
34 |       context.fill();
35 |     }
36 |   }
37 |   context.restore();
38 | 
39 | }
40 | 
41 | export { draw, loopDuration, canvas };
42 | 


--------------------------------------------------------------------------------
/loops/2.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | const canvas = context.canvas;
 3 | 
 4 | const loopDuration = 1;
 5 | const LINES = 50;
 6 | 
 7 | function draw() {
 8 |   context.fillStyle = '#fff';
 9 |   context.lineWidth = 1;
10 |   context.fillRect(0,0,canvas.width, canvas.height);
11 |   const time = ( .001 * performance.now() ) % loopDuration;
12 |   for (let j = 0; j < LINES; j++) {
13 |     const y = j * canvas.height / LINES;
14 |     context.beginPath();
15 |     context.moveTo(-10,y);
16 |     for(let x=-10; x<canvas.width+20;x++) {
17 |       const dx = .5 * canvas.width - x;
18 |       const dy = .5 * canvas.height - y;
19 |       const d = Math.sqrt(dx*dx+dy*dy);
20 |       let offset = 50. * Math.sin( .00005 * d * d - time * 2 * Math.PI / loopDuration ) * Math.exp( - .00001 * d * d );
21 |       context.lineTo(x,y+offset);
22 |     }
23 |     context.lineTo(canvas.width+20,y+2*canvas.height);
24 |     context.lineTo(-10,y+2*canvas.height);
25 |     context.closePath();
26 |     context.fill();
27 |     context.stroke();
28 |   }
29 | }
30 | 
31 | export { draw, loopDuration, canvas };
32 | 


--------------------------------------------------------------------------------
/loops/20.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | const canvas = context.canvas;
 4 | 
 5 | const loopDuration = 1.5;
 6 | 
 7 | function getPosition(radius, angle, time) {
 8 |   const amplitude = 20;
 9 |   const factor = Math.cos(.02 * radius + time * 2 * Math.PI / loopDuration);
10 |   const offsetx = amplitude * factor;
11 |   const factor2 = Math.sin(.02 * radius + time * 4 * Math.PI / loopDuration);
12 |   const offsety = amplitude * factor2;
13 |   const scale = .2 + .8 * (.5 + .5 * factor);
14 |   const x = radius * Math.cos(angle+radius) + offsetx;
15 |   const y = radius *  Math.sin(angle+radius) + offsety;
16 |   return {x,y}
17 | }
18 | 
19 | function draw(startTime) {
20 |   context.fillStyle = '#fff';
21 |   context.lineWidth = 1;
22 |   context.fillRect(0,0,canvas.width, canvas.height);
23 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
24 | 
25 |   const separation = 8;
26 | 
27 |   context.save(),
28 |   context.translate(.5*canvas.width, .5*canvas.height);
29 |   context.fillStyle = '#000';
30 |   for (let radius=0; radius<.75*canvas.width; radius+=separation ) {
31 |     const p = 2 * Math.PI * radius;
32 |     const step = 2 * Math.PI / Math.round( p / separation);
33 |     context.beginPath();
34 |     const factor = radius / (.75*canvas.width);
35 |     context.strokeStyle = `hsl(0,0%,${factor*100}%)`;
36 |     context.lineWidth = (1-factor)*10;
37 |     const aOffset = time * 2 * Math.PI / loopDuration;
38 |     const {x0,y0} = getPosition(radius, aOffset, time);
39 |     context.moveTo(x0,y0);
40 |     for (let angle=0; angle<2*Math.PI; angle+=step) {
41 |       const {x,y} = getPosition(radius, angle + aOffset, time);
42 |       context.lineTo(x,y);
43 |     }
44 |     context.closePath();
45 |     context.stroke();
46 |   }
47 |   context.restore();
48 | 
49 | }
50 | 
51 | export { draw, loopDuration, canvas };
52 | 


--------------------------------------------------------------------------------
/loops/22.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import Maf from '../modules/maf.js';
 3 | import easings from '../modules/easings.js';
 4 | 
 5 | const canvas = context.canvas;
 6 | 
 7 | const loopDuration = 2.5;
 8 | 
 9 | function draw(startTime) {
10 |   context.save();
11 |   context.fillStyle = '#000';
12 |   context.lineWidth = 1;
13 |   context.fillRect(0,0,canvas.width, canvas.height);
14 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
15 | 
16 |   const f = 3;
17 |   const n = 30 + 90 * easings.InOutQuad(.5 + .5 * Math.cos(time*2*Math.PI/loopDuration));
18 | 
19 |   context.save();
20 |   context.translate(.5*canvas.width-20, .5*canvas.height-5);
21 |   context.fillStyle = '#000';
22 |   for (let a=0; a<2*Math.PI; a+=2*Math.PI/n) {
23 |     context.save();
24 |     context.rotate(a);
25 |     const offset1 = 50 + 50 * Math.cos(time*2*Math.PI/loopDuration);
26 |     const offset2 = 50 + 50 * Math.sin(f*a+time*2*Math.PI/loopDuration);
27 |     for (let y=0; y<.25*canvas.width; y+=20) {
28 |       const r = 10 + 10 * Math.cos(y*2*Math.PI/500+a+Math.PI+time*4*Math.PI/loopDuration);
29 |       const radius = r;
30 |       context.globalAlpha = 1;
31 |       context.fillStyle = `hsl(${180+a*180/Math.PI},50%,80%)`;
32 |       //context.fillRect(r-.5*radius,offset1+offset2+r+y-.5*radius,radius,radius);
33 |       context.beginPath();
34 |       context.arc(r,offset1+offset2+r+y+.5*radius,.25*radius,0,2*Math.PI);
35 |       context.fill();
36 |     }
37 |     context.restore();
38 |   }
39 |   for (let a=0; a<2*Math.PI; a+=2*Math.PI/n) {
40 |     context.save();
41 |     context.rotate(a);
42 |     const offset1 = 50 + 50 * Math.cos(time*2*Math.PI/loopDuration);
43 |     const offset2 = 50 + 50 * Math.sin(f*a+time*2*Math.PI/loopDuration);
44 |     context.globalAlpha = 1;
45 |     for (let y=0; y<.25*canvas.width; y+=20) {
46 |       const r = 10 + 10 * Math.cos(y*2*Math.PI/500+a+time*4*Math.PI/loopDuration);
47 |       const radius = r;
48 |       context.fillStyle = `hsl(${a*180/Math.PI},100%,60%)`;
49 |       context.beginPath();
50 |       context.arc(r,offset1+offset2+r+y,.25*radius,0,2*Math.PI);
51 |       context.fill();
52 |     }
53 |     context.restore();
54 |   }
55 |   context.restore();
56 | 
57 |   context.restore();
58 | }
59 | 
60 | export { draw, loopDuration, canvas };
61 | 


--------------------------------------------------------------------------------
/loops/242/glass-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | #define M_PI 3.1415926535897932384626433832795
 5 | 
 6 | uniform sampler2D backTexture;
 7 | varying vec2 vUv;
 8 | varying vec2 vUvReflect;
 9 | varying vec2 vUvRefract;
10 | varying float vDot;
11 | 
12 | void main() {
13 |   vec2 uv = gl_FragCoord.xy/800.;
14 |   vec4 reflections = mix(texture2D(backTexture, uv+ vUvRefract), texture2D(backTexture, uv+ vUvReflect), vDot);
15 |   gl_FragColor = mix(texture2D(backTexture,uv ), reflections, .5 + .5*vDot);
16 | }
17 | `;
18 | 
19 | export { fs };


--------------------------------------------------------------------------------
/loops/242/glass-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelMatrix;
 9 | uniform mat4 modelViewMatrix;
10 | uniform mat4 projectionMatrix;
11 | uniform mat3 normalMatrix;
12 | 
13 | varying float vDot;
14 | varying vec2 vUv;
15 | varying vec2 vUvReflect;
16 | varying vec2 vUvRefract;
17 | 
18 | void main() {
19 |   vUv = uv;
20 |   vec4 p = vec4( position, 1. );
21 | 
22 |   vec3 e = normalize( vec3( modelViewMatrix * p ) );
23 |   vec3 n = normalize( normalMatrix * normal );
24 |   vDot = dot(e,n);
25 | 
26 |   vUvReflect = .2*reflect(e,n).xy;
27 |   vUvRefract = .2*refract(e,n,.9).xy;
28 | 
29 | gl_Position = projectionMatrix * modelViewMatrix * p;
30 | }
31 | `;
32 | 
33 | export { vs };


--------------------------------------------------------------------------------
/loops/242/liquid-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | #define M_PI 3.1415926535897932384626433832795
 5 | 
 6 | varying float vDir;
 7 | varying vec4 worldPos;
 8 | varying vec3 vNormal;
 9 | 
10 | uniform float level;
11 | uniform vec3 color;
12 | uniform vec3 topColor;
13 | uniform float time;
14 | 
15 | void main() {
16 |   float speed = 1.;
17 |   float amplitude = .2;
18 |   float y = worldPos.y - amplitude*time*sin(speed*worldPos.x+time*2.*M_PI) - amplitude*time*sin(speed*1.1*worldPos.z+time*2.*M_PI);;
19 |   if(y>level) {
20 |     discard;
21 |   }
22 |   if(vDir<0.) {
23 |     gl_FragColor = vec4(topColor/255.,1.)+.1;
24 |   } else {
25 |     float h = clamp(length(y-level),0.,1.);
26 |     h = 1.-smoothstep(0.,.1,h);
27 |     gl_FragColor = vec4(color/255.,1.) + .1*max(1.-vDir, h);
28 |   }
29 | }
30 | `;
31 | 
32 | export { fs };


--------------------------------------------------------------------------------
/loops/242/liquid-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelMatrix;
 9 | uniform mat4 modelViewMatrix;
10 | uniform mat4 projectionMatrix;
11 | uniform mat3 normalMatrix;
12 | 
13 | varying vec2 vUv;
14 | varying vec4 worldPos;
15 | varying vec3 vNormal;
16 | varying float vDir;
17 | 
18 | void main() {
19 |   vUv = uv;
20 |   worldPos = modelMatrix*vec4( position, 0. );
21 |   vNormal = normalMatrix * normal;
22 |   vDir = dot(normalize(vNormal), -normalize((modelViewMatrix * vec4( position, 1. )).xyz));
23 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );
24 | }`;
25 | 
26 | export { vs };


--------------------------------------------------------------------------------
/loops/243/depth-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | varying float vDot;
 5 | varying vec3 vNormal;
 6 | varying float light;
 7 | 
 8 | void main() {
 9 |   float far = 5.;
10 |   float near = .1;
11 |   float z = gl_FragCoord.z;
12 |   float ndcZ = 2.0*z - 1.0;
13 |   float linearDepth = (2.0 * near * far) / (far + near - ndcZ * (far - near));
14 |   gl_FragColor = vec4(linearDepth,vDot,light,1.);
15 | }
16 | `;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/243/depth-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelMatrix;
 9 | uniform mat4 modelViewMatrix;
10 | uniform mat4 projectionMatrix;
11 | uniform mat3 normalMatrix;
12 | 
13 | varying float vDot;
14 | varying vec3 vNormal;
15 | varying float light;
16 | 
17 | void main() {
18 |   vec4 p = vec4( position, 1. );
19 | 
20 |   vec3 e = normalize( -vec3( modelViewMatrix * p ) );
21 |   vec3 n = normalize( normalMatrix * normal );
22 |   vDot = dot(e,n);
23 |   vNormal = n;
24 | 
25 |   light = dot(n,normalize(vec3(1.,1.,1.)));
26 |   gl_Position = projectionMatrix * modelViewMatrix * p;
27 | }`;
28 | 
29 | export { vs };


--------------------------------------------------------------------------------
/loops/245/backdrop-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform vec3 brightColor;
 5 | uniform vec3 darkColor;
 6 | 
 7 | varying vec2 vUv;
 8 | 
 9 | void main() {
10 |   float c = smoothstep(.45, .55, .5 + .5 * sin(vUv.y * 100.));
11 |   gl_FragColor = vec4(mix(brightColor/255., darkColor/255., c),1.);
12 | }
13 | `;
14 | 
15 | export { fs };


--------------------------------------------------------------------------------
/loops/245/backdrop-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelMatrix;
 8 | uniform mat4 modelViewMatrix;
 9 | uniform mat4 projectionMatrix;
10 | uniform mat3 normalMatrix;
11 | 
12 | varying vec2 vUv;
13 | 
14 | void main() {
15 |   vec4 p = vec4( position, 1. );
16 |   vUv = uv;
17 |   gl_Position = projectionMatrix * modelViewMatrix * p;
18 | }`;
19 | 
20 | export { vs };


--------------------------------------------------------------------------------
/loops/245/shockwave-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | #define M_PI 3.1415926535897932384626433832795
 5 | 
 6 | varying vec3 vNormal;
 7 | 
 8 | void main() {
 9 |   gl_FragColor = vec4(.5+.5*vNormal,1.);
10 | }
11 | `;
12 | 
13 | export { fs };


--------------------------------------------------------------------------------
/loops/245/shockwave-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelMatrix;
 9 | uniform mat4 modelViewMatrix;
10 | uniform mat4 projectionMatrix;
11 | uniform mat3 normalMatrix;
12 | 
13 | uniform float frequency;
14 | uniform float time;
15 | 
16 | varying vec3 vNormal;
17 | varying vec2 vUv;
18 | 
19 | float calcOffset(vec2 p, float amplitude) {
20 |   return amplitude + amplitude *sin(20.*length(p.xy)-frequency*time);
21 | }
22 | 
23 | void main() {
24 |   vec4 p = vec4( position, 1. );
25 |   vUv = uv;
26 |   float e = .0001;
27 |   float amplitude = .1 / ( 1.+.1*length(p.xy));
28 |   float offset = calcOffset(position.xy,amplitude);
29 |   float offset1 = calcOffset(position.xy+vec2(e,0.), amplitude);
30 |   float offset2 = calcOffset(position.xy+vec2(0.,e), amplitude);
31 |   vec3 n = vec3(offset-offset1, offset-offset2, e);
32 |   vNormal = normalize(n);
33 |   p.z += offset;
34 |   gl_Position = projectionMatrix * modelViewMatrix * p;
35 | }`;
36 | 
37 | export { vs };


--------------------------------------------------------------------------------
/loops/245/test_DefaultMaterial_Diffuse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/245/test_DefaultMaterial_Diffuse.jpg


--------------------------------------------------------------------------------
/loops/245/test_DefaultMaterial_Glossiness.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/245/test_DefaultMaterial_Glossiness.jpg


--------------------------------------------------------------------------------
/loops/245/test_DefaultMaterial_Height.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/245/test_DefaultMaterial_Height.jpg


--------------------------------------------------------------------------------
/loops/245/test_DefaultMaterial_Normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/245/test_DefaultMaterial_Normal.jpg


--------------------------------------------------------------------------------
/loops/245/test_DefaultMaterial_Reflection.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/245/test_DefaultMaterial_Reflection.jpg


--------------------------------------------------------------------------------
/loops/245/test_DefaultMaterial_ior.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/245/test_DefaultMaterial_ior.jpg


--------------------------------------------------------------------------------
/loops/246/points-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D texture;
 5 | uniform float isParticle;
 6 | 
 7 | varying float vDepth;
 8 | varying float vColor;
 9 | 
10 | void main() {
11 |   float d = 2.*clamp(length(.5-gl_PointCoord.xy),0.,1.);
12 |   if(d>1.) {
13 |     discard;
14 |   }
15 |     d = 1.-smoothstep(.5-.5*vDepth,.5+.5*vDepth, d);
16 |   if(isParticle==1.){
17 |     gl_FragColor.rgb = vec3(vColor + .2);
18 |   } else {
19 |     gl_FragColor.rgb = vec3(vColor);
20 |   }
21 |   gl_FragColor.a = d;
22 | }`;
23 | 
24 | export { fs };


--------------------------------------------------------------------------------
/loops/246/points-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute float color;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | uniform float size;
12 | 
13 | varying float vDepth;
14 | varying float vColor;
15 | 
16 | void main() {
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
18 |   float l = length(cameraPosition);
19 |   vDepth = abs(-mvPosition.z-l) / abs(l);
20 |   vDepth = .1+ .9*vDepth;
21 |   float fog = 1.-.2*(abs(-mvPosition.z) / l);
22 |   vColor = .1* color*fog;
23 |   gl_PointSize = exp(vDepth) * size * ( 300.0 / -mvPosition.z );
24 |   gl_Position = projectionMatrix * mvPosition;
25 | }
26 | `;
27 | 
28 | export { vs };


--------------------------------------------------------------------------------
/loops/247/positions-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform float showNormals;
 5 | 
 6 | varying vec4 vColor;
 7 | 
 8 | void main() {
 9 |   if(showNormals == 1.) {
10 |     gl_FragColor = vColor;
11 |   } else {
12 |     gl_FragColor = vec4(.5 + vColor.rgb, 1.);
13 | }
14 | }`;
15 | 
16 | export { fs };


--------------------------------------------------------------------------------
/loops/247/positions-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform mat4 modelMatrix;
10 | uniform mat3 normalMatrix;
11 | 
12 | uniform float showNormals;
13 | 
14 | varying vec4 vColor;
15 | 
16 | void main() {
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
18 |   if(showNormals==1.) {
19 |     vColor.rgb = normal;
20 |   } else {
21 |     vColor.xyz = position.xyz;
22 |   }
23 |   gl_Position = projectionMatrix * mvPosition;
24 | }
25 | `;
26 | 
27 | export { vs };


--------------------------------------------------------------------------------
/loops/247/water-fs.js:
--------------------------------------------------------------------------------
 1 | import noise3d from '../../shaders/noise3d.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D backTexture;
 7 | uniform sampler2D frontTexture;
 8 | uniform sampler2D normalsTexture;
 9 | uniform sampler2D colorTexture;
10 | 
11 | uniform float time;
12 | 
13 | varying vec2 vUv;
14 | 
15 | ${noise3d}
16 | 
17 | float map( in vec3 p ){
18 |   vec3 q = p;//p - vec3(0.0,0.1,1.0)*iTime;
19 |   float f;
20 |     f  = 0.50000*noise3d( q );
21 |     q = q*2.02;
22 |     f += 0.25000*noise3d( q );
23 |   return f;
24 | }
25 | 
26 | #define MAX 200
27 | 
28 | void main() {
29 |   vec3 lightColor = vec3(41.,86.,80.)/255.;
30 |   vec3 darkColor = vec3(32.,37.,42.)/255.;
31 | 
32 |   vec4 normal = texture2D(normalsTexture, vUv);
33 |   vec4 back = texture2D(backTexture,vUv);
34 |   vec4 front = texture2D(frontTexture,vUv);
35 |   vec3 dir = back.xyz-front.xyz;
36 |   float ld = length(dir);
37 |   dir = refract(dir,normalize(normal.xyz), .8);
38 |   float d = length(dir);
39 |   dir = normalize(dir);
40 |   float fSteps = 40. * d;
41 |   int steps = int(fSteps);
42 |   vec3 fStep = dir / fSteps;
43 |   float n = 0.;
44 |   vec3 p = back.xyz;
45 |   for(int i=0; i<MAX; i++){
46 |     if(i>steps || n>1.) {
47 |       break;
48 |     }
49 |     p = front.xyz + float(i) * fStep;
50 |     float v = clamp(map(1.5*p),0.,1.);
51 |     n += v/fSteps;
52 |   }
53 |   n *= 5.;
54 |   vec3 color = texture2D(colorTexture, vUv).xyz;
55 |   float mask = clamp(ld,0.,1.);
56 |   gl_FragColor.rgb = mix(darkColor,lightColor*n,mask);
57 |   gl_FragColor.rgb += color * back.a;
58 |   float rim = smoothstep(.5,1.,(1.-ld));
59 |   gl_FragColor.rgb += lightColor *rim * back.a;
60 |   gl_FragColor.rgb = mix(vec3(.3), gl_FragColor.rgb, back.a);
61 |   gl_FragColor.a = 1.;
62 | }`;
63 | 
64 | export { fs };


--------------------------------------------------------------------------------
/loops/248/combine-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D colorTexture;
 5 | uniform sampler2D shadeTexture;
 6 | 
 7 | varying vec2 vUv;
 8 | 
 9 | void main() {
10 |   vec4 c = texture2D(colorTexture, vUv);
11 |   vec4 s = texture2D(shadeTexture, vUv);
12 |   vec3 darkColor = vec3(13.,10.,8.)/255.;
13 |   vec3 lightColor = vec3(170.,116.,70.)/255.;
14 |   vec3 color = mix(darkColor,lightColor,c.r*c.b+smoothstep(.25,.75,c.b));
15 |   vec3 backgroundColor = vec3(47.,49.,50.)/255.;
16 |   gl_FragColor.rgb = vec3(color*s.r)+ vec3(.5*(1.-.99*c.g)*c.a);
17 |   gl_FragColor.rgb = mix(backgroundColor ,gl_FragColor.rgb, smoothstep(.2,.8,c.a));
18 |   gl_FragColor.a = 1.;
19 | }`;
20 | 
21 | export { fs };


--------------------------------------------------------------------------------
/loops/248/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(9./255.), vec3(1.04), vec3(173./255.)),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/248/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import colorDodge from '../../shaders/color-dodge.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${colorDodge}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
24 |   gl_FragColor = finalColor;
25 | }
26 | `;
27 | 
28 | export { fs };


--------------------------------------------------------------------------------
/loops/248/hair-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D noiseTexture;
 5 | uniform float level;
 6 | 
 7 | varying vec4 vColor;
 8 | varying vec2 vUv;
 9 | varying vec3 vPosition;
10 | 
11 | void main() {
12 |   vec4 c = texture2D(noiseTexture, vUv);
13 |   float f = c.r;
14 |   if(f>level) {
15 |     gl_FragColor = vec4(f,length(vPosition),c.g,f-level);
16 |   } else {
17 |     discard;
18 |   }
19 | }`;
20 | 
21 | export { fs };


--------------------------------------------------------------------------------
/loops/248/hair-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelViewMatrix;
 9 | uniform mat4 projectionMatrix;
10 | uniform mat4 modelMatrix;
11 | uniform mat3 normalMatrix;
12 | 
13 | varying vec4 vColor;
14 | varying vec2 vUv;
15 | varying vec3 vPosition;
16 | 
17 | void main() {
18 |   vUv = uv;
19 |   vPosition = .5 + .5*position;
20 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
21 |   gl_Position = projectionMatrix * mvPosition;
22 | }
23 | `;
24 | 
25 | export { vs };


--------------------------------------------------------------------------------
/loops/249/bkg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/bkg.jpg


--------------------------------------------------------------------------------
/loops/249/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/249/combine-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D colorTexture;
 5 | uniform sampler2D blur1Texture;
 6 | uniform sampler2D blur2Texture;
 7 | 
 8 | varying vec2 vUv;
 9 | 
10 | void main() {
11 |   vec4 c = texture2D(colorTexture, vUv);
12 |   vec4 b1 = texture2D(blur1Texture, vUv);
13 |   vec4 b2 = texture2D(blur2Texture, vUv);
14 |   gl_FragColor = mix(b1,c+.5*b2,c.a);
15 | }`;
16 | 
17 | export { fs };


--------------------------------------------------------------------------------
/loops/249/diffuse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/diffuse.jpg


--------------------------------------------------------------------------------
/loops/249/diffuse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/diffuse.png


--------------------------------------------------------------------------------
/loops/249/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(8.,13.,8.)/255., vec3(1.0), vec3(147.,164.,223.)/255.),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/249/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import colorDodge from '../../shaders/color-dodge.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${colorDodge}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
24 |   gl_FragColor = finalColor;
25 | }
26 | `;
27 | 
28 | export { fs };


--------------------------------------------------------------------------------
/loops/249/normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/normal.jpg


--------------------------------------------------------------------------------
/loops/249/occlusion.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/occlusion.jpg


--------------------------------------------------------------------------------
/loops/249/opacity.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/opacity.jpg


--------------------------------------------------------------------------------
/loops/249/roughness.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/249/roughness.jpg


--------------------------------------------------------------------------------
/loops/250/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(12.)/255., vec3(1.18), vec3(217.)/255.),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/250/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import colorDodge from '../../shaders/color-dodge.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${colorDodge}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
24 |   gl_FragColor = finalColor;
25 | }
26 | `;
27 | 
28 | export { fs };


--------------------------------------------------------------------------------
/loops/250/stripes-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | varying vec3 vPosition;
 5 | 
 6 | void main() {
 7 |   float y = smoothstep(.45,.55,.5 + .5 * sin(.75*vPosition.y));
 8 |   gl_FragColor = vec4(y,y,y,1.);
 9 | }`;
10 | 
11 | export { fs };


--------------------------------------------------------------------------------
/loops/250/stripes-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform mat4 modelMatrix;
10 | uniform mat3 normalMatrix;
11 | 
12 | varying vec3 vPosition;
13 | 
14 | void main() {
15 |   vPosition = position;
16 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
17 |   gl_Position = projectionMatrix * mvPosition;
18 | }
19 | `;
20 | 
21 | export { vs };


--------------------------------------------------------------------------------
/loops/251/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(12.)/255., vec3(1.18), vec3(217.)/255.),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/251/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import colorDodge from '../../shaders/color-dodge.js';
 5 | import ditherNoise from '../../shaders/dither-noise.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${fxaa}
19 | ${softLight}
20 | ${colorDodge}
21 | ${ditherNoise}
22 | 
23 | void main() {
24 |   vec4 color = fxaa(inputTexture, vUv);
25 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
26 |   float n =ditherNoise(vUv,0.);
27 |   finalColor = softLight(finalColor, vec4(.5+.001*n)) + .01*n;
28 |   gl_FragColor = finalColor;
29 | }
30 | `;
31 | 
32 | export { fs };


--------------------------------------------------------------------------------
/loops/251/volumetric-cone-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform float maxDistance;
 5 | uniform vec3 color;
 6 | uniform float strength;
 7 | uniform float spread;
 8 | 
 9 | varying float vFalloff;
10 | varying vec3 e;
11 | varying vec3 n;
12 | 
13 | void main() {
14 |   float softEdge = pow(abs(dot(normalize(e), normalize(n))),spread);
15 |   float opacity =vFalloff*softEdge;
16 |   gl_FragColor = vec4(color,strength * opacity);
17 | }`;
18 | 
19 | export { fs };


--------------------------------------------------------------------------------
/loops/251/volumetric-cone-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform mat4 modelMatrix;
10 | uniform mat3 normalMatrix;
11 | uniform float maxDistance;
12 | 
13 | varying vec3 e;
14 | varying vec3 n;
15 | varying float vFalloff;
16 | 
17 | void main() {
18 |   vFalloff =1.- length(position)/maxDistance;
19 |   vec3 direction = normalMatrix * vec3(0.,1.,0.);
20 |   e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
21 |   n = normalize( normalMatrix * normal );
22 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
23 |   gl_Position = projectionMatrix * mvPosition;
24 | }
25 | `;
26 | 
27 | export { vs };


--------------------------------------------------------------------------------
/loops/251/volumetric-glow-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform vec3 color;
 5 | uniform float strength;
 6 | 
 7 | varying float vRim;
 8 | 
 9 | void main() {
10 |   gl_FragColor = vec4(color, strength * vRim);
11 | }`;
12 | 
13 | export { fs };


--------------------------------------------------------------------------------
/loops/251/volumetric-glow-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform mat4 modelMatrix;
10 | uniform mat3 normalMatrix;
11 | 
12 | uniform float spread;
13 | 
14 | varying float vRim;
15 | 
16 | void main() {
17 |   vec3 e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
18 |   vec3 n = normalize( normalMatrix * normal );
19 |   vRim = 50.*position.z * pow(abs(dot(e,n)),spread);
20 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
21 |   gl_Position = projectionMatrix * mvPosition;
22 | }
23 | `;
24 | 
25 | export { vs };


--------------------------------------------------------------------------------
/loops/252/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/252/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D colorTexture;
 7 | uniform sampler2D blurTexture;
 8 | 
 9 | varying vec2 vUv;
10 | 
11 | ${screen}
12 | 
13 | void main() {
14 |   vec4 c = texture2D(colorTexture, vUv);
15 |   vec4 b = texture2D(blurTexture, vUv);
16 |   gl_FragColor = screen(c,b*c.a,1.) + vec4(51.,42., 33., 255.)/128.*(1.-c.a);
17 | }`;
18 | 
19 | export { fs };


--------------------------------------------------------------------------------
/loops/252/diffuse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/252/diffuse.jpg


--------------------------------------------------------------------------------
/loops/252/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(10.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(13.)/255., vec3(1.), vec3(255.)/255.),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/252/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import colorDodge from '../../shaders/color-dodge.js';
 5 | import ditherNoise from '../../shaders/dither-noise.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${fxaa}
19 | ${softLight}
20 | ${colorDodge}
21 | ${ditherNoise}
22 | 
23 | void main() {
24 |   vec4 color = fxaa(inputTexture, vUv);
25 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
26 |   float n =ditherNoise(vUv,0.);
27 |   finalColor = softLight(finalColor, vec4(.5+.001*n)) + .01*n;
28 |   gl_FragColor = finalColor;
29 | }
30 | `;
31 | 
32 | export { fs };


--------------------------------------------------------------------------------
/loops/252/normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/252/normal.jpg


--------------------------------------------------------------------------------
/loops/253/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/253/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | import vignette from '../../shaders/vignette.js';
 3 | import fxaa from '../../shaders/fxaa.js';
 4 | import softLight from '../../shaders/soft-light.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform sampler2D backTexture;
10 | uniform sampler2D glowTexture;
11 | uniform sampler2D blur1Texture;
12 | uniform sampler2D blur2Texture;
13 | uniform sampler2D blur3Texture;
14 | uniform sampler2D blur4Texture;
15 | uniform sampler2D blur5Texture;
16 | uniform sampler2D discTexture;
17 | uniform vec2 resolution;
18 | uniform float vignetteBoost;
19 | uniform float vignetteReduction;
20 | 
21 | varying vec2 vUv;
22 | 
23 | ${screen}
24 | ${vignette}
25 | ${fxaa}
26 | ${softLight}
27 | 
28 | void main() {
29 |   vec4 b = texture2D(backTexture, vUv);
30 |   vec4 g = texture2D(glowTexture, vUv);
31 |   vec4 d = fxaa(discTexture, vUv);
32 | 
33 |   vec4 bloom = vec4(0.);
34 |   bloom += 1. * texture2D( blur1Texture, vUv );
35 |   bloom += 1.2 * texture2D( blur2Texture, vUv );
36 |   bloom += 1.4 * texture2D( blur3Texture, vUv );
37 |   bloom += 1.6 * texture2D( blur4Texture, vUv );
38 |   bloom += 1.8 * texture2D( blur5Texture, vUv );
39 | 
40 |   vec3 c1 = vec3(0.9,0.33,0.1);
41 |   vec3 c2 = vec3(1.0,0.8,0.7);
42 |   vec3 dcol = mix(c2,c1,d.r);
43 | 
44 |   vec4 c = vec4(dcol, 1.) * d.g ;
45 |   vec4 color = clamp((b*(1.-d.a)+c) +1.* g + 1.*.5*bloom.r,vec4(0.), vec4(1.));
46 |   vec4 finalColor =  softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
47 | 
48 |   gl_FragColor = screen(finalColor,finalColor,1.);
49 | }`;
50 | 
51 | export { fs };


--------------------------------------------------------------------------------
/loops/253/disc-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D noiseTexture;
 5 | uniform float repeat;
 6 | uniform float time;
 7 | uniform float opacity;
 8 | 
 9 | varying vec2 vUv;
10 | varying float d;
11 | 
12 | void main() {
13 |   vec4 c = texture2D(noiseTexture, vUv * vec2(1.,repeat) + vec2(time,0.));
14 |   vec4 c2 = texture2D(noiseTexture, vUv * vec2(1.,2.*repeat) + vec2(3.*time,0.));
15 |   vec4 c3 = texture2D(noiseTexture, vUv * vec2(1.,.5*repeat) + vec2(2.*time,0.));
16 |   gl_FragColor = vec4(d+c.rgb, c.r*d);
17 |   gl_FragColor.g = c2.g;
18 |   gl_FragColor.b = c3.r;
19 |   gl_FragColor.rgb *= opacity;
20 | }`;
21 | 
22 | export { fs };


--------------------------------------------------------------------------------
/loops/253/disc-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform float max;
 9 | uniform float radius;
10 | 
11 | uniform mat4 modelViewMatrix;
12 | uniform mat4 projectionMatrix;
13 | uniform mat4 modelMatrix;
14 | uniform mat3 normalMatrix;
15 | 
16 | varying vec2 vUv;
17 | varying float d;
18 | 
19 | void main() {
20 |   vUv = uv;
21 |   d = 1.-pow((length(position)-radius)/max,.5);
22 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
23 |   gl_Position = projectionMatrix * mvPosition;
24 | }
25 | `;
26 | 
27 | export { vs };


--------------------------------------------------------------------------------
/loops/253/dust.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/253/dust.png


--------------------------------------------------------------------------------
/loops/253/glow-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform float max;
 5 | 
 6 | varying vec3 vPosition;
 7 | 
 8 | void main() {
 9 |   float d = clamp(1.-length(vPosition)/max,0.,1.);
10 |   d = pow(d,2.);
11 |   gl_FragColor = vec4(1.,1.,1.,d);
12 | }`;
13 | 
14 | export { fs };


--------------------------------------------------------------------------------
/loops/253/glow-vs.js:
--------------------------------------------------------------------------------
 1 |   const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelViewMatrix;
 9 | uniform mat4 projectionMatrix;
10 | uniform mat4 modelMatrix;
11 | uniform mat3 normalMatrix;
12 | 
13 | varying vec3 vPosition;
14 | 
15 | void main() {
16 |   vPosition = position;
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
18 |   gl_Position = projectionMatrix * mvPosition;
19 | }
20 | `;
21 | 
22 |   export { vs };


--------------------------------------------------------------------------------
/loops/253/stars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/253/stars.jpg


--------------------------------------------------------------------------------
/loops/253/swirl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/253/swirl.jpg


--------------------------------------------------------------------------------
/loops/253/torus-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D spaceTexture;
 5 | 
 6 | varying float rim;
 7 | varying vec3 e;
 8 | varying vec3 n;
 9 | varying vec3 vRefract;
10 | 
11 | #define PI 3.1415926535897932384626433832795
12 | 
13 | void main() {
14 |   float yaw = .5 - atan( vRefract.z, - vRefract.x ) / ( 2.0 * PI );
15 |   float pitch = .5 - asin( vRefract.y ) / PI;
16 |   vec3 envColor = texture2D( spaceTexture, vec2( 1.-yaw, 1.-pitch ) ).rgb;
17 | 
18 |   gl_FragColor = vec4(rim*envColor.xyz,1.5*rim);
19 | }`;
20 | 
21 | export { fs };


--------------------------------------------------------------------------------
/loops/253/torus-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform mat4 modelMatrix;
10 | uniform mat3 normalMatrix;
11 | uniform vec3 cameraPosition;
12 | 
13 | varying vec3 e;
14 | varying vec3 n;
15 | varying vec3 vRefract;
16 | varying float rim;
17 | 
18 | void main() {
19 |   e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
20 |   n = normalize( normalMatrix * normal );
21 |   rim = pow(abs(dot(e,n)),2.);
22 |   vec4 mPosition = modelMatrix * vec4( position, 1.0 );
23 |   vec3 nWorld = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
24 |   vRefract = normalize( refract( normalize( mPosition.xyz - cameraPosition ), nWorld, .5 ) );
25 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
26 |   gl_Position = projectionMatrix * mvPosition;
27 | }
28 | `;
29 | 
30 | export { vs };


--------------------------------------------------------------------------------
/loops/254/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/254/coffee-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D envTexture;
 5 | 
 6 | varying float rim;
 7 | varying vec3 e;
 8 | varying vec3 n;
 9 | varying vec3 vRefract;
10 | varying vec3 vReflect;
11 | varying float vDepth;
12 | 
13 | #define PI 3.1415926535897932384626433832795
14 | 
15 | void main() {
16 |   vec3 baseColor = vec3(27.,14.,2.)/255.;
17 |   float yaw = .5 - atan( vReflect.z, - vReflect.x ) / ( 2.0 * PI );
18 |   float pitch = .5 - asin( vReflect.y ) / PI;
19 |   vec3 envColor = texture2D( envTexture, vec2( 1.-yaw, 1.-pitch ) ).rgb;
20 | 
21 |   yaw = .5 - atan( vRefract.z, - vRefract.x ) / ( 2.0 * PI );
22 |   pitch = .5 - asin( vRefract.y ) / PI;
23 |   vec3 refColor = texture2D( envTexture, vec2( 1.-yaw, 1.-pitch ) ).rgb;
24 | 
25 |   vec3 env = pow(rim,2.) * smoothstep(vec3(.9),vec3(1.),envColor);
26 |   vec3 ref = pow(1.-rim,2.) * smoothstep(vec3(.9),vec3(1.),refColor);
27 |   vec3 color = baseColor + .3*vDepth * baseColor + pow(rim,1.)*baseColor + pow(1.-rim,3.) * vec3(.1,0.,0.) + env  + ref;
28 |   color *= .75 + .25*vDepth;
29 |   color += clamp(smoothstep(vec3(.45),vec3(.55),envColor * pow(rim,20.)), vec3(0.), vec3(1.));
30 |   color += .125*vDepth;
31 | 
32 |   gl_FragColor = vec4(color, 1.);
33 | }`;
34 | 
35 | export { fs };


--------------------------------------------------------------------------------
/loops/254/coffee-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform mat4 modelMatrix;
10 | uniform mat3 normalMatrix;
11 | uniform vec3 cameraPosition;
12 | 
13 | varying vec3 e;
14 | varying vec3 n;
15 | varying vec3 vRefract;
16 | varying vec3 vReflect;
17 | varying float rim;
18 | varying float vDepth;
19 | 
20 | void main() {
21 |   e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
22 |   n = normalize( normalMatrix * normal );
23 |   rim = pow(abs(dot(e,n)),2.);
24 |   vec4 mPosition = modelMatrix * vec4( position, 1.0 );
25 |   vec3 nWorld = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
26 |   vRefract = normalize( refract( normalize( mPosition.xyz - cameraPosition ), nWorld, .5 ) );
27 |   vReflect = normalize( reflect( normalize( mPosition.xyz - cameraPosition ), nWorld) );
28 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
29 | 
30 |   float l = .5*length(cameraPosition);
31 |   vDepth = clamp(1.-(-mvPosition.z-l) / l,0.,1.);
32 | 
33 |   gl_Position = projectionMatrix * mvPosition;
34 | }
35 | `;
36 | 
37 | export { vs };


--------------------------------------------------------------------------------
/loops/254/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D liquidTexture;
 7 | uniform sampler2D blur1Texture;
 8 | uniform sampler2D blur2Texture;
 9 | uniform sampler2D blur3Texture;
10 | uniform sampler2D blur4Texture;
11 | uniform sampler2D blur5Texture;
12 | uniform sampler2D shadeTexture;
13 | 
14 | varying vec2 vUv;
15 | 
16 | ${screen}
17 | 
18 | void main() {
19 |   vec4 g = texture2D(liquidTexture, vUv);
20 |   vec4 d = texture2D(shadeTexture, vUv);
21 | 
22 |   vec4 bloom = vec4(0.);
23 |   bloom += 1. * texture2D( blur1Texture, vUv );
24 |   bloom += 1.2 * texture2D( blur2Texture, vUv );
25 |   bloom += 1.4 * texture2D( blur3Texture, vUv );
26 |   bloom += 1.6 * texture2D( blur4Texture, vUv );
27 |   bloom += 1.8 * texture2D( blur5Texture, vUv );
28 | 
29 |   vec4 c = (g*d)+.5*bloom;
30 |   c = screen(c,c,.5);
31 |   c = screen(c,vec4(200.,77.,0.,1.)/255.,.25);
32 |   gl_FragColor = mix(c,vec4(.5),1.-g.a);
33 | }`;
34 | 
35 | export { fs };


--------------------------------------------------------------------------------
/loops/254/envmap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/254/envmap.jpg


--------------------------------------------------------------------------------
/loops/254/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import screen from '../../shaders/screen.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${screen}
14 | 
15 | void main() {
16 |   vec4 color  = rgbShift(inputTexture, vUv, vec2(40.));
17 |   color = screen(color, color, 1.);
18 |   gl_FragColor = color;
19 | }
20 | `;
21 | 
22 | export { fs };


--------------------------------------------------------------------------------
/loops/254/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${gammaCorrect}
20 | ${levelRange}
21 | ${finalLevels}
22 | 
23 | void main() {
24 |   vec4 color = fxaa(inputTexture, vUv);
25 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
26 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(61.,23.,1.)/255., vec3(1.0), vec3(254.)/255.);
27 |   gl_FragColor = finalColor;
28 | }
29 | `;
30 | 
31 | export { fs };


--------------------------------------------------------------------------------
/loops/254/highlight-fs.js:
--------------------------------------------------------------------------------
 1 | import grayscale from '../../shaders/grayscale.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D shadeTexture;
 7 | uniform sampler2D liquidTexture;
 8 | 
 9 | varying vec2 vUv;
10 | 
11 | ${grayscale}
12 | 
13 | void main() {
14 |   vec4 s = texture2D(shadeTexture, vUv);
15 |   vec4 l = texture2D(liquidTexture, vUv);
16 |   gl_FragColor = clamp((s*l) - vec4(.75), vec4(0.), vec4(1.))*3.;
17 |   gl_FragColor.rgb = vec3(grayscale(gl_FragColor));
18 | }`;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/255/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/255/explosion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/255/explosion.png


--------------------------------------------------------------------------------
/loops/255/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import screen from '../../shaders/screen.js';
 3 | import radialBlur from '../../shaders/radial-blur.js';
 4 | 
 5 | const fs = `
 6 | precision highp float;
 7 | 
 8 | uniform vec2 resolution;
 9 | 
10 | uniform sampler2D inputTexture;
11 | 
12 | varying vec2 vUv;
13 | ${rgbShift}
14 | ${screen}
15 | ${radialBlur}
16 | 
17 | void main() {
18 |   vec4 rBlur = radialBlur(inputTexture,vec2(.5)*resolution,1.,resolution, vUv);
19 |   vec4 color  = rgbShift(inputTexture, vUv, vec2(40.));
20 |   color = screen(color, rBlur,1.);
21 |   gl_FragColor = color;
22 | }
23 | `;
24 | 
25 | export { fs };


--------------------------------------------------------------------------------
/loops/255/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 6 | import radialBlur from '../../shaders/radial-blur.js';
 7 | 
 8 | const fs = `
 9 | precision highp float;
10 | 
11 | uniform vec2 resolution;
12 | 
13 | uniform sampler2D blur1Texture;
14 | uniform sampler2D blur2Texture;
15 | uniform sampler2D blur3Texture;
16 | uniform sampler2D blur4Texture;
17 | uniform sampler2D blur5Texture;
18 | 
19 | uniform sampler2D inputTexture;
20 | uniform float vignetteBoost;
21 | uniform float vignetteReduction;
22 | 
23 | varying vec2 vUv;
24 | ${vignette}
25 | ${fxaa}
26 | ${softLight}
27 | ${screen}
28 | ${gammaCorrect}
29 | ${levelRange}
30 | ${finalLevels}
31 | ${radialBlur}
32 | 
33 | void main() {
34 |   vec4 color = fxaa(inputTexture, vUv);
35 |   color.rgb = mix(vec3(.2,.1,.05), color.rgb, color.a);
36 | 
37 |   vec4 bloom = vec4(0.);
38 |   bloom += 1. * texture2D( blur1Texture, vUv );
39 |   bloom += 1.2 * texture2D( blur2Texture, vUv );
40 |   bloom += 1.4 * texture2D( blur3Texture, vUv );
41 |   bloom += 1.6 * texture2D( blur4Texture, vUv );
42 |   bloom += 1.8 * texture2D( blur5Texture, vUv );
43 | 
44 |   color += .5*bloom;
45 | 
46 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
47 |   //finalColor = screen(finalColor, rBlur,.5);
48 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(21./255.), vec3(1.), vec3(1.));
49 |   finalColor = screen(finalColor,finalColor,1.);
50 |   gl_FragColor = finalColor;
51 | }
52 | `;
53 | 
54 | export { fs };


--------------------------------------------------------------------------------
/loops/255/fire-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D gradientTexture;
 5 | uniform float time;
 6 | 
 7 | varying vec2 vUv;
 8 | varying vec3 vWorldPos;
 9 | varying float vDisplacement;
10 | varying float vDepth;
11 | 
12 | void main() {
13 |   float y = clamp(.4+.05*vDisplacement, 0.,1.);
14 |   vec4 c = texture2D(gradientTexture, vec2(.5,y));
15 |   c *= smoothstep(.13,.6,y);
16 |   float a = smoothstep(.45,.55,.4+.05*vDisplacement);
17 |   gl_FragColor = vec4(c.rgb+.25*vDepth,1.);
18 | }`;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/255/highlight-fs.js:
--------------------------------------------------------------------------------
 1 | import grayscale from '../../shaders/grayscale.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D inputTexture;
 7 | 
 8 | varying vec2 vUv;
 9 | 
10 | ${grayscale}
11 | 
12 | void main() {
13 |   vec4 c = texture2D(inputTexture, vUv);
14 |   c = clamp(c - vec4(.5), vec4(0.), vec4(1.))*1.;
15 |   float g = grayscale(c);
16 |   g = smoothstep(.3,.6,g);
17 |   gl_FragColor.rgb = vec3(g);
18 | }`;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/256/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import screen from '../../shaders/screen.js';
 3 | import radialBlur from '../../shaders/radial-blur.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | 
13 | varying vec2 vUv;
14 | ${rgbShift}
15 | ${screen}
16 | ${radialBlur}
17 | ${gammaCorrect}
18 | ${levelRange}
19 | ${finalLevels}
20 | 
21 | void main() {
22 |   vec4 rBlur = radialBlur(inputTexture,vec2(.5)*resolution,1.,resolution, vUv);
23 |   vec4 color = rgbShift(inputTexture, vUv, vec2(40.));
24 |   color = screen(color, rBlur,.5);
25 |   color.rgb = finalLevels(color.rgb, vec3(64.,0.,0.)/255., vec3(1.), vec3(1.));
26 |   gl_FragColor = color;
27 | }
28 | `;
29 | 
30 | export { fs };


--------------------------------------------------------------------------------
/loops/256/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 6 | import radialBlur from '../../shaders/radial-blur.js';
 7 | 
 8 | const fs = `
 9 | precision highp float;
10 | 
11 | uniform vec2 resolution;
12 | 
13 | uniform sampler2D inputTexture;
14 | uniform sampler2D starsTexture;
15 | uniform float vignetteBoost;
16 | uniform float vignetteReduction;
17 | 
18 | varying vec2 vUv;
19 | ${vignette}
20 | ${fxaa}
21 | ${softLight}
22 | ${screen}
23 | ${gammaCorrect}
24 | ${levelRange}
25 | ${finalLevels}
26 | ${radialBlur}
27 | 
28 | void main() {
29 |   vec4 color = texture2D(inputTexture,vUv);
30 |   vec4 stars = texture2D(starsTexture,vUv);
31 |   vec4 rBlur = radialBlur(inputTexture,vec2(.5)*resolution,1.,resolution,vUv);
32 |   color = screen(color, rBlur,.5);
33 |   vec4 finalColor = screen(color, stars,1.);
34 |   gl_FragColor = finalColor;
35 | }
36 | `;
37 | 
38 | export { fs };


--------------------------------------------------------------------------------
/loops/256/star-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform float time;
 5 | uniform float time2;
 6 | 
 7 | varying vec2 vUv;
 8 | varying vec3 vWorldPos;
 9 | varying float vDisplacement;
10 | varying float vDepth;
11 | 
12 | float snoise(vec3 uv, float res)
13 | {
14 |   const vec3 s = vec3(1e0, 1e2, 1e3);
15 | 
16 |   uv *= res;
17 | 
18 |   vec3 uv0 = floor(mod(uv, res))*s;
19 |   vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;
20 | 
21 |   vec3 f = fract(uv); f = f*f*(3.0-2.0*f);
22 | 
23 |   vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,
24 |               uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);
25 | 
26 |   vec4 r = fract(sin(v*1e-1)*1e3);
27 |   float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
28 | 
29 |   r = fract(sin((v + uv1.z - uv0.z)*1e-1)*1e3);
30 |   float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
31 | 
32 |   return mix(r0, r1, f.z)*2.-1.;
33 | }
34 | 
35 | #define PI 3.1415926535897932384626433832795
36 | 
37 | float level(vec2 uv, float scale, float t) {
38 |   vec2 p = -.5 + uv;
39 |   p *= scale;
40 | 
41 |   float color = 1.0 - (1.*length(2.*p));
42 | 
43 |   vec3 coord = vec3(atan(p.x,p.y)/6.2832+.5, length(p)*.4, .5);
44 | 
45 |   for(int i = 1; i <= 6; i++)
46 |   {
47 |     float power = pow(2.0, float(i));
48 |     color += (2. / power) * snoise(coord + vec3(0.,-t*.05, t*.01), (power*16.));
49 |   }
50 |   return color;
51 | }
52 | 
53 | float parabola ( float x, float k ) {
54 |   return pow( 4. * x * ( 1. - x ), k );
55 | }
56 | 
57 | float levels(vec2 uv, float time, float flare, float gradient) {
58 |   float color = 10.*flare + gradient * level(vUv,1.,time) * (1.-level(vUv,2.,2.*time)) * (1.-level(vUv,3.,time));
59 |   color += .5*level(vUv,.5,2.*time);
60 |   return color;
61 | }
62 | 
63 | void main() {
64 | 
65 |   float gradient = 1.0 - (1.*length(-.5+vUv));
66 |   float flare = pow(gradient,40.);
67 |   float color1 = levels(vUv, time, flare, gradient);
68 |   float color2 = levels(vUv + vec2(23.,34.), time2, flare, gradient);
69 |   float f = parabola(time,2.);
70 |   float color = mix(color2, color1, f);
71 |   color *= (1.-length(-.5+vUv))/2.;
72 |   color /=1. + length(-.5+vUv);
73 |   gl_FragColor = vec4( color, pow(max(color,0.),2.)*0.4, pow(max(color,0.),3.)*0.15 , 1.0);
74 | 
75 | }`;
76 | 
77 | export { fs };


--------------------------------------------------------------------------------
/loops/256/star-vs.js:
--------------------------------------------------------------------------------
 1 | import noise3d from '../../shaders/noise3d.js';
 2 | 
 3 | const vs = `
 4 | precision highp float;
 5 | 
 6 | attribute vec3 position;
 7 | attribute vec3 normal;
 8 | attribute vec2 uv;
 9 | 
10 | uniform mat4 modelViewMatrix;
11 | uniform mat4 projectionMatrix;
12 | uniform mat4 modelMatrix;
13 | uniform mat3 normalMatrix;
14 | uniform vec3 cameraPosition;
15 | uniform float time;
16 | 
17 | varying vec2 vUv;
18 | 
19 | void main() {
20 |   vUv = uv;
21 | 
22 |   vec4 mvPosition = modelViewMatrix * vec4(position, 1.);
23 |   gl_Position = projectionMatrix * mvPosition;
24 | 
25 | }
26 | `;
27 | 
28 | export { vs };


--------------------------------------------------------------------------------
/loops/257/cave.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/257/cave.jpg


--------------------------------------------------------------------------------
/loops/257/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D jewelTexture;
 7 | uniform sampler2D depthTexture;
 8 | 
 9 | varying vec2 vUv;
10 | 
11 | ${screen}
12 | 
13 | void main() {
14 |   vec4 c = texture2D(jewelTexture, vUv);
15 |   vec4 d = texture2D(depthTexture, vUv);
16 |   vec4 tint = vec4(132.,204.,93.,255.)/255.;
17 |   vec4 tint2 = vec4(152.,224.,63.,255.)/255.;
18 |   vec4 color = c * tint;
19 |   color *= (.5+.5* d.r);
20 |   gl_FragColor = screen(color, tint2 *vec4(pow(d.g,6.))*d.a, 1.);
21 | }`;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/257/depth-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | varying float vDepth;
 5 | varying float vDepthCenter;
 6 | 
 7 | void main(){
 8 |   gl_FragColor = vec4( vDepth, vDepthCenter, 0., 1. );
 9 | }`;
10 | 
11 | export { fs };


--------------------------------------------------------------------------------
/loops/257/depth-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | 
 6 | uniform mat4 modelViewMatrix;
 7 | uniform mat4 projectionMatrix;
 8 | uniform vec3 cameraPosition;
 9 | 
10 | varying float vDepth;
11 | varying float vDepthCenter;
12 | 
13 | void main() {
14 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
15 |   gl_Position = projectionMatrix * mvPosition;
16 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
17 |   float l = length(cameraPosition);
18 |   vDepthCenter = pow(1.-abs(-mvPosition.z-l) / abs(l),2.);
19 | }
20 | `;
21 | 
22 | export { vs };


--------------------------------------------------------------------------------
/loops/257/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import screen from '../../shaders/screen.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${screen}
14 | 
15 | void main() {
16 |   vec4 color  = rgbShift(inputTexture, vUv, vec2(40.));
17 |   gl_FragColor = screen(color, color, 1.);
18 | }
19 | `;
20 | 
21 | export { fs };


--------------------------------------------------------------------------------
/loops/257/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 6 | import radialBlur from '../../shaders/radial-blur.js';
 7 | 
 8 | const fs = `
 9 | precision highp float;
10 | 
11 | uniform vec2 resolution;
12 | 
13 | uniform sampler2D inputTexture;
14 | uniform float vignetteBoost;
15 | uniform float vignetteReduction;
16 | 
17 | varying vec2 vUv;
18 | ${vignette}
19 | ${fxaa}
20 | ${softLight}
21 | ${screen}
22 | ${gammaCorrect}
23 | ${levelRange}
24 | ${finalLevels}
25 | ${radialBlur}
26 | 
27 | void main() {
28 |   vec4 color = texture2D(inputTexture, vUv);
29 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
30 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(38.,5.,0.)/255., vec3(1.,.96,1.08), vec3(216.,248.,239.)/255.);
31 |   finalColor = screen(finalColor,finalColor,1.);
32 |   gl_FragColor = finalColor;
33 | }
34 | `;
35 | 
36 | export { fs };


--------------------------------------------------------------------------------
/loops/258/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${fxaa}
19 | ${softLight}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
24 |   gl_FragColor = finalColor;
25 | }
26 | `;
27 | 
28 | export { fs };


--------------------------------------------------------------------------------
/loops/259/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${screen}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   float l = length(vUv - .5);
24 |   color.rgb = mix(color.rgb, vec3(229., 106., 77.)/255., clamp(smoothstep(.6,.8,l), 0., 1.));
25 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
26 |   vec4 finalColor = softLight(color, v);
27 |   finalColor = screen(finalColor,finalColor,1.);
28 |   gl_FragColor = finalColor;
29 | }
30 | `;
31 | 
32 | export { fs };


--------------------------------------------------------------------------------
/loops/26.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | 
 5 | const canvas = context.canvas;
 6 | 
 7 | const loopDuration = 4;
 8 | 
 9 | function drawSquare(size, range) {
10 | 
11 |   let sign = 1;
12 |   if (range>1) {
13 |     range = 1 - (range-1);
14 |     sign = -1;
15 |   }
16 | 
17 |   context.beginPath();
18 |   const r = .7*size;
19 |   for (let a=0; a<=(range)*2*Math.PI; a+=2*Math.PI/180) {
20 |     const x = Maf.clamp( r * Math.cos(sign*(a+(range)*2*Math.PI)),-.5*size, .5*size);
21 |     const y = Maf.clamp( r * Math.sin(sign*(a+(range)*2*Math.PI)),-.5*size, .5*size);
22 |     if (a===0) context.moveTo(x,y);
23 |     else context.lineTo(x,y);
24 |   }
25 |  // context.globalAlpha = .2 + range;
26 |   context.stroke();
27 | }
28 | 
29 | function draw(startTime) {
30 |   context.fillStyle = '#fff';
31 |   context.lineWidth = 1;
32 |   context.fillRect(0,0,canvas.width, canvas.height);
33 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
34 | 
35 |   context.save();
36 |   context.translate(.5*canvas.width, .5*canvas.height);
37 |   context.strokeStyle = '#000';
38 |   context.fillStyle = '#fff';
39 | 
40 |   const SIDE = .75 * canvas.width;
41 |   const STEP = 80;
42 |   for (let y=-SIDE; y<SIDE; y+=STEP) {
43 |     for (let x=-SIDE; x<SIDE; x+=STEP) {
44 |       context.save();
45 |       const tx = x+Maf.clamp(easings.InOutQuint(2*time/loopDuration),0,1)*STEP;
46 |       const ty = y+Maf.clamp(easings.InOutQuint(2*time/loopDuration-1),0,1)*STEP;
47 |       context.translate(tx,ty);
48 |       context.rotate(.25*Math.PI);
49 |       const d = Math.sqrt(tx*tx+ty*ty);
50 |       const f = 1;
51 |       context.lineWidth = 200/(.5+d);
52 |       context.strokeStyle = '#000';
53 |       drawSquare(f*STEP,(2*time/loopDuration+.001*d)%2);
54 |       context.restore();
55 |     }
56 |   }
57 |   context.restore();
58 | 
59 | }
60 | 
61 | export { draw, loopDuration, canvas };
62 | 


--------------------------------------------------------------------------------
/loops/260/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import fxaa from '../../shaders/fxaa.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${fxaa}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = fxaa(inputTexture, vUv);
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(48.,32.,13.)/255., vec3(1.), vec3(254.,178.,191.)/255.),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/260/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform sampler2D shadeTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${fxaa}
19 | ${softLight}
20 | ${screen}
21 | 
22 | void main() {
23 |   vec4 color = texture2D(inputTexture, vUv);
24 |   vec4 shade = texture2D(shadeTexture, vUv);
25 |   color *= shade;
26 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
27 |   vec4 finalColor = softLight(color, v);
28 |   finalColor = screen(finalColor,finalColor,1.);
29 |   gl_FragColor = finalColor;
30 | }
31 | `;
32 | 
33 | export { fs };


--------------------------------------------------------------------------------
/loops/260/sock-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D gradient;
 5 | 
 6 | varying vec2 vUv;
 7 | varying float vDepth;
 8 | varying float vDepthCenter;
 9 | 
10 | void main(){
11 |   float repeat = 10.;
12 |   vec3 c1 = texture2D(gradient, vec2(vUv.x*repeat,0.)).rgb;
13 |   vec3 c2 = texture2D(gradient, vec2(vUv.y*repeat,0.)).rgb;
14 |   float f = length(vUv.x+.25);
15 |   f = smoothstep(.2,.25,f);
16 |   vec3 c = mix(c1, c2, 1.-f);
17 |   gl_FragColor = vec4( c * 2.*(.5+1.-vDepth), 1. );
18 | }`;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/260/sock-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | varying vec2 vUv;
12 | varying float vDepth;
13 | varying float vDepthCenter;
14 | 
15 | void main() {
16 |   vUv = position.zy;
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
18 |   gl_Position = projectionMatrix * mvPosition;
19 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
20 |   float l = length(cameraPosition);
21 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
22 | }
23 | `;
24 | 
25 | export { vs };


--------------------------------------------------------------------------------
/loops/261/backdrop-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform vec3 brightColor;
 5 | uniform vec3 darkColor;
 6 | 
 7 | varying vec2 vUv;
 8 | 
 9 | void main() {
10 |   float c = vUv.y;
11 |   gl_FragColor = vec4(mix(darkColor, brightColor, c),1.);
12 | }
13 | `;
14 | 
15 | export { fs };


--------------------------------------------------------------------------------
/loops/261/backdrop-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelMatrix;
 8 | uniform mat4 modelViewMatrix;
 9 | uniform mat4 projectionMatrix;
10 | uniform mat3 normalMatrix;
11 | 
12 | varying vec2 vUv;
13 | 
14 | void main() {
15 |   vec4 p = vec4( position, 1. );
16 |   vUv = uv;
17 |   gl_Position = projectionMatrix * modelViewMatrix * p;
18 | }`;
19 | 
20 | export { vs };


--------------------------------------------------------------------------------
/loops/261/combine-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform vec2 resolution;
 5 | 
 6 | uniform sampler2D inputTexture;
 7 | uniform sampler2D backTexture;
 8 | uniform sampler2D shadowsTexture;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | void main() {
13 |   vec4 b = texture2D(backTexture, vUv);
14 |   vec4 c = texture2D(inputTexture, vUv);
15 |   vec4 s = texture2D(shadowsTexture, vUv);
16 |   vec4 color = b * (.5+.5*vec4(length(s.rg))*(1.-c.a)*vUv.y);
17 |   color = color + .5*vec4(c.r);
18 |   if(c.g>0.) color = mix(b,color,.5 + .5 *c.g);
19 |   gl_FragColor = color;
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/261/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${screen}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
24 |   vec4 finalColor = softLight(color, v);
25 |   finalColor = screen(finalColor,finalColor,1.);
26 |   gl_FragColor = finalColor;
27 | }
28 | `;
29 | 
30 | export { fs };


--------------------------------------------------------------------------------
/loops/261/points-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform float isParticle;
 5 | 
 6 | varying float vDepth;
 7 | varying float vColor;
 8 | 
 9 | void main() {
10 |   float d = 2.*clamp(length(.5-gl_PointCoord.xy),0.,1.);
11 |   if(d>1.) {
12 |     discard;
13 |   }
14 |   d = 1.-smoothstep(.5-.5*vDepth,.5+.5*vDepth, d);
15 |   gl_FragColor = vec4(.1,.01*vDepth,0., 1.);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/261/points-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute float color;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | uniform float size;
12 | 
13 | varying float vDepth;
14 | varying float vColor;
15 | 
16 | void main() {
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
18 |   float l = length(cameraPosition);
19 |   vDepth = abs(-mvPosition.z-l) / abs(l);
20 |   vDepth = .1+ .9*vDepth;
21 |   float fog = 1.-.2*(abs(-mvPosition.z) / l);
22 |   vColor = .1* color*fog;
23 |   gl_PointSize = exp(vDepth) * size * ( 300.0 / -mvPosition.z );
24 |   gl_Position = projectionMatrix * mvPosition;
25 | }
26 | `;
27 | 
28 | export { vs };


--------------------------------------------------------------------------------
/loops/261/shadows-fs.js:
--------------------------------------------------------------------------------
 1 | import radialBlur from '../../shaders/radial-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | 
 8 | uniform sampler2D inputTexture;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${radialBlur}
13 | 
14 | void main() {
15 |   vec4 rBlur = radialBlur(inputTexture,vec2(.5,2.)*resolution,.5,resolution, vUv);
16 |   gl_FragColor = 1.- rBlur;
17 | }
18 | `;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/262/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import highPass from '../../shaders/high-pass.js';
 2 | import overlay from '../../shaders/overlay.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | 
13 | ${highPass}
14 | ${overlay}
15 | 
16 | void main() {
17 |   vec4 c = texture2D(inputTexture, vUv);
18 |   vec4 h = highPass(inputTexture, vUv);
19 |   c = overlay(c,h,1.);
20 |   gl_FragColor = c;
21 | }
22 | `;
23 | 
24 | export { fs };


--------------------------------------------------------------------------------
/loops/262/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${screen}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
24 |   vec4 finalColor = softLight(color, v);
25 |   gl_FragColor = finalColor;
26 | }
27 | `;
28 | 
29 | export { fs };


--------------------------------------------------------------------------------
/loops/263/candy-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelMatrix;
 9 | uniform mat4 modelViewMatrix;
10 | uniform mat4 projectionMatrix;
11 | uniform mat3 normalMatrix;
12 | uniform vec3 cameraPosition;
13 | 
14 | varying vec3 vPosition;
15 | varying vec3 vNormal;
16 | varying vec2 vUv;
17 | varying vec3 vWorldPosition;
18 | varying vec3 vViewPosition;
19 | varying float vDepth;
20 | 
21 | void main() {
22 |   vPosition = position;
23 |   vNormal = normal;
24 |   vUv = uv;
25 |   vWorldPosition = (modelMatrix * vec4(position,1.)).xyz;
26 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
27 |   vViewPosition = -mvPosition.xyz;
28 |   float l = .5*length(cameraPosition);
29 |   vDepth = clamp(1.-(-mvPosition.z-l) / l,0.,1.);
30 |   gl_Position = projectionMatrix * mvPosition;
31 | 
32 | }`;
33 | 
34 | export { vs };


--------------------------------------------------------------------------------
/loops/263/envmap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/263/envmap.jpg


--------------------------------------------------------------------------------
/loops/263/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(15./255.), vec3(1.), vec3(255./255.)),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/263/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${screen}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
24 |   vec4 finalColor = softLight(color, v);
25 |   finalColor = screen(finalColor,finalColor,1.);
26 |   gl_FragColor = finalColor;
27 | }
28 | `;
29 | 
30 | export { fs };


--------------------------------------------------------------------------------
/loops/263/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/263/normal.png


--------------------------------------------------------------------------------
/loops/263/texture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/263/texture.jpg


--------------------------------------------------------------------------------
/loops/264/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(25./255.), vec3(.89), vec3(255./255.)),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/264/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${screen}
20 | 
21 | void main() {
22 |   vec4 color = fxaa(inputTexture, vUv);
23 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
24 |   vec4 finalColor = softLight(color, v);
25 |   finalColor = screen(finalColor,finalColor,1.);
26 |   gl_FragColor = finalColor;
27 | }
28 | `;
29 | 
30 | export { fs };


--------------------------------------------------------------------------------
/loops/265/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${rgbShift}
13 | ${gammaCorrect}
14 | ${levelRange}
15 | ${finalLevels}
16 | 
17 | void main() {
18 |   vec4 color = rgbShift(inputTexture, vUv, vec2(30.));
19 |   gl_FragColor = vec4(finalLevels(color.rgb, vec3(25./255.), vec3(1.49), vec3(229./255.)),1.);
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/265/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import screen from '../../shaders/screen.js';
 5 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${fxaa}
19 | ${softLight}
20 | ${screen}
21 | ${gammaCorrect}
22 | ${levelRange}
23 | ${finalLevels}
24 | 
25 | void main() {
26 |   vec4 color = fxaa(inputTexture, vUv);
27 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
28 |   vec4 finalColor = softLight(color, v);
29 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(25./255.), vec3(1.49), vec3(229./255.));
30 |   finalColor = screen(finalColor,finalColor,.5);
31 |   gl_FragColor = finalColor;
32 | }
33 | `;
34 | 
35 | export { fs };


--------------------------------------------------------------------------------
/loops/266/combine-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform vec2 resolution;
 5 | 
 6 | uniform sampler2D inputTexture;
 7 | uniform sampler2D edgesTexture;
 8 | 
 9 | varying vec2 vUv;
10 | 
11 | void main() {
12 |   vec4 color = texture2D(inputTexture, vUv);
13 |   vec4 edges = texture2D(edgesTexture, vUv);
14 |   gl_FragColor = color * (.5+.5*edges);
15 | }
16 | `;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/266/edges-fs.js:
--------------------------------------------------------------------------------
 1 | import sobel from '../../shaders/sobel.js';
 2 | import grayscale from '../../shaders/grayscale.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | 
11 | varying vec2 vUv;
12 | ${sobel}
13 | ${grayscale}
14 | 
15 | void main() {
16 |   float a = texture2D(inputTexture,vUv).a;
17 |   vec4 color = vec4(sobel(inputTexture, vUv),1.);
18 |   gl_FragColor = vec4(vec3(grayscale(color.rgb)), a);
19 | }
20 | `;
21 | 
22 | export { fs };


--------------------------------------------------------------------------------
/loops/266/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import fxaa from '../../shaders/fxaa.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | 
 8 | uniform sampler2D inputTexture;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${fxaa}
13 | 
14 | void main() {
15 |   vec4 color = fxaa(inputTexture, vUv);
16 |   gl_FragColor = color;
17 | }
18 | `;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/266/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import softLight from '../../shaders/soft-light.js';
 3 | import screen from '../../shaders/screen.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | import { barrel } from '../../shaders/barrel.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${softLight}
19 | ${screen}
20 | ${gammaCorrect}
21 | ${levelRange}
22 | ${finalLevels}
23 | ${barrel}
24 | 
25 | void main() {
26 |   float zoom = 1.;
27 |   vec4 color = barrel(inputTexture, zoom*vUv,.5,1.,resolution, vec4(194.,87.,213.,255.)/255.);
28 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
29 |   vec4 finalColor = softLight(color, v);
30 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(17. / 255.), vec3(1.), vec3(255. / 255.));
31 |   finalColor = screen(finalColor,finalColor,.5);
32 |   gl_FragColor = finalColor;
33 | }
34 | `;
35 | 
36 | export { fs };


--------------------------------------------------------------------------------
/loops/266/gbuffer-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D gradient;
 5 | 
 6 | varying vec2 vUv;
 7 | varying vec3 vNormal;
 8 | varying float vDepth;
 9 | varying float vDepthCenter;
10 | 
11 | void main(){
12 |   gl_FragColor = vec4( .5 + .5 * vNormal, vDepth);
13 | }`;
14 | 
15 | export { fs };
16 | 


--------------------------------------------------------------------------------
/loops/266/gbuffer-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec3 normal;
 6 | attribute vec2 uv;
 7 | 
 8 | uniform mat4 modelViewMatrix;
 9 | uniform mat4 projectionMatrix;
10 | uniform vec3 cameraPosition;
11 | 
12 | varying vec2 vUv;
13 | varying float vDepth;
14 | varying float vDepthCenter;
15 | varying vec3 vNormal;
16 | 
17 | void main() {
18 |   vUv = position.zy;
19 |   vNormal = normal;
20 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
21 |   gl_Position = projectionMatrix * mvPosition;
22 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
23 |   float l = length(cameraPosition);
24 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
25 | }
26 | `;
27 | 
28 | export { vs };


--------------------------------------------------------------------------------
/loops/266/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/266/scene.bin


--------------------------------------------------------------------------------
/loops/266/sock-fs.textClipping:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/266/sock-fs.textClipping


--------------------------------------------------------------------------------
/loops/267/LeePerry/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/LeePerry/scene.bin


--------------------------------------------------------------------------------
/loops/267/LeePerry/textures/defaultMat_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/LeePerry/textures/defaultMat_baseColor.jpeg


--------------------------------------------------------------------------------
/loops/267/LeePerry/textures/defaultMat_metallicRoughness.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/LeePerry/textures/defaultMat_metallicRoughness.png


--------------------------------------------------------------------------------
/loops/267/LeePerry/textures/defaultMat_normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/LeePerry/textures/defaultMat_normal.png


--------------------------------------------------------------------------------
/loops/267/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/267/bun/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/bun/scene.bin


--------------------------------------------------------------------------------
/loops/267/bun/textures/1001_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/bun/textures/1001_baseColor.png


--------------------------------------------------------------------------------
/loops/267/bun/textures/1001_metallicRoughness.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/bun/textures/1001_metallicRoughness.png


--------------------------------------------------------------------------------
/loops/267/bun/textures/1001_normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/267/bun/textures/1001_normal.png


--------------------------------------------------------------------------------
/loops/267/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | 
 8 | uniform sampler2D inputTexture;
 9 | uniform sampler2D blurTexture;
10 | 
11 | varying vec2 vUv;
12 | 
13 | ${screen}
14 | 
15 | void main() {
16 |   vec4 color = texture2D(inputTexture, vUv);
17 |   vec4 blur = texture2D(blurTexture, vUv);
18 |   gl_FragColor = screen(.2+.8*color, blur, 1.);
19 | }
20 | `;
21 | 
22 | export { fs };


--------------------------------------------------------------------------------
/loops/267/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import fxaa from '../../shaders/fxaa.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | 
 8 | uniform sampler2D inputTexture;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${fxaa}
13 | 
14 | void main() {
15 |   vec4 color = fxaa(inputTexture, vUv);
16 |   gl_FragColor = color;
17 | }
18 | `;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/267/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import softLight from '../../shaders/soft-light.js';
 3 | import screen from '../../shaders/screen.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | import fxaa from '../../shaders/fxaa.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${softLight}
19 | ${screen}
20 | ${gammaCorrect}
21 | ${levelRange}
22 | ${finalLevels}
23 | ${fxaa}
24 | 
25 | void main() {
26 |   vec4 color = fxaa(inputTexture, vUv);
27 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
28 |   vec4 finalColor = softLight(color, v);
29 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(40. / 255.), vec3(1.), vec3(248. / 255.));
30 |   finalColor = screen(finalColor,finalColor,1.);
31 |   gl_FragColor = finalColor;
32 | }
33 | `;
34 | 
35 | export { fs };


--------------------------------------------------------------------------------
/loops/268/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import softLight from '../../shaders/soft-light.js';
 3 | import screen from '../../shaders/screen.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | import fxaa from '../../shaders/fxaa.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${softLight}
19 | ${screen}
20 | ${gammaCorrect}
21 | ${levelRange}
22 | ${finalLevels}
23 | ${fxaa}
24 | 
25 | void main() {
26 |   vec4 color = fxaa(inputTexture, vUv);
27 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
28 |   vec4 finalColor = softLight(color, v);
29 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(33.,30., 29.) / 255., vec3(1.), vec3(223.,217., 233.)/ 255.);
30 |   color =screen(color,color,1.);
31 |   gl_FragColor = finalColor;
32 | }
33 | `;
34 | 
35 | export { fs };


--------------------------------------------------------------------------------
/loops/268/glitch-fs.js:
--------------------------------------------------------------------------------
 1 | import { glitch } from '../../shaders/glitch.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | 
 8 | uniform sampler2D inputTexture;
 9 | uniform float time;
10 | 
11 | varying vec2 vUv;
12 | 
13 | ${glitch}
14 | 
15 | void main() {
16 |   vec4 color = glitch(inputTexture, vUv,  .6, time);
17 |   color.rgb *= .75 + .25 * sin( 1.5 * resolution.y * vUv.y );
18 |   gl_FragColor = color;
19 | }
20 | `;
21 | 
22 | export { fs };


--------------------------------------------------------------------------------
/loops/268/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/looper/9fc2130c4e087113623c508fefd9d154876bb937/loops/268/scene.bin


--------------------------------------------------------------------------------
/loops/269/combine-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform vec2 resolution;
 5 | 
 6 | uniform sampler2D inputTexture;
 7 | uniform sampler2D gradientTexture;
 8 | 
 9 | varying vec2 vUv;
10 | 
11 | void main() {
12 |   vec4 color = texture2D(inputTexture, vUv);
13 |   vec4 gradient = texture2D(gradientTexture, vUv);
14 |   color += .1*gradient.r;
15 |   color +=.1* gradient.b;
16 |   gl_FragColor = color;
17 | }
18 | `;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/269/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import softLight from '../../shaders/soft-light.js';
 3 | import screen from '../../shaders/screen.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | import fxaa from '../../shaders/fxaa.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${softLight}
19 | ${screen}
20 | ${gammaCorrect}
21 | ${levelRange}
22 | ${finalLevels}
23 | ${fxaa}
24 | 
25 | void main() {
26 |   vec4 color = fxaa(inputTexture, vUv);
27 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
28 |   vec4 finalColor = softLight(color, v);
29 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(4.) / 255., vec3(1.), vec3(255.)/ 255.);
30 |   gl_FragColor = finalColor;
31 | }
32 | `;
33 | 
34 | export { fs };


--------------------------------------------------------------------------------
/loops/269/frosted-donut.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../../third_party/three.js';
 2 | import { createDonutGeometry, createFrostingGeometry, bumpGeometry } from './donut.js';
 3 | 
 4 | function createFrostedDonut(donutMaterial, frostingMaterial, seed, amount) {
 5 | 
 6 |   const group = new THREE.Group();
 7 | 
 8 |   const donut = new THREE.Mesh(
 9 |     bumpGeometry(createDonutGeometry(2, 1, seed), amount, seed),
10 |     donutMaterial
11 |   );
12 |   donut.castShadow = donut.receiveShadow = true;
13 |   group.add(donut);
14 | 
15 |   const frosting = new THREE.Mesh(
16 |     bumpGeometry(createFrostingGeometry(2, 1, seed), amount, seed),
17 |     frostingMaterial
18 |   );
19 |   frosting.castShadow = frosting.receiveShadow = true;
20 |   group.add(frosting);
21 | 
22 |   return {
23 |     donut,
24 |     donutMaterial,
25 |     frosting,
26 |     frostingMaterial,
27 |     group
28 |   };
29 | }
30 | 
31 | export { createFrostedDonut };


--------------------------------------------------------------------------------
/loops/269/gradient-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D gradient;
 5 | 
 6 | varying vec2 vUv;
 7 | varying float vDepth;
 8 | varying float vDepthCenter;
 9 | 
10 | void main(){
11 |   float center = 1.-abs(vUv.x);
12 |   gl_FragColor = vec4( center, vDepth, vDepthCenter, 1. );
13 | }`;
14 | 
15 | export { fs };


--------------------------------------------------------------------------------
/loops/269/gradient-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | varying vec2 vUv;
12 | varying float vDepth;
13 | varying float vDepthCenter;
14 | 
15 | void main() {
16 |   vUv = position.zy;
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
18 |   gl_Position = projectionMatrix * mvPosition;
19 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
20 |   float l = length(cameraPosition);
21 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
22 | }
23 | `;
24 | 
25 | export { vs };
26 | 


--------------------------------------------------------------------------------
/loops/270/backdrop-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D gradient;
 7 | 
 8 | varying vec3 vPosition;
 9 | varying float vDepth;
10 | varying float vDepthCenter;
11 | 
12 | ${screen}
13 | 
14 | void main(){
15 |   vec3 lightColor = vec3(00.)/255.;
16 |   vec3 topColor = vec3(0.,0.,64.)/255.;
17 |   vec3 bottomColor = vec3(255.,0.,255.)/255.;
18 |   vec3 color = mix(bottomColor,topColor,.5*vPosition.y);
19 |   gl_FragColor = vec4( color, 1. );
20 | }`;
21 | 
22 | export { fs };


--------------------------------------------------------------------------------
/loops/270/backdrop-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | varying vec3 vPosition;
12 | varying float vDepth;
13 | varying float vDepthCenter;
14 | 
15 | void main() {
16 |   vPosition = position;
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
18 |   gl_Position = projectionMatrix * mvPosition;
19 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
20 |   float l = length(cameraPosition);
21 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
22 | }
23 | `;
24 | 
25 | export { vs };


--------------------------------------------------------------------------------
/loops/270/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/270/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | import softLight from '../../shaders/soft-light.js';
 3 | 
 4 | const fs = `
 5 | precision highp float;
 6 | 
 7 | uniform vec2 resolution;
 8 | 
 9 | uniform sampler2D inputTexture;
10 | uniform sampler2D screenTexture;
11 | uniform sampler2D blur1Texture;
12 | uniform sampler2D blur2Texture;
13 | uniform sampler2D blur3Texture;
14 | uniform sampler2D blur4Texture;
15 | uniform sampler2D blur5Texture;
16 | uniform sampler2D discTexture;
17 | 
18 | varying vec2 vUv;
19 | 
20 | ${screen}
21 | ${softLight}
22 | 
23 | void main() {
24 |   vec4 color = texture2D(inputTexture, vUv);
25 |   vec4 scene = texture2D(screenTexture, vUv);
26 |   vec4 bloom = vec4(0.);
27 |   bloom += 1. * texture2D( blur1Texture, vUv );
28 |   bloom += 1.2 * texture2D( blur2Texture, vUv );
29 |   bloom += 1.4 * texture2D( blur3Texture, vUv );
30 |   bloom += 1.6 * texture2D( blur4Texture, vUv );
31 |   bloom += 1.8 * texture2D( blur5Texture, vUv );
32 | 
33 |   vec4 finalColor = screen(.5*color+.1*scene.a,scene,1.);
34 |   finalColor = finalColor + .25*bloom;
35 |   gl_FragColor = finalColor;
36 | }
37 | `;
38 | 
39 | export { fs };


--------------------------------------------------------------------------------
/loops/270/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import fxaa from '../../shaders/fxaa.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | 
 8 | uniform sampler2D inputTexture;
 9 | 
10 | varying vec2 vUv;
11 | ${fxaa}
12 | 
13 | void main() {
14 |   vec4 color = fxaa(inputTexture, vUv);
15 |   gl_FragColor = color;
16 | }
17 | `;
18 | 
19 | export { fs };


--------------------------------------------------------------------------------
/loops/270/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import softLight from '../../shaders/soft-light.js';
 3 | import screen from '../../shaders/screen.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | import fxaa from '../../shaders/fxaa.js';
 6 | 
 7 | const fs = `
 8 | precision highp float;
 9 | 
10 | uniform vec2 resolution;
11 | 
12 | uniform sampler2D inputTexture;
13 | uniform float vignetteBoost;
14 | uniform float vignetteReduction;
15 | 
16 | varying vec2 vUv;
17 | ${vignette}
18 | ${softLight}
19 | ${screen}
20 | ${gammaCorrect}
21 | ${levelRange}
22 | ${finalLevels}
23 | ${fxaa}
24 | 
25 | void main() {
26 |   vec4 color = fxaa(inputTexture, vUv);
27 |   vec4 v = vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.);
28 |   vec4 finalColor = softLight(color, v);
29 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(0.) / 255., vec3(1.49), vec3(255.)/ 255.);
30 |   gl_FragColor = finalColor;
31 | }
32 | `;
33 | 
34 | export { fs };


--------------------------------------------------------------------------------
/loops/270/gradient-fs.js:
--------------------------------------------------------------------------------
 1 | const fs = `
 2 | precision highp float;
 3 | 
 4 | uniform sampler2D gradient;
 5 | 
 6 | varying vec2 vUv;
 7 | varying float vDepth;
 8 | varying float vDepthCenter;
 9 | varying vec3 vPosition;
10 | 
11 | #define M_PI 3.1415926535897932384626433832795
12 | #define M_TAU (2.*M_PI)
13 | #define LINES 100.
14 | 
15 | void main(){
16 |   float f = .999 - .1*pow(vUv.y,.25);
17 |   float deg = .2+smoothstep(0.,.05,vUv.y);
18 |   vec3 topColor = vec3(255.,0.,255.)/255.;
19 |   vec3 bottomColor = vec3(0.,255.,255.)/255.;
20 |   float grid = max(smoothstep(f,1.,clamp(cos(LINES * M_TAU*vUv.x),0.,1.)),smoothstep(f,1.,clamp(cos(2.*LINES * M_TAU*vUv.y),0.,1.)));
21 |   vec3 gridColor = mix(bottomColor,topColor,pow(vPosition.y,.25)) * grid * deg;
22 |   vec3 planeColor = mix(bottomColor,topColor,pow(vPosition.y,.25)) * deg;
23 |   gl_FragColor = vec4( mix(planeColor, gridColor,.7), 1. );
24 | }`;
25 | 
26 | export { fs };


--------------------------------------------------------------------------------
/loops/270/gradient-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | varying vec2 vUv;
12 | varying float vDepth;
13 | varying float vDepthCenter;
14 | varying vec3 vPosition;
15 | 
16 | void main() {
17 |   vPosition = 4.*position;
18 |   vUv = uv;
19 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
20 |   gl_Position = projectionMatrix * mvPosition;
21 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
22 |   float l = length(cameraPosition);
23 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
24 | }
25 | `;
26 | 
27 | export { vs };


--------------------------------------------------------------------------------
/loops/270/screen-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D inputTexture;
 7 | 
 8 | varying vec2 vUv;
 9 | varying float vDepth;
10 | varying float vDepthCenter;
11 | 
12 | ${screen}
13 | 
14 | void main(){
15 |   vec4 color = texture2D(inputTexture,vUv);
16 |   color.rgb *= .75 + .25 * sin( 1.5 * 300. * vUv.y );
17 |   gl_FragColor = vec4( color.rgb, vDepth );
18 | }`;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/270/screen-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | varying vec2 vUv;
12 | varying float vDepth;
13 | varying float vDepthCenter;
14 | 
15 | void main() {
16 |   vUv = vec2(.5,.65) + .25 *vec2(3./4.,1.)*position.xy;
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
18 |   gl_Position = projectionMatrix * mvPosition;
19 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
20 |   float l = length(cameraPosition);
21 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
22 | }
23 | `;
24 | 
25 | export { vs };


--------------------------------------------------------------------------------
/loops/270/sphere-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform sampler2D gradient;
 7 | 
 8 | varying vec3 vPosition;
 9 | varying float vDepth;
10 | varying float vDepthCenter;
11 | 
12 | ${screen}
13 | 
14 | void main(){
15 |   vec3 topColor = vec3(255.,128.,128.)/255.;
16 |   vec3 bottomColor = vec3(255.,64.,64.)/255.;
17 |   vec3 color = mix(bottomColor,topColor,.5+vPosition.y);
18 |   color = screen(vec4(color,1.), vec4(vec3(1.-vDepthCenter),1.),.5).rgb;
19 |   color *= .75+vPosition.y;
20 |   gl_FragColor = vec4( color, 1. );
21 | }`;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/270/sphere-vs.js:
--------------------------------------------------------------------------------
 1 | const vs = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | uniform vec3 cameraPosition;
10 | 
11 | varying vec3 vPosition;
12 | varying float vDepth;
13 | varying float vDepthCenter;
14 | 
15 | void main() {
16 |   vPosition = position;
17 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
18 |   gl_Position = projectionMatrix * mvPosition;
19 |   vDepth = clamp( ( gl_Position.z - 4. ) / 16., 0., 1. );
20 |   float l = length(cameraPosition);
21 |   vDepthCenter = pow(1.-abs(length(mvPosition.xyz)-l) / abs(l),2.);
22 | }
23 | `;
24 | 
25 | export { vs };


--------------------------------------------------------------------------------
/loops/29.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | 
 5 | const canvas = context.canvas;
 6 | 
 7 | const loopDuration = 4;
 8 | 
 9 | function draw(startTime) {
10 |   context.fillStyle = '#fff';
11 |   context.fillRect(0,0,canvas.width, canvas.height);
12 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
13 | 
14 |   context.save();
15 |   context.translate(.5*canvas.width, .5*canvas.height);
16 |   context.strokeStyle = '#000';
17 |   context.fillStyle = '#fff';
18 | 
19 |   const baseCircleRadius = 30;
20 |   const offset = time/loopDuration;
21 | 
22 |   for(let r=0; r<20; r++) {
23 |     const circleRadius = baseCircleRadius - .5 *r;
24 |     const radius = r*2.5*circleRadius;
25 |     const f = Math.floor(Maf.TAU*radius/(3*circleRadius));
26 |     const diff = Maf.TAU - (Math.floor(Maf.TAU/f) * f);
27 |     const aOffset = offset * 5 * Maf.TAU/f;
28 |     const l = 50 + 50 * Math.cos((.1*r+time)*2*Maf.TAU/loopDuration);
29 |     for(let a=0; a<Maf.TAU; a+=Maf.TAU/f) {
30 |       context.beginPath();
31 |       const x = radius * Math.cos(a+diff+aOffset);
32 |       const y = radius * Math.sin(a+diff+aOffset);
33 |       context.arc(x,y,circleRadius,0,Maf.TAU);
34 |       context.fillStyle = `hsl(0,0%,${l}%)`;
35 |       context.fill();
36 |     }
37 |   }
38 |   context.restore();
39 | 
40 | }
41 | 
42 | export { draw, loopDuration, canvas };
43 | 


--------------------------------------------------------------------------------
/loops/3.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | const canvas = context.canvas;
 3 | 
 4 | const loopDuration = 1;
 5 | 
 6 | function draw() {
 7 |   context.fillStyle = '#fff';
 8 |   context.lineWidth = 1;
 9 |   context.fillRect(0,0,canvas.width, canvas.height);
10 |   const time = ( .001 * performance.now() ) % loopDuration;
11 | 
12 |   const d = 32;
13 |   const w = canvas.width;
14 |   const h = canvas.height;
15 | 
16 |   context.fillStyle = '#000000';
17 |   for( var y = -.5*h; y < 2*h; y+=d ){
18 |     for( var x = -.5*w; x < 2*w; x+=d ){
19 |       context.beginPath();
20 |       const r = .5 * d;
21 |       const a = time * 2 * Math.PI / loopDuration + .01 * (x + y);
22 |       const px = x + r * Math.cos(a);
23 |       const py = y + r * Math.sin(a);
24 |       const ar = 10 + 5 * Math.sin(a);
25 |       context.arc(px,py,ar,0,2*Math.PI);
26 |       context.fill();
27 |     }
28 |   }
29 | }
30 | 
31 | export { draw, loopDuration, canvas };
32 | 


--------------------------------------------------------------------------------
/loops/31.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | import {palette2} from '../modules/floriandelooij.js';
 5 | 
 6 | const canvas = context.canvas;
 7 | 
 8 | const loopDuration = 2;
 9 | 
10 | function draw(startTime) {
11 |   context.fillStyle = '#2b2e2d';
12 |   context.fillRect(0,0,canvas.width, canvas.height);
13 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
14 | 
15 |   const s = 80;
16 |   const s2 = 8;
17 |   const w = .5 * (canvas.width + 8*s);
18 | 
19 |   context.save();
20 |   context.translate(w-4*s,w-4*s);
21 |   context.rotate(-time*(Math.PI/2)/loopDuration);
22 |   context.strokeStyle = '#fff';
23 |   context.fillStyle = '#fff';
24 | 
25 |   for (let y=-w; y<w; y+=s) {
26 |     for (let x=-w; x<w; x+=s) {
27 |       const d = Math.sqrt(x*x+y*y);
28 |       context.fillStyle = palette2.range[Math.round(.02*d)%palette2.range.length];
29 |       context.save();
30 |       context.translate(x,y);
31 |       const t = Maf.mod((.0025*d-time),loopDuration)/loopDuration;
32 |       const t1 = easings.InOutQuint(t);
33 |       context.rotate(-t1*(Math.PI/2));
34 |       context.beginPath();
35 |       context.rect(-.5*s, -s2, s, 2*s2);
36 |       context.rect(-s2,-.5*s, 2*s2, s);
37 |       context.fill();
38 |       context.restore();
39 |       context.save();
40 |       context.translate(x,y);
41 |       context.globalAlpha = .5;
42 |       const t2 = easings.InOutCubic(t);
43 |       context.rotate(-t2*(Math.PI/2));
44 |       context.beginPath();
45 |       context.rect(-.5*s, -s2, s, 2*s2);
46 |       context.rect(-s2,-.5*s, 2*s2, s);
47 |       context.fill();
48 |       context.restore();
49 |     }
50 |   }
51 | 
52 |   context.restore();
53 | 
54 | }
55 | 
56 | export { draw, loopDuration, canvas };
57 | 


--------------------------------------------------------------------------------
/loops/33.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | import {palette2} from '../modules/floriandelooij.js';
 5 | import pointsOnSphere from '../modules/points-sphere.js';
 6 | import THREE from '../third_party/three.js';
 7 | 
 8 | const canvas = context.canvas;
 9 | 
10 | const loopDuration = 4;
11 | 
12 | const points = pointsOnSphere(100);
13 | 
14 | const camera = new THREE.Vector3(0,0,200);
15 | 
16 | function draw(startTime) {
17 |   context.fillStyle = '#2b2e2d';
18 |   context.fillRect(0,0,canvas.width, canvas.height);
19 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
20 | 
21 |   const s = 80;
22 |   const s2 = 16;
23 |   const w = .5 * (canvas.width + 8*s);
24 | 
25 |   context.save();
26 |   context.translate(w-4*s,w-4*s);
27 |   context.strokeStyle = '#fff';
28 |   context.fillStyle = '#fff';
29 | 
30 |   const projectedPoints = points.map( p => {
31 |     const t = p.clone();
32 |     const r = Math.sqrt(p.x*p.x+p.y*p.y+p.z*p.z);
33 |     const a = 2 * Math.PI * easings.InOutQuad(time/ loopDuration);
34 |     const theta = Math.atan2(p.y,p.x)+a;
35 |     const phi = Math.acos(p.z/r)+a;
36 |     t.x = r * Math.cos(theta) * Math.sin(phi);
37 |     t.y = r * Math.sin(theta) * Math.sin(phi);
38 |     t.z = r * Math.cos(phi);
39 |     const s = .45 * canvas.width;
40 |     const x = s * t.x;
41 |     const y = s * t.y;
42 |     const z = p.z;
43 |     return {x,y,z};
44 |   });
45 | 
46 |   projectedPoints.forEach( p => {
47 |     const d = .01*Math.abs(p.x);
48 |     context.globalCompositeOperation = 'lighter'
49 |     context.globalAlpha = p.z;
50 |     context.fillStyle = '#ff0000';
51 |     context.beginPath();
52 |     context.arc(p.x-d,p.y,10+2*p.z,0,2*Math.PI);
53 |     context.fill();
54 |     context.fillStyle = '#00ff00';
55 |     context.beginPath();
56 |     context.arc(p.x,p.y,10+2*p.z,0,2*Math.PI);
57 |     context.fill();
58 |     context.fillStyle = '#0000ff';
59 |     context.beginPath();
60 |     context.arc(p.x+d,p.y,10+2*p.z,0,2*Math.PI);
61 |     context.fill();
62 |   });
63 | 
64 |   context.restore();
65 | 
66 | }
67 | 
68 | export { draw, loopDuration, canvas };
69 | 


--------------------------------------------------------------------------------
/loops/35.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | import {palette2} from '../modules/floriandelooij.js';
 5 | 
 6 | const canvas = context.canvas;
 7 | 
 8 | const loopDuration = 2;
 9 | 
10 | function draw(startTime) {
11 |   context.fillStyle = '#2b2e2d';
12 |   context.fillRect(0,0,canvas.width, canvas.height);
13 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
14 | 
15 |   const s = 80;
16 |   const s2 = 16;
17 |   const w = .5 * (canvas.width + 8*s);
18 | 
19 |   context.save();
20 |   context.translate(w-4*s,w-4*s);
21 |   context.rotate(-time*(Math.PI/2)/loopDuration);
22 |   context.strokeStyle = '#fff';
23 |   context.fillStyle = '#fff';
24 | 
25 |   for (let y=-w; y<w; y+=s) {
26 |     for (let x=-w; x<w; x+=s) {
27 |       const d = Math.sqrt(x*x+y*y);
28 |       context.fillStyle = palette2.range[Math.round(.02*d)%palette2.range.length];
29 |       context.save();
30 |       context.translate(x,y);
31 |       const t = Maf.mod((.0025*d-time),loopDuration)/loopDuration;
32 |       const t1 = easings.InOutQuint(t);
33 |       context.rotate(-t1*(Math.PI/2));
34 |       context.beginPath();
35 |       context.rect(-.5*s, -.5*s, s2, s2);
36 |       context.rect(.5*s-s2, -.5*s, s2, s2);
37 |       context.rect(.5*s-s2, .5*s-s2, s2, s2);
38 |       context.rect(-.5*s, .5*s-s2, s2, s2);
39 |       context.fill();
40 |       context.restore();
41 |     }
42 |   }
43 | 
44 |   context.restore();
45 | 
46 | }
47 | 
48 | export { draw, loopDuration, canvas };
49 | 


--------------------------------------------------------------------------------
/loops/354/blur-fs.js:
--------------------------------------------------------------------------------
 1 | import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
 2 | 
 3 | const fs = `
 4 | precision highp float;
 5 | 
 6 | uniform vec2 resolution;
 7 | uniform sampler2D inputTexture;
 8 | uniform vec2 direction;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${blur13}
13 | 
14 | void main() {
15 |   gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
16 | }`;
17 | 
18 | export { fs };


--------------------------------------------------------------------------------
/loops/354/box-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs =
 4 |   `
 5 | precision highp float;
 6 | 
 7 | uniform sampler2D matCap;
 8 | 
 9 | varying vec3 vColor;
10 | varying vec2 vN;
11 | varying float vDepth;
12 | 
13 | ${screen}
14 | 
15 | void main(){
16 |   vec4 b = texture2D(matCap,vN);
17 |   vec3 c = vDepth*vColor+b.rgb*vDepth;
18 |   gl_FragColor = vec4(c,1.-b.r*vDepth);
19 | }`;
20 | 
21 | export { fs };


--------------------------------------------------------------------------------
/loops/354/box-vs.js:
--------------------------------------------------------------------------------
 1 | import { map1 } from '../../shaders/map.js';
 2 | 
 3 | const vs =
 4 |   `
 5 | precision highp float;
 6 | 
 7 | attribute vec3 position;
 8 | attribute vec2 uv;
 9 | attribute vec3 normal;
10 | 
11 | attribute vec3 instancePosition;
12 | attribute vec4 instanceQuaternion;
13 | attribute vec3 instanceScale;
14 | attribute vec4 instanceColor;
15 | 
16 | uniform mat4 modelViewMatrix;
17 | uniform mat4 projectionMatrix;
18 | uniform vec3 cameraPosition;
19 | uniform mat3 normalMatrix;
20 | 
21 | uniform float d;
22 | 
23 | varying vec3 vColor;
24 | varying vec2 vN;
25 | varying float vDepth;
26 | 
27 | ${map1}
28 | 
29 | vec3 applyTRS( vec3 position, vec3 translation, vec4 quaternion, vec3 scale ) {
30 |   position *= scale;
31 |   position += 2.0 * cross( quaternion.xyz, cross( quaternion.xyz, position ) + quaternion.w * position );
32 |   return position + translation;
33 | }
34 | 
35 | void main() {
36 |   vColor = instanceColor.rgb;
37 |   vec3 transformed = applyTRS(position, instancePosition, instanceQuaternion, instanceScale);
38 |   vDepth = map(transformed.z,-d,-.5*d,0.,1.);
39 |   vec3 transformedNormal = normalMatrix * applyTRS(normal, vec3(0.), instanceQuaternion, vec3(1.));
40 |   vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
41 |   gl_Position = projectionMatrix * mvPosition;
42 | 
43 |   vec3 e = normalize( mvPosition.xyz);
44 |   vec3 n = normalize( normalMatrix * transformedNormal );
45 |   vec3 r = reflect( e, n );
46 |   float m = 2.82842712474619 * sqrt( r.z+1.0 );
47 |   vN = r.xy / m + .5;
48 | }
49 | `;
50 | 
51 | export { vs };


--------------------------------------------------------------------------------
/loops/354/combine-fs.js:
--------------------------------------------------------------------------------
 1 | import screen from '../../shaders/screen.js';
 2 | 
 3 | const fs =
 4 |   `
 5 | precision highp float;
 6 | 
 7 | uniform sampler2D colorTexture;
 8 | uniform sampler2D blur1Texture;
 9 | uniform sampler2D blur2Texture;
10 | uniform sampler2D blur3Texture;
11 | uniform sampler2D blur4Texture;
12 | uniform sampler2D blur5Texture;
13 | uniform sampler2D shadeTexture;
14 | 
15 | varying vec2 vUv;
16 | 
17 | ${screen}
18 | 
19 | void main() {
20 |   vec4 g = texture2D(colorTexture, vUv);
21 | 
22 |   vec4 bloom = vec4(0.);
23 |   bloom += 1. * texture2D( blur1Texture, vUv );
24 |   bloom += 1. * texture2D( blur2Texture, vUv );
25 |   bloom += 1. * texture2D( blur3Texture, vUv );
26 |   bloom += 1. * texture2D( blur4Texture, vUv );
27 |   bloom += 1. * texture2D( blur5Texture, vUv );
28 | 
29 |   gl_FragColor = screen(g+bloom,bloom,.1);
30 | }`;
31 | 
32 | export { fs };


--------------------------------------------------------------------------------
/loops/354/final-color-fs.js:
--------------------------------------------------------------------------------
 1 | import rgbShift from '../../shaders/rgb-shift.js';
 2 | import screen from '../../shaders/screen.js';
 3 | 
 4 | const fs =
 5 |   `
 6 | precision highp float;
 7 | 
 8 | uniform vec2 resolution;
 9 | 
10 | uniform sampler2D inputTexture;
11 | 
12 | varying vec2 vUv;
13 | ${rgbShift}
14 | ${screen}
15 | 
16 | void main() {
17 |   vec4 color  = rgbShift(inputTexture, vUv, vec2(20.));
18 |   color = screen(color, color, 1.);
19 |   gl_FragColor = color;
20 | }
21 | `;
22 | 
23 | export { fs };


--------------------------------------------------------------------------------
/loops/354/final-fs.js:
--------------------------------------------------------------------------------
 1 | import vignette from '../../shaders/vignette.js';
 2 | import fxaa from '../../shaders/fxaa.js';
 3 | import softLight from '../../shaders/soft-light.js';
 4 | import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
 5 | 
 6 | const fs = `
 7 | precision highp float;
 8 | 
 9 | uniform vec2 resolution;
10 | 
11 | uniform sampler2D inputTexture;
12 | uniform float vignetteBoost;
13 | uniform float vignetteReduction;
14 | 
15 | varying vec2 vUv;
16 | ${vignette}
17 | ${fxaa}
18 | ${softLight}
19 | ${gammaCorrect}
20 | ${levelRange}
21 | ${finalLevels}
22 | 
23 | void main() {
24 |   vec4 color = fxaa(inputTexture, vUv);
25 |   vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
26 |   finalColor.rgb = finalLevels(finalColor.rgb, vec3(61.,23.,1.)/255., vec3(1.0), vec3(254.)/255.);
27 |   gl_FragColor = finalColor;
28 | }
29 | `;
30 | 
31 | export { fs };


--------------------------------------------------------------------------------
/loops/354/highlight-fs.js:
--------------------------------------------------------------------------------
 1 | import grayscale from '../../shaders/grayscale.js';
 2 | 
 3 | const fs =
 4 |   `
 5 | precision highp float;
 6 | 
 7 | uniform sampler2D shadeTexture;
 8 | uniform sampler2D colorTexture;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | ${grayscale}
13 | 
14 | void main() {
15 |   vec4 l = texture2D(colorTexture, vUv);
16 |   float a = 1.*clamp(l.a+.25,0.,1.);//smoothstep(l.a,.4,.6);
17 |   gl_FragColor.rgb = vec3(1.-a);//vec3(grayscale(gl_FragColor));
18 | }`;
19 | 
20 | export { fs };


--------------------------------------------------------------------------------
/loops/37.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | import {palette2} from '../modules/floriandelooij.js';
 5 | 
 6 | const canvas = context.canvas;
 7 | 
 8 | const loopDuration = 4;
 9 | 
10 | function draw(startTime) {
11 |   context.fillStyle = '#2b2e2d';
12 |   context.fillRect(0,0,canvas.width, canvas.height);
13 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
14 | 
15 |   const s = 40;
16 |   const s2 = 16;
17 |   const w = .5 * (canvas.width + 8*s);
18 | 
19 |   context.save();
20 |   context.translate(w-4*s,w-4*s);
21 |   context.rotate(Maf.TAU*time/loopDuration);
22 |   context.strokeStyle = '#fff';
23 |   context.fillStyle = '#fff';
24 | 
25 |   for (let y=-w; y<w; y+=s) {
26 |     for (let x=-w; x<w; x+=s) {
27 |       const d = Math.sqrt(x*x+y*y);
28 |       context.fillStyle = palette2.range[Math.round(.02*d)%palette2.range.length];
29 |       context.save();
30 |       context.translate(x,y);
31 |       const t = Maf.mod((.005*1.5*d-time),loopDuration)/loopDuration;
32 |       const t1 = easings.InOutQuint(t);
33 |       context.rotate(-t1*(Maf.TAU));
34 |       context.beginPath();
35 |       context.moveTo(0,0);
36 |       const a = .5*Math.PI*Maf.parabola(easings.InOutQuad(t),4);
37 |       context.arc(0,0,.5*s,0,-a, true);
38 |       context.closePath();
39 |       context.fill();
40 |       context.restore();
41 |     }
42 |   }
43 | 
44 |   context.restore();
45 | 
46 | }
47 | 
48 | export { draw, loopDuration, canvas };
49 | 


--------------------------------------------------------------------------------
/loops/38.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | import {palette2} from '../modules/floriandelooij.js';
 5 | import doChromaticAberration from '../modules/canvas-chromatic-aberration.js';
 6 | 
 7 | const canvas = context.canvas;
 8 | 
 9 | const loopDuration = 2;
10 | 
11 | function draw(startTime) {
12 |   context.fillStyle = '#2b2e2d';
13 |   context.fillRect(0,0,canvas.width, canvas.height);
14 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
15 | 
16 |   const s = 80;
17 |   const s2 = 10;
18 |   const w = .5 * (canvas.width + 8*s);
19 | 
20 |   context.save();
21 |   context.translate(w-4*s,w-4*s);
22 |   context.rotate((Math.PI/2)*easings.Linear(time/loopDuration));
23 |   context.strokeStyle = '#fff';
24 |   context.fillStyle = '#fff';
25 |   context.globalCompositeOperation = 'lighten';
26 | 
27 |   for (let y=-w; y<w; y+=s) {
28 |     for (let x=-w; x<w; x+=s) {
29 |       const d = Math.sqrt(x*x+y*y);
30 |       context.fillStyle = palette2.range[Math.round(.02*d)%palette2.range.length];
31 |       const t = Maf.mod((.0025*d-time),loopDuration)/loopDuration;
32 |       const t1 = easings.InOutCubic(t);
33 |       const f = .5 +Maf.parabola(t,8);
34 |       context.save();
35 |       context.translate(x,y);
36 |       context.rotate(-t1*(Math.PI/2));
37 | 
38 |       context.beginPath();
39 |       context.moveTo(-s,-s);
40 |       context.arc(-s,-s,s2*f,0,2*Math.PI);
41 |       context.fill();
42 | 
43 |       context.beginPath();
44 |       context.moveTo(s,-s);
45 |       context.arc(s,-s,s2*f,0,2*Math.PI);
46 |       context.fill();
47 | 
48 |       context.beginPath();
49 |       context.moveTo(s,s);
50 |       context.arc(s,s,s2*f,0,2*Math.PI);
51 |       context.fill();
52 | 
53 |       context.beginPath();
54 |       context.moveTo(-s,s);
55 |       context.arc(-s,s,s2*f,0,2*Math.PI);
56 |       context.fill();
57 | 
58 |       context.restore();
59 |     }
60 |   }
61 | 
62 |   context.restore();
63 | 
64 |   doChromaticAberration(canvas,1.01);
65 | }
66 | 
67 | export { draw, loopDuration, canvas };
68 | 


--------------------------------------------------------------------------------
/loops/44.js:
--------------------------------------------------------------------------------
 1 | import context from '../modules/context2d.js';
 2 | import easings from '../modules/easings.js';
 3 | import Maf from '../modules/maf.js';
 4 | 
 5 | const canvas = context.canvas;
 6 | 
 7 | const loopDuration = 2;
 8 | 
 9 | function drawCircle(radius, sign) {
10 |   const steps = 20;
11 |   const step = Maf.TAU/steps;
12 |   for (let a=0; a<Maf.TAU; a+=step){
13 |     context.beginPath();
14 |     const x = (radius + sign * 10) * Math.cos(a-.1*step);
15 |     const y = (radius + sign * 10) * Math.sin(a-.1*step);
16 |     context.moveTo(x,y);
17 |     const x2 = radius * Math.cos(a);
18 |     const y2 = radius * Math.sin(a);
19 |     context.lineTo(x2,y2);
20 |     context.arc(0,0,radius,a,a+.75*step);
21 |     const x3 = (radius - sign * 10) * Math.cos(a+.75*step+.1*step);
22 |     const y3 = (radius - sign * 10) * Math.sin(a+.75*step+.1*step);
23 |     context.lineTo(x3,y3);
24 |     context.stroke();
25 |   }
26 | }
27 | function draw(startTime) {
28 |   context.fillStyle = '#ffffff';
29 |   context.fillRect(0,0,canvas.width, canvas.height);
30 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
31 |   const t = time/loopDuration;
32 | 
33 |   context.save();
34 |   context.translate(.5*canvas.width, .5*canvas.height);
35 |   context.lineWidth = 4;
36 |   context.strokeStyle = '#000';
37 |   context.beginPath();
38 |   context.moveTo(0,-20);
39 |   context.lineTo(0,20);
40 |   context.stroke();
41 |   context.beginPath();
42 |   context.moveTo(-20,0);
43 |   context.lineTo(20,0);
44 |   context.stroke();
45 | 
46 |   const tt = easings.OutQuad(t);
47 |   drawCircle((.3+.05*Math.cos(tt*Maf.TAU))* canvas.width, -1);
48 |   drawCircle((.375+.05*Math.cos(tt*Maf.TAU))* canvas.width, 1);
49 | 
50 |   context.restore();
51 | }
52 | 
53 | export { draw, loopDuration, canvas };
54 | 


--------------------------------------------------------------------------------
/loops/85.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import context from '../modules/context2d.js';
 3 | import easings from '../modules/easings.js';
 4 | import Maf from '../modules/maf.js';
 5 | 
 6 | const canvas = context.canvas;
 7 | 
 8 | const loopDuration = 2;
 9 | const RADIUS = 100;
10 | 
11 | const circles = [];
12 | for (let y=0; y<3; y++) {
13 |   for (let x=0; x<3; x++) {
14 |     circles.push({x,y});
15 |   }
16 | }
17 | 
18 | function drawLine(path,x1,y1,x2,y2,curvature) {
19 |   const cx = x1 + ( x2 - x1 ) / 2;
20 |   const cy = y1 + ( y2 - y1 ) / 2;
21 |   const n = new THREE.Vector2(cx,cy).normalize().multiplyScalar(curvature);
22 |   path.quadraticCurveTo(cx+n.x,cy+n.y,x2,y2);
23 | }
24 | 
25 | function drawCircle(x,y,r,f) {
26 |   const ax = 4;
27 |   context.save();
28 |   context.translate(-x,-y);
29 | 
30 |   const path = new Path2D();
31 |   path.moveTo(r,0);
32 |   const sides = 6;
33 |   for (let j=0; j<sides; j++) {
34 |     const a = j * Maf.TAU / sides;
35 |     const a2 = (j+1) * Maf.TAU / sides;
36 |     const x = r * Math.cos(a);
37 |     const y = r * Math.sin(a);
38 |     const x2 = r * Math.cos(a2);
39 |     const y2 = r * Math.sin(a2);
40 |     drawLine(path,x,y,x2,y2,f);
41 |   }
42 |   path.closePath();
43 | 
44 |   context.translate(-ax,0);
45 |   context.strokeStyle = '#ff0000';
46 |   context.stroke(path);
47 |   context.translate(ax,0);
48 |   context.strokeStyle = '#00ff00';
49 |   context.stroke(path);
50 |   context.translate(ax,0);
51 |   context.strokeStyle = '#0000ff';
52 |   context.stroke(path);
53 | 
54 |   context.restore();
55 | }
56 | 
57 | function draw(startTime) {
58 |   context.fillStyle = '#000';
59 |   context.fillRect(0,0,canvas.width, canvas.height);
60 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
61 |   const t = time/loopDuration;
62 | 
63 |   context.save();
64 |   context.translate(.5*canvas.width, .5*canvas.height);
65 |   context.strokeStyle = '#ffffff';
66 |   context.globalAlpha = .5;
67 |   context.globalCompositeOperation = 'lighten';
68 | 
69 |   context.lineWidth = 10;
70 |   circles.forEach( (c,i) => {
71 |     const tt = (t + i / circles.length ) % 1;
72 |     drawCircle(2*c.x*RADIUS-2*RADIUS,.85*(2*c.y*RADIUS-2*RADIUS),RADIUS,.25*RADIUS*Maf.parabola(tt,4));
73 |   });
74 | 
75 |   context.restore();
76 | 
77 | }
78 | 
79 | export { draw, loopDuration, canvas };
80 | 


--------------------------------------------------------------------------------
/loops/88.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import context from '../modules/context2d.js';
 3 | import easings from '../modules/easings.js';
 4 | import Maf from '../modules/maf.js';
 5 | 
 6 | const canvas = context.canvas;
 7 | 
 8 | const loopDuration = 2;
 9 | 
10 | function drawLine(path,x1,y1,x2,y2,curvature) {
11 |   const cx = x1 + ( x2 - x1 ) / 2;
12 |   const cy = y1 + ( y2 - y1 ) / 2;
13 |   const n = new THREE.Vector2(cx,cy).normalize().multiplyScalar(curvature);
14 |   path.quadraticCurveTo(cx+n.x,cy+n.y,x2,y2);
15 | }
16 | 
17 | function drawVerticalLine(x,t) {
18 |   const ax = 4;
19 |   context.save();
20 | 
21 |   const path = new Path2D();
22 |   path.moveTo(x,0);
23 |   const step = 100;
24 |   for (let y=-step; y<=canvas.height+step; y+= step) {
25 |     path.quadraticCurveTo(x+Math.cos(t*Maf.TAU+x+y*.5*Maf.PI/2)*.5*step,y-.5*step,x,y);
26 |   }
27 | 
28 |   context.translate(-ax,0);
29 |   context.strokeStyle = '#ff0000';
30 |   context.stroke(path);
31 |   context.translate(ax,0);
32 |   context.strokeStyle = '#00ff00';
33 |   context.stroke(path);
34 |   context.translate(ax,0);
35 |   context.strokeStyle = '#0000ff';
36 |   context.stroke(path);
37 | 
38 |   context.restore();
39 | }
40 | 
41 | function draw(startTime) {
42 |   context.fillStyle = '#000';
43 |   context.fillRect(0,0,canvas.width, canvas.height);
44 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
45 |   const t = time/loopDuration;
46 | 
47 |   context.save();
48 |   context.translate(.5*canvas.width,.5*canvas.height);
49 |   context.rotate(Maf.PI/2);
50 |   context.translate(-.5*canvas.width,-.5*canvas.height);
51 | 
52 |   const a = t*Maf.PI/2;
53 |   context.strokeStyle = '#ffffff';
54 |   context.globalAlpha = 1;
55 |   context.globalCompositeOperation = 'lighten';
56 | 
57 |   context.lineWidth = 10;
58 |   const step = 50;
59 |   for (let x=-.5*step; x<=canvas.width+.5*step; x+= step) {
60 |     drawVerticalLine(x,t);
61 |   }
62 | 
63 |   context.restore();
64 | 
65 | }
66 | 
67 | export { draw, loopDuration, canvas };
68 | 


--------------------------------------------------------------------------------
/loops/90.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import context from '../modules/context2d.js';
 3 | import easings from '../modules/easings.js';
 4 | import Maf from '../modules/maf.js';
 5 | 
 6 | const canvas = context.canvas;
 7 | 
 8 | const loopDuration = 2;
 9 | 
10 | function drawLine(path,x1,y1,x2,y2,curvature) {
11 |   const cx = x1 + ( x2 - x1 ) / 2;
12 |   const cy = y1 + ( y2 - y1 ) / 2;
13 |   const n = new THREE.Vector2(cx,cy).normalize().multiplyScalar(curvature);
14 |   path.quadraticCurveTo(cx+n.x,cy+n.y,x2,y2);
15 | }
16 | 
17 | function drawPolygon(sides,x,y,r,angle,lineWidth,f) {
18 |   const ax = lineWidth;
19 |   context.save();
20 |   context.translate(-x,-y);
21 |   context.lineWidth = lineWidth;
22 | 
23 |   const path = new Path2D();
24 |   const x0 = r * Math.cos(angle);
25 |   const y0 = r * Math.sin(angle);
26 |   path.moveTo(x0,y0);
27 |   for (let j=0; j<sides; j++) {
28 |     const a = j * Maf.TAU / sides + angle;
29 |     const a2 = (j+1) * Maf.TAU / sides + angle;
30 |     const x = r * Math.cos(a);
31 |     const y = r * Math.sin(a);
32 |     const x2 = r * Math.cos(a2);
33 |     const y2 = r * Math.sin(a2);
34 |     drawLine(path,x,y,x2,y2,f);
35 |   }
36 |   path.closePath();
37 | 
38 |   context.translate(-ax,-ax);
39 |   context.strokeStyle = '#dedede';
40 |   context.stroke(path);
41 |   context.translate(2*ax,2*ax);
42 |   context.strokeStyle = '#888';
43 |   context.stroke(path);
44 |   context.translate(-ax,-ax);
45 |   context.strokeStyle = '#ffffff';
46 |   context.stroke(path);
47 | 
48 |   context.restore();
49 | }
50 | 
51 | function draw(startTime) {
52 |   context.fillStyle = '#d0d0d0';
53 |   context.fillRect(0,0,canvas.width, canvas.height);
54 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
55 |   const t = time/loopDuration;
56 | 
57 |   const SIDES = 3;
58 |   context.save();
59 |   context.translate(.5*canvas.width, .5*canvas.height);
60 |   const a = t*Maf.TAU/SIDES;
61 | 
62 |   for (let i=0; i<30; i++) {
63 |     const tt = (t + i / 20 ) % 1;
64 |     const r = (t*40) + i * 40;
65 |     const l = 4 + 2 * Math.cos(2.*(t+i/20)*Maf.TAU);
66 |     context.rotate(.0025*i*Math.sin(t*Maf.TAU));
67 |     drawPolygon(SIDES,0,0,r,a,l,2*r*easings.InOutQuad(.5+.5*Math.sin(t*Maf.TAU)));
68 |   }
69 | 
70 |   context.restore();
71 | 
72 | }
73 | 
74 | export { draw, loopDuration, canvas };
75 | 


--------------------------------------------------------------------------------
/loops/91.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import {renderer, getCamera} from '../modules/three.js';
 3 | import easings from '../modules/easings.js';
 4 | import RoundedFlatTorus from '../modules/three-rounded-flat-torus.js';
 5 | import Maf from '../modules/maf.js';
 6 | 
 7 | const canvas = renderer.domElement;
 8 | const camera = getCamera();
 9 | const scene = new THREE.Scene();
10 | const group = new THREE.Group();
11 | const circle = new THREE.Group();
12 | 
13 | const objects = [];
14 | const RINGS = 20;
15 | for (let j=0; j<RINGS; j++) {
16 |   const pivot = new THREE.Group();
17 |   const geo = RoundedFlatTorus(.5*(1+j),2,4,.25);
18 |   const material = new THREE.MeshStandardMaterial({metalness: .1, roughness: .1});
19 |   material.color.setHSL(j/RINGS,.65,.5);
20 |   const mesh = new THREE.Mesh(geo, material);
21 |   mesh.castShadow = mesh.receiveShadow = true;
22 |   mesh.rotation.y = Math.random() * Maf.TAU;
23 |   mesh.rotation.x = Maf.randomInRange(-.1,.1);
24 |   pivot.add(mesh);
25 |   group.add(pivot);
26 |   objects.push({pivot,mesh});
27 | }
28 | group.scale.setScalar(.5);
29 | scene.add(group);
30 | 
31 | const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
32 | directionalLight.position.set(-8,8,8);
33 | directionalLight.castShadow = true;
34 | scene.add( directionalLight );
35 | 
36 | const directionalLight2 = new THREE.DirectionalLight( 0xffffff, .5 );
37 | directionalLight2.position.set(4,8,4);
38 | directionalLight2.castShadow = true;
39 | scene.add( directionalLight2 );
40 | 
41 | const ambientLight = new THREE.AmbientLight(0x808080, .5);
42 | scene.add(ambientLight);
43 | 
44 | const light = new THREE.HemisphereLight( 0xcefeff, 0xb3eaf0, .5 );
45 | scene.add( light );
46 | 
47 | camera.position.set(0,6,6);
48 | camera.lookAt(0,0,1);
49 | renderer.setClearColor(0,1);
50 | renderer.shadowMap.enabled = true;
51 | renderer.shadowMap.type = THREE.PCFSoftShadowMap;
52 | 
53 | const loopDuration = 3;
54 | 
55 | function draw(startTime) {
56 | 
57 |   const time = ( .001 * (performance.now()-startTime)) % loopDuration;
58 |   const t = time/loopDuration;
59 | 
60 |   objects.forEach( (o,i) => {
61 |     o.pivot.position.y = 1 * Math.sin(t*Maf.TAU+.5*i);
62 |   });
63 | 
64 |   group.rotation.y = t * Maf.TAU;
65 | 
66 |   renderer.render(scene, camera);
67 | }
68 | 
69 | export { draw, loopDuration, canvas };
70 | 


--------------------------------------------------------------------------------
/loops/empty.js:
--------------------------------------------------------------------------------
1 | import context from '../modules/context2d.js';
2 | const canvas = context.canvas;
3 | 
4 | const loopDuration = 1;
5 | 
6 | function draw() {}
7 | 
8 | export { draw, loopDuration, canvas };


--------------------------------------------------------------------------------
/modules/aizawa-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class AizawaAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.alpha = .95;
 7 |     this.beta = .7;
 8 |     this.gamma = .6;
 9 |     this.delta = 3.5;
10 |     this.epsilon = .25;
11 |     this.sigma = .1;
12 |     this.x = -1;
13 |     this.y = 0;
14 |     this.z = .5;
15 |     this.h = .008;
16 |   }
17 | 
18 |   generatePoint(x, y, z) {
19 |     var nx = (z - this.beta) * x - this.delta * y;
20 |     var ny = this.delta * x + (z - this.beta) * y;
21 |     var nz = this.gamma + (this.alpha * z) - (z ** 3 / 3) - (x ** 2 + y ** 2) * (1 + this.epsilon * z) + this.sigma *
22 |       z * x ** 3;
23 |     x += this.h * nx;
24 |     y += this.h * ny;
25 |     z += this.h * nz;
26 |     return { x: x, y: y, z: z }
27 |   }
28 | 
29 |   randomize() {
30 |     this.alpha = Maf.randomInRange(.1, 1);
31 |     this.gamma = Maf.randomInRange(.1, 1);
32 |     this.x = Maf.randomInRange(-1, 1);
33 |     this.y = Maf.randomInRange(-1, 1);
34 |     this.z = Maf.randomInRange(-1, 1);
35 |   }
36 | }
37 | 
38 | export { AizawaAttractor }


--------------------------------------------------------------------------------
/modules/anishchenko-astakhov-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class AnishchenkoAstakhov {
 4 | 
 5 |   constructor() {
 6 |     this.mu = 1.2;
 7 |     this.eta = .5;
 8 |     this.x = -1;
 9 |     this.y = 0;
10 |     this.z = .5;
11 |     this.h = .05;
12 |   }
13 | 
14 |   generatePoint(x, y, z) {
15 | 
16 |     function I(x) {
17 |       if (x > 0) return 1;
18 |       if (x <= 0) return 0;
19 |     }
20 | 
21 |     var nx = this.mu * x + y - x * z;
22 |     var ny = -x;
23 |     var nz = -this.eta * z + this.eta * I(x) * x ** 2;
24 |     x += this.h * nx;
25 |     y += this.h * ny;
26 |     z += this.h * nz;
27 |     return { x: x, y: y, z: z }
28 |   }
29 | 
30 |   randomize() {
31 |     this.alpha = Maf.randomInRange(.1, 1);
32 |     this.gamma = Maf.randomInRange(.1, 1);
33 |     this.x = Maf.randomInRange(-1, 1);
34 |     this.y = Maf.randomInRange(-1, 1);
35 |     this.z = Maf.randomInRange(-1, 1);
36 |   }
37 | }
38 | 
39 | export { AnishchenkoAstakhov }


--------------------------------------------------------------------------------
/modules/arneodo-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class ArneodoAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.alpha = -5.5;
 7 |     this.beta = 3.5;
 8 |     this.delta = -1;
 9 |     this.x = -1;
10 |     this.y = 0;
11 |     this.z = .5;
12 |     this.h = .025;
13 |   }
14 | 
15 |   generatePoint(x, y, z) {
16 |     var nx = y;
17 |     var ny = z;
18 |     var nz = -this.alpha * x - this.beta * y - z + this.delta * x ** 3;
19 |     x += this.h * nx;
20 |     y += this.h * ny;
21 |     z += this.h * nz;
22 |     return { x: x, y: y, z: z }
23 |   }
24 | 
25 |   randomize() {
26 |     this.alpha = Maf.randomInRange(.1, 1);
27 |     this.beta = Maf.randomInRange(.1, 1);
28 |     this.gamma = Maf.randomInRange(.1, 1);
29 |     this.x = Maf.randomInRange(-1, 1);
30 |     this.y = Maf.randomInRange(-1, 1);
31 |     this.z = Maf.randomInRange(-1, 1);
32 |   }
33 | }
34 | 
35 | export { ArneodoAttractor }


--------------------------------------------------------------------------------
/modules/bolt.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import { BufferGeometryUtils } from '../third_party/THREE.BufferGeometryUtils.js';
 3 | import Maf from '../modules/maf.js';
 4 | import { Curves } from '../third_party/THREE.CurveExtras.js';
 5 | import RoundedExtrudedPolygonGeometry from '../modules/three-rounded-extruded-polygon.js';
 6 | 
 7 | const boltMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: .9, roughness: .8, transparent: false });
 8 | 
 9 | function createBolt() {
10 | 
11 |   const piece = new THREE.Group();
12 | 
13 |   const path = new Curves.HelixCurve();
14 |   const geometry = new THREE.TubeBufferGeometry(path, 500, 10, 18, false);
15 | 
16 |   const screw = new THREE.Mesh(geometry, boltMaterial);
17 |   piece.add(screw);
18 |   piece.castShadow = piece.receiveShadow = true;
19 |   screw.position.z = 70;
20 | 
21 |   const rod = new THREE.Mesh(new THREE.CylinderBufferGeometry(1, 1, 5, 36), boltMaterial);
22 |   piece.add(rod);
23 |   rod.rotation.x = Math.PI / 2;
24 |   rod.castShadow = rod.receiveShadow = true;
25 |   rod.scale.setScalar(30);
26 | 
27 |   const top = new THREE.Mesh(new RoundedExtrudedPolygonGeometry(.5, .4, 6, 1, .05, .05, 4), boltMaterial);
28 |   piece.add(top);
29 |   top.position.z = -100;
30 |   top.scale.setScalar(100);
31 |   top.castShadow = top.receiveShadow = true;
32 | 
33 |   for (let j = 0; j < screw.geometry.attributes.position.array.length; j += 3) {
34 |     const x = screw.geometry.attributes.position.array[j];
35 |     const y = screw.geometry.attributes.position.array[j + 1];
36 |     const z = screw.geometry.attributes.position.array[j + 2];
37 |     const factor = .75 + z / 800;
38 |     screw.geometry.attributes.position.array[j + 0] = x * factor;
39 |     screw.geometry.attributes.position.array[j + 1] = y * factor;
40 |   }
41 |   screw.rotation.x = Math.PI;
42 | 
43 |   const tip = new THREE.Mesh(new THREE.CylinderBufferGeometry(0, 1, 1, 36), boltMaterial);
44 |   piece.add(tip);
45 |   tip.position.z = 90;
46 |   tip.rotation.x = Math.PI / 2;
47 |   tip.scale.setScalar(30);
48 |   tip.castShadow = tip.receiveShadow = true;
49 | 
50 |   piece.scale.setScalar(.1);
51 |   return piece;
52 | 
53 | }
54 | 
55 | export { createBolt, boltMaterial };


--------------------------------------------------------------------------------
/modules/burke-shaw-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class BurkeShawAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.sigma = .95;
 7 |     this.upsilon = .7;
 8 |     this.x = 0;
 9 |     this.y = 0;
10 |     this.z = 0;
11 |     this.h = .04;
12 |   }
13 | 
14 |   generatePoint(x, y, z) {
15 |     var nx = -this.sigma * (x + y);
16 |     var ny = -y - this.upsilon * x * z;
17 |     var nz = this.sigma * x * y + this.upsilon;
18 |     x += this.h * nx;
19 |     y += this.h * ny;
20 |     z += this.h * nz;
21 |     return { x: x, y: y, z: z }
22 |   }
23 | 
24 |   randomize() {
25 |     this.alpha = Maf.randomInRange(.1, 1);
26 |     this.gamma = Maf.randomInRange(.1, 1);
27 |     this.x = Maf.randomInRange(-1, 1);
28 |     this.y = Maf.randomInRange(-1, 1);
29 |     this.z = Maf.randomInRange(-1, 1);
30 |   }
31 | }
32 | 
33 | export { BurkeShawAttractor }


--------------------------------------------------------------------------------
/modules/chen-celikovsky-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class ChenCelikovskyAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.alpha = 36;
 7 |     this.beta = 3;
 8 |     this.delta = 20;
 9 |     this.x = 0;
10 |     this.y = 0;
11 |     this.z = 0;
12 |     this.h = .004;
13 |   }
14 | 
15 |   generatePoint(x, y, z) {
16 |     var nx = this.alpha * (y - x);
17 |     var ny = -x * z + this.delta * y;
18 |     var nz = x * y - this.beta * z;
19 |     x += this.h * nx;
20 |     y += this.h * ny;
21 |     z += this.h * nz;
22 |     return { x: x, y: y, z: z }
23 |   }
24 | 
25 |   randomize() {
26 |     this.alpha = Maf.randomInRange(.1, 1);
27 |     this.gamma = Maf.randomInRange(.1, 1);
28 |     this.x = Maf.randomInRange(-1, 1);
29 |     this.y = Maf.randomInRange(-1, 1);
30 |     this.z = Maf.randomInRange(-1, 1);
31 |   }
32 | }
33 | 
34 | export { ChenCelikovskyAttractor }


--------------------------------------------------------------------------------
/modules/context2d.js:
--------------------------------------------------------------------------------
 1 | function get2DCanvasContext() {
 2 |   const canvas = document.createElement('canvas');
 3 |   canvas.width = 800;
 4 |   canvas.height = 800;
 5 |   canvas.style.width = '400px';
 6 |   canvas.style.height = '400px';
 7 |   return canvas.getContext('2d');
 8 | }
 9 | 
10 | const context = get2DCanvasContext();
11 | 
12 | export default context;
13 | 


--------------------------------------------------------------------------------
/modules/conversions.js:
--------------------------------------------------------------------------------
 1 | // r: radius
 2 | // theta: 0-Pi
 3 | // phi: 0-Tau
 4 | 
 5 | function sphericalToCartesian(r, theta, phi) {
 6 |   const x = r * Math.sin(theta) * Math.cos(phi);
 7 |   const y = r * Math.sin(theta) * Math.sin(phi);
 8 |   const z = r * Math.cos(theta);
 9 |   return { x, y, z };
10 | }
11 | 
12 | function cartesianToSpherical(x, y, z) {
13 |   const r = Math.sqrt(x * x + y * y + z * z);
14 |   const theta = Math.acos(z / r);
15 |   const phi = Math.atan2(y, x);
16 |   return { r, theta, phi };
17 | }
18 | 
19 | export { sphericalToCartesian, cartesianToSpherical }


--------------------------------------------------------------------------------
/modules/curl.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import noise from '../third_party/perlin.js';
 3 | 
 4 | const generateNoiseFunction = () => {
 5 |   const a = Maf.randomInRange(-100, 100);
 6 |   const b = Maf.randomInRange(-100, 100);
 7 |   const c = Maf.randomInRange(-100, 100);
 8 |   const d = Maf.randomInRange(-100, 100);
 9 |   const e = Maf.randomInRange(-100, 100);
10 |   const f = Maf.randomInRange(-100, 100);
11 |   console.log(`const func = seedFunc(${a},${b},${c},${d},${e},${f});`);
12 |   return function(v) {
13 |     const s = noise.simplex3(v.x, v.y, v.z);
14 |     const s1 = noise.simplex3(v.y + a, v.z + b, v.x + c);
15 |     const s2 = noise.simplex3(v.z + c, v.x + d, v.y + f);
16 |     return new THREE.Vector3(s, s1, s2);
17 |   }
18 | }
19 | 
20 | const seedFunc = (a, b, c, d, e, f) => {
21 |   return function(v) {
22 |     const s = noise.simplex3(v.x, v.y, v.z);
23 |     const s1 = noise.simplex3(v.y + a, v.z + b, v.x + c);
24 |     const s2 = noise.simplex3(v.z + c, v.x + d, v.y + f);
25 |     return new THREE.Vector3(s, s1, s2);
26 |   }
27 | }
28 | 
29 | const noiseFunc0 = seedFunc(-19.1, 33.4, 47.2, 74.2, -124.5, 99.4);
30 | 
31 | const e = .1;
32 | const dx = new THREE.Vector3(e, 0.0, 0.0);
33 | const dy = new THREE.Vector3(0.0, e, 0.0);
34 | const dz = new THREE.Vector3(0.0, 0.0, e);
35 | const tmp = new THREE.Vector3();
36 | const res = new THREE.Vector3();
37 | 
38 | const curl = (p, noiseFunc = noiseFunc0) => {
39 |   const p_x0 = noiseFunc(tmp.copy(p).sub(dx));
40 |   const p_x1 = noiseFunc(tmp.copy(p).add(dx));
41 |   const p_y0 = noiseFunc(tmp.copy(p).sub(dy));
42 |   const p_y1 = noiseFunc(tmp.copy(p).add(dy));
43 |   const p_z0 = noiseFunc(tmp.copy(p).sub(dz));
44 |   const p_z1 = noiseFunc(tmp.copy(p).add(dz));
45 |   const x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
46 |   const y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
47 |   const z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;
48 |   const divisor = 1.0 / (2.0 * e);
49 |   res.set(x, y, z).multiplyScalar(divisor).normalize();
50 |   return res;
51 | }
52 | 
53 | export { curl, generateNoiseFunction, seedFunc };


--------------------------------------------------------------------------------
/modules/default.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | import orthoVertexShader from '../shaders/ortho.js';
 4 | import vignette from '../shaders/vignette.js';
 5 | import fxaa from '../shaders/fxaa.js';
 6 | import softLight from '../shaders/soft-light.js';
 7 | import ShaderPass from '../modules/shader-pass.js';
 8 | 
 9 | const fragmentShader = `
10 | precision highp float;
11 | 
12 | uniform vec2 resolution;
13 | 
14 | uniform sampler2D inputTexture;
15 | uniform float vignetteBoost;
16 | uniform float vignetteReduction;
17 | 
18 | varying vec2 vUv;
19 | ${vignette}
20 | ${fxaa}
21 | ${softLight}
22 | 
23 | void main() {
24 |   vec4 color = fxaa(inputTexture, vUv);
25 |   gl_FragColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
26 | }
27 | `;
28 | 
29 | 
30 | function Default(renderer, params = {}) {
31 | 
32 |   const w = renderer.getSize().width;
33 |   const h = renderer.getSize().height;
34 | 
35 |   const colorFBO = new THREE.WebGLRenderTarget(w, h, {
36 |     wrapS: THREE.ClampToEdgeWrapping,
37 |     wrapT: THREE.ClampToEdgeWrapping,
38 |     minFilter: THREE.LinearFilter,
39 |     format: THREE.RGBAFormat,
40 |     stencilBuffer: false,
41 |     depthBuffer: true
42 |   });
43 | 
44 |   const shader = new THREE.RawShaderMaterial({
45 |     uniforms: {
46 |       resolution: { value: new THREE.Vector2(w, h) },
47 |       vignetteBoost: { value: params.vignetteBoost || .5 },
48 |       vignetteReduction: { value: params.vignetteReduction || .5 },
49 |       inputTexture: { value: colorFBO.texture },
50 |     },
51 |     vertexShader: orthoVertexShader,
52 |     fragmentShader: fragmentShader,
53 |   });
54 |   const pass = new ShaderPass(renderer, shader, w, h, THREE.RGBAFormat, THREE.UnsignedByteType, THREE.LinearFilter, THREE.LinearFilter, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping);
55 | 
56 |   function render(scene, camera) {
57 |     renderer.render(scene, camera, colorFBO);
58 |     pass.shader.uniforms.inputTexture.value = colorFBO.texture;
59 |     pass.render(true);
60 |   }
61 | 
62 |   return {
63 |     render
64 |   }
65 | }
66 | 
67 | export default Default;


--------------------------------------------------------------------------------
/modules/domino-piece.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import Maf from '../modules/maf.js';
 3 | import RoundedBoxGeometry from '../third_party/three-rounded-box.js';
 4 | 
 5 | const geo = new RoundedBoxGeometry(.5,.25,1,.05,5);
 6 | const material = new THREE.MeshStandardMaterial({color: 0xdedede, metalness: .1, roughness: 0});
 7 | const metalMaterial = new THREE.MeshStandardMaterial({color: 0x404040, metalness: .5, roughness: 0});
 8 | const lineGeo = new RoundedBoxGeometry(.5,.1,.1,.05,5);
 9 | const pegGeo = new THREE.IcosahedronGeometry(.05,3);
10 | 
11 | function addPegs(num, piece, top) {
12 |   const pegs = [
13 |     '000000000',
14 |     '0000x0000',
15 |     '00x000x00',
16 |     '00x0x0x00',
17 |     'x0x000x0x',
18 |     'x0x0x0x0x',
19 |     'x0xx0xx0x'
20 |   ];
21 |   let ptr = 0;
22 |   const conf = pegs[num];
23 |   for (let y=0; y<3; y++) {
24 |     for (let x=0; x<3; x++) {
25 |       if (conf[ptr] === 'x') {
26 |         const mesh = new THREE.Mesh(pegGeo, metalMaterial);
27 |         mesh.position.set(.1*(x-1),.1,.1*(y-1) + (top?.25:-.25));
28 |         mesh.castShadow = mesh.receiveShadow = true;
29 |         piece.add(mesh);
30 |       }
31 |       ptr++;
32 |     }
33 |   }
34 | }
35 | 
36 | function createDominoPiece(numberTop, numberBottom) {
37 | 
38 |   const piece = new THREE.Group();
39 |   const mesh = new THREE.Mesh(geo, material);
40 |   mesh.castShadow = mesh.receiveShadow = true;
41 |   piece.add(mesh);
42 |   const lineMesh = new THREE.Mesh(lineGeo, metalMaterial);
43 |   lineMesh.castShadow = lineMesh.receiveShadow = true;
44 |   lineMesh.position.set(0,.09,0);
45 |   piece.add(lineMesh);
46 |   addPegs(numberTop, piece, true);
47 |   addPegs(numberBottom, piece, false);
48 | 
49 |   return piece;
50 | 
51 | }
52 | 
53 | export default createDominoPiece;
54 | 


--------------------------------------------------------------------------------
/modules/equirectangular-to-cubemap.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | class EquirectangularToCubemap {
 4 | 
 5 |   constructor(renderer) {
 6 | 
 7 |     this.renderer = renderer;
 8 |     this.scene = new THREE.Scene();
 9 | 
10 |     var gl = this.renderer.getContext();
11 |     this.maxSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE)
12 | 
13 |     this.camera = new THREE.CubeCamera(1, 100000, 1);
14 | 
15 |     this.material = new THREE.MeshBasicMaterial({
16 |       map: null,
17 |       side: THREE.BackSide
18 |     });
19 | 
20 |     this.mesh = new THREE.Mesh(
21 |       new THREE.IcosahedronGeometry(100, 4),
22 |       this.material
23 |     );
24 |     this.scene.add(this.mesh);
25 | 
26 |   }
27 | 
28 |   convert(source, size) {
29 | 
30 |     var mapSize = Math.min(size, this.maxSize);
31 |     this.camera = new THREE.CubeCamera(1, 100000, mapSize);
32 |     this.material.map = source;
33 | 
34 |     this.camera.update(this.renderer, this.scene);
35 | 
36 |     return this.camera.renderTarget.texture;
37 |   }
38 | }
39 | 
40 | export { EquirectangularToCubemap }


--------------------------------------------------------------------------------
/modules/fbo.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | function getFBO(w, h, options = {}) {
 4 |   const fbo = new THREE.WebGLRenderTarget(w, h, {
 5 |     wrapS: options.wrapS || THREE.ClampToEdgeWrapping,
 6 |     wrapT: options.wrapT || THREE.ClampToEdgeWrapping,
 7 |     minFilter: options.minFilter || THREE.LinearFilter,
 8 |     magFilter: options.magFilter || THREE.LinearFilter,
 9 |     format: options.format || THREE.RGBAFormat,
10 |     type: options.type || THREE.UnsignedByteType,
11 |     stencilBuffer: options.stencilBuffer || false,
12 |     depthBuffer: options.depthBuffer || true
13 |   });
14 |   return fbo;
15 | }
16 | 
17 | export { getFBO }


--------------------------------------------------------------------------------
/modules/floriandelooij.js:
--------------------------------------------------------------------------------
 1 | const palette1 = {
 2 |   base: [
 3 |     '#2b2e2d',
 4 |   ],
 5 |   range: [
 6 |     '#20a0aa',
 7 |     '#ec4039',
 8 |     '#ffae12',
 9 |   ],
10 | };
11 | 
12 | const palette2 = {
13 |   base: [
14 |     '#262626',
15 |   ],
16 |   range: [
17 |     '#612e8d',
18 |     '#c22286',
19 |     '#ea225e',
20 |     '#ed5b35',
21 |     '#f5b52e',
22 |     '#81c540',
23 |     '#00a396',
24 |     '#1674bc',
25 |   ],
26 | };
27 | 
28 | export {palette1, palette2}
29 | 


--------------------------------------------------------------------------------
/modules/gradient.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | import Maf from '../modules/maf.js';
 3 | 
 4 | class gradientLinear {
 5 |   constructor(colors) {
 6 |     this.colors = colors.map((c) => new THREE.Color(c));
 7 |   }
 8 |   getAt(t) {
 9 |     t = Maf.clamp(t, 0, 1);
10 |     const from = Math.floor(t * this.colors.length * .9999);
11 |     const to = Maf.clamp(from + 1, 0, this.colors.length - 1);
12 |     const fc = this.colors[from];
13 |     const ft = this.colors[to];
14 |     const p = (t - from / this.colors.length) / (1 / this.colors.length);
15 |     const res = new THREE.Color();
16 |     res.r = Maf.mix(fc.r, ft.r, p);
17 |     res.g = Maf.mix(fc.g, ft.g, p);
18 |     res.b = Maf.mix(fc.b, ft.b, p);
19 |     return res;
20 |   }
21 | }
22 | 
23 | export { gradientLinear };


--------------------------------------------------------------------------------
/modules/hadley-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class HadleyAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.alpha = .2;
 7 |     this.beta = 4;
 8 |     this.sigma = 8;
 9 |     this.delta = 1;
10 |     this.x = -1;
11 |     this.y = 0;
12 |     this.z = .5;
13 |     this.h = .02;
14 |   }
15 | 
16 |   generatePoint(x, y, z) {
17 |     var nx = -y * y - z * z - this.alpha * x + this.alpha * this.sigma;
18 |     var ny = x * y - this.beta * x * z - y + this.delta;
19 |     var nz = this.beta * x * y + x * z - z;
20 |     x += this.h * nx;
21 |     y += this.h * ny;
22 |     z += this.h * nz;
23 |     return { x: x, y: y, z: z }
24 |   }
25 | 
26 |   randomize() {
27 |     this.alpha = Maf.randomInRange(.1, 1);
28 |     this.gamma = Maf.randomInRange(.1, 1);
29 |     this.x = Maf.randomInRange(-1, 1);
30 |     this.y = Maf.randomInRange(-1, 1);
31 |     this.z = Maf.randomInRange(-1, 1);
32 |   }
33 | }
34 | 
35 | export { HadleyAttractor }


--------------------------------------------------------------------------------
/modules/lemniscate.js:
--------------------------------------------------------------------------------
 1 | function getLemniscatePoint(angle) {
 2 |   const f = ( 1 + Math.pow(Math.sin(angle),2));
 3 |   const c = Math.cos(angle);
 4 |   const x = c / f;
 5 |   const y = Math.sin(angle) * c / f;
 6 |   return {x,y};
 7 | }
 8 | 
 9 | export default getLemniscatePoint;
10 | 


--------------------------------------------------------------------------------
/modules/looper.js:
--------------------------------------------------------------------------------
 1 | import * as emptyModule from '../loops/empty.js';
 2 | 
 3 | async function loadModule() {
 4 |   const num = window.location.hash.substr(1) || 1;
 5 |   const module = await
 6 |   import (`../loops/${num}.js`);
 7 |   document.body.appendChild(module.canvas);
 8 |   return module;
 9 | }
10 | 
11 | async function init() {
12 |   let module = await loadModule();
13 | 
14 |   async function reload() {
15 |     if (module && module.canvas) {
16 |       try {
17 |         document.body.removeChild(module.canvas);
18 |       } catch (e) {
19 | 
20 |       }
21 |     }
22 |     try {
23 |       module = await loadModule();
24 |     } catch (e) {
25 |       module = emptyModule;
26 |       console.log(e);
27 |     }
28 |   }
29 | 
30 |   const capturer = new CCapture({
31 |     verbose: false,
32 |     display: true,
33 |     framerate: 60,
34 |     motionBlurFrames: 0 * (960 / 60),
35 |     quality: 99,
36 |     format: 'gif',
37 |     timeLimit: module.loopDuration,
38 |     frameLimit: 0,
39 |     autoSaveTime: 0,
40 |     workersPath: 'js/'
41 |   });
42 | 
43 |   let startTime = 0;
44 | 
45 |   function capture() {
46 |     capturer.start();
47 |     startTime = performance.now();
48 |   }
49 | 
50 |   document.getElementById('start').addEventListener('click', e => {
51 |     capture();
52 |     e.preventDefault();
53 |   });
54 | 
55 |   function update() {
56 |     requestAnimationFrame(update);
57 |     if (!skip) module.draw(startTime);
58 |     capturer.capture(module.canvas);
59 |   }
60 | 
61 |   update();
62 | 
63 |   window.addEventListener('hashchange', async e => {
64 |     reload();
65 |   })
66 | }
67 | 
68 | window.skip = false;
69 | 
70 | window.addEventListener('load', init);


--------------------------------------------------------------------------------
/modules/lorenz-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class LorenzAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.id = 'lorenz';
 7 |     this.a = 10;
 8 |     this.b = 28;
 9 |     this.c = 8 / 3;
10 |     this.x = 0;
11 |     this.y = 10;
12 |     this.z = 10;
13 |     this.h = .004;
14 |   }
15 | 
16 |   generatePoint(x, y, z) {
17 |     var nx = this.a * (y - x);
18 |     var ny = (x * (this.b - z) - y);
19 |     var nz = (x * y - this.c * z);
20 |     x += this.h * nx;
21 |     y += this.h * ny;
22 |     z += this.h * nz;
23 |     return { x: x, y: y, z: z }
24 |   }
25 | 
26 |   randomize() {
27 |     this.a = Maf.randomInRange(5, 20);
28 |     this.b = Maf.randomInRange(5, 50);
29 |     this.c = Maf.randomInRange(.1, .5);
30 |     this.x = Maf.randomInRange(-10, 10);
31 |     this.y = Maf.randomInRange(-10, 10);
32 |     this.z = Maf.randomInRange(-10, 10);
33 |   }
34 | }
35 | 
36 | export { LorenzAttractor }


--------------------------------------------------------------------------------
/modules/perlin-functions.js:
--------------------------------------------------------------------------------
 1 | import noise from '../third_party/perlin.js';
 2 | 
 3 | function squareTurbulence(v) {
 4 |   return Math.pow(v, 2.);
 5 | }
 6 | 
 7 | function ridgedTurbulence(v) {
 8 |   return 1. - Math.abs(v);
 9 | }
10 | 
11 | function gaussianTurbulence(v) {
12 |   return 1. - Math.exp(-Math.pow(v, 2));
13 | }
14 | 
15 | function fbm(x, y, z) {
16 |   let value = 0.;
17 |   let amplitude = 1.;
18 |   for (let i = 0; i < 8; i++) {
19 |     value += amplitude * Math.abs(noise.perlin3(x, y, z));
20 |     x *= 2.;
21 |     y *= 2.;
22 |     z *= 2.;
23 |     amplitude *= .5;
24 |   }
25 |   return 2 * squareTurbulence(.3 + value) - 1;
26 | }
27 | 
28 | function turbulence(x, y, z) {
29 | 
30 |   let w = 100.0;
31 |   let t = -.5;
32 | 
33 |   for (let f = 1.0; f <= 10.0; f++) {
34 |     let power = Math.pow(2.0, f);
35 |     t += Math.abs(noise.perlin3(x * power, y * power, z * power));
36 |   }
37 | 
38 |   return 2 * t;
39 | 
40 | }
41 | 
42 | export { turbulence, fbm, gaussianTurbulence, ridgedTurbulence, squareTurbulence, noise }


--------------------------------------------------------------------------------
/modules/points-sphere.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | function pointsOnSphere(n) {
 4 | 
 5 |     const pts = [];
 6 |     const inc = Math.PI * (3 - Math.sqrt(5));
 7 |     const off = 2.0 / n;
 8 |     let r;
 9 |     var phi;
10 |     let dmin = 10000;
11 |     const prev = new THREE.Vector3();
12 |     const cur = new THREE.Vector3();
13 | 
14 |     for (var k = 0; k < n; k++){
15 |         cur.y = k * off - 1 + (off /2);
16 |         r = Math.sqrt(1 - cur.y * cur.y);
17 |         phi = k * inc;
18 |         cur.x = Math.cos(phi) * r;
19 |         cur.z = Math.sin(phi) * r;
20 | 
21 |         const dist = cur.distanceTo( prev );
22 |         if( dist < dmin ) dmin = dist;
23 | 
24 |         pts.push(cur.clone());
25 |         prev.copy( cur );
26 |     }
27 | 
28 |     return pts;
29 | }
30 | 
31 | export default pointsOnSphere;
32 | 


--------------------------------------------------------------------------------
/modules/qi-chen-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class QiChenAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.alpha = 38;
 7 |     this.beta = 8 / 3;
 8 |     this.sigma = 80;
 9 |     this.x = .1;
10 |     this.y = .1;
11 |     this.z = .1;
12 |     this.h = .001;
13 |   }
14 | 
15 |   generatePoint(x, y, z) {
16 |     var nx = this.alpha * (y - x) + y * z;
17 |     var ny = this.sigma * x + y - x * z;
18 |     var nz = x * y - this.beta * z;
19 |     x += this.h * nx;
20 |     y += this.h * ny;
21 |     z += this.h * nz;
22 |     return { x: x, y: y, z: z }
23 |   }
24 | 
25 |   randomize() {
26 |     this.alpha = Maf.randomInRange(.1, 1);
27 |     this.beta = Maf.randomInRange(.1, 1);
28 |     this.gamma = Maf.randomInRange(.1, 1);
29 |     this.x = Maf.randomInRange(-1, 1);
30 |     this.y = Maf.randomInRange(-1, 1);
31 |     this.z = Maf.randomInRange(-1, 1);
32 |   }
33 | }
34 | 
35 | export { QiChenAttractor }


--------------------------------------------------------------------------------
/modules/rabinovich-fabrikant-attractor.js:
--------------------------------------------------------------------------------
 1 | import Maf from './maf.js';
 2 | 
 3 | class RabinovichFabrikantAttractor {
 4 | 
 5 |   constructor() {
 6 |     this.alpha = 1.1;
 7 |     this.gamma = .87;
 8 |     this.x = -1;
 9 |     this.y = 0;
10 |     this.z = .5;
11 |     this.h = .002;
12 |   }
13 | 
14 |   generatePoint(x, y, z) {
15 |     var nx = y * (z - 1 + x * x) + this.gamma * x;
16 |     var ny = x * (3 * z + 1 - x * x) + this.gamma * y;
17 |     var nz = -2 * z * (this.alpha + x * y);
18 |     x += this.h * nx;
19 |     y += this.h * ny;
20 |     z += this.h * nz;
21 |     return { x: x, y: y, z: z }
22 |   }
23 | 
24 |   randomize() {
25 |     this.alpha = Maf.randomInRange(.1, 1);
26 |     this.gamma = Maf.randomInRange(.1, 1);
27 |     this.x = Maf.randomInRange(-1, 1);
28 |     this.y = Maf.randomInRange(-1, 1);
29 |     this.z = Maf.randomInRange(-1, 1);
30 |   }
31 | }
32 | 
33 | export { RabinovichFabrikantAttractor }


--------------------------------------------------------------------------------
/modules/shader-pass.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | class ShaderPass {
 4 | 
 5 |   constructor(renderer, shader, width, height, format, type, minFilter, magFilter, wrapS, wrapT) {
 6 | 
 7 |     this.renderer = renderer;
 8 |     this.shader = shader;
 9 |     this.orthoScene = new THREE.Scene();
10 |     this.fbo = new THREE.WebGLRenderTarget(width, height, {
11 |       wrapS: wrapS || THREE.RepeatWrapping,
12 |       wrapT: wrapT || THREE.RepeatWrapping,
13 |       minFilter: minFilter || THREE.LinearMipMapLinearFilter,
14 |       magFilter: magFilter || THREE.LinearFilter,
15 |       format: format || THREE.RGBAFormat,
16 |       type: type || THREE.UnsignedByteType
17 |     });
18 |     this.orthoCamera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, .00001, 1000);
19 |     this.orthoQuad = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1), this.shader);
20 |     this.orthoQuad.scale.set(width, height, 1.);
21 |     this.orthoScene.add(this.orthoQuad);
22 |     this.texture = this.fbo.texture;
23 | 
24 |   }
25 | 
26 |   render(final) {
27 | 
28 |     this.renderer.render(this.orthoScene, this.orthoCamera, final ? null : this.fbo);
29 | 
30 |   }
31 | 
32 |   setSize(width, height) {
33 | 
34 |     this.orthoQuad.scale.set(width, height, 1.);
35 | 
36 |     this.fbo.setSize(width, height);
37 | 
38 |     this.orthoQuad.scale.set(width, height, 1);
39 | 
40 |     this.orthoCamera.left = -width / 2;
41 |     this.orthoCamera.right = width / 2;
42 |     this.orthoCamera.top = height / 2;
43 |     this.orthoCamera.bottom = -height / 2;
44 |     this.orthoCamera.updateProjectionMatrix();
45 | 
46 |   }
47 | 
48 | }
49 | 
50 | export default ShaderPass;


--------------------------------------------------------------------------------
/modules/shader-ping-pong-pass.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | class ShaderPingPongPass {
 4 | 
 5 |   constructor(renderer, shader, width, height, format, type, minFilter, magFilter, wrapS, wrapT) {
 6 | 
 7 |     this.renderer = renderer;
 8 |     this.shader = shader;
 9 |     this.orthoScene = new THREE.Scene();
10 |     this.fbo = new THREE.WebGLRenderTarget(width, height, {
11 |       wrapS: wrapS || THREE.RepeatWrapping,
12 |       wrapT: wrapT || THREE.RepeatWrapping,
13 |       minFilter: minFilter || THREE.LinearMipMapLinearFilter,
14 |       magFilter: magFilter || THREE.LinearFilter,
15 |       format: format || THREE.RGBAFormat,
16 |       type: type || THREE.UnsignedByteType
17 |     });
18 |     this.fbos = [this.fbo, this.fbo.clone()];
19 |     this.currentFBO = 0;
20 |     this.orthoCamera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, .00001, 1000);
21 |     this.orthoQuad = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1), this.shader);
22 |     this.orthoQuad.scale.set(width, height, 1.);
23 |     this.orthoScene.add(this.orthoQuad);
24 |     this.texture = this.fbo.texture;
25 | 
26 |   }
27 | 
28 |   render(final) {
29 | 
30 |     this.renderer.render(this.orthoScene, this.orthoCamera, final ? null : this.fbos[1 - this.currentFBO]);
31 |     this.currentFBO = 1 - this.currentFBO;
32 | 
33 |   }
34 | 
35 |   setSize(width, height) {
36 | 
37 |     this.orthoQuad.scale.set(width, height, 1.);
38 | 
39 |     this.fbos[0].setSize(width, height);
40 |     this.fbos[1].setSize(width, height);
41 | 
42 |     this.orthoQuad.scale.set(width, height, 1);
43 | 
44 |     this.orthoCamera.left = -width / 2;
45 |     this.orthoCamera.right = width / 2;
46 |     this.orthoCamera.top = height / 2;
47 |     this.orthoCamera.bottom = -height / 2;
48 |     this.orthoCamera.updateProjectionMatrix();
49 | 
50 |   }
51 | 
52 | }
53 | 
54 | export default ShaderPingPongPass;


--------------------------------------------------------------------------------
/modules/three-rounded-cylinder.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | function RoundedCylinderGeometry(radius, length, bevelSize, bevelSteps, steps = 1 ) {
 4 | 
 5 |   var circleRadius = radius;
 6 |   var circleShape = new THREE.Shape();
 7 |   circleShape.moveTo( 0, circleRadius );
 8 |   circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
 9 |   circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
10 |   circleShape.quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 );
11 |   circleShape.quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius );
12 | 
13 |   var extrudeSettings = {
14 |     steps: steps,
15 |     amount: length,
16 |     bevelEnabled: true,
17 |     bevelThickness: bevelSize,
18 |     bevelSize: bevelSize,
19 |     bevelSegments: bevelSteps
20 |   };
21 | 
22 |   const geometry = new THREE.ExtrudeBufferGeometry( circleShape, extrudeSettings );
23 |   return geometry;
24 | 
25 | }
26 | 
27 | export default RoundedCylinderGeometry;
28 | 


--------------------------------------------------------------------------------
/modules/three-rounded-extruded-polygon.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | function RoundedExtrudedPolygonGeometry(radius, length, sides, steps = 1, bevelThickness = .01, bevelSize = .01, bevelSteps = 1) {
 4 | 
 5 |   var polygonShape = new THREE.Shape();
 6 |   polygonShape.moveTo(radius, 0);
 7 |   for (let j = 0; j < sides; j++) {
 8 |     const a = j * 2 * Math.PI / sides;
 9 |     const x = radius * Math.cos(a);
10 |     const y = radius * Math.sin(a);
11 |     polygonShape.lineTo(x, y);
12 |   }
13 | 
14 |   var extrudeSettings = {
15 |     steps: steps,
16 |     depth: length,
17 |     bevelEnabled: true,
18 |     bevelThickness: bevelThickness,
19 |     bevelSize: bevelSize,
20 |     bevelSegments: bevelSteps
21 |   };
22 | 
23 |   const geometry = new THREE.ExtrudeBufferGeometry(polygonShape, extrudeSettings);
24 |   return geometry;
25 | 
26 | }
27 | 
28 | export default RoundedExtrudedPolygonGeometry;


--------------------------------------------------------------------------------
/modules/three.js:
--------------------------------------------------------------------------------
 1 | import THREE from '../third_party/three.js';
 2 | 
 3 | function getWebGLRenderer() {
 4 |   const renderer = new THREE.WebGLRenderer({ antialias: true });
 5 |   renderer.setSize(800, 800);
 6 |   const canvas = renderer.domElement;
 7 |   canvas.style.width = '400px';
 8 |   canvas.style.height = '400px';
 9 |   return renderer;
10 | }
11 | 
12 | const renderer = getWebGLRenderer();
13 | 
14 | function getCamera(fov) {
15 |   return new THREE.PerspectiveCamera(fov ? fov : 35, 1, .1, 100);
16 | }
17 | 
18 | function getOrthoCamera(w, h) {
19 |   return new THREE.OrthographicCamera(-w, w, h, -h, -100, 100);
20 | }
21 | 
22 | export { renderer, getCamera, getOrthoCamera };


--------------------------------------------------------------------------------
/shaders/barrel.js:
--------------------------------------------------------------------------------
 1 | const barrel = `
 2 | 
 3 | vec2 computeUV(vec2 uv, float k, float kcube) {
 4 | 
 5 |   vec2 t = uv - .5;
 6 |   float r2 = t.x * t.x + t.y * t.y;
 7 |   float f = 0.;
 8 | 
 9 |   if (kcube == 0.0) {
10 |     f = 1. + r2 * k;
11 |   } else {
12 |     f = 1. + r2 * (k + kcube * sqrt(r2));
13 |   }
14 | 
15 |   vec2 nUv = f * t + .5;
16 |   nUv.y = nUv.y;
17 | 
18 |   return nUv;
19 | 
20 | }
21 | 
22 | vec4 barrel(sampler2D inputTexture, vec2 iuv, float k, float kCube, vec2 resolution, vec4 fill) {
23 |   vec2 uv = computeUV(iuv, k, kCube);
24 |   if (uv.x < 0. || uv.x > 1. || uv.y < 0. || uv.y > 1.) {
25 |     return fill;
26 |   } else {
27 |     vec4 c = texture2D(inputTexture, uv);
28 |     //c.rgb *= .75 + .25 * sin( 1.5 * resolution.y * uv.y );
29 |     return c;
30 |   }
31 | }`;
32 | 
33 | export { barrel }


--------------------------------------------------------------------------------
/shaders/chromatic-aberration.js:
--------------------------------------------------------------------------------
 1 | const chromaticAberration = `
 2 | vec2 barrelDistortion(vec2 coord, float amt) {
 3 |   vec2 cc = coord - 0.5;
 4 |   float dist = dot(cc, cc);
 5 |   return coord + cc * dist * amt;
 6 | }
 7 | 
 8 | float sat( float t )
 9 | {
10 |   return clamp( t, 0.0, 1.0 );
11 | }
12 | 
13 | float linterp( float t ) {
14 |   return sat( 1.0 - abs( 2.0*t - 1.0 ) );
15 | }
16 | 
17 | float remap( float t, float a, float b ) {
18 |   return sat( (t - a) / (b - a) );
19 | }
20 | 
21 | vec4 spectrum_offset( float t ) {
22 |   vec4 ret;
23 |   float lo = step(t,0.5);
24 |   float hi = 1.0-lo;
25 |   float w = linterp( remap( t, 1.0/6.0, 5.0/6.0 ) );
26 |   ret = vec4(lo,1.0,hi, 1.) * vec4(1.0-w, w, 1.0-w, 1.);
27 | 
28 |   return pow( ret, vec4(1.0/2.2) );
29 | }
30 | 
31 | const float max_distort = 2.2;
32 | const int num_iter = 12;
33 | const float reci_num_iter_f = 1.0 / float(num_iter);
34 | vec4 chromaticAberration(sampler2D inputTexture, vec2 uv) {
35 | 
36 |   vec4 sumcol = vec4(0.0);
37 |   vec4 sumw = vec4(0.0);
38 |   for ( int i=0; i<num_iter;++i )
39 |   {
40 |     float t = float(i) * reci_num_iter_f;
41 |     vec4 w = spectrum_offset( t );
42 |     sumw += w;
43 |     sumcol += w * texture2D( inputTexture, barrelDistortion(uv, .6 * max_distort*t ) );
44 |   }
45 | 
46 |   return sumcol / sumw;
47 | }
48 | `;
49 | 
50 | export default chromaticAberration;
51 | 


--------------------------------------------------------------------------------
/shaders/color-burn.js:
--------------------------------------------------------------------------------
1 | const colorBurn = `
2 | vec4 colorBurn(vec4 base, vec4 blend) {
3 |   vec4 color = 1. - (1.-blend) / base;
4 |   return color;
5 | }`;
6 | 
7 | export default colorBurn;


--------------------------------------------------------------------------------
/shaders/color-dodge.js:
--------------------------------------------------------------------------------
1 | const colorDodge = `
2 | vec4 colorDodge(vec4 base, vec4 blend) {
3 |   vec4 color = vec4( blend / ( 1.-base) );
4 |   return color;
5 | }`;
6 | 
7 | export default colorDodge;


--------------------------------------------------------------------------------
/shaders/dither-noise.js:
--------------------------------------------------------------------------------
1 | const ditherNoise = `
2 | float ditherNoise(vec2 n, float offset ){
3 |   //return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453);
4 |   return .5 - fract(sin(dot(n.xy + vec2( offset, 0. ), vec2(12.9898, 78.233)))* 43758.5453);
5 | }`;
6 | 
7 | export default ditherNoise;


--------------------------------------------------------------------------------
/shaders/fast-separable-gaussian-blur.js:
--------------------------------------------------------------------------------
 1 | const blur5 = `
 2 | vec4 blur5(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
 3 |   vec4 color = vec4(0.0);
 4 |   vec2 off1 = vec2(1.3333333333333333) * direction;
 5 |   color += texture2D(image, uv) * 0.29411764705882354;
 6 |   color += texture2D(image, uv + (off1 / resolution)) * 0.35294117647058826;
 7 |   color += texture2D(image, uv - (off1 / resolution)) * 0.35294117647058826;
 8 |   return color;
 9 | }`;
10 | 
11 | const blur9 = `
12 | vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
13 |   vec4 color = vec4(0.0);
14 |   vec2 off1 = vec2(1.3846153846) * direction;
15 |   vec2 off2 = vec2(3.2307692308) * direction;
16 |   color += texture2D(image, uv) * 0.2270270270;
17 |   color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
18 |   color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
19 |   color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
20 |   color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
21 |   return color;
22 | }`;
23 | 
24 | const blur13 = `
25 | vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
26 |   vec4 color = vec4(0.0);
27 |   vec2 off1 = vec2(1.411764705882353) * direction;
28 |   vec2 off2 = vec2(3.2941176470588234) * direction;
29 |   vec2 off3 = vec2(5.176470588235294) * direction;
30 |   color += texture2D(image, uv) * 0.1964825501511404;
31 |   color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344;
32 |   color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344;
33 |   color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732;
34 |   color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732;
35 |   color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057;
36 |   color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057;
37 |   return color;
38 | }
39 | `;
40 | 
41 | export {blur5, blur9, blur13};
42 | 


--------------------------------------------------------------------------------
/shaders/functions.js:
--------------------------------------------------------------------------------
1 | const parabola = `float parabola( float x, float k ){
2 |   return pow( 4.0*x*(1.0-x), k );
3 | }`;
4 | 
5 | export { parabola }


--------------------------------------------------------------------------------
/shaders/fxaa-pixel-shift.js:
--------------------------------------------------------------------------------
 1 | const fxaa = `
 2 | #define FXAA_SPAN_MAX 8.0
 3 | #define FXAA_REDUCE_MUL   (1.0/FXAA_SPAN_MAX)
 4 | #define FXAA_REDUCE_MIN   (1.0/128.0)
 5 | #define FXAA_SUBPIX_SHIFT (1.0/4.0)
 6 | vec3 fxaa(sampler2D tex, vec2 uv) {
 7 | 
 8 |   vec2 rcpFrame = 1. / resolution;
 9 |   vec4 aauv = vec4( uv, uv - (rcpFrame * (0.5 + FXAA_SUBPIX_SHIFT)));
10 | 
11 |   vec3 rgbNW = texture2D(tex, aauv.zw ).xyz;
12 |   vec3 rgbNE = texture2D(tex, aauv.zw + vec2(1,0)*rcpFrame.xy ).xyz;
13 |   vec3 rgbSW = texture2D(tex, aauv.zw + vec2(0,1)*rcpFrame.xy ).xyz;
14 |   vec3 rgbSE = texture2D(tex, aauv.zw + vec2(1,1)*rcpFrame.xy ).xyz;
15 |   vec3 rgbM  = texture2D(tex, aauv.xy ).xyz;
16 |   vec3 luma = vec3(0.299, 0.587, 0.114);
17 |   float lumaNW = dot(rgbNW, luma);
18 |   float lumaNE = dot(rgbNE, luma);
19 |   float lumaSW = dot(rgbSW, luma);
20 |   float lumaSE = dot(rgbSE, luma);
21 |   float lumaM  = dot(rgbM,  luma);
22 |   float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
23 |   float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
24 |   vec2 dir;
25 |   dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
26 |   dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
27 |   float dirReduce = max(
28 |       (lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL),
29 |       FXAA_REDUCE_MIN);
30 |   float rcpDirMin = 1.0/(min(abs(dir.x), abs(dir.y)) + dirReduce);
31 |   dir = min(vec2( FXAA_SPAN_MAX,  FXAA_SPAN_MAX),
32 |         max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
33 |         dir * rcpDirMin)) * rcpFrame.xy;
34 |   vec3 rgbA = (1.0/2.0) * (
35 |       texture2D(tex, aauv.xy + dir * (1.0/3.0 - 0.5) ).xyz +
36 |       texture2D(tex, aauv.xy + dir * (2.0/3.0 - 0.5) ).xyz);
37 |   vec3 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * (
38 |       texture2D(tex, aauv.xy + dir * (0.0/3.0 - 0.5) ).xyz +
39 |       texture2D(tex, aauv.xy + dir * (3.0/3.0 - 0.5) ).xyz);
40 |   float lumaB = dot(rgbB, luma);
41 |   if((lumaB < lumaMin) || (lumaB > lumaMax)) return rgbA;
42 |   return rgbB;
43 | }
44 | `;
45 | 
46 | export default fxaa;
47 | 


--------------------------------------------------------------------------------
/shaders/fxaa.js:
--------------------------------------------------------------------------------
 1 | const fxaa = `
 2 | 
 3 | #define FXAA_REDUCE_MIN   (1.0/128.0)
 4 | #define FXAA_REDUCE_MUL   (1.0/8.0)
 5 | #define FXAA_SPAN_MAX     8.0
 6 | 
 7 | vec4 fxaa(sampler2D tex, vec2 uv) {
 8 | 
 9 |     vec2 res = 1. / resolution;
10 | 
11 |     vec3 rgbNW = texture2D( tex, ( uv.xy + vec2( -1.0, -1.0 ) * res ) ).xyz;
12 |     vec3 rgbNE = texture2D( tex, ( uv.xy + vec2( 1.0, -1.0 ) * res ) ).xyz;
13 |     vec3 rgbSW = texture2D( tex, ( uv.xy + vec2( -1.0, 1.0 ) * res ) ).xyz;
14 |     vec3 rgbSE = texture2D( tex, ( uv.xy + vec2( 1.0, 1.0 ) * res ) ).xyz;
15 |     vec4 rgbaM  = texture2D( tex,  uv.xy  * res );
16 |     vec3 rgbM  = rgbaM.xyz;
17 |     vec3 luma = vec3( 0.299, 0.587, 0.114 );
18 | 
19 |     float lumaNW = dot( rgbNW, luma );
20 |     float lumaNE = dot( rgbNE, luma );
21 |     float lumaSW = dot( rgbSW, luma );
22 |     float lumaSE = dot( rgbSE, luma );
23 |     float lumaM  = dot( rgbM,  luma );
24 |     float lumaMin = min( lumaM, min( min( lumaNW, lumaNE ), min( lumaSW, lumaSE ) ) );
25 |     float lumaMax = max( lumaM, max( max( lumaNW, lumaNE) , max( lumaSW, lumaSE ) ) );
26 | 
27 |     vec2 dir;
28 |     dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
29 |     dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
30 | 
31 |     float dirReduce = max( ( lumaNW + lumaNE + lumaSW + lumaSE ) * ( 0.25 * FXAA_REDUCE_MUL ), FXAA_REDUCE_MIN );
32 | 
33 |     float rcpDirMin = 1.0 / ( min( abs( dir.x ), abs( dir.y ) ) + dirReduce );
34 |     dir = min( vec2( FXAA_SPAN_MAX,  FXAA_SPAN_MAX),
35 |           max( vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
36 |                 dir * rcpDirMin)) * res;
37 |     vec4 rgbA = (1.0/2.0) * (
38 |     texture2D(tex,  uv.xy + dir * (1.0/3.0 - 0.5)) +
39 |     texture2D(tex,  uv.xy + dir * (2.0/3.0 - 0.5)));
40 |     vec4 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * (
41 |     texture2D(tex,  uv.xy + dir * (0.0/3.0 - 0.5)) +
42 |     texture2D(tex,  uv.xy + dir * (3.0/3.0 - 0.5)));
43 |     float lumaB = dot(rgbB, vec4(luma, 0.0));
44 | 
45 |     if ( ( lumaB < lumaMin ) || ( lumaB > lumaMax ) ) {
46 |         return rgbA;
47 |     } else {
48 |         return rgbB;
49 |     }
50 | 
51 | }
52 | `;
53 | 
54 | export default fxaa;
55 | 


--------------------------------------------------------------------------------
/shaders/glitch.js:
--------------------------------------------------------------------------------
 1 | const glitch = `
 2 | //2D (returns 0 - 1)
 3 | float random2d(vec2 n) {
 4 |     return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
 5 | }
 6 | 
 7 | float randomRange (in vec2 seed, in float min, in float max) {
 8 |     return min + random2d(seed) * (max - min);
 9 | }
10 | 
11 | // return 1 if v inside 1d range
12 | float insideRange(float v, float bottom, float top) {
13 |    return step(bottom, v) - step(top, v);
14 | }
15 | 
16 | //inputs
17 | float amount = 0.2; //0 - 1 glitch amount
18 | //float speed = 0.6; //0 - 1 speed
19 | 
20 | vec4 glitch( sampler2D inputTexture, vec2 uv, float speed, float time ) {
21 | 
22 |   float t = floor(time * speed * 60.0);
23 | 
24 |   //copy orig
25 |   vec3 outCol = texture2D(inputTexture, uv).rgb;
26 | 
27 |   //randomly offset slices horizontally
28 |   float maxOffset = amount/2.0;
29 |   for (float i = 0.0; i < 10.0 * .2; i += 1.0) {
30 |     float sliceY = random2d(vec2(t , 2345.0 + float(i)));
31 |     float sliceH = random2d(vec2(t , 9035.0 + float(i))) * 0.25;
32 |     float hOffset = randomRange(vec2(t , 9625.0 + float(i)), -maxOffset, maxOffset);
33 |     vec2 uvOff = uv;
34 |     uvOff.x += hOffset;
35 |     if (insideRange(uv.y, sliceY, fract(sliceY+sliceH)) == 1.0 ){
36 |       outCol = texture2D(inputTexture, uvOff).rgb;
37 |     }
38 |   }
39 | 
40 |   //do slight offset on one entire channel
41 |   float maxColOffset = amount/6.0;
42 |   float rnd = random2d(vec2(t , 9545.0));
43 |   vec2 colOffset = vec2(randomRange(vec2(t , 9545.0),-maxColOffset,maxColOffset),
44 |                      randomRange(vec2(t , 7205.0),-maxColOffset,maxColOffset));
45 |   if (rnd < 0.33){
46 |       outCol.r = texture2D(inputTexture, uv + colOffset).r;
47 | 
48 |   }else if (rnd < 0.66){
49 |       outCol.g = texture2D(inputTexture, uv + colOffset).g;
50 | 
51 |   } else{
52 |       outCol.b = texture2D(inputTexture, uv + colOffset).b;
53 |   }
54 | 
55 |   return vec4(outCol,1.0);
56 | }`;
57 | 
58 | export { glitch }


--------------------------------------------------------------------------------
/shaders/grayscale.js:
--------------------------------------------------------------------------------
 1 | const grayscale = `
 2 | float grayscale(vec3 color) {
 3 |   return dot(color.rgb, vec3(0.299, 0.587, 0.114));
 4 | }
 5 | 
 6 | float grayscale(vec4 color) {
 7 |   return dot(color.rgb, vec3(0.299, 0.587, 0.114));
 8 | }`;
 9 | 
10 | export default grayscale;


--------------------------------------------------------------------------------
/shaders/high-pass.js:
--------------------------------------------------------------------------------
 1 | const highPass = `
 2 | vec4 highPass(sampler2D texture, vec2 uv) {
 3 | 
 4 |   float step_w = 1.0/resolution.x;
 5 |   float step_h = 1.0/resolution.y;
 6 | 
 7 |   vec2 offset[9];
 8 |   float kernel[9];
 9 | 
10 |   offset[ 0 ] = vec2(-step_w, -step_h);
11 |   offset[ 1 ] = vec2(0.0, -step_h);
12 |   offset[ 2 ] = vec2(step_w, -step_h);
13 | 
14 |   offset[ 3 ] = vec2(-step_w, 0.0);
15 |   offset[ 4 ] = vec2(0.0, 0.0);
16 |   offset[ 5 ] = vec2(step_w, 0.0);
17 | 
18 |   offset[ 6 ] = vec2(-step_w, step_h);
19 |   offset[ 7 ] = vec2(0.0, step_h);
20 |   offset[ 8 ] = vec2(step_w, step_h);
21 | 
22 |   kernel[ 0 ] = -1.;
23 |   kernel[ 1 ] = -1.;
24 |   kernel[ 2 ] = -1.;
25 | 
26 |   kernel[ 3 ] = -1.;
27 |   kernel[ 4 ] = 8.;
28 |   kernel[ 5 ] = -1.;
29 | 
30 |   kernel[ 6 ] = -1.;
31 |   kernel[ 7 ] = -1.;
32 |   kernel[ 8 ] = -1.;
33 | 
34 |   int i = 0;
35 |   vec4 sum = vec4(0.0);
36 | 
37 |   for( int i=0; i<9; i++ ) {
38 |     for( int j=1; j<10; j++ ) {
39 |       vec4 tmp = texture2D(texture, uv + float(j) * offset[i]);
40 |       sum += tmp * kernel[i];
41 |       sum.a = 1.0;
42 |     }
43 |   }
44 | 
45 |   return .5 +  sum / 90.;
46 | }
47 | `;
48 | 
49 | export default highPass;
50 | 


--------------------------------------------------------------------------------
/shaders/hsl2rgb.js:
--------------------------------------------------------------------------------
 1 | const hsl2rgb = `
 2 | float hue2rgb(float f1, float f2, float hue) {
 3 |     if (hue < 0.0)
 4 |         hue += 1.0;
 5 |     else if (hue > 1.0)
 6 |         hue -= 1.0;
 7 |     float res;
 8 |     if ((6.0 * hue) < 1.0)
 9 |         res = f1 + (f2 - f1) * 6.0 * hue;
10 |     else if ((2.0 * hue) < 1.0)
11 |         res = f2;
12 |     else if ((3.0 * hue) < 2.0)
13 |         res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
14 |     else
15 |         res = f1;
16 |     return res;
17 | }
18 | vec3 hsl2rgb(vec3 hsl) {
19 |     vec3 rgb;
20 |     if (hsl.y == 0.0) {
21 |         rgb = vec3(hsl.z); // Luminance
22 |     } else {
23 |         float f2;
24 |         if (hsl.z < 0.5)
25 |             f2 = hsl.z * (1.0 + hsl.y);
26 |         else
27 |             f2 = hsl.z + hsl.y - hsl.y * hsl.z;
28 |         float f1 = 2.0 * hsl.z - f2;
29 |         rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
30 |         rgb.g = hue2rgb(f1, f2, hsl.x);
31 |         rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
32 |     }
33 |     return rgb;
34 | }
35 | `;
36 | 
37 | export default hsl2rgb;
38 | 


--------------------------------------------------------------------------------
/shaders/levels.js:
--------------------------------------------------------------------------------
 1 | const gammaCorrect = `
 2 | vec3 gammaCorrect(vec3 color, vec3 gamma){
 3 |     return pow(color, 1.0/gamma);
 4 | }`;
 5 | 
 6 | const levelRange = `
 7 | vec3 levelRange(vec3 color, vec3 minInput, vec3 maxInput){
 8 |     return min(max(color - minInput, vec3(0.0)) / (maxInput - minInput), vec3(1.0));
 9 | }`;
10 | 
11 | const finalLevels = `
12 | vec3 finalLevels(vec3 color, vec3 minInput, vec3 gamma, vec3 maxInput){
13 |     return gammaCorrect(levelRange(color, minInput, maxInput), gamma);
14 | }`;
15 | 
16 | export { gammaCorrect, levelRange, finalLevels };


--------------------------------------------------------------------------------
/shaders/lighten.js:
--------------------------------------------------------------------------------
 1 | const lighten = `
 2 | 
 3 | vec4 lighten(vec4 base, vec4 blend) {
 4 |   return max(base, blend);
 5 | }
 6 | 
 7 | `;
 8 | 
 9 | export default lighten;
10 | 


--------------------------------------------------------------------------------
/shaders/map.js:
--------------------------------------------------------------------------------
 1 | const map1 = `float map(float value, float inMin, float inMax, float outMin, float outMax) {
 2 |   return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
 3 | }`;
 4 | 
 5 | const map2 = `vec2 map(vec2 value, vec2 inMin, vec2 inMax, vec2 outMin, vec2 outMax) {
 6 |   return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
 7 | }`;
 8 | 
 9 | const map3 = `vec3 map(vec3 value, vec3 inMin, vec3 inMax, vec3 outMin, vec3 outMax) {
10 |   return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
11 | }`;
12 | 
13 | const map4 = `vec4 map(vec4 value, vec4 inMin, vec4 inMax, vec4 outMin, vec4 outMax) {
14 |   return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
15 | }`;
16 | 
17 | export { map1, map2, map3, map4 }


--------------------------------------------------------------------------------
/shaders/noise.glsl:
--------------------------------------------------------------------------------
 1 | float hash( float n ) { return fract(sin(n)*753.5453123); }
 2 | float noise( in vec3 x )
 3 | {
 4 |   vec3 p = floor(x);
 5 |   vec3 f = fract(x);
 6 |   f = f*f*(3.0-2.0*f);
 7 | 
 8 |   float n = p.x + p.y*157.0 + 113.0*p.z;
 9 |   return mix(mix(mix( hash(n+  0.0), hash(n+  1.0),f.x),
10 |                  mix( hash(n+157.0), hash(n+158.0),f.x),f.y),
11 |   mix(mix( hash(n+113.0), hash(n+114.0),f.x),
12 |       mix( hash(n+270.0), hash(n+271.0),f.x),f.y),f.z);
13 | }
14 | 


--------------------------------------------------------------------------------
/shaders/ortho.js:
--------------------------------------------------------------------------------
 1 | const turbulence = `
 2 | precision highp float;
 3 | 
 4 | attribute vec3 position;
 5 | attribute vec2 uv;
 6 | 
 7 | uniform mat4 modelViewMatrix;
 8 | uniform mat4 projectionMatrix;
 9 | 
10 | varying vec2 vUv;
11 | 
12 | void main() {
13 |   vUv = uv;
14 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );
15 | }`;
16 | 
17 | export default turbulence;
18 | 


--------------------------------------------------------------------------------
/shaders/overlay.js:
--------------------------------------------------------------------------------
 1 | const overlay = `
 2 | float applyOverlayToChannel( float base, float blend ) {
 3 |   return (base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));
 4 | }
 5 | 
 6 | vec4 overlay(vec4 base, vec4 blend, float opacity) {
 7 |   vec4 color = vec4(
 8 |     applyOverlayToChannel( base.r, blend.r ),
 9 |     applyOverlayToChannel( base.g, blend.g ),
10 |     applyOverlayToChannel( base.b, blend.b ),
11 |     applyOverlayToChannel( base.a, blend.a )
12 |   );
13 |   return color * opacity + base * ( 1. - opacity );
14 | }
15 | 
16 | `;
17 | 
18 | export default overlay;
19 | 


--------------------------------------------------------------------------------
/shaders/radial-blur.js:
--------------------------------------------------------------------------------
 1 | import random from './random.js';
 2 | 
 3 | const radialBlur = `
 4 | ${random}
 5 | 
 6 | vec4 radialBlur(sampler2D texture, vec2 center, float strength, vec2 resolution ,vec2 uv) {
 7 |     vec4 color=vec4(0.0);
 8 |     float total=0.0;
 9 |     vec2 toCenter=center-uv*resolution;
10 |     float offset=random(vec3(12.9898,78.233,151.7182),0.0);
11 |     for(float t=0.0;
12 |         t<=40.0;
13 |         t++){
14 |         float percent=(t+offset)/40.0;
15 |         float weight=4.0*(percent-percent*percent);
16 |         vec4 sample=texture2D(texture,uv+toCenter*percent*strength/resolution);
17 |         sample.rgb*=sample.a;
18 |         color+=sample*weight;
19 |         total+=weight;
20 |     }
21 |     color = color/total;
22 |     color.rgb/=color.a+0.00001;
23 |     return color;
24 | }`;
25 | 
26 | export default radialBlur;


--------------------------------------------------------------------------------
/shaders/random.js:
--------------------------------------------------------------------------------
1 | const random = `
2 | float random(vec3 scale,float seed){
3 |     return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);
4 | }
5 | `;
6 | 
7 | export default random;


--------------------------------------------------------------------------------
/shaders/rgb-shift.js:
--------------------------------------------------------------------------------
 1 | import smootherstep from './smootherstep.js';
 2 | 
 3 | const rgbShift = `
 4 | ${smootherstep}
 5 | 
 6 | vec4 rgbShift(sampler2D inputTexture, vec2 uv, vec2 delta){
 7 | 
 8 |   vec2 dir = uv - vec2( .5 );
 9 |   float d = .7 * length( dir );
10 |   normalize( dir );
11 |   vec2 value = d * dir * delta;
12 | 
13 |   vec4 c1 = texture2D( inputTexture, uv - value / resolution.x );
14 |   vec4 c2 = texture2D( inputTexture, uv );
15 |   vec4 c3 = texture2D( inputTexture, uv + value / resolution.y );
16 | 
17 |   return vec4( c1.r, c2.g, c3.b, c1.a + c2.a + c3.b );
18 | 
19 | }
20 | `;
21 | 
22 | export default rgbShift;


--------------------------------------------------------------------------------
/shaders/screen.js:
--------------------------------------------------------------------------------
1 | const screen = `
2 | vec4 screen(vec4 base, vec4 blend, float opacity) {
3 |   vec4 color = 1. - (1.-base) * (1.-blend);
4 |   color = color * opacity + base * ( 1. - opacity );
5 |   return color;
6 | }`;
7 | 
8 | export default screen;


--------------------------------------------------------------------------------
/shaders/smootherstep.js:
--------------------------------------------------------------------------------
1 | const smootherstep = `
2 | float smootherstep(float edge0, float edge1, float x) {
3 |   x = clamp((x - edge0)/(edge1 - edge0), 0.0, 1.0);
4 |   return x*x*x*(x*(x*6. - 15.) + 10.);
5 | }
6 | `;
7 | 
8 | export default smootherstep;
9 | 


--------------------------------------------------------------------------------
/shaders/sobel.js:
--------------------------------------------------------------------------------
 1 | const sobel = `
 2 | vec3 sobel(sampler2D texture, vec2 uv, float thickness) {
 3 |   float x = thickness * 1.0 / resolution.x;
 4 |   float y = thickness * 1.0 / resolution.y;
 5 |   vec4 horizEdge = vec4( 0.0 );
 6 |   horizEdge -= texture2D( texture, vec2( uv.x - x, uv.y - y ) ) * 1.0;
 7 |   horizEdge -= texture2D( texture, vec2( uv.x - x, uv.y     ) ) * 2.0;
 8 |   horizEdge -= texture2D( texture, vec2( uv.x - x, uv.y + y ) ) * 1.0;
 9 |   horizEdge += texture2D( texture, vec2( uv.x + x, uv.y - y ) ) * 1.0;
10 |   horizEdge += texture2D( texture, vec2( uv.x + x, uv.y     ) ) * 2.0;
11 |   horizEdge += texture2D( texture, vec2( uv.x + x, uv.y + y ) ) * 1.0;
12 |   vec4 vertEdge = vec4( 0.0 );
13 |   vertEdge -= texture2D( texture, vec2( uv.x - x, uv.y - y ) ) * 1.0;
14 |   vertEdge -= texture2D( texture, vec2( uv.x    , uv.y - y ) ) * 2.0;
15 |   vertEdge -= texture2D( texture, vec2( uv.x + x, uv.y - y ) ) * 1.0;
16 |   vertEdge += texture2D( texture, vec2( uv.x - x, uv.y + y ) ) * 1.0;
17 |   vertEdge += texture2D( texture, vec2( uv.x    , uv.y + y ) ) * 2.0;
18 |   vertEdge += texture2D( texture, vec2( uv.x + x, uv.y + y ) ) * 1.0;
19 |   vec3 edge = 1. - (sqrt((horizEdge.rgb * horizEdge.rgb) + (vertEdge.rgb * vertEdge.rgb)));
20 |   return edge;
21 | }`;
22 | 
23 | export default sobel;


--------------------------------------------------------------------------------
/shaders/sobel2.js:
--------------------------------------------------------------------------------
 1 | const sobel2 = `
 2 | mat3 G[2];
 3 | 
 4 | const mat3 g0 = mat3( 1.0, 2.0, 1.0, 0.0, 0.0, 0.0, -1.0, -2.0, -1.0 );
 5 | const mat3 g1 = mat3( 1.0, 0.0, -1.0, 2.0, 0.0, -2.0, 1.0, 0.0, -1.0 );
 6 | 
 7 | vec4 sobel2(sampler2D texture, vec2 uv) {
 8 |   vec2 texel = vec2(1.0 / resolution);
 9 |   mat3 I;
10 |   float cnv[2];
11 |   vec3 sample;
12 | 
13 |   G[0] = g0;
14 |   G[1] = g1;
15 | 
16 |   /* fetch the 3x3 neighbourhood and use the RGB vector's length as intensity value */
17 |   for (float i=0.0; i<3.0; i++) {
18 |     for (float j=0.0; j<3.0; j++) {
19 |       sample = texture2D( texture, uv + texel * vec2(i-1.0,j-1.0) ).rgb;
20 |       I[int(i)][int(j)] = length(sample);
21 |     }
22 |   }
23 | 
24 |   /* calculate the convolution values for all the masks */
25 |   for (int i=0; i<2; i++) {
26 |     float dp3 = dot(G[i][0], I[0]) + dot(G[i][1], I[1]) + dot(G[i][2], I[2]);
27 |     cnv[i] = dp3 * dp3;
28 |   }
29 | 
30 |   return vec4(0.5 * sqrt(cnv[0]*cnv[0]+cnv[1]*cnv[1]));
31 | }`;
32 | 
33 | export default sobel2;
34 | 


--------------------------------------------------------------------------------
/shaders/soft-light.js:
--------------------------------------------------------------------------------
 1 | const softLight = `
 2 | float applySoftLightToChannel( float base, float blend ) {
 3 |   return ((blend < 0.5) ? (2.0 * base * blend + base * base * (1.0 - 2.0 * blend)) : (sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend)));
 4 | }
 5 | 
 6 | vec4 softLight(vec4 base, vec4 blend) {
 7 |   vec4 color = vec4(
 8 |     applySoftLightToChannel( base.r, blend.r ),
 9 |     applySoftLightToChannel( base.g, blend.g ),
10 |     applySoftLightToChannel( base.b, blend.b ),
11 |     applySoftLightToChannel( base.a, blend.a )
12 |   );
13 |   return color;
14 | }`;
15 | 
16 | export default softLight;
17 | 


--------------------------------------------------------------------------------
/shaders/tilt-shift.js:
--------------------------------------------------------------------------------
 1 | import smootherstep from './smootherstep.js';
 2 | 
 3 | const tiltShift = `
 4 | ${smootherstep}
 5 | 
 6 | vec4 tiltShift(sampler2D inputTexture, vec2 uv){
 7 | 
 8 |   vec4 sum = vec4( 0. );
 9 |   vec2 inc = vec2( 0., .005 * smootherstep( 0., .5, abs( .5 - uv.y ) ) );
10 | 
11 |   sum += texture2D( inputTexture, ( uv - inc * 4. ) ) * 0.051;
12 |   sum += texture2D( inputTexture, ( uv - inc * 3. ) ) * 0.0918;
13 |   sum += texture2D( inputTexture, ( uv - inc * 2. ) ) * 0.12245;
14 |   sum += texture2D( inputTexture, ( uv - inc * 1. ) ) * 0.1531;
15 |   sum += texture2D( inputTexture, ( uv + inc * 0. ) ) * 0.1633;
16 |   sum += texture2D( inputTexture, ( uv + inc * 1. ) ) * 0.1531;
17 |   sum += texture2D( inputTexture, ( uv + inc * 2. ) ) * 0.12245;
18 |   sum += texture2D( inputTexture, ( uv + inc * 3. ) ) * 0.0918;
19 |   sum += texture2D( inputTexture, ( uv + inc * 4. ) ) * 0.051;
20 | 
21 |   return sum;
22 | 
23 | }
24 | `;
25 | 
26 | export default tiltShift;


--------------------------------------------------------------------------------
/shaders/turbulence.js:
--------------------------------------------------------------------------------
 1 | const turbulence = `
 2 | float turbulence( vec3 p ) {
 3 | 
 4 |   float w = 100.0;
 5 |   float t = -.5;
 6 | 
 7 |   for (float f = 1.0 ; f <= 10.0 ; f++ ){
 8 |     float power = pow( 2.0, f );
 9 |     t += abs( noise3d( vec3( power * p )));
10 |   }
11 | 
12 |   return t;
13 | 
14 | }
15 | `;
16 | 
17 | export default turbulence;
18 | 


--------------------------------------------------------------------------------
/shaders/vignette.js:
--------------------------------------------------------------------------------
1 | const vignette = `
2 | float vignette(vec2 uv, float boost, float reduction) {
3 |   vec2 position = vUv - .5;
4 |   return boost - length(position) * reduction;
5 | }
6 | `;
7 | 
8 | export default vignette;
9 | 


--------------------------------------------------------------------------------
/shaders/voronoise2d.js:
--------------------------------------------------------------------------------
 1 | const voronoise2d = `
 2 | //  <https://www.shadertoy.com/view/Xd23Dh>
 3 | //  by inigo quilez <http://iquilezles.org/www/articles/voronoise/voronoise.htm>
 4 | //
 5 | 
 6 | vec3 hash3( vec2 p ){
 7 |     vec3 q = vec3( dot(p,vec2(127.1,311.7)),
 8 |            dot(p,vec2(269.5,183.3)),
 9 |            dot(p,vec2(419.2,371.9)) );
10 |   return fract(sin(q)*43758.5453);
11 | }
12 | 
13 | float voronoise2d( in vec2 x, float u, float v ){
14 |   vec2 p = floor(x);
15 |   vec2 f = fract(x);
16 | 
17 |   float k = 1.0+63.0*pow(1.0-v,4.0);
18 | 
19 |   float va = 0.0;
20 |   float wt = 0.0;
21 |   for( int j=-2; j<=2; j++ )
22 |   for( int i=-2; i<=2; i++ )
23 |   {
24 |       vec2 g = vec2( float(i),float(j) );
25 |   vec3 o = hash3( p + g )*vec3(u,u,1.0);
26 |   vec2 r = g - f + o.xy;
27 |   float d = dot(r,r);
28 |   float ww = pow( 1.0-smoothstep(0.0,1.414,sqrt(d)), k );
29 |   va += o.z*ww;
30 |   wt += ww;
31 |   }
32 | 
33 |   return va/wt;
34 | }`;
35 | 
36 | export default voronoise2d;
37 | 


--------------------------------------------------------------------------------
/third_party/THREE.LoaderUtils.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Don McCurdy / https://www.donmccurdy.com
 3 |  */
 4 | 
 5 | var LoaderUtils = {
 6 | 
 7 | 	decodeText: function ( array ) {
 8 | 
 9 | 		if ( typeof TextDecoder !== 'undefined' ) {
10 | 
11 | 			return new TextDecoder().decode( array );
12 | 
13 | 		}
14 | 
15 | 		// Avoid the String.fromCharCode.apply(null, array) shortcut, which
16 | 		// throws a "maximum call stack size exceeded" error for large arrays.
17 | 
18 | 		var s = '';
19 | 
20 | 		for ( var i = 0, il = array.length; i < il; i ++ ) {
21 | 
22 | 			// Implicitly assumes little-endian.
23 | 			s += String.fromCharCode( array[ i ] );
24 | 
25 | 		}
26 | 
27 | 		// Merges multi-byte utf-8 characters.
28 | 		return decodeURIComponent( escape( s ) );
29 | 
30 | 	},
31 | 
32 | 	extractUrlBase: function ( url ) {
33 | 
34 | 		var index = url.lastIndexOf( '/' );
35 | 
36 | 		if ( index === - 1 ) return './';
37 | 
38 | 		return url.substr( 0, index + 1 );
39 | 
40 | 	}
41 | 
42 | };
43 | 
44 | export { LoaderUtils };
45 | 


--------------------------------------------------------------------------------
/third_party/perlin-functions.js:
--------------------------------------------------------------------------------
 1 | import noise from '../third_party/perlin.js';
 2 | 
 3 | function squareTurbulence(v) {
 4 |   return Math.pow(v, 2.);
 5 | }
 6 | 
 7 | function ridgedTurbulence(v) {
 8 |   return 1. - Math.abs(v);
 9 | }
10 | 
11 | function gaussianTurbulence(v) {
12 |   return 1. - Math.exp(-Math.pow(v, 2));
13 | }
14 | 
15 | function fbm(x, y, z) {
16 |   let value = 0.;
17 |   let amplitude = 1.;
18 |   for (let i = 0; i < 8; i++) {
19 |     value += amplitude * Math.abs(noise.perlin3(x, y, z));
20 |     x *= 2.;
21 |     y *= 2.;
22 |     z *= 2.;
23 |     amplitude *= .5;
24 |   }
25 |   return 2 * squareTurbulence(.3 + value) - 1;
26 | }
27 | 
28 | 
29 | function turbulence(x, y, z) {
30 | 
31 |   let w = 100.0;
32 |   let t = -.5;
33 | 
34 |   for (let f = 1.0; f <= 10.0; f++) {
35 |     let power = Math.pow(2.0, f);
36 |     t += Math.abs(noise.perlin3(x * power, y * power, z * power));
37 |   }
38 | 
39 |   return t;
40 | 
41 | }
42 | 
43 | export { turbulence, fbm, gaussianTurbulence, ridgedTurbulence, squareTurbulence, noise }


--------------------------------------------------------------------------------