MichinobuMaeda/rgbcolors2.html

## rgbcolors2.html
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>RGB Colors 2</title>
    <script>
function onload() {
  var c = document.getElementById("pane");
  pane(c);
}

function pane(canvas) {

  var xd = 0.125;
  var yd = 0.25;
  var xr = xd * 0;
  var yr = yd * 2;
  var xg = xd * Math.sqrt(3);
  var yg = yd * (-1);
  var xb = xd * (-1 * Math.sqrt(3));
  var yb = yd * (-1);

  var xo = canvas.width / 44;
  var yo = canvas.height / 2;
  var ctx = canvas.getContext("2d");

  var dot = function (x, y, r, g, b) {
    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.beginPath();
    ctx.arc(x, y, 4, 0, 2*Math.PI);
    ctx.fill();
  };

  for (var r = 0; r < 255; r += 17) {
    for (var g = 0; g < 255; g += 17) {
      for (var b = 0; b < 255; b += 17) {
        z = (r + g + b) / 17;
        x = xo * (z + 1) + (xr * r) + (xg * g) + (xb * b);
        y = yo + (yr * r) + (yg * g) + (yb * b);
        dot(x, y, r, g, b);
      }
    }
  }
}
    </script>
  </head>
  <body onload="onload()" style="margin: 0; padding: 0; background-color: #999999;">
    <h1 style="color: white; padding: 0 0.5em; margin: 0;">RGB Colors 2</h1>
    <canvas id="pane" width="1800" height="320" style="background-color: #777777;"></canvas>
  </body>
</html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>RGB Colors 2</title>
	<script>
	function onload() {
	var c = document.getElementById("pane");
	pane(c);
	}

	function pane(canvas) {

	var xd = 0.125;
	var yd = 0.25;
	var xr = xd * 0;
	var yr = yd * 2;
	var xg = xd * Math.sqrt(3);
	var yg = yd * (-1);
	var xb = xd * (-1 * Math.sqrt(3));
	var yb = yd * (-1);

	var xo = canvas.width / 44;
	var yo = canvas.height / 2;
	var ctx = canvas.getContext("2d");

	var dot = function (x, y, r, g, b) {
	ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
	ctx.beginPath();
	ctx.arc(x, y, 4, 0, 2*Math.PI);
	ctx.fill();
	};

	for (var r = 0; r < 255; r += 17) {
	for (var g = 0; g < 255; g += 17) {
	for (var b = 0; b < 255; b += 17) {
	z = (r + g + b) / 17;
	x = xo * (z + 1) + (xr * r) + (xg * g) + (xb * b);
	y = yo + (yr * r) + (yg * g) + (yb * b);
	dot(x, y, r, g, b);
	}
	}
	}
	}
	</script>
	</head>
	<body onload="onload()" style="margin: 0; padding: 0; background-color: #999999;">
	<h1 style="color: white; padding: 0 0.5em; margin: 0;">RGB Colors 2</h1>
	<canvas id="pane" width="1800" height="320" style="background-color: #777777;"></canvas>
	</body>
	</html>