ruxkor/magenta.html

## magenta.html
<html>
<head>
  <title>Magenta</title>
</head>
<body>
<h2>Magenta</h2>

<div id="loading">Loading &hellip;</div>

<canvas id="cvs" width="600" height="600"></canvas>

<script type="text/javascript">
/*
http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
*/
function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}

function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        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;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var 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 * 255, g * 255, b * 255];
}

</script>
<script type="text/javascript">
	'use strict';

	var ctx = document.getElementById('cvs').getContext('2d');
	var id = ctx.createImageData(600,600);
	var d = id.data;
	d[0] = 0;
	d[1] = 0;
	d[2] = 0;
	d[3] = 255;
	ctx.putImageData(id, 0, 0);
	var green = rgbToHsl(0,255,0);

	var changeColor = function(color) {
		for (var i=0;i<color.length;i++) d[i] = color[i];
	};

	var drawLine = function(y_start, y_len, val) {
		var x, y, one, two;
		one = hslToRgb(green[0]+val, green[1], green[2]);
		two = hslToRgb(green[0]-val, green[1], green[2]);
		for (y=y_start;y<=y_start+y_len; y++) {
			for (x=0;x<=600;x++) {
				if ((x+y) % 2 == 0) changeColor(one);
				else changeColor(two);
				ctx.putImageData(id, x, y, 0, 0, 1, 1);
			}
		}
	};

	var main = function() {
		var max_val = 1/3;
		var steps = 20;

		for (var step=0;step<=steps;step++) {
			var curr_val = max_val*step/steps;
			var y = 30*step;
			drawLine(y, 20, curr_val);
		}
		document.getElementById('loading').style.display = "none";
	}

	setTimeout(main, 1000);
</script>
</body>
</html>
	<html>
	<head>
	<title>Magenta</title>
	</head>
	<body>
	<h2>Magenta</h2>

	<div id="loading">Loading …</div>

	<canvas id="cvs" width="600" height="600"></canvas>

	<script type="text/javascript">
	/*
	http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
	*/
	function rgbToHsl(r, g, b){
	r /= 255, g /= 255, b /= 255;
	var max = Math.max(r, g, b), min = Math.min(r, g, b);
	var h, s, l = (max + min) / 2;

	if(max == min){
	h = s = 0; // achromatic
	}else{
	var d = max - min;
	s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	switch(max){
	case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	case g: h = (b - r) / d + 2; break;
	case b: h = (r - g) / d + 4; break;
	}
	h /= 6;
	}

	return [h, s, l];
	}

	function hslToRgb(h, s, l){
	var r, g, b;

	if(s == 0){
	r = g = b = l; // achromatic
	}else{
	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;
	}

	var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
	var 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 * 255, g * 255, b * 255];
	}

	</script>
	<script type="text/javascript">
	'use strict';

	var ctx = document.getElementById('cvs').getContext('2d');
	var id = ctx.createImageData(600,600);
	var d = id.data;
	d[0] = 0;
	d[1] = 0;
	d[2] = 0;
	d[3] = 255;
	ctx.putImageData(id, 0, 0);
	var green = rgbToHsl(0,255,0);

	var changeColor = function(color) {
	for (var i=0;i<color.length;i++) d[i] = color[i];
	};

	var drawLine = function(y_start, y_len, val) {
	var x, y, one, two;
	one = hslToRgb(green[0]+val, green[1], green[2]);
	two = hslToRgb(green[0]-val, green[1], green[2]);
	for (y=y_start;y<=y_start+y_len; y++) {
	for (x=0;x<=600;x++) {
	if ((x+y) % 2 == 0) changeColor(one);
	else changeColor(two);
	ctx.putImageData(id, x, y, 0, 0, 1, 1);
	}
	}
	};

	var main = function() {
	var max_val = 1/3;
	var steps = 20;

	for (var step=0;step<=steps;step++) {
	var curr_val = max_val*step/steps;
	var y = 30*step;
	drawLine(y, 20, curr_val);
	}
	document.getElementById('loading').style.display = "none";
	}

	setTimeout(main, 1000);
	</script>
	</body>
	</html>