1 | <!DOCTYPE html>
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>Worm Farm</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 | /////////////////////////////////////////////////////////////////////
|
---|
10 | // Values
|
---|
11 |
|
---|
12 | var values = {
|
---|
13 | minDistance: 10,
|
---|
14 | maxDistance: 30,
|
---|
15 | varyThickness: true
|
---|
16 | };
|
---|
17 |
|
---|
18 | // All newly created items will inherit the following styles:
|
---|
19 | project.currentStyle = {
|
---|
20 | fillColor: 'white',
|
---|
21 | strokeColor: 'black'
|
---|
22 | };
|
---|
23 |
|
---|
24 | /////////////////////////////////////////////////////////////////////
|
---|
25 | // Mouse handling
|
---|
26 |
|
---|
27 | tool.minDistance = values.minDistance;
|
---|
28 | tool.maxDistance = values.maxDistance;
|
---|
29 |
|
---|
30 | var worm;
|
---|
31 |
|
---|
32 | // Every time the user clicks the mouse to drag we create a path
|
---|
33 | // and when a user drags the mouse we add points to it
|
---|
34 | function onMouseDown(event) {
|
---|
35 | worm = new Path();
|
---|
36 | worm.add(event.point, event.point);
|
---|
37 | worm.closed = true;
|
---|
38 | }
|
---|
39 |
|
---|
40 | function onMouseDrag(event) {
|
---|
41 | // the vector in the direction that the mouse moved
|
---|
42 | var step = event.delta;
|
---|
43 |
|
---|
44 | // if the vary thickness checkbox is marked
|
---|
45 | // divide the length of the step vector by two:
|
---|
46 | if (values.varyThickness) {
|
---|
47 | step.length = step.length / 2;
|
---|
48 | } else {
|
---|
49 | // otherwise set the length of the step vector to half of
|
---|
50 | // minDistance
|
---|
51 | step.length = values.minDistance / 2;
|
---|
52 | }
|
---|
53 |
|
---|
54 | // the top point: the middle point + the step rotated by -90
|
---|
55 | // degrees
|
---|
56 | // -----*
|
---|
57 | // |
|
---|
58 | // ------
|
---|
59 | var top = event.middlePoint + step.rotate(-90);
|
---|
60 |
|
---|
61 | // the bottom point: the middle point + the step rotated by 90
|
---|
62 | // degrees
|
---|
63 | // ------
|
---|
64 | // |
|
---|
65 | // -----*
|
---|
66 | var bottom = event.middlePoint + step.rotate(90);
|
---|
67 |
|
---|
68 | // add the top point to the end of the path
|
---|
69 | worm.add(top);
|
---|
70 |
|
---|
71 | // insert the bottom point after the first segment of the path
|
---|
72 | worm.insert(1, bottom);
|
---|
73 |
|
---|
74 | // make a new line path from top to bottom
|
---|
75 | new Path(top, bottom);
|
---|
76 |
|
---|
77 | // This is the point at the front of the worm:
|
---|
78 | worm.firstSegment.point = event.point;
|
---|
79 |
|
---|
80 | // smooth the segments of the path
|
---|
81 | worm.smooth();
|
---|
82 | }
|
---|
83 | </script>
|
---|
84 | </head>
|
---|
85 | <body>
|
---|
86 | <canvas id="canvas" resize></canvas>
|
---|
87 | </body>
|
---|
88 | </html> |
---|