updating
BIN
03/time.png
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
06/easing.png
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
07/batman.png
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 241 KiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
08/matrix.png
|
Before Width: | Height: | Size: 581 KiB After Width: | Height: | Size: 581 KiB |
BIN
09/dots5.png
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 284 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 89 KiB |
BIN
09/nuts.png
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 142 KiB |
BIN
10/1d-random.png
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 65 KiB |
BIN
10/ikeda-00.png
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
10/ikeda-03.png
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
BIN
11/1d-noise.png
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
BIN
11/3d-noise.png
|
Before Width: | Height: | Size: 254 KiB After Width: | Height: | Size: 253 KiB |
BIN
11/3d-pnoise.png
|
Before Width: | Height: | Size: 225 KiB After Width: | Height: | Size: 224 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
BIN
11/iching-03.png
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
BIN
11/lava-lamp.png
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 642 KiB After Width: | Height: | Size: 646 KiB |
BIN
12/2d-cnoise.png
|
Before Width: | Height: | Size: 619 KiB After Width: | Height: | Size: 622 KiB |
|
Before Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 620 KiB After Width: | Height: | Size: 618 KiB |
BIN
12/3d-cnoise.png
|
Before Width: | Height: | Size: 556 KiB After Width: | Height: | Size: 560 KiB |
20
12/README.md
|
|
@ -116,10 +116,6 @@ Explore by:
|
|||
- What if we want to compute an extra point with the mouse position?
|
||||
- What other ways of constructing this distance field beside ```m_dist = min(m_dist, dist);```, can you imagine?
|
||||
- What interesting patterns you can make with this distance field?
|
||||
- Try to replicate this:
|
||||
|
||||
<a href="../edit.html#12/metaballs.frag"><img src="metaballs.gif" width="520px" height="200px"></img></a>
|
||||

|
||||
|
||||
This algorithm can also be interpreted from the perspective of the points and not the pixels. In that case it can be describe as: each point grows until it finds the area of another point. Which mirrors some of the grow rules on nature. Living forms are shaped by this tension between an inner force to expand and grow limited by the forces
|
||||
on their medium. The classic algorithm that simulate this behavior is named after [Georgy Voronoi](https://en.wikipedia.org/wiki/Georgy_Voronoy).
|
||||
|
|
@ -149,15 +145,23 @@ Like we did before now is time to scale this up, switching to [Steven Worley's p
|
|||
|
||||
<a href="../edit.html#12/vorono-01.frag"><canvas id="custom" class="canvas" data-fragment-url="vorono-01.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
Once you figurate out this algorithm think interesting and creative uses for it
|
||||
Once you figurate out this algorithm think interesting and creative uses for it.
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
<iframe src="https://player.vimeo.com/video/82989945?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
|
||||
### Improving Voronoi
|
||||
|
||||
In 2011, [Stefan Gustavson optimized Steven Worley's algorithm to GPU](http://webstaff.itn.liu.se/~stegu/GLSL-cellular/GLSL-cellular-notes.pdf) by only iterating trough a 2x2 matrix instead of 3x3. This reduce the work significantly but can create artifacts in form of discontinuities. Take a look to the following examples.
|
||||
|
||||
<div class="glslGallery" data="12/2d-cnoise-2x2,12/2d-cnoise-2x2x2,12/2d-cnoise,12/3d-cnoise"></div>
|
||||
<div class="glslGallery" data="12/2d-cnoise-2x2,12/2d-cnoise-2x2x2,12/2d-cnoise,12/3d-cnoise" data-properties="clickRun:edior,openFrameIcon:false"></div>
|
||||
|
||||
Later in 2012 [Inigo Quilez wrote an article on how to make precise voronoi borders](http://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm).
|
||||
|
||||
|
|
@ -171,8 +175,6 @@ Inigio's experiment on voronoi didn't stop there. In 2014 he wrote this nice art
|
|||
|
||||
Now is up to you to observe and learn how to use and modify this technique for your own expressive porpoises.
|
||||
|
||||
<a href="../edit.html#12/stippling.frag"><img src="stippling-long.png" width="520px" height="200px"></img></a>
|
||||
|
||||
<a href="../edit.html#12/cell.frag"><img src="cell-long.png"></img></a>
|
||||
<div class="glslGallery" data="12/metaballs,12/stippling,12/cell,12/tissue,12/cracks,160504143842" data-properties="clickRun:edior,openFrameIcon:false"></div>
|
||||
|
||||

|
||||
|
|
|
|||
BIN
12/bubbles.jpg
|
Before Width: | Height: | Size: 136 KiB |
BIN
12/cell-long.png
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 339 KiB After Width: | Height: | Size: 338 KiB |
|
After Width: | Height: | Size: 53 KiB |
BIN
12/metaballs.png
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
BIN
12/reza.jpg
|
Before Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 608 KiB |
|
Before Width: | Height: | Size: 15 KiB |
BIN
12/stippling.png
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
BIN
12/tissue.png
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
BIN
12/vorono-01.png
|
Before Width: | Height: | Size: 663 KiB After Width: | Height: | Size: 668 KiB |
BIN
13/1d-fbm.png
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
BIN
13/clouds.png
|
Before Width: | Height: | Size: 812 KiB After Width: | Height: | Size: 812 KiB |
BIN
13/noise.png
|
Before Width: | Height: | Size: 557 KiB After Width: | Height: | Size: 556 KiB |
|
|
@ -1 +1 @@
|
|||
<div class="glslGallery" log="160423150559,160423150752,160423150810,160423150825,160423150844,160423150901,160423150919,160423150935,160423150954"></div>
|
||||
<div class="glslGallery" data="160423150559,160423150752,160423150810,160423150825,160423150844,160423150901,160423150919,160423150935,160423150954"></div>
|
||||
|
|
|
|||