Start work enabling cyclical graphs #94

Still needs work - make sure ready and dirty state are accurate - when an effect has itself as a source, need separate source and destination textures (ping pong) - more unit tests
brianchirls · Jun 25, 2015 · 4560cb3 · 4560cb3
1 parent 2d51781
commit 4560cb3
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 61 deletions.
diff --git a/effects/seriously.blend.js b/effects/seriously.blend.js
@@ -120,6 +120,7 @@
 				node,
 				fn,
 				i,
+				changed = false,
 				bottom = this.inputs.bottom,
 				top = this.inputs.top;
 
@@ -152,6 +153,7 @@
 			}
 
 			if (this.width !== width || this.height !== height) {
+				changed = true;
 				this.width = width;
 				this.height = height;
 
@@ -182,8 +184,11 @@
 				}
 			}
 
-			for (i = 0; i < this.targets.length; i++) {
-				this.targets[i].resize();
+			if (changed) {
+				//prevent infinite loops
+				for (i = 0; i < this.targets.length; i++) {
+					this.targets[i].resize();
+				}
 			}
 		};
 

diff --git a/examples/demo/loop.html b/examples/demo/loop.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Loop</title>
+	<style type="text/css">
+		body {
+			margin: 0;
+		}
+
+		img, video {
+			display: none;
+		}
+
+		#canvas {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+	</style>
+</head>
+<body>
+	<canvas id="canvas" width="960" height="540"></canvas>
+	<script src="../../lib/require.js"></script>
+	<img src="../images/pencils.jpg" id="pencils"/>
+	<script>
+		require.config({
+			baseUrl: '../../'
+		});
+
+		require([
+			'seriously',
+			'effects/seriously.blend'
+		], function (Seriously) {
+			// declare our variables
+			var seriously, // the main object that holds the entire composition
+				target, // a wrapper object for our target canvas
+				transform,
+				reformat,
+				blend;
+
+			function resize() {
+				var aspect = window.innerWidth / window.innerHeight;
+				target.width = Math.min(960, window.innerWidth);
+				target.height = target.width / aspect;
+				reformat.width = target.width;
+				reformat.height = target.height;
+
+				//temp
+				target.width = 411;
+				target.height = 425;
+			}
+
+			window.onresize = resize;
+
+			seriously = new Seriously();
+			reformat = seriously.transform('reformat');
+			transform = seriously.transform('2d');
+			blend = seriously.effect('blend');
+			target = seriously.target('#canvas');
+
+			reformat.mode = 'none';
+			reformat.source = '#pencils';
+
+			blend.top = '#pencils';
+			blend.sizeMode = 'top';
+
+			transform.source = blend;
+			transform.scale(1.05);
+
+			blend.bottom = blend;//transform; //loop!
+			// blend.bottom = '#pencils';
+
+			target.source = blend;
+
+			resize();
+			seriously.go(function (now) {
+				transform.rotation += 0.1;
+			});
+		});
+	</script>
+</body>
+</html>