paper.js/examples/Animated/AnimatedStar.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Animated Star</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var layer = project.activeLayer;

		var values = {
			count: 34,
			points: 32
		};

		for (var i = 0; i < values.count; i++) {
			var path = new Path({
				fillColor: i % 2 ? 'red' : 'black',
				closed: true
			});

			var offset = new Point(20 + 10 * i, 0);
			var l = offset.length;
			for (var j = 0; j < values.points * 2; j++) {
				offset.angle += 360 / values.points;
				var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
				path.add(offset + vector);
			}
			path.smooth();
			layer.insertChild(0, new Group({
				children: [path],
				applyMatrix: false
			}));
		}

		function onFrame(event) {
			for (var i = 0; i < values.count; i++) {
				var item = layer.children[i];
				var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
				item.rotate(angle);
			}
		}

		// Reposition the paths whenever the window is resized:
		function onResize(event) {
			layer.position = view.center;
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize stats hidpi="off"></canvas>
</body>
</html>
Update doc-type to HTML5. 2011-02-21 08:31:26 -05:00			`<!DOCTYPE html>`
Initial commit 2011-02-07 13:28:09 -05:00			`<html>`
			`<head>`
Switch to HTML5 meta charset tags. 2013-06-02 16:41:10 -04:00			`<meta charset="UTF-8">`
Examples: Added more descriptive titles to each example html page 2011-06-30 09:57:17 -04:00			`<title>Animated Star</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">`
Switch from dist/paper.js to dist/paper-full.js and explain the different versions in the README. Closes #422. 2014-04-06 07:44:19 -04:00			`<script type="text/javascript" src="../../dist/paper-full.js"></script>`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`<script type="text/paperscript" canvas="canvas">`
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 layer = project.activeLayer;`
Fix examples to use view.bounds/size/center instead of document.bounds/size. 2011-05-16 07:51:20 -04:00
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`var values = {`
			`count: 34,`
			`points: 32`
Adjust examples to work nicely when the browser window is resized. 2011-05-05 13:40:10 -04:00			`};`
Clean ups. 2011-05-16 08:42:23 -04:00
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`for (var i = 0; i < values.count; i++) {`
Update Animated Star example. 2013-03-02 10:02:29 -05:00			`var path = new Path({`
			`fillColor: i % 2 ? 'red' : 'black',`
			`closed: true`
			`});`
Clean ups. 2011-05-16 08:42:23 -04:00
Update Animated Star example. 2013-03-02 10:02:29 -05:00			`var offset = new Point(20 + 10 * i, 0);`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`var l = offset.length;`
			`for (var j = 0; j < values.points * 2; j++) {`
			`offset.angle += 360 / values.points;`
Simplify code. 2011-05-05 19:19:24 -04:00			`var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`path.add(offset + vector);`
Update examples. 2011-02-20 17:28:38 -05:00			`}`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`path.smooth();`
Fix example titles. 2013-11-04 05:43:27 -05:00			`layer.insertChild(0, new Group({`
			`children: [path],`
Rename Item#transformContent to the more correct Item#applyMatrix 2014-03-02 10:04:17 -05:00			`applyMatrix: false`
Fix example titles. 2013-11-04 05:43:27 -05:00			`}));`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`}`
Clean up white spaces. 2011-07-07 10:09:02 -04:00
Switch examples to using event.count in onFrame(). 2011-05-15 13:12:56 -04:00			`function onFrame(event) {`
Update Animated Star example. 2013-03-02 10:02:29 -05:00			`for (var i = 0; i < values.count; i++) {`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`var item = layer.children[i];`
Switch examples to using event.count in onFrame(). 2011-05-15 13:12:56 -04:00			`var angle = (values.count - i) * Math.sin(event.count / 128) / 10;`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`item.rotate(angle);`
Initial commit 2011-02-07 13:28:09 -05:00			`}`
			`}`
Clean ups. 2011-05-16 08:42:23 -04:00
Adjust examples to work nicely when the browser window is resized. 2011-05-05 13:40:10 -04:00			`// Reposition the paths whenever the window is resized:`
Switch to onResize event. Needs more work on view bounds to work nicely. 2011-05-15 20:30:09 -04:00			`function onResize(event) {`
Just use layer.position to (re-)position all stars. 2011-05-18 16:32:34 -04:00			`layer.position = view.center;`
Switch to onResize event. Needs more work on view bounds to work nicely. 2011-05-15 20:30:09 -04:00			`}`
Initial commit 2011-02-07 13:28:09 -05:00			`</script>`
			`</head>`
			`<body>`
Switch HiDPI on by default. Allow deactivation by setting the hidpi attribute to "off" on the canvas. 2013-11-06 09:32:08 -05:00			`<canvas id="canvas" resize stats hidpi="off"></canvas>`
Examples: close html tag. 2011-05-30 18:27:39 -04:00			`</body>`
Switch from dist/paper.js to dist/paper-full.js and explain the different versions in the README. Closes #422. 2014-04-06 07:44:19 -04:00			`</html>`