mirror
/
thebookofshaders
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

starting chapter 14 with a bit of text and basic examples

This commit is contained in:
Patricio Gonzalez Vivo 2024-08-13 11:24:06 -04:00
parent 188740129d
commit cb8c6cbfda
16 changed files with 609 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
13/index.php
View File

@ -26,6 +26,7 @@
<ul class="navigationBar" >
<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
<li class="navigationBar" onclick="homePage()"> Home </li>
<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
</ul>';
include($path."/footer.php");

27
14/README-pt.md
View File

@ -1,27 +0,0 @@
## Fractais
https://www.shadertoy.com/view/lsX3W4
https://www.shadertoy.com/view/Mss3Wf
https://www.shadertoy.com/view/4df3Rn
https://www.shadertoy.com/view/Mss3R8
https://www.shadertoy.com/view/4dfGRn
https://www.shadertoy.com/view/lss3zs
https://www.shadertoy.com/view/4dXGDX
https://www.shadertoy.com/view/XsXGz2
https://www.shadertoy.com/view/lls3D7
https://www.shadertoy.com/view/XdB3DD
https://www.shadertoy.com/view/XdBSWw
https://www.shadertoy.com/view/llfGD2
https://www.shadertoy.com/view/Mlf3RX

16
14/README-ua.md
View File

@ -1,16 +0,0 @@
## Фрактали
Coming soon ...
А поки що можете подивитися приклади з фракталами на платформі [shadertoy.com](https://www.shadertoy.com/results?query=fractals):
[Basic Fractal](https://www.shadertoy.com/view/Mss3Wf)
[Mandelbrot - distance](https://www.shadertoy.com/view/lsX3W4)
[Mandelbrot - smooth](https://www.shadertoy.com/view/4df3Rn)
[Mandelbrot: Power Transitioning](https://www.shadertoy.com/view/lls3D7)
[IFS - brute force](https://www.shadertoy.com/view/lss3zs)
[Julia - Distance 1](https://www.shadertoy.com/view/Mss3R8)
[Julia - Distance 3](https://www.shadertoy.com/view/4dXGDX)
[Julia - Traps 2](https://www.shadertoy.com/view/4dfGRn)
[Fractal Wheel 2.0](https://www.shadertoy.com/view/llfGD2)
[Koch Snowflake again](https://www.shadertoy.com/view/Mlf3RX)

41
14/README.md
View File

@ -1,16 +1,33 @@
## Fractals
Coming soon ...
In the prevous chapter we addeded incrising octaves of noise while we were decreasing it's amplitud, resulting in a more granular noise we called that fractal noise. It's name reside in the fact that the structure repeats it self at different scales. That property is known as **self similarity**. And is actually very useful in computer graphics, because it allows us to create complex structures from simple ones at any scale or resolution. For the same reason fractals can be spot on nature everywhere, from the shape of a tree, a shell, fern, etc. It's a smart way for life to grow and scale in a very efficient way with very little information.
In the meantime, you can check out some examples with fractals on the [shadertoy.com](https://www.shadertoy.com/results?query=fractals) platform:
Let's study self similarity in a simple way, no complicated math or formulas for now. We will go back and use [tile patterns](https://thebookofshaders.com/09/) and a [random functions](https://thebookofshaders.com/10/) from chapters 9 and 10 to get familiar with recursion and self similarity.
[Basic Fractal](https://www.shadertoy.com/view/Mss3Wf)
[Mandelbrot - distance](https://www.shadertoy.com/view/lsX3W4)
[Mandelbrot - smooth](https://www.shadertoy.com/view/4df3Rn)
[Mandelbrot: Power Transitioning](https://www.shadertoy.com/view/lls3D7)
[IFS - brute force](https://www.shadertoy.com/view/lss3zs)
[Julia - Distance 1](https://www.shadertoy.com/view/Mss3R8)
[Julia - Distance 3](https://www.shadertoy.com/view/4dXGDX)
[Julia - Traps 2](https://www.shadertoy.com/view/4dfGRn)
[Fractal Wheel 2.0](https://www.shadertoy.com/view/llfGD2)
[Koch Snowflake again](https://www.shadertoy.com/view/Mlf3RX)
Recursion
<div class='codeAndCanvas' data='tiling_00.frag'></div>
<div class='codeAndCanvas' data='tiling_01.frag'></div>
Self similarity
<div class='codeAndCanvas' data='tiling_02.frag'></div>
<div class='codeAndCanvas' data='tiling_03.frag'></div>
<div class='codeAndCanvas' data='tiling_04.frag'></div>
<div class='codeAndCanvas' data='tiling_05.frag'></div>
<div class='codeAndCanvas' data='tiling_06.frag'></div>
<div class='codeAndCanvas' data='tiling_07.frag'></div>
<div class='codeAndCanvas' data='tiling_08.frag'></div>
Mathematical model
<div class='codeAndCanvas' data='mandelbrot_00.frag'></div>

1
14/index.php
View File

@ -26,7 +26,6 @@
<ul class="navigationBar" >
<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
<li class="navigationBar" onclick="homePage()"> Home </li>
<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
</ul>';
include($path."/footer.php");

39
14/mandelbrot_00.frag Normal file
View File

@ -0,0 +1,39 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
st = st * 2.0 - 1.0;
st.x -= 0.5;
const float iterations_max = 15.0;
float iterations = mod(u_time, iterations_max);
vec2 uv = st;
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
if (length(uv) > 2.0)
break;
uv = vec2( uv.x*uv.x - uv.y*uv.y,
2.0 * uv.x*uv.y) + st;
// uv = mat2(uv.x, uv.y, -uv.y, uv.x) * uv + st;
color++;
}
color /= iterations_max;
gl_FragColor = vec4(color, 1.0);
}

38
14/tiling_00.frag Normal file
View File

@ -0,0 +1,38 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float random(in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 8.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= 2.0;
vec2 st_i = floor(st);
st = fract(st);
float v = random(st_i * 1.4);
if (v > 0.5) {
color = vec3(v);
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

73
14/tiling_01.frag Normal file
View File

@ -0,0 +1,73 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
float random(in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 8.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= 2.0;
vec2 st_i = floor(st);
st = fract(st);
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(st_i.x,2.0));
index += step(1., mod(st_i.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Rotate each cell according to the index
if (index == 0.0)
st = rotate2D(st, PI*-0.5);
else if (index == 1.0)
st = st;
else if (index == 2.0)
st = st.yx;
else if (index == 3.0)
st = rotate2D(st, PI*0.5);
float v = random(st_i * 1.2);
if (v > 0.5) {
color = vec3(step(st.x,st.y));
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

72
14/tiling_02.frag Normal file
View File

@ -0,0 +1,72 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
float random(in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 8.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= 2.0;
vec2 st_i = floor(st);
st = fract(st);
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(st_i.x,2.0));
index += step(1., mod(st_i.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Rotate each cell according to the index
if (index == 0.0)
st = st;
else if (index == 1.0)
st = rotate2D(st, PI*0.5);
else if (index == 2.0)
st = rotate2D(st, PI*-0.5);
else if (index == 3.0)
st = st.yx;
float v = random(st_i * 1.5);
if (v > 0.5) {
color = vec3(step(st.x,st.y));
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

70
14/tiling_03.frag Normal file
View File

@ -0,0 +1,70 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
float random(in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 8.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= 2.0;
vec2 st_i = floor(st);
st = fract(st);
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(st_i.x,2.0));
index += step(1., mod(st_i.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Rotate each cell according to the index
if (index == 0.0)
st = rotate2D(st, PI*-0.5);
else if (index == 1.0)
st = st.yx;
else if (index == 2.0)
st = st;
else if (index == 3.0)
st = rotate2D(st, PI*0.5);
if (index < 2.0) {
color = vec3(step(st.x,st.y));
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

68
14/tiling_04.frag Normal file
View File

@ -0,0 +1,68 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
float random(in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 8.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= 2.0;
vec2 st_i = floor(st);
st = fract(st);
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(st_i.x,2.0));
index += step(1., mod(st_i.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Rotate each cell according to the index
if (index == 0.0)
st = st;
else if (index == 1.0)
st = rotate2D(st, PI*0.5);
else if (index == 2.0)
st = rotate2D(st, PI*-0.5);
if (index == 3.0) {
color = vec3(step(st.x,st.y));
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

64
14/tiling_05.frag Normal file
View File

@ -0,0 +1,64 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
float random(in vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
float stroke(float x, float size, float w, float edge) {
float d = smoothstep(size - edge, size + edge, x + w * 0.5) - smoothstep(size - edge, size + edge, x - w * 0.5);
return clamp(d, 0.0, 1.0);
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 8.0;
float iterations = mod(u_time, iterations_max);
float width = 0.005;
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
vec2 st_i = floor(st);
st = fract(st);
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(st_i.x,2.0));
index += step(1., mod(st_i.y,2.0))*2.0;
// Rotate each cell according to the index
vec2 uv = st;
if (index == 3.0) {
color = vec3(stroke(length(uv), 1.0 - width, width, 0.01));
break;
}
st *= 2.0;
st = rotate2D(st, PI * -0.5);
width *= 2.0;
}
gl_FragColor = vec4(color, 1.0);
}

51
14/tiling_06.frag Normal file
View File

@ -0,0 +1,51 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 9.0;
const float subdivide = 2.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= subdivide;
vec2 st_i = floor(st);
st = fract(st);
float index = 0.0;
index += mod(st_i.x, subdivide);
index += mod(st_i.y, subdivide)*subdivide;
if (index == subdivide-1.0) {
color = vec3(step(length(st), 1.) * i/iterations);
break;
}
st = rotate2D(st, PI * 0.5);
}
gl_FragColor = vec4(color, 1.0);
}

49
14/tiling_07.frag Normal file
View File

@ -0,0 +1,49 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 9.0;
const float subdivide = 3.0;
float iterations = mod(u_time, iterations_max);
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st *= subdivide;
vec2 st_i = floor(st);
st = fract(st);
float index = 0.0;
index += mod(st_i.x, subdivide);
index += mod(st_i.y, subdivide)*subdivide;
if (index == 4.) {
color = vec3(step(length(st-0.5), .5) * i/iterations);
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

54
14/tiling_08.frag Normal file
View File

@ -0,0 +1,54 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
void main(void) {
vec3 color = vec3(0.0);
vec2 st = gl_FragCoord.xy / u_resolution;
const float iterations_max = 9.0;
float iterations = mod(u_time, iterations_max);
st -= 0.5;
st /= iterations * 0.25;
st += 0.5;
for (float i = 0.0; i < iterations_max; i++) {
if (i >= iterations)
break;
st = rotate2D(st, PI * 0.5);
st *= 2.0;
vec2 st_i = floor(st);
st = fract(st);
float index = 0.0;
index += mod(st_i.x, 2.0);
index += mod(st_i.y, 2.0)*2.0;
if (index == 2.) {
color = vec3(step(length(1.0-st), 1.0) * (1.0-i/iterations));
break;
}
}
gl_FragColor = vec4(color, 1.0);
}

2
README.md
View File

@ -31,7 +31,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* [Noise](11/)
* [Cellular noise](12/)
* [Fractional brownian motion](13/)
* Fractals
* [Fractals](14/)
* Image processing
* Textures