paper.js/examples/Animated/RoundedRectangles.html

<!DOCTYPE html>
<html>
<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">
		var mousePoint = view.center;
		var amount = 25;
		var colors = ['red', 'white', 'blue', 'white'];

		for (var i = 0; i < amount; i++) {
			var rect = new Rectangle([0, 0], [25, 25]);
			rect.center = mousePoint;
			var path = new Path.RoundRectangle(rect, 6);
			path.fillColor = colors[i % 4];
			var scale = (1 - i / amount) * 20;
			path.scale(scale);
			new PlacedSymbol(path);
		}

		function onMouseDown(event) {
			mousePoint = event.point;
		}
		
		function onMouseDrag(event) {
			mousePoint = event.point;
		}

		var children = project.activeLayer.children;
		function onFrame(event) {
			for (var i = 0, l = children.length; i < l; i++) {
				var item = children[i];
				var delta = (mousePoint - item.position) / (i + 5);
				item.rotate(Math.sin((event.count + i) / 10) * 7);
				if (delta.length > 0.1)
					item.translate(delta);
			}
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize keepalive="true"></canvas>
</body>
Update doc-type to HTML5. 2011-02-21 08:31:26 -05:00			`<!DOCTYPE html>`
Tool: add support for Tool#onMouseMove(event) and add RoundedRectangles example 2011-02-14 16:43:14 -05:00			`<html>`
			`<head>`
			`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
			`<title>Example</title>`
Make all examples resize to the size of the browser window. 2011-05-05 11:25:17 -04:00			`<link rel="stylesheet" href="../css/style.css">`
Clean-up loading code. 2011-03-07 20:07:26 -05:00			`<script type="text/javascript">var root = '../../'</script>`
Since Firefox does not seem to support the <base> tag for script loading, roll our own solution through the load.js calls. 2011-03-07 18:11:41 -05:00			`<script type="text/javascript" src="../../src/load.js"></script>`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`<script type="text/paperscript" canvas="canvas">`
Fix examples to use view.bounds/size/center instead of document.bounds/size. 2011-05-16 07:51:20 -04:00			`var mousePoint = view.center;`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`var amount = 25;`
			`var colors = ['red', 'white', 'blue', 'white'];`
RoundedRectangles: use onFrameLoop and other small changes. 2011-04-18 11:48:48 -04:00
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`for (var i = 0; i < amount; i++) {`
			`var rect = new Rectangle([0, 0], [25, 25]);`
			`rect.center = mousePoint;`
			`var path = new Path.RoundRectangle(rect, 6);`
			`path.fillColor = colors[i % 4];`
			`var scale = (1 - i / amount) * 20;`
			`path.scale(scale);`
			`new PlacedSymbol(path);`
			`}`
RoundedRectangles: use onFrameLoop and other small changes. 2011-04-18 11:48:48 -04:00
			`function onMouseDown(event) {`
			`mousePoint = event.point;`
			`}`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00
Examples: change mouse handlers to PaperScript. 2011-03-04 06:44:02 -05:00			`function onMouseDrag(event) {`
			`mousePoint = event.point;`
			`}`
RoundedRectangles: use onFrameLoop and other small changes. 2011-04-18 11:48:48 -04:00
Rename Document -> Project, DocumentView -> ProjectView, paper.document -> paper.project and paper.documents -> paper.projects, to avoid name clashing with window.document. 2011-05-16 08:33:15 -04:00			`var children = project.activeLayer.children;`
Switch examples to using event.count in onFrame(). 2011-05-15 13:12:56 -04:00			`function onFrame(event) {`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`for (var i = 0, l = children.length; i < l; i++) {`
			`var item = children[i];`
RoundedRectangles: use onFrameLoop and other small changes. 2011-04-18 11:48:48 -04:00			`var delta = (mousePoint - item.position) / (i + 5);`
Switch examples to using event.count in onFrame(). 2011-05-15 13:12:56 -04:00			`item.rotate(Math.sin((event.count + i) / 10) * 7);`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`if (delta.length > 0.1)`
			`item.translate(delta);`
Tool: add support for Tool#onMouseMove(event) and add RoundedRectangles example 2011-02-14 16:43:14 -05:00			`}`
			`}`
			`</script>`
			`</head>`
			`<body>`
Add keepalive attribute to canvas to tag that controls wether it animates in background in emulated requestAnimationFrame() function, and use it in all example files. 2011-05-14 06:04:02 -04:00			`<canvas id="canvas" resize keepalive="true"></canvas>`
Tool: add support for Tool#onMouseMove(event) and add RoundedRectangles example 2011-02-14 16:43:14 -05:00			`</body>`