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

Merge remote-tracking branch 'origin/master'

Browse source
This commit is contained in:
Jürg Lehni 2011-04-26 15:39:46 +01:00
commit 3dcc1e9a01
5 changed files with 94 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
examples/Animated/Extruded.html Normal file
View file

@ -0,0 +1,73 @@
<!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>

18
examples/Animated/Flock.html
View file

@ -35,7 +35,7 @@
this.head = new PlacedSymbol(head);
this.path = new Path();
this.shortPath = new Path();
this.shortPath.strokeWidth = 3;
this.shortPath.strokeWidth = 4;
for(var i = 0, l = strength * 10 + 10; i < l; i++) {
this.path.add(this.loc);
if (i < 3)
@ -49,7 +49,7 @@
run: function(boids) {
this.lastLoc = this.loc.clone();
if(!groupTogether) {
if (!groupTogether) {
this.flock(boids);
} else {
this.align(boids);
@ -70,7 +70,6 @@
segment.point += rotated;
lastVector = vector;
}
this.path.smooth();
this.head.position = this.loc;
var vector = this.loc - this.lastLoc;
var rot = vector.angle;
@ -78,9 +77,8 @@
this.lastRot = rot;
var shortSegments = this.shortPath.segments;
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 3; i++)
shortSegments[i] = segments[i].clone();
}
},
// We accumulate a new acceleration each time based on three rules
@ -139,7 +137,7 @@
if (loc.x > width + r) loc.x = -r;
if (loc.y > height + r) loc.y = -r;
var vector = this.loc - oldLoc;
if(!vector.isZero())
if (!vector.isZero())
this.path.position += vector;
},
@ -161,7 +159,7 @@
// Average -- divide by how many
if (count > 0)
steer /= count;
if(steer.length > 0) {
if (steer.length > 0) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vel;
@ -181,11 +179,11 @@
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
if(d > 0 && d < nearest) {
if (d > 0 && d < nearest) {
closestPoint = other.loc;
nearest = d;
}
if(d > 0 && d < neighborDist) {
if (d > 0 && d < neighborDist) {
steer += other.vel;
count++;
}
@ -211,7 +209,7 @@
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
if(d > 0 && d < neighborDist) {
if (d > 0 && d < neighborDist) {
sum += other.loc; // Add location
count++;
}

12
examples/Animated/Raster.html
View file

@ -7,14 +7,16 @@
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
// http://en.wikipedia.org/wiki/Lenna
var raster = new Raster('lenna');
var count = 0, lastScale = 1;
setInterval(draw, 30);
function draw() {
var raster = new Raster('lenna'),
count = 0,
lastScale = 1,
center = document.bounds.center;
function onFrame() {
count++;
var scale = Math.sin(count / 15) + 1;
raster.scale(scale / lastScale);
raster.position = [Math.sin(count / 20) * 256 + 512, 384];
raster.position = center + [Math.sin(count / 20) * 256, 0];
raster.rotate(5);
document.redraw();
lastScale = scale;

2
examples/Animated/Smoothing.html
View file

@ -21,7 +21,7 @@
path.add(point);
}
path.add(document.bounds.bottomRight);
// path.selected = true;
path.selected = true;
function onFrame() {
count++;
for (var i = 1; i < points; i++) {

19
examples/Scripts/lines.html
View file

@ -14,10 +14,10 @@
path.closed = true;
}
var position = document.bounds.center;
var mousePos = position;
var children = document.activeLayer.children;
var count = 0;
var position = document.bounds.center,
mousePos = position,
children = document.activeLayer.children,
count = 0;
function iterate() {
count++;
@ -35,21 +35,12 @@
}
}
var lastRedraw = 0;
setInterval(draw, 30);
function draw() {
function onFrame() {
iterate();
var now = new Date().getTime();
if(now - lastRedraw > 30) {
document.redraw();
lastRedraw = now;
}
}
function onMouseMove(event) {
iterate();
lastRedraw = Date.now();
mousePos = event.point;
}
</script>