huebris 2d

by phloe

HTML

<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
<canvas id="canvas" width="720" height="720"></canvas>

<input id="hueInput" type="range" value="180" min="0" max="360" />

SCSS

html {
  min-height: 100%;
  overflow: hidden;
}

#canvas {
  width: 360px;
  height: 360px;
  background-color: red;
}

JavaScript

function hslrgb(h, s, l) {
	var t1;
	var t2;
	var t3;
	var rgb;
	var val;

	if (s === 0) {
		val = Math.round(l * 255);
		return [val, val, val];
	}

	if (l < 0.5) {
		t2 = l * (1 + s);
	} else {
		t2 = l + s - l * s;
	}

	t1 = 2 * l - t2;

	rgb = [0, 0, 0];
	for (var i = 0; i < 3; i++) {
		t3 = h + 1 / 3 * -(i - 1);
		if (t3 < 0) {
			t3++;
		}
		if (t3 > 1) {
			t3--;
		}

		if (6 * t3 < 1) {
			val = t1 + (t2 - t1) * 6 * t3;
		} else if (2 * t3 < 1) {
			val = t2;
		} else if (3 * t3 < 2) {
			val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
		} else {
			val = t1;
		}

		rgb[i] = Math.round(val * 255);
	}

	return rgb;
}

let hue = 180;

const ctx = canvas.getContext("2d");
const { width, height } = canvas;

function update() {
  ctx.clearRect(0, 0, width, height);
	const h = hue / 360;
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
  	const p = i / 4;
  	const x = p % width;
    const y = (p - x) / width;
  	const [r, g, b] = hslrgb(h, 1 - (x / width), 1 - (y / height));
    data[i] = r;
    data[i + 1] = g;
    data[i + 2] = b;
    data[i + 3] = 255;
  }
  ctx.putImageData(imageData, 0, 0);
}


update();

hueInput.addEventListener("input", (event) => {
	hue = parseFloat(event.target.value);
  //console.log(hue);
  update();
});