Updated demos, updated shaders. Long commit:

First, flow textures were having some problems. In particular, they were expecting a scalar
function instead of a vector function. It was then plotting the gradient of that scalar
function, which, while nice, wasn't what I was wanting it to do.

Second, pde solving wasn't (and still isn't working). It's beginning to work again, but it
appears as though I'm running into numerical stability issues rather than programatic access
issues. Still looking into this one.

Lasly, updated demos to look a little nicer than they used to.

Author: Dan Lecocq

demos/curve.html

@@ -29,7 +29,8 @@
 		var glot = new grapher(AXES_ON | GRID_OFF);
 		glot.set("a", 1.0);
 
-		glot.add(new curve("sin(x)", [1, 0, 0, 1], CARTESIAN | X_LIN | Y_LIN));
+		glot.add(new curve("sin(x) * sqrt(x) * cos(t)", [1, 0, 0, 1], CARTESIAN | X_LIN | Y_LIN));
+		glot.add(new curve("exp(sin(3.0 * x * cos(t * 2.0)))", [1, 0, 0, 1], CARTESIAN | X_LIN | Y_LIN));
 
 		glot.setClickFunction(click);
 

demos/flow.html

@@ -31,11 +31,11 @@
 		var glot = new grapher(AXES_ON | GRID_OFF);
 		glot.set("a", 0.5);
 
-		//glot.add(new flow("-y * sin(t) * 2.0, 2.0 * x * sin(t * y) - 4.0 * cos(1.5 * t)"));
 		//glot.add(new flow())
-		glot.add(new flow("-a * y, a * x"));
+		//glot.add(new flow("x, y"));
 		//glot.add(new flow("a * sin(t) + x, a * cos(t) + y"));
 		//glot.add(new flow("(7.0 / ((x - 3.0 * (mod(t, 7.0) - 3.0)) * (x - 3.0 * (mod(t, 7.0) - 3.0)) + y * y + 1.0)) * -y, (7.0 / ((x - 3.0 * (mod(t, 7.0) - 3.0)) * (x - 3.0 * (mod(t, 7.0) - 3.0)) + y * y + 1.0)) * (x - 3.0 * (mod(t, 7.0) - 3.0))"))
+		glot.add(new flow('x * sin(t), y * cos(t)'));
 		//glot.add(new gradient("a * sin(t) + x"));
 
 		glot.setClickFunction(click);

demos/mootools.html

@@ -29,9 +29,8 @@
 		var glot = new grapher(AXES_ON | GRID_OFF);
 		glot.set("a", 0.5);
 
-		glot.add(new p_curve("sin(s * 6.3 * a), cos(1.5 * s * 6.3 * 2.0)", [1, 0, 0, 1]));
+		glot.add(new p_curve("3.0 * sin(s * 6.3 * 4.0 * sin(t / 4.0)), 3.0 * cos(1.5 * s * 12.6)", [1, 0, 0, 1]));
 		glot.add(new p_curve("t * s, s", [1, 0, 0, 1], POLAR | X_LIN | Y_LIN));
-		
 		glot.setClickFunction(click);
 
 		glot.run();

demos/p_curve.html

@@ -7,6 +7,7 @@
 	<script src="../emptytexture.js"> </script>
 	<script src="../noisetexture.js"> </script>
 	<script src="../texture.js">      </script>
+	<script src="../ftexture.js">     </script>
 
 	<script src="../grid.js">         </script>
 	<script src="../axes.js">         </script>
@@ -21,7 +22,8 @@
 	<script src="../grapher.js">      </script>
 
 	<script>
-	var p = new pde();
+	//var p = new pde('-x - y * y / t');
+	var p = new pde('sin(x * omega)');
 
 	function start() {
 		var glot = new grapher(AXES_ON | GRID_OFF);

demos/pde.html

@@ -29,7 +29,23 @@
 		var glot = new grapher(AXES_ON | GRID_OFF);
 		glot.set("a", 0.5);
 
-		glot.add(new scalar_field("sin(3.0 * sqrt(x * x + y * y) - 2.0 * t) * cos(5.0 * sqrt((x - 1.5 + 0.8 * t) * (x - 1.5 + 0.8 * t) + (y - 0.75) * (y - 0.75)) - t)"));
+		/*
+		sin(3.0 * sqrt(x * x + y * y) - 2.0 * t) * cos(5.0 * sqrt((x - 1.5 + 0.8 * t) * (x - 1.5 + 0.8 * t) + (y - 0.75) * (y - 0.75)) - t)
+		*/
+		
+		glot.set('sf', 3.0);
+		glot.set('mf', 45.0);
+		glot.set('sc', 0.2);
+		glot.set('ec', 1.07);
+		glot.set('speed', 0.4);
+		
+		var f = '(1.0 - sc) * sin(sf * sqrt(pow(x, 2.0) + pow(y, 2.0)))';
+		var g = 'sc * sin(mf * sqrt(pow(x - 3.0 * sin(ec * speed * t), 2.0) + pow(y - 5.0 * cos(ec * speed * t), 2.0)))';
+		var h = 'sc * sin(mf * sqrt(pow(x - 5.0 * sin(speed * t), 2.0) + pow(y - 3.0 * cos(speed * t), 2.0)))';
+		// var g = '0.1 * sin(mf * sqrt(pow(x - 5.0 * sin(6.3 * t), 2.0) + pow(y - 3.0 * cos(6.3 * t), 2.0)))';
+		glot.add(new scalar_field(f + ' + ' + g + ' + ' + h));
+		
+		// glot.add(new p_curve("3.0 * sin(6.3 * s), 5.0 * cos(6.3 * s)", [1, 0, 0, 1]));
 
 		glot.setClickFunction(click);
 

demos/scalar_field.html

@@ -90,7 +90,7 @@ function flow(string, options) {
 			f = function(pixels) {
 				var count = scr.width * scr.height * 4;
 				for (var i = 0; i < count; i += 4) {
-					pixels[i] = Math.random() * 3.0;
+					pixels[i] = Math.random() * 1.5;
 				}
 				return pixels;
 			}
@@ -204,7 +204,9 @@ function flow(string, options) {
 	}
 
 	this.calculate = function(scr) {
-    this.gl.uniform1i(this.gl.getUniformLocation(this.program, "accumulation"), 0);
+    	this.setUniforms(scr, this.program);
+    	
+        this.gl.uniform1i(this.gl.getUniformLocation(this.program, "accumulation"), 0);
 		this.gl.uniform1i(this.gl.getUniformLocation(this.program, "source"), 1);
 
 		this.gl.enableVertexAttribArray(0);
@@ -253,10 +255,10 @@ function flow(string, options) {
 	 * was before it's called.
 	 */
 	this.draw = function(scr) {
-		this.setUniforms(scr);
-		
 		this.calculate(scr);
-		this.calculate(scr);		
+		this.calculate(scr);
+		
+		this.setUniforms(scr);	
 
 		this.gl.uniform1i(this.gl.getUniformLocation(this.program, "accumulation"), 0);
 

demos/slider.html

@@ -21,7 +21,7 @@
 
 /* Reference: http://learningwebgl.com/blog/?p=507 */
 function ftexture(context, width, height, f, type) {
-	
+	console.log('ftexture');
 	this.texture = null;
 	this.image	 = null;
 
@@ -33,6 +33,7 @@ function ftexture(context, width, height, f, type) {
 	this.height  = height;
 
 	this.initialize = function(f) {
+    	console.log('initialize');
 		this.texture = this.gl.createTexture();
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
 

flow.js

@@ -49,9 +49,9 @@ function noisetexture(context, width, height) {
 		var count = this.width * this.height * 4;
 		//*
 		for (var i = 0; i < count; i += 1) {
-			pixels[i] = Math.random() * 3.0;
+			//pixels[i] = Math.random() * 3.0;
 			//pixels[i] = 4.0 * i / count;
-			//pixels[i] = 0.0;
+			pixels[i] = 0.0;
 		}
 		//*/