scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Let's not use variable chaining in examples, for clearer code.

Browse source
This commit is contained in:
Jürg Lehni 2011-05-15 11:36:10 +01:00
parent 51dbd85db5
commit 3078e74f27
9 changed files with 80 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
examples/Animated/Extruded.html
View file

@ -44,9 +44,9 @@
path2.position = document.bounds.center;
path2.scale(2);
var length1 = path1.length,
length2 = path2.length,
count = 0;
var length1 = path1.length;
var length2 = path2.length;
var count = 0;
function onFrame() {
var vector = new Point({
angle: -count % 360,
@ -59,9 +59,9 @@
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;
var path = lineGroup.children[i];
var l1 = (length1 / lineCount * (i + count / 10)) % length1;
var l2 = (length2 / lineCount * (i + count / 10)) % length2;
path.segments[0].point = path1.getPointAt(l1),
path.segments[1].point = path2.getPointAt(l2);
}

42
examples/Animated/Flock.html
View file

@ -138,11 +138,11 @@
},
borders: function() {
var loc = this.loc,
r = this.r,
oldLoc = this.loc.clone(),
width = size.width,
height = size.height;
var loc = this.loc;
var r = this.r;
var oldLoc = this.loc.clone();
var width = size.width;
var height = size.height;
if (loc.x < -r) loc.x = width + r;
if (loc.y < -r) loc.y = height + r;
if (loc.x > width + r) loc.x = -r;
@ -153,9 +153,9 @@
},
separate: function(boids) {
var desiredSeperation = 60,
steer = new Point(0, 0),
count = 0;
var desiredSeperation = 60;
var steer = new Point(0, 0);
var count = 0;
// For every boid in the system, check if it's too close
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
@ -182,11 +182,11 @@
// Alignment
// For every nearby boid in the system, calculate the average velocity
align: function(boids) {
var neighborDist = 25,
steer = new Point(0, 0),
count = 0,
nearest = 999,
closestPoint;
var neighborDist = 25;
var steer = new Point(0, 0);
var count = 0;
var nearest = 999;
var closestPoint;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
@ -214,9 +214,9 @@
// Cohesion
// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
cohesion: function(boids) {
var neighborDist = 100,
sum = new Point(0, 0),
count = 0;
var neighborDist = 100;
var sum = new Point(0, 0);
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
@ -258,11 +258,11 @@
heartPath.strokeColor = null;
heartPath.scale(1.5);
var count = 0,
groupTogether = false,
pathLength = heartPath.length,
mouseDown = false,
boids = [];
var count = 0;
var groupTogether = false;
var pathLength = heartPath.length;
var mouseDown = false;
var boids = [];
// Add the boids:
for (var i = 0; i < 30; i++) {

8
examples/Animated/Lines.html
View file

@ -15,10 +15,10 @@
path.closed = true;
}
var position = document.bounds.center,
mousePos = position,
children = document.activeLayer.children,
count = 0;
var position = document.bounds.center;
var mousePos = position;
var children = document.activeLayer.children;
var count = 0;
function iterate() {
count++;

8
examples/Animated/Raster.html
View file

@ -8,10 +8,10 @@
<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'),
count = 0,
lastScale = 1,
center = document.bounds.center;
var raster = new Raster('lenna');
var count = 0;
var lastScale = 1;
var center = document.bounds.center;
function onFrame(event) {
count++;
var scale = (Math.sin(event.time * 2) + 1) / 2;

10
examples/Scripts/BouncingBalls.html
View file

@ -7,8 +7,8 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var balls = [],
group = new Group();
var balls = [];
var group = new Group();
var Ball = Base.extend({
initialize: function(point, vector) {
@ -50,9 +50,9 @@
});
for (var i = 0; i < 10; i++) {
var position = Point.random() * document.size,
vector = (Point.random() - [0.5, 0]) * [50, 100],
ball = new Ball(position, vector);
var position = Point.random() * document.size;
var vector = (Point.random() - [0.5, 0]) * [50, 100];
var ball = new Ball(position, vector);
balls.push(ball);
}

6
examples/Scripts/Chain.html
View file

@ -14,9 +14,9 @@
path.strokeColor = 'purple';
path.strokeWidth = 20;
path.strokeCap = 'round';
var size = 20,
segments = path.segments,
center = document.bounds.center;
var size = 20;
var segments = path.segments;
var center = document.bounds.center;
for (var i = 0; i < size; i++)
path.add(center + new Point(i * 100, 0));

18
examples/Scripts/RotationRaster.html
View file

@ -7,21 +7,21 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var raster = new Raster('lenna'),
size = new Size(50, 50),
colSize = raster.size / size * 1.5,
fullSize = size * colSize;
var raster = new Raster('lenna');
var size = new Size(50, 50);
var colSize = raster.size / size * 1.5;
var fullSize = size * colSize;
raster.hidden = true;
raster.size = size;
for (var x = 0; x < size.width; x++) {
for (var y = 0; y < size.height; y++) {
var color = raster.getPixel(x, y),
gray = color.gray * 0.9;
var color = raster.getPixel(x, y);
var gray = color.gray * 0.9;
if (gray > 0.1) {
var pos = new Point(x, y) * colSize + colSize / 2,
rectSize = gray * colSize.width,
path = new Path.Rectangle([0, 0], [rectSize, rectSize]);
var pos = new Point(x, y) * colSize + colSize / 2;
var rectSize = gray * colSize.width;
var path = new Path.Rectangle([0, 0], [rectSize, rectSize]);
path.fillColor = color;
path.position = pos;
path.rotate(gray * 180);

46
examples/Tools/MetaBalls.html
View file

@ -13,10 +13,10 @@
fillColor: 'black'
};
var handle_len_rate = 2.4,
circlePaths = [],
circlePath,
radius = 50;
var handle_len_rate = 2.4;
var circlePaths = [];
var circlePath;
var radius = 50;
circlePaths.push(new Path.Circle(document.bounds.center, 100));
function onMouseDown(event) {
circlePath = null;
@ -53,13 +53,13 @@
// ---------------------------------------------
function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
var center1 = ball1.position,
center2 = ball2.position,
radius1 = ball1.bounds.width / 2,
radius2 = ball2.bounds.width / 2,
pi2 = Math.PI / 2,
d = center1.getDistance(center2),
u1, u2;
var center1 = ball1.position;
var center2 = ball2.position;
var radius1 = ball1.bounds.width / 2;
var radius2 = ball2.bounds.width / 2;
var pi2 = Math.PI / 2;
var d = center1.getDistance(center2);
var u1, u2;
if (radius1 == 0 || radius2 == 0)
return;
@ -74,18 +74,18 @@
u2 = 0;
}
var angle1 = (center2 - center1).getAngleInRadians(),
angle2 = Math.acos((radius1 - radius2) / d),
angle1a = angle1 + u1 + (angle2 - u1) * v,
angle1b = angle1 - u1 - (angle2 - u1) * v,
angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v,
angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
p1a = center1 + getVector(angle1a, radius1),
p1b = center1 + getVector(angle1b, radius1),
p2a = center2 + getVector(angle2a, radius2),
p2b = center2 + getVector(angle2b, radius2),
// define handle length by the distance between both ends of the curve to draw
d2 = Math.min(v * handle_len_rate, p1a.getDistance(p2a) / (radius1 + radius2));
var angle1 = (center2 - center1).getAngleInRadians();
var angle2 = Math.acos((radius1 - radius2) / d);
var angle1a = angle1 + u1 + (angle2 - u1) * v;
var angle1b = angle1 - u1 - (angle2 - u1) * v;
var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
var p1a = center1 + getVector(angle1a, radius1);
var p1b = center1 + getVector(angle1b, radius1);
var p2a = center2 + getVector(angle2a, radius2);
var p2b = center2 + getVector(angle2b, radius2);
// define handle length by the distance between both ends of the curve to draw
var d2 = Math.min(v * handle_len_rate, p1a.getDistance(p2a) / (radius1 + radius2));
d2 *= Math.min(1, d * 2 / (radius1 + radius2)); // case circles are overlapping
radius1 *= d2;

10
examples/Tools/Stars.html
View file

@ -13,11 +13,11 @@
}
function onMouseDrag(event) {
var delta = event.point - event.downPoint,
radius = delta.length,
points = 5 + Math.round(radius / 50),
position = event.downPoint,
path = new Path.Star(position, points, radius / 2, radius);
var delta = event.point - event.downPoint;
var radius = delta.length;
var points = 5 + Math.round(radius / 50);
var position = event.downPoint;
var path = new Path.Star(position, points, radius / 2, radius);
path.rotate(delta.angle);
// Remove the path automatically before the next mouse drag
// event: