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

Adjust examples to work nicely when the browser window is resized.

Browse source
This commit is contained in:
Jonathan Puckey 2011-05-05 18:40:10 +01:00
parent 077dc58222
commit 49510f78fc
4 changed files with 50 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/Animated/Flock.html
View file

@ -10,7 +10,7 @@
// Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html
// Resize the document, whenever the window is resized,
// Reposition the heart path whenever the window is resized:
Event.add(window, {
resize: function(event) {
size = document.size;

17
examples/Animated/RadialRainbows.html
View file

@ -7,7 +7,6 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var vector = new Point(document.size.height, 0);
var point = new Point(document.size) / 2;
var colors = [];
@ -18,9 +17,10 @@
colors.push(color);
}
var path = new Path.Rectangle(document.bounds);
var gradient = new Gradient(colors, 'radial');
var gradientColor = new GradientColor(gradient, point, point + vector);
var path = new Path.Rectangle(new Rectangle([0, 0], document.size));
var radius = Math.max(document.size.height, document.size.width) * 0.75;
var gradientColor = new GradientColor(gradient, point, point + [radius, 0]);
path.fillColor = gradientColor;
tool.eventInterval = 30;
@ -65,6 +65,17 @@
vector.angle += 5;
gradientColor.hilite = mouseDown ? point : point + vector;
}
Event.add(window, {
resize: function(event) {
point = new Point(document.size) / 2;
path.bounds = document.bounds;
var radius = Math.max(document.size.height, document.size.width) * 0.75;
var gradientColor = path.fillColor;
gradientColor.origin = point;
gradientColor.origin = point + radius;
}
});
</script>
</head>
<body>

36
examples/Animated/Smoothing.html
View file

@ -7,22 +7,29 @@
<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;
var height = document.bounds.height / 2;
var pathHeight = document.bounds.height / 2;
var width, height, pathHeight, center;
var points = 10;
var count = 0;
var smooth = true;
var center = document.bounds.center;
var path = new Path();
path.fillColor = 'black';
path.add(document.bounds.bottomLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
initializePath();
function initializePath() {
center = document.bounds.center;
width = document.bounds.width;
height = document.bounds.height / 2;
path.segments = [];
path.add(document.bounds.bottomLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
}
path.add(document.bounds.bottomRight);
path.selected = true;
}
path.add(document.bounds.bottomRight);
path.selected = true;
function onFrame() {
count++;
for (var i = 1; i < points; i++) {
@ -50,6 +57,15 @@
}
}
}
// Reposition the path whenever the window is resized:
Event.add(window, {
resize: function(event) {
initializePath();
onFrame();
document.redraw();
}
});
</script>
</head>
<body>

12
examples/Animated/animatedStar.html
View file

@ -12,20 +12,19 @@
var values = {
count: 34,
points: 32
}
};
var center = new Point(document.size) / 2;
for (var i = 0; i < values.count; i++) {
var offset = new Point(20 + 10 * i, 0);
var path = new Path();
path.fillColor = i % 2 ? 'red' : 'black';
//console.log('color', path.fillColor);
path.closed = true;
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.clone()
var vector = offset.clone();
vector.length = l * (j % 2 ? 0.1 : -0.1);
path.add(offset + vector);
}
@ -44,6 +43,13 @@
item.rotate(angle);
}
}
// Reposition the paths whenever the window is resized:
Event.add(window, {
resize: function(event) {
document.activeLayer.position = document.bounds.center;
}
});
</script>
</head>
<body>