1 | <!DOCTYPE html>
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>Radial Rainbows</title>
|
---|
6 | <link rel="stylesheet" href="../css/style.css">
|
---|
7 | <script type="text/javascript" src="../../dist/paper.js"></script>
|
---|
8 | <script type="text/paperscript" canvas="canvas">
|
---|
9 | var point = view.center;
|
---|
10 |
|
---|
11 | var colors = [];
|
---|
12 | var cycles = 4;
|
---|
13 | for (var i = 0, l = 60; i < l; i++) {
|
---|
14 | var brightness = 1 - (i / l) * 1.5;
|
---|
15 | var hue = i / l * cycles * 360;
|
---|
16 | var color = {
|
---|
17 | hue: hue,
|
---|
18 | saturation: 1,
|
---|
19 | brightness: brightness
|
---|
20 | };
|
---|
21 | colors.push(color);
|
---|
22 | }
|
---|
23 |
|
---|
24 | var path = new Path.Rectangle(view.bounds);
|
---|
25 | var gradient = new Gradient(colors, true);
|
---|
26 | var radius = Math.max(view.size.width, view.size.height) * 0.75;
|
---|
27 | path.fillColor = new Color(gradient, point, point + [radius, 0]);
|
---|
28 | var gradientColor = path.fillColor;
|
---|
29 |
|
---|
30 | var mouseDown = false,
|
---|
31 | mousePoint = view.center;
|
---|
32 |
|
---|
33 | function onMouseDown(event) {
|
---|
34 | mouseDown = true;
|
---|
35 | mousePoint = event.point;
|
---|
36 | }
|
---|
37 |
|
---|
38 | function onMouseDrag(event) {
|
---|
39 | mousePoint = event.point;
|
---|
40 | }
|
---|
41 |
|
---|
42 | function onMouseUp(event) {
|
---|
43 | vector.length = 10;
|
---|
44 | mouseDown = false;
|
---|
45 | }
|
---|
46 |
|
---|
47 | var grow = false;
|
---|
48 | var vector = new Point(150, 0);
|
---|
49 |
|
---|
50 | function onFrame() {
|
---|
51 | for (var i = 0, l = gradient.stops.length; i < l; i++)
|
---|
52 | gradient.stops[i].color.hue -= 20;
|
---|
53 | if (grow && vector.length > 300) {
|
---|
54 | grow = false;
|
---|
55 | } else if (!grow && vector.length < 75) {
|
---|
56 | grow = true;
|
---|
57 | }
|
---|
58 | if (mouseDown) {
|
---|
59 | point = point + (mousePoint - point) / 10;
|
---|
60 | } else {
|
---|
61 | vector.length += (grow ? 1 : -1);
|
---|
62 | vector.angle += 5;
|
---|
63 | }
|
---|
64 | gradientColor.highlight = mouseDown ? point : point + vector;
|
---|
65 | }
|
---|
66 |
|
---|
67 | function onResize(event) {
|
---|
68 | point = view.center;
|
---|
69 | path.bounds = view.bounds;
|
---|
70 | var gradientColor = path.fillColor;
|
---|
71 | gradientColor.origin = point;
|
---|
72 | var radius = Math.max(view.size.width, view.size.height) * 0.75;
|
---|
73 | gradientColor.destination = point + [radius, 0];
|
---|
74 | }
|
---|
75 | </script>
|
---|
76 | </head>
|
---|
77 | <body>
|
---|
78 | <canvas id="canvas" resize></canvas>
|
---|
79 | </body>
|
---|
80 | </html> |
---|