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

Make all examples resize to the size of the browser window.

Browse source
This commit is contained in:
Jonathan Puckey 2011-05-05 16:25:17 +01:00
parent b2e2dd8888
commit 077dc58222
34 changed files with 76 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/Animated/Extruded.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -69,5 +70,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

20
examples/Animated/Flock.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -10,12 +11,12 @@
// http://processing.org/learning/topics/flocking.html
// Resize the document, whenever the window is resized,
window.onresize = function(event) {
document.size = Element.getScrollBounds().size;
size = document.size;
heartPath.position = document.bounds.center;
document.redraw();
}
Event.add(window, {
resize: function(event) {
size = document.size;
heartPath.position = document.bounds.center;
}
});
document.currentStyle = {
strokeColor: 'white',
@ -263,9 +264,6 @@
mouseDown = false,
boids = [];
// Call to resize the document to the current window size:
window.onresize();
// Add the boids:
for (var i = 0; i < 30; i++) {
var position = Point.random() * document.size;
@ -296,11 +294,9 @@
<style>
body {
background: black;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Animated/RadialRainbows.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -67,5 +68,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Animated/Raster.html
View file

File diff suppressed because one or more lines are too long

3
examples/Animated/RoundedRectangles.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -43,5 +44,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Animated/Smoothing.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -52,5 +53,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

4
examples/Animated/animatedStar.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -31,7 +32,6 @@
path.smooth();
var placedSymbol = new PlacedSymbol(path);
placedSymbol.position = center;
//placedSymbol.bounds.center = center;
layer.appendBottom(placedSymbol);
}
@ -47,5 +47,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Animated/lines.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -46,5 +47,5 @@
</script>
</head>
<body style='background-color:black'>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/BouncingBalls.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -95,5 +96,5 @@
</head>
<body>
<p>Click to add circles:</p>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

7
examples/Scripts/Chain.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -31,10 +32,6 @@
path.smooth();
}
function onMouseDrag(event) {
onMouseMove(event);
}
function onMouseDown(event) {
path.selected = true;
}
@ -45,5 +42,5 @@
</script>
</head>
<body style='background-color: black'>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/CurveTimeParametrization.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -42,5 +43,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/RotationRaster.html
View file

File diff suppressed because one or more lines are too long

3
examples/Scripts/arcTo.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -26,5 +27,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/circle.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -14,5 +15,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/letter.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -28,5 +29,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/rectangle.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -11,5 +12,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/roundRectangle.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -20,5 +21,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/star.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -24,5 +25,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/strokeBounds.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -91,5 +92,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Scripts/strokeJoin.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -41,5 +42,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/BezierTool.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -78,5 +79,5 @@
Click and drag to add a points.<br/>
Drag segment handles and points to manipulate them.
Close the path to start a new one.
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Circles.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -29,5 +30,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Clouds.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -22,5 +23,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Dripping Brush.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -67,5 +68,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Fancy Brush.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -77,5 +78,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Grid.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -39,5 +40,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/MetaBalls.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -112,5 +113,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/MultiLines.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -39,5 +40,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/SquareRounded.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -77,5 +78,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Stars.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -25,5 +26,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/VoronoiTool.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/javascript" src="http://www.raymondhill.net/voronoi/rhill-voronoi-core-min.js"></script>
@ -623,5 +624,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Wave.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -43,5 +44,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

3
examples/Tools/Worm Farm.html
View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -80,5 +81,5 @@
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
<canvas id='canvas' resize='true'></canvas>
</body>

4
examples/css/style.css Normal file
View file

@ -0,0 +1,4 @@
body {
margin: 0;
overflow: hidden;
}