Skip to content

Commit 2aabd95

Browse files
edapedap
committed
add random and pixel spirit
1 parent 803974b commit 2aabd95

26 files changed

+846
-2
lines changed

‎035-pixelspirit.glsl

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Title: Merge
2+
// Author: Patricio Gonzalez Vivo
3+
4+
#ifdef GL_ES
5+
precision mediump float;
6+
#endif
7+
8+
uniform vec2 u_resolution;
9+
10+
#include "./libs/pixelspirit/fill.glsl"
11+
#include "./libs/pixelspirit/stroke.glsl"
12+
#include "./libs/pixelspirit/circleSDF.glsl"
13+
#include "./libs/pixelspirit/flip.glsl"
14+
15+
// more examples:
16+
//1 https://github.com/patriciogonzalezvivo/PixelSpiritDeck/tree/master/examples_SDFs
17+
//2 https://github.com/patriciogonzalezvivo/PixelSpiritDeck/tree/master/examples_shapes
18+
//3 https://github.com/patriciogonzalezvivo/PixelSpiritDeck/tree/master/00-elements
19+
20+
void main() {
21+
vec3 color = vec3(0.);
22+
vec2 st = gl_FragCoord.xy/u_resolution;
23+
st.x *= u_resolution.x / u_resolution.y;
24+
25+
vec2 offset = vec2(.15,.0);
26+
float left = circleSDF(st+offset);
27+
float right = circleSDF(st-offset);
28+
color += flip(stroke(left,.5,.05),
29+
fill(right,.525));
30+
31+
gl_FragColor = vec4(color,1.);
32+
}

‎090-intro-to-random.glsl

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#ifdef GL_ES
2+
precision mediump float;
3+
#endif
4+
5+
// Main reference https://thebookofshaders.com/10/
6+
7+
uniform vec2 u_resolution;
8+
9+
void main(){
10+
vec2 st = gl_FragCoord.xy / u_resolution.xy;
11+
// 1
12+
vec3 col = vec3(st.x);
13+
14+
// 2 How to add randomness?
15+
// let's start with a sin wave. It oscillates from -1.0 to 1.0
16+
// fract return the fractional part of a number
17+
// let's try this.
18+
col =vec3( fract(sin(st.x)*1.0) );
19+
// Nothing change, right?
20+
21+
// 3 But what if we change the amplitude of the sin wave?
22+
col =vec3( fract(sin(st.x)*7.0) );
23+
// some strips are larger than others
24+
25+
// 4 make the number big!
26+
col =vec3( fract(sin(st.x)*10000.0) );
27+
28+
// 5 make a file called random.glsl and put it in your lib folder.
29+
30+
gl_FragColor=vec4(col, 1.0);
31+
}

‎091-2d-random.glsl

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
#ifdef GL_ES
2+
precision mediump float;
3+
#endif
4+
5+
#include "./libs/random.glsl"
6+
7+
uniform vec2 u_resolution;
8+
uniform float u_time;
9+
10+
// 4 lets define a random function that takes a vec2 as input
11+
float rand (vec2 st) {
12+
return fract(sin(dot(st.xy,
13+
vec2(12.9898,78.233)))*
14+
43758.5453123);
15+
}
16+
17+
void main(){
18+
//vec2 mouse = u_mouse.xy / u_resolution.xy
19+
vec2 st = gl_FragCoord.xy / u_resolution.xy;
20+
//1
21+
float c = rand(st.x);
22+
23+
// 2 try out several combination
24+
//c = rand(st.x)*rand(st.x);
25+
//c = sqrt(rand(st.x));
26+
//c = pow(rand(st.x),5.);
27+
28+
// 3 Ok. But how can we implement the random function in 2d?, to both the x and y?
29+
30+
// we need a way to return a float starting from a 2d vector.
31+
// there is function in glsl that takes a vec2 and returns a float
32+
// and it is the dot function. the dot function returns the dot product between two vectors.
33+
// that means, for example, that taking vec2 a and vec2 b,
34+
// the dot product returns a.x⋅b.x + a.y⋅b.y
35+
// https://kidscancode.org/godot_recipes/math/dot_cross_product/
36+
// https://thebookofshaders.com/glossary/?search=dot
37+
38+
c = rand( st );
39+
40+
// 5 exercises
41+
// try to change the values in the rand function above
42+
// try to make your own random function. It's ok if it contains repetition that you like ;)
43+
44+
// 6 pass add u_time to st as parameter
45+
// vec2 sst = st;
46+
// sst.x += u_time * 0.000001;
47+
// c = rand( sst );
48+
49+
gl_FragColor=vec4(vec3(c), 1.0);
50+
}

‎092-2d-random.glsl

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#ifdef GL_ES
2+
precision mediump float;
3+
#endif
4+
5+
#include "./libs/random.glsl"
6+
7+
uniform vec2 u_resolution;
8+
uniform float u_time;
9+
10+
// trick to devide the screen in cell and give to each cell a random id
11+
12+
// P.S. do you remember this one? we did it with the truchet pattern!
13+
14+
void main(){
15+
//vec2 mouse = u_mouse.xy / u_resolution.xy
16+
vec2 st = gl_FragCoord.xy / u_resolution.xy;
17+
18+
st *= 5.0; // Scale the coordinate system by 10
19+
vec2 ipos = floor(st); // get the integer coords
20+
vec2 fpos = fract(st); // get the fractional coords
21+
22+
// Assign a random value based on the integer coord
23+
vec3 color = vec3(rand( ipos ));
24+
25+
// Uncomment to see the subdivided grid
26+
//color = vec3(fpos,0.0);
27+
28+
// exercise, can you use the random id tick to introduce randomness in a pattern?
29+
30+
gl_FragColor=vec4(vec3(color), 1.0);
31+
}

‎Readme.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,11 @@ Kernel convolutions. Files 08*.
6666

6767
### Lesson (12/01/2022)
6868

69-
Random and noise
69+
Random. Intro to Pixelspirit and its library.
7070

7171
### Lesson (19/01/2022)
7272

73-
Cellular noise
73+
Noise and Cellular noise
7474

7575
### Lesson (26/01/2022)
7676

‎libs/pixelspirit/aastep.glsl

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#ifndef FNC_AASTEP
2+
#define FNC_AASTEP
3+
#ifdef GL_OES_standard_derivatives
4+
#extension GL_OES_standard_derivatives : enable
5+
#endif
6+
float aastep(float threshold, float value) {
7+
#ifdef GL_OES_standard_derivatives
8+
float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));
9+
return smoothstep(threshold-afwidth, threshold+afwidth, value);
10+
#else
11+
return step(threshold, value);
12+
#endif
13+
}
14+
#endif

‎libs/pixelspirit/circleSDF.glsl

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
Copyright (c) 2017 Patricio Gonzalez Vivo ( http://www.pixelspiritdeck.com )
3+
All rights reserved.
4+
5+
Redistribution and use in source and binary forms, with or without
6+
modification, are permitted provided that the following conditions are
7+
met:
8+
9+
Redistributions of source code must retain the above copyright notice,
10+
this list of conditions and the following disclaimer.
11+
12+
Redistributions in binary form must reproduce the above copyright
13+
notice, this list of conditions and the following disclaimer in the
14+
documentation and/or other materials provided with the distribution.
15+
16+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
17+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
18+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
19+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
20+
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
22+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
23+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
24+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
26+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
*/
28+
29+
#ifndef FNC_CIRCLESDF
30+
#define FNC_CIRCLESDF
31+
float circleSDF(vec2 st) {
32+
return length(st-.5)*2.;
33+
}
34+
#endif

‎libs/pixelspirit/crossSDF.glsl

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
Copyright (c) 2017 Patricio Gonzalez Vivo ( http://www.pixelspiritdeck.com )
3+
All rights reserved.
4+
5+
Redistribution and use in source and binary forms, with or without
6+
modification, are permitted provided that the following conditions are
7+
met:
8+
9+
Redistributions of source code must retain the above copyright notice,
10+
this list of conditions and the following disclaimer.
11+
12+
Redistributions in binary form must reproduce the above copyright
13+
notice, this list of conditions and the following disclaimer in the
14+
documentation and/or other materials provided with the distribution.
15+
16+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
17+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
18+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
19+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
20+
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
22+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
23+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
24+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
26+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
*/
28+
29+
#ifndef FNC_CROSSSDF
30+
#define FNC_CROSSSDF
31+
#include "rectSDF.glsl"
32+
float crossSDF(vec2 st, float s) {
33+
vec2 size = vec2(.25, s);
34+
return min( rectSDF(st.xy,size.xy),
35+
rectSDF(st.xy,size.yx));
36+
}
37+
#endif

‎libs/pixelspirit/fill.glsl

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
Copyright (c) 2017 Patricio Gonzalez Vivo ( http://www.pixelspiritdeck.com )
3+
All rights reserved.
4+
5+
Redistribution and use in source and binary forms, with or without
6+
modification, are permitted provided that the following conditions are
7+
met:
8+
9+
Redistributions of source code must retain the above copyright notice,
10+
this list of conditions and the following disclaimer.
11+
12+
Redistributions in binary form must reproduce the above copyright
13+
notice, this list of conditions and the following disclaimer in the
14+
documentation and/or other materials provided with the distribution.
15+
16+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
17+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
18+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
19+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
20+
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
22+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
23+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
24+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
26+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
*/
28+
29+
#ifndef FNC_FILL
30+
#define FNC_FILL
31+
#include "aastep.glsl"
32+
float fill(float x, float size) {
33+
return 1.-aastep(size, x);
34+
}
35+
#endif

‎libs/pixelspirit/flip.glsl

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
Copyright (c) 2017 Patricio Gonzalez Vivo ( http://www.pixelspiritdeck.com )
3+
All rights reserved.
4+
5+
Redistribution and use in source and binary forms, with or without
6+
modification, are permitted provided that the following conditions are
7+
met:
8+
9+
Redistributions of source code must retain the above copyright notice,
10+
this list of conditions and the following disclaimer.
11+
12+
Redistributions in binary form must reproduce the above copyright
13+
notice, this list of conditions and the following disclaimer in the
14+
documentation and/or other materials provided with the distribution.
15+
16+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
17+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
18+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
19+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
20+
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
22+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
23+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
24+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
26+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
*/
28+
29+
#ifndef FNC_FLIP
30+
#define FNC_FLIP
31+
float flip(float v, float pct) {
32+
return mix(v, 1.-v, pct);
33+
}
34+
#endif

‎libs/pixelspirit/flowerSDF.glsl

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
Copyright (c) 2017 Patricio Gonzalez Vivo ( http://www.pixelspiritdeck.com )
3+
All rights reserved.
4+
5+
Redistribution and use in source and binary forms, with or without
6+
modification, are permitted provided that the following conditions are
7+
met:
8+
9+
Redistributions of source code must retain the above copyright notice,
10+
this list of conditions and the following disclaimer.
11+
12+
Redistributions in binary form must reproduce the above copyright
13+
notice, this list of conditions and the following disclaimer in the
14+
documentation and/or other materials provided with the distribution.
15+
16+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
17+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
18+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
19+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
20+
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
22+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
23+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
24+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
26+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
*/
28+
29+
#ifndef FNC_FLOWERSDF
30+
#define FNC_FLOWERSDF
31+
float flowerSDF(vec2 st, int N) {
32+
st = st*2.-1.;
33+
float r = length(st)*2.;
34+
float a = atan(st.y,st.x);
35+
float v = float(N)*.5;
36+
return 1.-(abs(cos(a*v))*.5+.5)/r;
37+
}
38+
#endif

0 commit comments

Comments
 (0)