More work!

articles/dynamic_systems_in_games.article.html

@@ -10,9 +10,9 @@
 		<script type="text/javascript">
 			function heyo(sq) {
 				if (sq.temperature.value < sq.ignition_threshhold.value) {
-					return -0.5*sq.temperature.value;
+					return -sq.temperature_decay.value*sq.temperature.value;
 				}
-				return sq.temperature.value*sq.fuel_flow_rate.value - 0.5*sq.temperature.value;
+				return sq.temperature.value*sq.fuel_flow_rate.value - sq.temperature_decay.value*sq.temperature.value;
 			}
 			var e1=engine($('#fuel-management-1'), heyo);
 		</script>
@@ -39,9 +39,9 @@
 		<script type="text/javascript">
 			function heyo2(sq) {
 				if (sq.temperature.value < sq.ignition_threshhold.value) {
-					return -0.5;
+					return -sq.temperature_decay.value;
 				}
-				return sq.temperature.value*sq.fuel_flow_rate.value - 0.5;
+				return sq.temperature.value*sq.fuel_flow_rate.value - sq.temperature_decay.value;
 			}
 			var e2=engine($('#fuel-management-2'), heyo2);
 		</script>

articles/dynamic_systems_in_games/engine.js

@@ -1,114 +1,163 @@
 var a=true;
 function engine(element, reaction_rate_function) {
-	var container = $(element);
+	var e = {}; // the engine object!
+	e.container = $(element);
 	var q = {};
+	e.quantities = q;
 	q.temperature = {
 		"update": function () {
+			var old_value = this.value;
 			this.value += reaction_rate_function(q)*timestep/1000
 			if (this.value < 0) { this.value = 0; }
+			if (old_value != this.value) { return true; }
 		},
 		"out": function () {
-			container.find('.temp-out').html(this.value.toFixed(2));
+			e.container.find('.temp-out').html(this.value.toFixed(2));
-			if (this.value > damage_threshhold) { container.find('.damage').show();} 
+			if (this.value > q.damage_threshhold.value) { e.container.find('.damage').show();} 
-			else { container.find('.damage').hide(); }
+			else { e.container.find('.damage').hide(); }
-			if (this.value < q.ignition_threshhold.value) { container.find('.noignition').show(); } 
+			if (this.value < q.ignition_threshhold.value) { e.container.find('.noignition').show(); } 
-			else { container.find('.noignition').hide(); }
+			else { e.container.find('.noignition').hide(); }
+
+			for (var i=0; i<this.graph_data.data.length; i++) {
+				this.graph_data.data[i][0] = this.value;
+			}
+			this.graph_data.data[1][1] = get_current_potential(this.value);
 		},
 		"value": 0,
+		"graph_data": {
+			data: [[0,10],[0,0],[0,-10]], 
+			lines: {show: true, lineWidth: 1}, 
+			points: {show: true, radius: 3}, 
+			color: 'red',
+		},
 	};
-
+	function get_current_potential(t) {
+		var data_series = all_graph_data[0].data;
+		var number_of_points = data_series.length;
+		var width = e.graph_config.xaxis.max - e.graph_config.xaxis.min;
+		var index = Math.floor((t / width) * number_of_points);
+		var below = data_series[index], above = data_series[index+1];
+		if (!below) { return 0; }
+		if (!above) { return null; }
+		//console.log("got current potential");
+		return below[1] + ((t - below[0])/(above[0] - below[0]))*(above[1] - below[1]);
+	}
 	q.fuel_flow_rate = {
-		"update": function () { this.value = parseFloat(container.find('[name=fuel]').val()); },
+		"update": function () { 
-		"out": function () { update_graph(); },
+			var old_value = this.value;
+			this.value = parseFloat(e.container.find('[name=fuel]').val());
+			if (old_value != this.value) {
+				return true;
+			}
+		},
+		"out": function () { generate_graph_points(); q.temperature.out(); },
 		"value": 0,
 	};
-
 	q.ignition_threshhold = {
 		"update": function () {},
-		"out": function() {},
+		"out": function() {
+			this.graph_data.data = [[this.value, 10], [this.value, -10], [-this.value, -10], [-this.value, 10], [this.value, 10]];
+		},
 		"value": 2,
+		"graph_data": {
+			data: [],
+			lines: {show: true, lineWidth: 0, fill: 0.2},
+			points: {show: false},
+			color: 'blue',
+		},
+	};
+	q.damage_threshhold = {
+		"update": function () {},
+		"out": function() {
+			this.graph_data.data = [[this.value, -10], [this.value, 10], [20*this.value, 10], [20*this.value, -10], [this.value, -10]];
+		},
+		"value": 10,
+		"graph_data": {
+			data: [],
+			lines: {show: true, lineWidth: 0, fill: 0.2},
+			points: {show: false},
+			color: 'yellow',
+		},
 	};
 	q.ignition_boost = {
 		"update": function () {},
 		"out": function() {},
 		"value": 5,
-	}
+	};
-	var damage_threshhold = 10;
+	q.temperature_decay = {
-	var temperature_decay = 0.5;
+		"update": function () {},
-	var timestep=10;
+		"out": function () {},
+		"value": 0.5,
+	};
 
-	var graph, graph_plot, graph_config = { 
+	var ghost_count = 2, ghost_separation = 0.05;
+	var ghost_data_points = Array(1 + ghost_count*2);
+	
+	var all_graph_data = [{"data": [], lines: {show: true}, points: {show: false}}];
+	for (var s=1; s<=ghost_count; s++) {
+		all_graph_data.push({"data": [], lines: {show: true, lineWidth: 0.5}, points: {show: true}});
+		all_graph_data.push({"data": [], lines: {show: true, lineWidth: 0.5}, points: {show: true}});
+	}
+	all_graph_data.push(q.temperature.graph_data);
+	all_graph_data.push(q.ignition_threshhold.graph_data);
+	all_graph_data.push(q.damage_threshhold.graph_data);
+	
+	e.graph_config = { 
 		xaxis: { min:0, max:15, tickSize: 3 }, 
-		yaxis: { min:-4, max:4, show: false },
+		yaxis: { min:-8, max:8, show: false },
-		series: {
+		series: { lines: { lineWidth: 4, }, points: { radius: 0.1, } },
-			lines: {
+		colors: ['gray'],
-				lineWidth: 4,
-			},
-			points: {
-				radius: 0.1,
-			}
-		},
-		colors: ['red'],
 	};
-	function update_graph() {
+	function generate_graph_points() {
-		var step_size = 0.5;
+		var step_size = 0.4;
-		var ghost_count = 1, ghost_separation = 0.03;
 
 		var flow_value = q.fuel_flow_rate.value;
-		var the_current_potential=0, delta;
 
-		var d = [{"data": [], lines: {show: true}, points: {show: false}}];
+		ghost_data_points[0] = $.extend({}, q, {"fuel_flow_rate": {"value": flow_value}, "temperature": {"value": 0}});
-		var points = [$.extend({}, q, {"fuel_flow_rate": {"value": flow_value}, "temperature": {"value": 0}})];
 		var potentials = [0];
-		
 		for (var s=1; s <= ghost_count; s++) {
-			d.push(	{"data": [], lines: {show: false}, points: {show: true}});
+			ghost_data_points[s] = $.extend({}, q);
-			var p1 = $.extend({}, q);
+			$.extend(ghost_data_points[s], {
-			$.extend(p1, {"fuel_flow_rate": {"value": flow_value + ghost_separation * s}, "temperature": {"value": 0}});
+				"fuel_flow_rate": {"value": flow_value + ghost_separation * s}, 
-			points.push(p1);
+				"temperature": {"value": 0}
-			potentials.push(0)
+			});
-			d.push(	{"data": [], lines: {show: false}, points: {show: true}});
+			potentials.push(0);
-			var p2 = $.extend({}, q);
+			ghost_data_points[s+ghost_count] = $.extend({}, q);
-			$.extend(p2, {"fuel_flow_rate": {"value": flow_value - ghost_separation * s}, "temperature": {"value": 0}});
+			$.extend(ghost_data_points[s+ghost_count], {
-			points.push(p2);
+				"fuel_flow_rate": {"value": flow_value - ghost_separation * s}, 
-			potentials.push(0)
+				"temperature": {"value": 0}
+			});
+			potentials.push(0);
 		}
-		for (var i=0; i<15; i+=step_size) {
+		for (var s=0; s<potentials.length; s++) { all_graph_data[s].data = []; }
+		for (var i=e.graph_config.xaxis.min; i<e.graph_config.xaxis.max; i+=step_size) {
 			for (var s=0; s<potentials.length; s++) {
-				d[s].data.push([i, potentials[s]]);
+				all_graph_data[s].data.push([i, potentials[s]]);
-				points[s].temperature.value = i;
+				ghost_data_points[s].temperature.value = i;
-				delta = -1 * reaction_rate_function(points[s]);
+				potentials[s] += -1 * step_size * reaction_rate_function(ghost_data_points[s]);
-				if (s == 0 && (i <= q.temperature.value) && (q.temperature.value < i+step_size)) {
-					the_current_potential = potentials[0] + delta * (q.temperature.value - i);
-				}
-				potentials[s] += delta * step_size;
 			}
 		}
-		d.push({
+		//console.log("regenerated graph");
-			data: [[q.temperature.value, -10], [q.temperature.value, the_current_potential], [q.temperature.value, 10]], 
+	}
-			lines: {show: true, lineWidth: 1}, 
+	function update_graph() {
-			points: {show: true, radius: 3}, 
+		e.graph_plot.setData(all_graph_data);
-			color: 'blue',
+		e.graph_plot.draw();
-		});
+		if (a) { console.log(all_graph_data); a=false; }
-		if (a) { console.log(points); a=false; }
-
-		graph_plot.setData(d);
-		graph_plot.draw();
 	}
 
 	var a, b;
-	container.ready(function () {
+	var timestep=10;
-		container.find('[name=ignition]').on('click', function() { q.temperature.value += q.ignition_boost.value; });
+	e.container.ready(function () {
-		a = setInterval(jQuery.each, timestep, q, function(name, x) { x.update(); });
+		e.graph = e.container.find('.potential_plot');
-		b = setInterval(jQuery.each, timestep, q, function(name, x) { x.out(); });
+		e.graph_plot = $.plot(e.graph, [[]], e.graph_config);
-		graph = container.find('.potential_plot');
+
-		graph_plot = $.plot(graph, [[]], graph_config);
+		jQuery.each(q, function(name, x) { x.update(); });
+		jQuery.each(q, function(name, x) { x.out(); });
+		jQuery.each(q, function(name, x) { x.update(); });
+		jQuery.each(q, function(name, x) { x.out(); });
+		e.container.find('[name=ignition]').on('click', function() { q.temperature.value += q.ignition_boost.value; });
+		a = setInterval(jQuery.each, timestep, q, function(name, x) { if (x.update()) { x.out(); } });
+		b = setInterval(update_graph, timestep);
 	});
-	return {
+	return e;
-		'container': container,
-		'quantities': q,
-		'graph_container': graph,
-		'graph_plot': graph_plot,
-		'poke': function () { this.graph_container = graph; this.graph_plot = graph_plot; },
-	};
 }