<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>HSLColor</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var center = view.center;

		var path,
			h,
			s = 0.6,
			l = 0.6,
			d = view.size.width * 0.012;
			p = new Point(),
			r = view.size.width * .12;

		for (s = 0; s <= 1; s+=0.2) {
			for (h = 0; h < (s > 0 ? 360 : 1); h+= 20) {
				p.x = (center.x - r)*0.5 + Math.cos((h-90)/180*Math.PI) * r*s;
				p.y = center.y + Math.sin((h-90)/180*Math.PI) * r*s;
				path = new Path.Circle(p, Math.max(d*Math.sqrt(s), 5));
				path.fillColor =  new HSLColor(h, s, 0.75);

				p.x = center.x + Math.cos((h-90)/180*Math.PI) * r*s;
				p.y = center.y + Math.sin((h-90)/180*Math.PI) * r*s;
				path = new Path.Circle(p, Math.max(d*Math.sqrt(s), 5));
				path.fillColor =  new HSLColor(h, s, 0.5);

				p.x = center.x + (center.x + r) * .5 + Math.cos((h-90)/180*Math.PI) * r*s;
				p.y = center.y + Math.sin((h-90)/180*Math.PI) * r*s;
				path = new Path.Circle(p, Math.max(d*Math.sqrt(s), 5));
				path.fillColor =  new HSLColor(h, s, 0.25);
			}
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>