scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use radial gradients in HSLColor example.

Browse source
This commit is contained in:
Jonathan Puckey 2011-07-09 16:19:15 +02:00
parent 45c7f9c4fc
commit 984af9c93b
1 changed files with 33 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
examples/Scripts/HSLColor.html
View file

@ -6,27 +6,43 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var path; var steps = {
var r = view.size.width * .12; hue: 100,
var offset = new Point(view.size.width / 3, 0); saturation: 20,
var hCount = 40; lightness: 3
var sCount = 18; };
for (var s = 0; s < sCount; s++) {
for (var h = 0; h < hCount; h++) { for (var i = 0; i < steps.lightness; i++) {
var saturation = s / sCount; var radius = view.size.width / steps.lightness * 0.45;
var hue = (h / hCount) * 360; var offset = new Point(view.size.width / steps.lightness, 0);
var position = view.bounds.leftCenter + offset * (i + 0.5);
var lightness = 1 - (i + 1) / (steps.lightness + 1);
createWheel(position, radius, steps, lightness);
};
function createWheel(center, radius, steps, lightness) {
var hUnit = 360 / steps.hue;
for (var h = 0; h < steps.hue; h++) {
var hue = h * hUnit;
var vector = new Point({ var vector = new Point({
angle: hue - 90, angle: hue - 90,
length: r * saturation length: radius
}); });
var color = new HSLColor(hue, saturation, 0.75); path = new Path(new Point(), vector.rotate(hUnit / 2));
var radius = Math.max(r / 10 * Math.sqrt(saturation), 5); path.closed = true;
for (var i = 0; i < 3; i++) { path.arcTo(vector, vector.rotate(hUnit / -2));
var center = view.center + vector + offset * (i - 1); path.position += center;
path = new Path.Circle(center, radius); var colors = [];
color.lightness = 0.25 + 0.25 * (2 - i); for (var i = 0; i < steps.saturation; i++) {
path.fillColor = color.clone(); var saturation = i / steps.saturation;
var color = new HSLColor(hue, saturation, lightness);
colors.push(color);
} }
var gradient = new Gradient(colors, 'radial');
var from = center;
var to = center + vector;
var gradientColor = new GradientColor(gradient, from, to);
path.fillColor = path.strokeColor = gradientColor;
} }
} }
</script> </script>