From c8b4375ba56702932bb5a3e70f33429a3feab49b Mon Sep 17 00:00:00 2001 From: beppe Date: Sat, 27 Apr 2024 17:36:26 +0200 Subject: [PATCH] aspect ratio --- experiments/perlin/main.frag | 17 ++++++++++ learning/colors/main.frag | 60 ++++++++++++++++++++++++++++++++++++ learning/shapes/box.frag | 27 ++++++++++++++++ learning/shapes/circle.frag | 18 +++++++++++ learning/shapes/main.frag | 21 +++++++++++++ readme.md | 3 ++ template.frag | 15 +++++++++ 7 files changed, 161 insertions(+) create mode 100644 experiments/perlin/main.frag create mode 100644 learning/colors/main.frag create mode 100644 learning/shapes/box.frag create mode 100644 learning/shapes/circle.frag create mode 100644 learning/shapes/main.frag create mode 100644 template.frag diff --git a/experiments/perlin/main.frag b/experiments/perlin/main.frag new file mode 100644 index 0000000..2376068 --- /dev/null +++ b/experiments/perlin/main.frag @@ -0,0 +1,17 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +#define PI 3.14159265359 + + + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + vec3 color = vec3(0.0,0.0,0.0) + gl_FragColor = vec4(color, 1.0); +} diff --git a/learning/colors/main.frag b/learning/colors/main.frag new file mode 100644 index 0000000..1bcf0a4 --- /dev/null +++ b/learning/colors/main.frag @@ -0,0 +1,60 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +#define PI 3.14159265359 + +float bounceOut(float x) { + const float a = 4.0 / 11.0; + const float b = 8.0 / 11.0; + const float c = 9.0 / 10.0; + + const float ca = 4356.0/361.0; + const float cb = 35442.0 / 1805.0; + const float cc = 16061.0/1805.0; + + float x2 = x*x; + + return x < a + ? 7.5625 * x2 + : x < b + ? 9.075 * x2 - 9.9 * x + 3.4 + : x < c + ? ca * x2 - cb * x + cc + : 10.8 * x * x - 20.52 * x + 10.72; +} + +float bounceIn(float x) { + return 1.0 - bounceOut(1.0 - x); +} + + +float bounceInOut(float x) { + return x < 0.5 + ? 0.5 * (1.0 - bounceOut(1.0 - x * 2.0)) + : 0.5 * bounceOut(x * 2.0 - 1.0) + 0.5; +} + + + + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + vec3 red = vec3(1.0,0.0,0.0); + red.x = 1.0; + red.y = 0.0; + red.z = 0.0; + // red.x = red.r = red.s = red[0] (red.s comes from red.stpq, instead of red.rgba or red.xyzw) + // red.xy = vec2(1.0, 0.0) (this sets 2 of the values for red) + // red.grb = vec2(0.0,1.0,0.0) (you can mix and match these to switch the order) + // magenta = red.rgr (it also works for assigning and repeating, in this case repeating the red value for r and b) + vec3 blue = red.ggr; + float pct = (sin(u_time) + 1.0) / 2.0; + pct = bounceInOut(pct); + vec3 color = mix(red,blue,pct); + gl_FragColor = vec4(color, 1.0); +} diff --git a/learning/shapes/box.frag b/learning/shapes/box.frag new file mode 100644 index 0000000..e819f68 --- /dev/null +++ b/learning/shapes/box.frag @@ -0,0 +1,27 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +#define PI 3.14159265359 + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + vec3 color = vec3(0.0,0.0,0.0); + + + //draw box + //float left = step(0.1,st.x); // everything > 0.1 = 1.0 + //float bottom = step(0.1,st.y); // everything > 0.1 = 1.0 + //float right = 1.0-step(0.9,st.x); + //float top = 1.0-step(0.9,st.y); + //color = vec3(left*bottom*top*right); + vec2 bottom_left = step(vec2(0.1),st); // does the same as previous code but passes vec2's to get both + vec2 top_right = vec2(1.0)-step(vec2(0.9),st); + color = vec3(bottom_left.x * bottom_left.y * top_right.x * top_right.y); + + gl_FragColor = vec4(color, 1.0); +} diff --git a/learning/shapes/circle.frag b/learning/shapes/circle.frag new file mode 100644 index 0000000..0f8354f --- /dev/null +++ b/learning/shapes/circle.frag @@ -0,0 +1,18 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +#define PI 3.14159265359 + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + // vec3 color = vec3(0.0,0.0,0.0); + + float pct = distance(gl_FragCoord.xy, (vec2(0.5)*u_resolution)) // find a way to make this a circle even when non 1:1 aspect ratio + vec3 color = vec3(pct); + gl_FragColor = vec4(color, 1.0); +} diff --git a/learning/shapes/main.frag b/learning/shapes/main.frag new file mode 100644 index 0000000..01dd809 --- /dev/null +++ b/learning/shapes/main.frag @@ -0,0 +1,21 @@ + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +varying vec2 v_texcoord; + +void main(void) { + vec4 color = vec4(vec3(0.0), 1.0); + vec2 pixel = 1.0/u_resolution.xy; + vec2 st = gl_FragCoord.xy * pixel; + vec2 uv = v_texcoord; + + color.rgb = vec3(st.x,st.y,abs(sin(u_time))); + + gl_FragColor = color; +} diff --git a/readme.md b/readme.md index e69de29..64622be 100644 --- a/readme.md +++ b/readme.md @@ -0,0 +1,3 @@ +# NOTES + +- come back to colors later diff --git a/template.frag b/template.frag new file mode 100644 index 0000000..9c94eba --- /dev/null +++ b/template.frag @@ -0,0 +1,15 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +#define PI 3.14159265359 + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + vec3 color = vec3(0.0,0.0,0.0) + gl_FragColor = vec4(color, 1.0); +}