Skip to main content
Loading...

More HTML Posts

<html>
	<head></head>
	<body>
		<div id="bruh" style="width: 250px; height: 250px; background-color: rgb(169, 255, 0);"></div>
		<input id="slider" type="range"></input><input id="colorblind" type="checkbox">Colorblind</input>
	</body>
	<script>
	// Clamp number between two values with the following line:
	const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
	//Max is the max value of the "health bar"
	//Some people like 0 to 100, some people like 0.0 to 1.0 whatever
	function redToGreen(value, max){
		const maxColorValue = 256;
		//Map the range slider value to 1.0 to 0
		const valueMapped = value * (maxColorValue / max);
		let red = clamp((maxColorValue*2)-(2.0*valueMapped), 0, maxColorValue);
		let green = clamp((2.0*valueMapped), 0, maxColorValue);
		const opacity = 1.0;
		return "rgba(" + red + ", " + green + ", 0, " + opacity + ")";
	}
	//Does blue to red to green
	function valueToHue(value, max){
		console.log("hue");
		const maxColorValue = 256;
		//Map the range slider value to 1.0 to 0
		const valueMapped = value * (maxColorValue / max);
		let blue = clamp((maxColorValue*2)-(4.0*valueMapped), 0, maxColorValue);
		let red = clamp(((value < (max / 2.0))?
						(4.0*valueMapped) :
						((maxColorValue*4.0) - (4.0*valueMapped))
					), 0, maxColorValue);
		let green = clamp((4.0*valueMapped) - (maxColorValue*2.0), 0, maxColorValue);
		return "rgba(" + red + ", " + green + ", " + blue + ", " + maxColorValue + ")";
	}
	document.getElementById("slider").oninput = function(){
		let newColor = redToGreen(this.value, 100);
		console.log(newColor);
		document.getElementById("bruh").style["background-color"] = newColor;
	}
	document.getElementById("colorblind").onchange = function(){
		if(this.checked){
			document.getElementById("slider").oninput = function(){
				let newColor = valueToHue(this.value, 100);
				console.log(newColor);
				document.getElementById("bruh").style["background-color"] = newColor;
			}
		}else{
			document.getElementById("slider").oninput = function(){
				let newColor = redToGreen(this.value, 100);
				console.log(newColor);
				document.getElementById("bruh").style["background-color"] = newColor;
			}
		}
	}
	</script>
</html>