mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
73 lines
No EOL
3.1 KiB
HTML
73 lines
No EOL
3.1 KiB
HTML
<!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 segments = [
|
|
new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
|
|
new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
|
|
new Segment(new Point(145.87060546875, 245.9306640625), new Point(0, 18.947265625), new Point(0, -17.27587890625)),
|
|
new Segment(new Point(110.4833984375, 208.87158203125), new Point(25.35595703125, 9.4736328125), new Point(-30.65087890625, -11.14599609375)),
|
|
new Segment(new Point(60.88525390625, 155.37255859375), new Point(0, 26.19189453125), new Point(0, -29.25732421875)),
|
|
new Segment(new Point(121.62890625, 104.380859375), new Point(-36.501953125, 0), new Point(18.947265625, 0)),
|
|
new Segment(new Point(162.86767578125, 113.576171875), new Point(-8.08056640625, -4.73681640625)),
|
|
new Segment(new Point(156.18017578125, 133.35986328125), null, new Point(-5.8515625, -3.62255859375)),
|
|
new Segment(new Point(120.79296875, 124.443359375), new Point(16.9970703125, 0), new Point(-25.63525390625, 0)),
|
|
new Segment(new Point(85.4052734375, 152.5859375), new Point(0, -12.8173828125), new Point(0, 17.55419921875)),
|
|
new Segment(new Point(122.7431640625, 188.80908203125), new Point(-25.91357421875, -10.03076171875), new Point(31.76513671875, 12.26025390625)),
|
|
new Segment(new Point(170.39111328125, 243.97998046875), new Point(0, -27.58544921875), new Point(0, 28.97900390625)),
|
|
new Segment(new Point(104.91015625, 298.31494140625), new Point(44.30419921875, 0), new Point(-18.111328125, 0)),
|
|
new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
|
|
];
|
|
|
|
var lineGroup = new Group();
|
|
var lineCount = 100;
|
|
for(var i = 0; i < lineCount; i++) {
|
|
var linePath = new Path.Line([0, 0], [0, 0]);
|
|
linePath.strokeColor = 'red';
|
|
lineGroup.appendTop(linePath);
|
|
}
|
|
|
|
var path1 = new Path();
|
|
path1.segments = segments;
|
|
path1.closed = true;
|
|
path1.position = document.bounds.center;
|
|
path1.scale(1.5);
|
|
|
|
var path2 = new Path();
|
|
path2.segments = segments;
|
|
path2.closed = true;
|
|
path2.position = document.bounds.center;
|
|
path2.scale(2);
|
|
|
|
var length1 = path1.length,
|
|
length2 = path2.length,
|
|
count = 0;
|
|
function onFrame() {
|
|
var vector = new Point({
|
|
angle: -count % 360,
|
|
length: 100
|
|
});
|
|
path1.rotate(-0.5);
|
|
path1.position = document.bounds.center - vector;
|
|
|
|
path2.rotate(-0.5);
|
|
path2.position = document.bounds.center + vector.normalize(50);
|
|
|
|
for (var i = 0; i < lineCount; i++) {
|
|
var path = lineGroup.children[i],
|
|
l1 = (length1 / lineCount * (i + count / 10)) % length1,
|
|
l2 = (length2 / lineCount * (i + count / 10)) % length2;
|
|
path.segments[0].point = path1.getLocation(l1).point,
|
|
path.segments[1].point = path2.getLocation(l2).point;
|
|
}
|
|
count++;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id='canvas' width=1024 height=768></canvas>
|
|
</body> |