paper.js/examples/Animated/RadialRainbows.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 point = view.center;
		
		var colors = [];
		for (var i = 0, l = 60; i < l; i++) {
			var color = new RGBColor(1, 0, 0);
			var cycles = 4;
			color.hue = i / l * cycles * 360;
			colors.push(color);
		}

		var path = new Path.Rectangle(view.bounds);
		var gradient = new Gradient(colors, 'radial');
		var radius = Math.max(view.size.width, view.size.height) * 0.75;
		var gradientColor = new GradientColor(gradient, point, point + [radius, 0]);
		path.fillColor = gradientColor;
		
		tool.eventInterval = 30;
		
		var mouseDown = false;
		
		function onMouseDown(event) {
			point = point + vector;
			mouseDown = true;
		}
		
		function onMouseDrag(event) {
			point = point + (event.point - point) / 10;
			gradientColor.hilite = point;
			iterate();
		}
		
		function onMouseUp(event) {
			vector.length = 10;
			mouseDown = false;
		}
		
		function onFrame() {
			if (!mouseDown)
				iterate();
		}

		var grow = false;
		var vector = new Point(150, 0);
		
		function iterate() {
			for (var i = 0, l = gradient.stops.length; i < l; i++)
				gradient.stops[i].color.hue -= 20;
			if (grow && vector.length > 300) {
				grow = false;
			} else if (!grow && vector.length < 75) {
				grow = true;
			}
			vector.length += (grow ? 1 : -1);
			vector.angle += 5;
			gradientColor.hilite = mouseDown ? point : point + vector;
		}
		
		function onResize(event) {
			point = view.center;
			path.bounds = view.bounds;
			var gradientColor = path.fillColor;
			gradientColor.origin = point;
			var radius = Math.max(view.size.width, view.size.height) * 0.75;
			gradientColor.destination = point + [radius, 0];
		}
	</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>`
Add example of radial gradients. 2011-02-19 16:52:27 -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 point = view.center;`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00
Update RadialRainbows example to use the new changes in Gradient. 2011-04-07 11:02:46 -04:00			`var colors = [];`
Update RadialRainbows example to use Color#hue. 2011-03-07 10:07:30 -05:00			`for (var i = 0, l = 60; i < l; i++) {`
			`var color = new RGBColor(1, 0, 0);`
			`var cycles = 4;`
			`color.hue = i / l * cycles * 360;`
Small simplification in RadialRainbows example. 2011-04-07 11:05:25 -04:00			`colors.push(color);`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`}`
Update RadialRainbows example to use the new changes in Gradient. 2011-04-07 11:02:46 -04:00
Fix examples to use view.bounds/size/center instead of document.bounds/size. 2011-05-16 07:51:20 -04:00			`var path = new Path.Rectangle(view.bounds);`
Update RadialRainbows example to use the new changes in Gradient. 2011-04-07 11:02:46 -04:00			`var gradient = new Gradient(colors, 'radial');`
Fix examples to use view.bounds/size/center instead of document.bounds/size. 2011-05-16 07:51:20 -04:00			`var radius = Math.max(view.size.width, view.size.height) * 0.75;`
Adjust examples to work nicely when the browser window is resized. 2011-05-05 13:40:10 -04:00			`var gradientColor = new GradientColor(gradient, point, point + [radius, 0]);`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`path.fillColor = gradientColor;`
Update RadialRainbows example to use Color#hue. 2011-03-07 10:07:30 -05:00
			`tool.eventInterval = 30;`

Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`var mouseDown = false;`
Examples: change mouse handlers to PaperScript. 2011-03-04 06:44:02 -05:00
			`function onMouseDown(event) {`
Make the RadialRainbows example interaction smoother. 2011-03-09 11:08:20 -05:00			`point = point + vector;`
Examples: change mouse handlers to PaperScript. 2011-03-04 06:44:02 -05:00			`mouseDown = true;`
			`}`

			`function onMouseDrag(event) {`
Make the RadialRainbows example interaction smoother. 2011-03-09 11:08:20 -05:00			`point = point + (event.point - point) / 10;`
			`gradientColor.hilite = point;`
			`iterate();`
Examples: change mouse handlers to PaperScript. 2011-03-04 06:44:02 -05:00			`}`

			`function onMouseUp(event) {`
Make the RadialRainbows example interaction smoother. 2011-03-09 11:08:20 -05:00			`vector.length = 10;`
Examples: change mouse handlers to PaperScript. 2011-03-04 06:44:02 -05:00			`mouseDown = false;`
			`}`
RadialRainbows.html example: use onFrame instead of setInterval and fix a bug in the window resizing code. 2011-05-07 08:58:22 -04:00
			`function onFrame() {`
			`if (!mouseDown)`
			`iterate();`
			`}`
Add example of radial gradients. 2011-02-19 16:52:27 -05:00
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`var grow = false;`
			`var vector = new Point(150, 0);`
Make the RadialRainbows example interaction smoother. 2011-03-09 11:08:20 -05:00
			`function iterate() {`
Clean up code (for() -> for ()). 2011-05-03 03:54:13 -04:00			`for (var i = 0, l = gradient.stops.length; i < l; i++)`
Update RadialRainbows example to use Color#hue. 2011-03-07 10:07:30 -05:00			`gradient.stops[i].color.hue -= 20;`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`if (grow && vector.length > 300) {`
			`grow = false;`
			`} else if (!grow && vector.length < 75) {`
			`grow = true;`
			`}`
			`vector.length += (grow ? 1 : -1);`
			`vector.angle += 5;`
Make the RadialRainbows example interaction smoother. 2011-03-09 11:08:20 -05:00			`gradientColor.hilite = mouseDown ? point : point + vector;`
Add example of radial gradients. 2011-02-19 16:52:27 -05:00			`}`
Adjust examples to work nicely when the browser window is resized. 2011-05-05 13:40:10 -04:00
Fix examples to use view.bounds/size/center instead of document.bounds/size. 2011-05-16 07:51:20 -04:00			`function onResize(event) {`
			`point = view.center;`
			`path.bounds = view.bounds;`
			`var gradientColor = path.fillColor;`
			`gradientColor.origin = point;`
			`var radius = Math.max(view.size.width, view.size.height) * 0.75;`
			`gradientColor.destination = point + [radius, 0];`
			`}`
Add example of radial gradients. 2011-02-19 16:52:27 -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>`
Add example of radial gradients. 2011-02-19 16:52:27 -05:00			`</body>`