2011-04-26 10:04:55 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Extruded</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
var lineGroup = new Group();
|
|
|
|
|
var lineCount = 100;
|
|
|
|
|
for (var i = 0; i < lineCount; i++) {
|
|
|
|
|
var linePath = new Path.Line([0, 0], [0, 0]);
|
|
|
|
|
lineGroup.addChild(linePath);
|
|
|
|
|
}
|
|
|
|
|
lineGroup.strokeColor = 'red';
|
2011-04-26 10:04:55 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
|
|
|
|
|
path1.position = view.center;
|
2011-04-26 10:04:55 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var path2 = path1.clone();
|
|
|
|
|
path1.scale(1.5);
|
|
|
|
|
path2.scale(2);
|
2011-04-26 10:04:55 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var length1 = path1.length;
|
|
|
|
|
var length2 = path2.length;
|
|
|
|
|
function onFrame(event) {
|
|
|
|
|
var vector = new Point({
|
|
|
|
|
angle: -event.count % 360,
|
|
|
|
|
length: 100
|
|
|
|
|
});
|
|
|
|
|
path1.rotate(-0.5);
|
|
|
|
|
path1.position = view.center - vector;
|
2011-04-26 10:04:55 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
path2.rotate(-0.5);
|
|
|
|
|
path2.position = view.center + vector.normalize(50);
|
2011-04-26 10:04:55 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
for (var i = 0; i < lineCount; i++) {
|
|
|
|
|
var path = lineGroup.children[i];
|
|
|
|
|
var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
|
|
|
|
|
var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
|
|
|
|
|
path.firstSegment.point = path1.getPointAt(l1),
|
|
|
|
|
path.lastSegment.point = path2.getPointAt(l2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2011-04-26 10:04:55 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<canvas id="canvas" resize></canvas>
|
2011-05-30 18:27:39 -04:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
