mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -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