colour animation

src/script.js

@@ -142,10 +142,15 @@ function updateStats(deltaTime) {
 	frameCount = 0;
 }
 
+let hue = 0;
+
 async function draw() {
 	let now = Date.now();
 	let deltaTime = (now - lastFrame) / 1000;
 
+	hue += deltaTime / 5;
+	if (hue > 1) hue -= 1;
+
 	updateStats(deltaTime);
 
 	gl.clear(gl.COLOR_BUFFER_BIT);
@@ -153,7 +158,7 @@ async function draw() {
 	gl.useProgram(program);
 
 	let colorLocation = gl.getUniformLocation(program, "color");
-	gl.uniform3fv(colorLocation, hexColorToFloatArray("dc3c05"));
+	gl.uniform3f(colorLocation, ...hslToRgb(hue, 1, 0.5));
 
 	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 
@@ -171,4 +176,30 @@ function hexColorToFloatArray(hex) {
 	return [r, g, b];
 }
 
+function hslToRgb(h, s, l) {
+	let r, g, b;
+
+	if (s == 0) {
+		r = g = b = l;
+	} else {
+		let hue2rgb = function hue2rgb(p, q, t) {
+			if (t < 0) t += 1;
+			if (t > 1) t -= 1;
+			if (t < 1 / 6) return p + (q - p) * 6 * t;
+			if (t < 1 / 2) return q;
+			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+			return p;
+		}
+
+		let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+		let p = 2 * l - q;
+
+		r = hue2rgb(p, q, h + 1 / 3);
+		g = hue2rgb(p, q, h);
+		b = hue2rgb(p, q, h - 1 / 3);
+	}
+
+	return [r, g, b];
+}
+
 window.addEventListener("DOMContentLoaded", init);