mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
88 lines
2.7 KiB
HTML
88 lines
2.7 KiB
HTML
<!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-full.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>
|