i give up

Author: plusk

sketches/v2/sketches/basic.frag sketches/v2/sketches/reflect.fragsketches/v2/sketches/basic.frag renamed to sketches/v2/sketches/reflect.frag

@@ -8,14 +8,15 @@ uniform vec2 u_pointB;
 uniform vec2 u_pointC;
 uniform float u_time;
 
+uniform vec3 u_color1;
+uniform vec3 u_color2;
+
 bool withTime = false;
-float lineDarken = 0.5;
-float noiseStrength = 0.5; // 0.25
-float distanceStrength = 0.2;
+float noiseStrength = 0.75;
+float darkenStrength = 0.5;
+float distanceStrength = 0.25;
 
 vec3 bg = vec3(0.0);
-vec3 rColor = vec3(1.000, 0.600, 0.600);
-vec3 gColor = vec3(0.086, 0.858, 0.768);
 
 highp float rand(vec2 co) {
   highp float a = 12.9898;
@@ -27,7 +28,7 @@ highp float rand(vec2 co) {
 }
 
 // Return minimum distance between line segment vw and point p
-float getColorFromDistance(vec2 v, vec2 w, vec2 p) {
+float getDistance(vec2 v, vec2 w, vec2 p) {
   vec2 l = v - w;
   float l2 = dot(l, l);  // i.e. |w-v|^2 -  avoid a sqrt
   if (l2 == 0.0) return distance(p, v);   // v == w case
@@ -37,7 +38,8 @@ float getColorFromDistance(vec2 v, vec2 w, vec2 p) {
   // We clamp t from [0,1] to handle points outside the segment vw.
   float t = clamp(dot(p - v, w - v) / l2, 0.0, 1.0);
   vec2 projection = v + t * (w - v);  // Projection falls on the segment
-  return 1.0 - pow(distance(p, projection), distanceStrength);
+  // return pow(distance(p, projection), distanceStrength);
+  return pow(distance(p, projection), distanceStrength);
 }
 
 float getPosition(vec2 p1, vec2 p2, vec2 px) {
@@ -51,18 +53,18 @@ void main() {
   vec2 pb = u_pointB.xy / u_resolution.xy;
   vec2 pc = u_pointC.xy / u_resolution.xy;
 
-  float r = getColorFromDistance(pa, pb, px);
-  float g = getColorFromDistance(pa, pc, px);
+  float d1 = getDistance(pa, pb, px);
+  float c1 = 1.0 - getDistance(pa, pb, px);
+  float d2 = getDistance(pa, pc, px);
+  float c2 = 1.0 - getDistance(pa, pc, px);
 
-  bool rOrNot = getPosition(pa, pb, px) > 0.0;
-  bool gOrNot = getPosition(pa, pc, px) > 0.0;
+  bool isBeyondc1 = getPosition(pa, pb, px) > 0.0;
+  bool isBeyondc2 = getPosition(pa, pc, px) > 0.0;
 
   float noiseFactor = noiseStrength * rand(px) + 1.0 - noiseStrength;
-  float darkFactor = rOrNot || !gOrNot ? lineDarken : 1.0;
+  float darkFactor = isBeyondc1 || !isBeyondc2 ? (1.0 - (darkenStrength * max(c1, c2))) : 1.0 / (d1 * d2);
 
-  vec3 color1 = r * rColor;
-  vec3 color2 = g * gColor;
-  vec3 color = color1 + color2;
+  vec3 color = c1 * u_color1 + c2 * u_color2;
 
   gl_FragColor = vec4(color * darkFactor * noiseFactor, 1.0); // R,G,B,A
 }

sketches/v2/sketches/shader.js

@@ -2,7 +2,7 @@ import palettes from "../palettes.js";
 import configBuilder, { webGLSetup, ConfigValue } from "../utils.js";
 
 new p5((p) => {
-  let bg, colors, shader, pointA, pointB, pointC;
+  let bg, colors, shader, pointA, pointB, pointC, color1, color2;
 
   const c = configBuilder(p, {
     padding: new ConfigValue({
@@ -11,11 +11,11 @@ new p5((p) => {
       max: 0.5,
       step: 0.05,
     }),
-    seed: 852,
+    seed: 9372,
   });
 
   p.preload = () => {
-    shader = p.loadShader("/sketches/v2/sketches/basic.vert", "/sketches/v2/sketches/basic.frag");
+    shader = p.loadShader("/sketches/v2/sketches/basic.vert", "/sketches/v2/sketches/reflect.frag");
   };
 
   const randomWithPadding = (numnum) => {
@@ -33,6 +33,9 @@ new p5((p) => {
     pointB = [randomWithPadding(p.width), randomWithPadding(p.height)];
     pointC = [randomWithPadding(p.width), randomWithPadding(p.height)];
 
+    color1 = [p.random(255) / 255, p.random(255) / 255, p.random(255) / 255];
+    color2 = [p.random(255) / 255, p.random(255) / 255, p.random(255) / 255];
+
     /*
     pointA = [p.width * 0.25, p.height * 0.75];
     pointB = [p.width * 0.75, p.height * 0.5];
@@ -46,6 +49,8 @@ new p5((p) => {
     shader.setUniform("u_pointA", pointA);
     shader.setUniform("u_pointB", pointB);
     shader.setUniform("u_pointC", pointC);
+    shader.setUniform("u_color1", color1);
+    shader.setUniform("u_color2", color2);
     p.shader(shader);
     p.rect(0, 0, p.width, p.height);
   };