scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -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: // Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html // 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, { Event.add(window, {
resize: function(event) { resize: function(event) {
size = document.size; 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">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script> <script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var vector = new Point(document.size.height, 0);
var point = new Point(document.size) / 2; var point = new Point(document.size) / 2;
var colors = []; var colors = [];
@ -18,9 +17,10 @@
colors.push(color); colors.push(color);
} }
var path = new Path.Rectangle(document.bounds);
var gradient = new Gradient(colors, 'radial'); var gradient = new Gradient(colors, 'radial');
var gradientColor = new GradientColor(gradient, point, point + vector); var radius = Math.max(document.size.height, document.size.width) * 0.75;
var path = new Path.Rectangle(new Rectangle([0, 0], document.size)); var gradientColor = new GradientColor(gradient, point, point + [radius, 0]);
path.fillColor = gradientColor; path.fillColor = gradientColor;
tool.eventInterval = 30; tool.eventInterval = 30;
@ -65,6 +65,17 @@
vector.angle += 5; vector.angle += 5;
gradientColor.hilite = mouseDown ? point : point + vector; 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> </script>
</head> </head>
<body> <body>

36
examples/Animated/Smoothing.html
View file

@ -7,22 +7,29 @@
<script type="text/javascript">var root = '../../'</script> <script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script> <script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var width = document.bounds.width; var width, height, pathHeight, center;
var height = document.bounds.height / 2;
var pathHeight = document.bounds.height / 2;
var points = 10; var points = 10;
var count = 0; var count = 0;
var smooth = true; var smooth = true;
var center = document.bounds.center;
var path = new Path(); var path = new Path();
path.fillColor = 'black'; path.fillColor = 'black';
path.add(document.bounds.bottomLeft); initializePath();
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y); function initializePath() {
path.add(point); 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() { function onFrame() {
count++; count++;
for (var i = 1; i < points; i++) { 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> </script>
</head> </head>
<body> <body>

12
examples/Animated/animatedStar.html
View file

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