From a2fab9b4207c2c9aab1bb71d0b44a7b0692370f8 Mon Sep 17 00:00:00 2001 From: shoofle Date: Wed, 4 Sep 2013 13:54:38 -0400 Subject: [PATCH] Fixed up the graphs a whole lot! --- .../dynamic_systems_in_games.article.html | 25 ++++---- articles/dynamic_systems_in_games/engine.js | 57 ++++++++++++++----- 2 files changed, 56 insertions(+), 26 deletions(-) diff --git a/articles/dynamic_systems_in_games.article.html b/articles/dynamic_systems_in_games.article.html index bd94237..bc4a68b 100644 --- a/articles/dynamic_systems_in_games.article.html +++ b/articles/dynamic_systems_in_games.article.html @@ -8,13 +8,13 @@
@@ -24,25 +24,26 @@ 0 degrees No ignition DAMAGE! -
+
+ The dotted lines indicate what the curve will look like if you adjust the fuel flow rate up or down a little bit.

It's interesting! Or maybe it's not. I threw this together trying to think of what an interesting way for an engine to work might be. The fundamental relationship here is:

\[\frac{\partial T}{\partial t} = c_F T F - c_T (T - T_0)\]

That is, at any given moment, the temperature is changing (\(\frac{\partial T}{\partial t}\)) by increasing proportional to the temperature times the fuel flow rate (\(c_F T F\)) and decreasing proportional to the difference between the chamber temperature and the ambient temperature (\(c_T (T - T_0)\)). The deignition isn't described in this formula, but it's pretty simple - the \(c_F T F\) factor becomes zero when the temperature is less than 2 degrees.

-

As it turns out, (surprise of surprises!) that description in a formula is pretty useless for actually understanding how this feels. The key was to look at it as a function of the temperature. See, the player changes \(F\), and I want to get a feel for how the temperature's going to change. So I made a graph with respect to \(T\) where the slope is given by \(\frac{\partial T}{\partial t}\). Note that this is not just going to undo the partial derivative. In this graph, we're integrating against \(T\), not \(t\). Roughly, this graph should be thought of as one where the temperature would slide down hills. Anyway.

+

As it turns out, (surprise of surprises!) that description in a formula is pretty useless for actually understanding how this feels. The key was to look at it as a function of the temperature. See, the player changes \(F\), and I want to get a feel for how the temperature's going to change. So I made a graph with respect to \(T\) where the slope is given by \(\frac{\partial T}{\partial t}\). Note that this is not just going to undo the partial derivative. In this graph, we're integrating against \(T\), not \(t\). Roughly, this graph should be thought of as one where the temperature would slide down hills. Anyway.

You can feel free to slide around the fuel flow rate slider to play with this. When the graph is flat, that temperature is stable. (Remember: temperature is on the x-axis.)

Well. This is terrible. There aren't any stable points!

@@ -52,7 +53,7 @@ 0 degrees No ignition DAMAGE! -
+
diff --git a/articles/dynamic_systems_in_games/engine.js b/articles/dynamic_systems_in_games/engine.js index 005e7b6..e19397e 100644 --- a/articles/dynamic_systems_in_games/engine.js +++ b/articles/dynamic_systems_in_games/engine.js @@ -1,3 +1,4 @@ +var a=true; function engine(element, reaction_rate_function) { var container = $(element); var graph, graph_plot; @@ -18,7 +19,7 @@ function engine(element, reaction_rate_function) { }; q.fuel_flow_rate = { - "update": function () { this.value = container.find('[name=fuel]').val(); }, + "update": function () { this.value = parseFloat(container.find('[name=fuel]').val()); }, "out": function () { update_graph(); }, "value": 0, }; @@ -28,31 +29,59 @@ function engine(element, reaction_rate_function) { "out": function() {}, "value": 2, }; - var ignition_boost = 5; + q.ignition_boost = { + "update": function () {}, + "out": function() {}, + "value": 5, + } var damage_threshhold = 10; var temperature_decay = 0.5; var timestep=10; - var graph_config = { xaxis: { min:0, max:15 }, yaxis: { min:-4, max:4 } }; + var graph_config = { + xaxis: { min:0, max:15, tickSize: 3 }, + yaxis: { min:-4, max:4, show: false }, + series: { + lines: { + lineWidth: 4, + }, + points: { + show: true, + radius: 0.1, + } + }, + colors: ['red'], + }; function update_graph() { - var step_size = 0.2; + var step_size = 0.3; + + var data = [ + {data: [], lines: {show: false}, points: {show: true}}, + {data: [], lines: {show: true}, points: {show: false}}, + {data: [], lines: {show: false}, points: {show: true}}, + ]; + var points = [$.extend({}, q), jQuery.extend({}, q), jQuery.extend({}, q)]; + var flow_value = q.fuel_flow_rate.value; + for (var series=0; series<3; series++) { + points[series].fuel_flow_rate = {"value": flow_value + 0.01*(series-1)}; + points[series].temperature = {"value": 0}; - var data = [], area=0; - for (var i=0; i<15; i+=step_size) { - area -= step_size * reaction_rate_function({ - "fuel_flow_rate": q.fuel_flow_rate, - "temperature": { "value":i }, - "ignition_threshhold": q.ignition_threshhold, - }); - data.push([i, area]); + var prev=0; + for (var i=0; i<15; i+=step_size) { + points[series].temperature.value = i; + prev = prev - step_size * reaction_rate_function(points[series]); + data[series].data.push([i, prev]); + } } - graph_plot.setData([data]); + if (a) { console.log(points); a=false; } + + graph_plot.setData(data); graph_plot.draw(); } var a, b; container.ready(function () { - container.find('[name=ignition]').on('click', function() { q.temperature.value += ignition_boost; }); + container.find('[name=ignition]').on('click', function() { q.temperature.value += q.ignition_boost.value; }); a = setInterval(jQuery.each, timestep, q, function(name, x) { x.update(); }); b = setInterval(jQuery.each, timestep, q, function(name, x) { x.out(); }); graph = container.find('.potential_plot');