mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
42 lines
No EOL
1.3 KiB
HTML
42 lines
No EOL
1.3 KiB
HTML
<!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> |