adding images

pull/68/head
Patricio Gonzalez Vivo 8 years ago
parent 3fb6ed8540
commit 24e33093ac

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 284 KiB

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 253 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 224 KiB

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 646 KiB

After

Width:  |  Height:  |  Size: 648 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 266 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 622 KiB

After

Width:  |  Height:  |  Size: 622 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 618 KiB

After

Width:  |  Height:  |  Size: 623 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 266 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 560 KiB

After

Width:  |  Height:  |  Size: 559 KiB

@ -155,8 +155,6 @@ Once you figurate out this algorithm think interesting and creative uses for it.
![Vonoroi Puzzle - Reza Ali (2015)](reza.png)
<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.
@ -173,8 +171,8 @@ Inigio's experiment on voronoi didn't stop there. In 2014 he wrote this nice art
<a href="../edit.html#12/2d-voronoise.frag"><canvas id="custom" class="canvas" data-fragment-url="2d-voronoise.frag" width="520px" height="200px"></canvas></a>
Now is up to you to observe and learn how to use and modify this technique for your own expressive porpoises.
Now is up to look closely at things, be inspired by nature to find your own voice on this technique.
<div class="glslGallery" data="12/metaballs,12/stippling,12/cell,12/tissue,12/cracks,160504143842" data-properties="clickRun:edior,openFrameIcon:false"></div>
![Deyrolle glass film - 1831](DeyrolleFilm.png)
![Deyrolle glass film](DeyrolleFilm.png)
<div class="glslGallery" data="12/metaballs,12/stippling,12/cell,12/tissue,12/cracks,160504143842" data-properties="clickRun:edior,openFrameIcon:false"></div>

@ -1,4 +1,5 @@
// Author @patriciogv - 2015
// Author: @patriciogv - 2015
// Title: Cell
#ifdef GL_ES
precision mediump float;

@ -1,4 +1,5 @@
// Author @patriciogv - 2015
// Author: @patriciogv - 2015
// Title: Cracks
#ifdef GL_ES
precision mediump float;
@ -57,7 +58,7 @@ vec2 cellular2x2(vec2 P) {
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st = (st-.5)*.25+.5;
st = (st-.5)*.75+.5;
if (u_resolution.y > u_resolution.x ) {
st.y *= u_resolution.y/u_resolution.x;
st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 78 KiB

@ -1,5 +1,5 @@
// Author: @patriciogv
// Title: MetaBalls
// Author: @patriciogv - 2015
// Title: Metaballs
#ifdef GL_ES
precision mediump float;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

@ -1,4 +1,5 @@
// Author @patriciogv - 2015
// Author: @patriciogv - 2015
// Title: Stippling
#ifdef GL_ES
precision mediump float;
@ -57,7 +58,7 @@ vec2 cellular2x2(vec2 P) {
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st = (st-.5)*.5+.5;
st = (st-.5)*.75+.5;
if (u_resolution.y > u_resolution.x ) {
st.y *= u_resolution.y/u_resolution.x;
st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 60 KiB

@ -1,3 +1,6 @@
// Author: @patriciogv - 2015
// Title: Tissue
#ifdef GL_ES
precision mediump float;
#endif
@ -60,7 +63,7 @@ vec3 voronoi( in vec2 x, float rnd ) {
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st = (st-.5)*.25+.5;
st = (st-.5)*.75+.5;
if (u_resolution.y > u_resolution.x ) {
st.y *= u_resolution.y/u_resolution.x;
st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x;
@ -73,8 +76,6 @@ void main() {
float d = dot(st-.5,st-.5);
vec3 c = voronoi( 20.*st, pow(d,.4) );
// isolines
// color = c.x*(0.5 + 0.5*sin(64.0*c.x))*vec3(1.0);
// borders
color = mix( vec3(1.0), color, smoothstep( 0.01, 0.02, c.x ) );
// feature points

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 274 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 668 KiB

After

Width:  |  Height:  |  Size: 666 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

@ -1,3 +1,5 @@
![Due East over Shadequarter Mountain - Matthew Rangel (2005) ](rangel.jpg)
## Fractal Brownian Motion
Noise tends to means different things for different people. Musicians will think it in disturbing sounds, communicators as interference and astrophysics as cosmic microwave background. In fact most of this concept have one things in common that bring as back to the begining of random. Waves and their properties. Audio or electromagnetical waves, fluctuation overtime of a signal. That change happens in amplitud and frequency. The ecuation for it looks like this:
@ -66,7 +68,11 @@ The following code is an example of how fBm could be implemented on two dimensio
* Modify the lacunarity of the fBm on line 47
* Explore by changing the gain on line 48
This techniques is use commonly to construct procedural landscapes. The self similarity of the fBm is perfect for mountains, together with a close cassing known as turbulence. Esentially a fBm but constructed from the absolute value of a signed noise.
This techniques is use commonly to construct procedural landscapes. The self similarity of the fBm is perfect for mountains. If you are interested in this use you defenetly should read [this great article of Inigo Quiles about advance noise](http://www.iquilezles.org/www/articles/morenoise/morenoise.htm).
![Blackout - Dan Holdsworth (2010)](holdsworth.jpg)
Using escentially the same technique is also possible to obtain other effect like what is known as **turbulence**. It's esentially a fBm but constructed from the absolute value of a signed noise.
```glsl
for (int i = 0; i < OCTAVES; i++) {
@ -78,7 +84,7 @@ for (int i = 0; i < OCTAVES; i++) {
<a href="../edit.html#13/turbulence.frag"><img src="turbulence-long.png" width="520px" height="200px"></img></a>
Another member of this family is the ridge. Constructed similarly to the turbolence but with some extra calculations:
Another member of this family of algorithms is the **ridge**. Constructed similarly to the turbolence but with some extra calculations:
```glsl
n = abs(n); // create creases
@ -88,3 +94,12 @@ Another member of this family is the ridge. Constructed similarly to the turbole
<a href="../edit.html#13/ridge.frag"><img src="ridge-long.png" width="520px" height="200px"></img></a>
### Domain Warping
[Inigo Quiles wrote this other fascinating article](http://www.iquilezles.org/www/articles/warp/warp.htm) about how is possible to use fBm to warp a space of a fBm. Mind blowing, Right? Is like the dream inside the dream of Inception.
![ f(p) = fbm( p + fbm( p + fbm( p ) ) ) - Inigo Quiles (2002)](quiles.jpg)
A mild example of this technique is the following code where the wrap is use to produce something this clouds-like texture. Note how the self similarity propertie still is apreciated.
<div class='codeAndCanvas' data='clouds.frag'></div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 812 KiB

After

Width:  |  Height:  |  Size: 812 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 556 KiB

After

Width:  |  Height:  |  Size: 558 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Loading…
Cancel
Save