mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Add a few more examples.
This commit is contained in:
Jonathan Puckey
parent
440db1c1e3
commit
0c53c8b29e
4 changed files with 354 additions and 0 deletions
98
examples/Tools/Dripping Brush.html
Normal file
98
examples/Tools/Dripping Brush.html
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Example</title>
|
||||||
|
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolEvent.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolHandler.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Tool.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var doc = new Doc(canvas);
|
||||||
|
|
||||||
|
var path;
|
||||||
|
var minSize = 5;
|
||||||
|
|
||||||
|
var tool = new Tool({
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseDrag: function(event) {
|
||||||
|
// If the user dragged more then minSize:
|
||||||
|
if (event.getDelta().getLength() > minSize) {
|
||||||
|
// If there is no path, make one:
|
||||||
|
if (!path) {
|
||||||
|
path = new Path();
|
||||||
|
path.fillColor = 'black';
|
||||||
|
path.add(event.lastPoint);
|
||||||
|
doc.children.push(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
var step = event.getDelta().divide(2);
|
||||||
|
step.setAngle(step.getAngle() + 90);
|
||||||
|
|
||||||
|
// The top point: the middle point + the step rotated by 90 degrees:
|
||||||
|
// -----*
|
||||||
|
// |
|
||||||
|
// ------
|
||||||
|
var top = event.getMiddlePoint().add(step);
|
||||||
|
|
||||||
|
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||||
|
// ------
|
||||||
|
// |
|
||||||
|
// -----*
|
||||||
|
var bottom = event.getMiddlePoint().subtract(step);
|
||||||
|
|
||||||
|
path.add(top);
|
||||||
|
path.insert(0, bottom);
|
||||||
|
path.smooth();
|
||||||
|
} else {
|
||||||
|
// If the user dragged too slowly:
|
||||||
|
|
||||||
|
// If there is currently a path, close it
|
||||||
|
if (path) {
|
||||||
|
path.add(event.getPoint());
|
||||||
|
path.closed = true;
|
||||||
|
path.smooth();
|
||||||
|
|
||||||
|
// Set path to null (nothing) so the path check above
|
||||||
|
// will force a new path next time the user drags fast enough:
|
||||||
|
path = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp: function(event) {
|
||||||
|
if (path) {
|
||||||
|
path.add(event.getPoint());
|
||||||
|
path.closed = true;
|
||||||
|
path.smooth();
|
||||||
|
|
||||||
|
// Set path to null (nothing) so the path check above
|
||||||
|
// will force a new path next time the user drags fast enough:
|
||||||
|
path = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tool.setDocument(doc);
|
||||||
|
tool.setMaxDistance(20);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' width=1024 height=768></canvas>
|
||||||
|
</body>
|
||||||
102
examples/Tools/Fancy Brush.html
Normal file
102
examples/Tools/Fancy Brush.html
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Example</title>
|
||||||
|
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolEvent.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolHandler.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Tool.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var doc = new Doc(canvas);
|
||||||
|
|
||||||
|
var path;
|
||||||
|
var strokeEnds = 6;
|
||||||
|
|
||||||
|
////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// Mouse handling
|
||||||
|
|
||||||
|
var lastPoint;
|
||||||
|
|
||||||
|
var tool = new Tool({
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
path = new Path();
|
||||||
|
path.fillColor = event.getCount() % 2 ? 'red' : 'black';
|
||||||
|
doc.children.push(path);
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseDrag: function(event) {
|
||||||
|
// If this is the first drag event,
|
||||||
|
// add the strokes at the start:
|
||||||
|
if (event.getCount() == 1) {
|
||||||
|
addStrokes(event.getMiddlePoint(), event.getDelta().multiply(-1));
|
||||||
|
} else {
|
||||||
|
var step = event.getDelta().divide(2);
|
||||||
|
step.setAngle(step.getAngle() + 90);
|
||||||
|
|
||||||
|
// The top point: the middle point + the step rotated by 90 degrees:
|
||||||
|
// -----*
|
||||||
|
// |
|
||||||
|
// ------
|
||||||
|
var top = event.getMiddlePoint().add(step);
|
||||||
|
|
||||||
|
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||||
|
// ------
|
||||||
|
// |
|
||||||
|
// -----*
|
||||||
|
var bottom = event.getMiddlePoint().subtract(step);
|
||||||
|
|
||||||
|
path.add(top);
|
||||||
|
path.insert(0, bottom);
|
||||||
|
}
|
||||||
|
path.smooth();
|
||||||
|
|
||||||
|
lastPoint = event.getMiddlePoint();
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp: function(event) {
|
||||||
|
var delta = event.getPoint().subtract(lastPoint);
|
||||||
|
delta.setLength(tool.getMaxDistance());
|
||||||
|
addStrokes(event.getPoint(), delta);
|
||||||
|
path.closed = true;
|
||||||
|
path.smooth();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function addStrokes(point, delta) {
|
||||||
|
var step = delta.rotate(90);
|
||||||
|
var strokePoints = strokeEnds * 2 + 1;
|
||||||
|
point = point.subtract(step.divide(2));
|
||||||
|
step = step.divide(strokePoints - 1);
|
||||||
|
for(var i = 0; i < strokePoints; i++) {
|
||||||
|
var strokePoint = point.add(step.multiply(i));
|
||||||
|
var offset = delta.multiply(Math.random() * 0.3 + 0.1);
|
||||||
|
if (i % 2) {
|
||||||
|
offset = offset.multiply(-1);
|
||||||
|
}
|
||||||
|
strokePoint = strokePoint.add(offset);
|
||||||
|
path.insert(0, strokePoint);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tool.setDocument(doc);
|
||||||
|
tool.setFixedDistance(40);
|
||||||
|
// tool.setMinDistance(values.minDistance);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' width=1024 height=768></canvas>
|
||||||
|
</body>
|
||||||
56
examples/Tools/Grid.html
Normal file
56
examples/Tools/Grid.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Example</title>
|
||||||
|
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolEvent.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolHandler.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Tool.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
var values = { size: 10 };
|
||||||
|
|
||||||
|
var point, path;
|
||||||
|
|
||||||
|
function getPos(pt) {
|
||||||
|
return (pt.divide(values.size)).round().multiply(values.size);
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var doc = new Doc(canvas);
|
||||||
|
var point, path;
|
||||||
|
var tool = new Tool({
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
point = getPos(event.getPoint());
|
||||||
|
path = new Path();
|
||||||
|
path.strokeColor = 'black';
|
||||||
|
path.add(point);
|
||||||
|
doc.children.push(path);
|
||||||
|
},
|
||||||
|
onMouseDrag: function(event) {
|
||||||
|
var p = getPos(event.getPoint());
|
||||||
|
if (!point.equals(p)) {
|
||||||
|
path.add(p);
|
||||||
|
point = p;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
tool.setDocument(doc);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' width=1024 height=768></canvas>
|
||||||
|
</body>
|
||||||
98
examples/Tools/Worm Farm.html
Normal file
98
examples/Tools/Worm Farm.html
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Example</title>
|
||||||
|
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolEvent.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/ToolHandler.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/Tool.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var doc = new Doc(canvas);
|
||||||
|
|
||||||
|
var values = {
|
||||||
|
minDistance: 30,
|
||||||
|
varyThickness: true
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// Mouse handling
|
||||||
|
|
||||||
|
var worm;
|
||||||
|
|
||||||
|
var tool = new Tool({
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
worm = new Path();
|
||||||
|
worm.fillColor = '#ffffff';
|
||||||
|
worm.strokeColor = '#000000';
|
||||||
|
worm.add(event.getPoint());
|
||||||
|
doc.children.push(worm);
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseDrag: function(event) {
|
||||||
|
// the vector in the direction that the mouse moved
|
||||||
|
var step = event.getDelta();
|
||||||
|
|
||||||
|
// if the vary thickness checkbox is marked
|
||||||
|
// divide the length of the step vector by two:
|
||||||
|
if (values.varyThickness) {
|
||||||
|
step.setLength(step.getLength() / 2);
|
||||||
|
} else {
|
||||||
|
// otherwise set the length of the step vector to half of minDistance
|
||||||
|
step.setLength(values.minDistance / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// the top point: the middle point + the step rotated by -90 degrees
|
||||||
|
// -----*
|
||||||
|
// |
|
||||||
|
// ------
|
||||||
|
var top = event.getMiddlePoint().add(step.rotate(-90));
|
||||||
|
|
||||||
|
// the bottom point: the middle point + the step rotated by 90 degrees
|
||||||
|
// ------
|
||||||
|
// |
|
||||||
|
// -----*
|
||||||
|
var bottom = event.getMiddlePoint().add(step.rotate(90));
|
||||||
|
|
||||||
|
// add the top point to the end of the path
|
||||||
|
worm.add(top);
|
||||||
|
|
||||||
|
// insert the bottom point in the beginning of the path
|
||||||
|
worm.insert(0, bottom);
|
||||||
|
|
||||||
|
// make a new line path from top to bottom
|
||||||
|
var line = new Path.Line(top, bottom);
|
||||||
|
line.strokeColor = '#000000';
|
||||||
|
doc.children.push(line);
|
||||||
|
|
||||||
|
// smooth the segments of the path
|
||||||
|
worm.smooth();
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp: function(event) {
|
||||||
|
worm.closed = true;
|
||||||
|
worm.add(event.getPoint());
|
||||||
|
worm.smooth();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
tool.setDocument(doc);
|
||||||
|
tool.setFixedDistance(3);
|
||||||
|
tool.setMinDistance(values.minDistance);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas' width=1024 height=768></canvas>
|
||||||
|
</body>
|
||||||
Loading…
Reference in a new issue