scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-06-09 03:34:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

added support for HSL colors

Browse source 
new class HSLColor, new test script HSLColor.html
This commit is contained in:
gka 2011-07-05 15:38:32 +02:00
parent ccd4113ba3
commit 0e37d9e93d
3 changed files with 764 additions and 154 deletions
examples/Scripts
HSLColor.html

42
examples/Scripts/HSLColor.html Normal file
View file

@ -0,0 +1,42 @@
<!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>