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