From 76c007f5b105bb666d77cc07f7b74df33366a534 Mon Sep 17 00:00:00 2001 From: mekanoe <1581674+mekanoe@users.noreply.github.com> Date: Sun, 1 Oct 2023 13:35:20 -0400 Subject: [PATCH] more math --- html/001-platform-provenance.js | 35 ++++++++++++++++++++++++++------- html/lib/shader.js | 12 +++++------ html/work.css | 2 -- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/html/001-platform-provenance.js b/html/001-platform-provenance.js index 8b1623a..e32b226 100644 --- a/html/001-platform-provenance.js +++ b/html/001-platform-provenance.js @@ -26,17 +26,38 @@ const shader = new Shader(app) .attach( gl.FRAGMENT_SHADER, ` - uniform lowp float uTime; - uniform lowp float uSinTime; - uniform lowp float uCosTime; + precision highp float; + + uniform float uTime; + uniform float uSinTime; + uniform float uCosTime; varying highp vec2 vTextureCoord; + vec3 rgb2hsv(vec3 c) { + vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); + vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); + vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); + + float d = q.x - min(q.w, q.y); + float e = 1.0e-10; + return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); + } + + vec3 hsv2rgb(vec3 c) { + vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); + vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); + return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); + } + void main() { - lowp float slowedSinTime = sin(uTime*0.001)*0.5+0.5; - lowp float slowedCosTime = cos(uTime*0.005)*0.5+0.5; - - gl_FragColor = vec4(vTextureCoord.x * 0.5 - slowedSinTime, vTextureCoord.y, vTextureCoord.y * 0.5 + slowedSinTime, 1.0); + vec3 hsv = rgb2hsv(vec3(vTextureCoord, 1.0)); + hsv.x += uTime * 0.0001; + hsv.y = vTextureCoord.x; + hsv.z = vTextureCoord.y; + vec3 rgb = hsv2rgb(hsv); + + gl_FragColor = vec4(rgb, 1.0); gl_FragColor = clamp(gl_FragColor, 0.0, 1.0); } ` diff --git a/html/lib/shader.js b/html/lib/shader.js index 118465e..701890e 100644 --- a/html/lib/shader.js +++ b/html/lib/shader.js @@ -12,12 +12,12 @@ export class Shader { this.gl.shaderSource(shader, source); this.gl.compileShader(shader); - // if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { - // throw new Error( - // "An error occurred compiling the shaders: " + - // this.gl.getShaderInfoLog(shader) - // ); - // } + if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { + throw new Error( + "An error occurred compiling the shaders: " + + this.gl.getShaderInfoLog(shader) + ); + } this.gl.attachShader(this.program, shader); diff --git a/html/work.css b/html/work.css index 0690436..cc1fb32 100644 --- a/html/work.css +++ b/html/work.css @@ -2,8 +2,6 @@ position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; font: monospace;