aspect ratio

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);
+}

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);
+}

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);
+}

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);
+}

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;
+}

readme.md

@@ -0,0 +1,3 @@
+# NOTES
+
+- come back to colors later

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);
+}