<!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>