scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add path smoothing example.

Browse source
This commit is contained in:
Jonathan Puckey 2011-04-23 15:47:28 +02:00
parent ff3d5aca17
commit 36ba812f39
1 changed files with 54 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
examples/Animated/Smoothing.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var width = document.bounds.width - 10;
var height = document.bounds.height / 2;
var pathHeight = document.bounds.height / 2;
var points = 10;
var count = 0;
var smooth = true;
var center = document.bounds.center;
var path = new Path();
for (var i = 0; i < points; i++) {
var point = new Point(width / points * i + 5, center.y);
path.add(point);
}
path.selected = true;
function onFrame() {
count++;
for (var i = 0; i < points; i++) {
var sinSeed = count + (i + i % 10) * 100 ;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
path.segments[i].point.y = yPos;
}
if (smooth)
path.smooth();
}
function onMouseMove(event) {
pathHeight = center.y - event.point.y;
}
function onMouseDown(event) {
smooth = !smooth;
if (!smooth) {
// If smooth has been turned off, we need to reset
// the handles of the path:
for (var i = 0; i < points; i++) {
var segment = path.segments[i];
segment.handleIn = segment.handleOut = null;
}
}
}
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
</body>