engine.js improved, dynamic-systems-in-games improving.
This commit is contained in:
parent
aecddee95f
commit
f3b535afb2
@ -16,15 +16,15 @@
|
|||||||
}
|
}
|
||||||
engine($('#fuel-management-1'), heyo);
|
engine($('#fuel-management-1'), heyo);
|
||||||
</script>
|
</script>
|
||||||
<div id="flow_rate">
|
<div class="flow_rate">
|
||||||
<label for="fuel">Fuel Flow Rate</label>
|
<label for="fuel">Fuel Flow Rate</label>
|
||||||
<input type="range" name="fuel" min=0 max=2 step=0.01 value=.8>
|
<input type="range" name="fuel" min=0 max=2 step=0.01 value=.8>
|
||||||
</div>
|
</div>
|
||||||
<input type="button" name="ignition" value="Ignite!">
|
<input type="button" name="ignition" value="Ignite!">
|
||||||
<span><span id="temp-out">0</span> degrees</span>
|
<span><span class="temp-out">0</span> degrees</span>
|
||||||
<span id="noignition" class="label label-info">No ignition</span>
|
<span class="noignition label label-info">No ignition</span>
|
||||||
<span id="damage" class="label label-warning">DAMAGE!</span>
|
<span class="damage label label-warning">DAMAGE!</span>
|
||||||
<div id="potential_plot" style="width:100%;height:400px"></div>
|
<div class="potential_plot" style="width:100%;height:400px"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>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:</p>
|
<p>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:</p>
|
||||||
@ -33,4 +33,26 @@
|
|||||||
<p>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}\). <span class="sidenote">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.</span></p>
|
<p>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}\). <span class="sidenote">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.</span></p>
|
||||||
<p>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.)</p>
|
<p>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.)</p>
|
||||||
<p>Well. This is <em>terrible</em>. There aren't any stable points!
|
<p>Well. This is <em>terrible</em>. There aren't any stable points!
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div id="fuel-management-2" class="span4 offset4">
|
||||||
|
<script type="text/javascript">
|
||||||
|
function heyo2(q) {
|
||||||
|
if (q.temperature.value < q.ignition_threshhold.value) {
|
||||||
|
return -0.5;
|
||||||
|
}
|
||||||
|
return q.temperature.value*q.fuel_flow_rate.value - 0.5;
|
||||||
|
}
|
||||||
|
engine($('#fuel-management-2'), heyo2);
|
||||||
|
</script>
|
||||||
|
<div class="flow_rate">
|
||||||
|
<label for="fuel">Fuel Flow Rate</label>
|
||||||
|
<input type="range" name="fuel" min=0 max=0.5 step=0.01 value=.8>
|
||||||
|
</div>
|
||||||
|
<input type="button" name="ignition" value="Ignite!">
|
||||||
|
<span><span class="temp-out">0</span> degrees</span>
|
||||||
|
<span class="noignition label label-info">No ignition</span>
|
||||||
|
<span class="damage label label-warning">DAMAGE!</span>
|
||||||
|
<div class="potential_plot" style="width:100%;height:400px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
@ -8,11 +8,11 @@ function engine(element, reaction_rate_function) {
|
|||||||
if (this.value < 0) { this.value = 0; }
|
if (this.value < 0) { this.value = 0; }
|
||||||
},
|
},
|
||||||
"out": function () {
|
"out": function () {
|
||||||
container.find('#temp-out').html(this.value.toFixed(2));
|
container.find('.temp-out').html(this.value.toFixed(2));
|
||||||
if (this.value > damage_threshhold) { container.find('#damage').show();}
|
if (this.value > damage_threshhold) { container.find('.damage').show();}
|
||||||
else { container.find('#damage').hide(); }
|
else { container.find('.damage').hide(); }
|
||||||
if (this.value < q.ignition_threshhold.value) { container.find('#noignition').show(); }
|
if (this.value < q.ignition_threshhold.value) { container.find('.noignition').show(); }
|
||||||
else { container.find('#noignition').hide(); }
|
else { container.find('.noignition').hide(); }
|
||||||
},
|
},
|
||||||
"value": 0,
|
"value": 0,
|
||||||
};
|
};
|
||||||
@ -55,7 +55,7 @@ function engine(element, reaction_rate_function) {
|
|||||||
container.find('[name=ignition]').on('click', function() { q.temperature.value += ignition_boost; });
|
container.find('[name=ignition]').on('click', function() { q.temperature.value += ignition_boost; });
|
||||||
a = setInterval(jQuery.each, timestep, q, function(name, x) { x.update(); });
|
a = setInterval(jQuery.each, timestep, q, function(name, x) { x.update(); });
|
||||||
b = setInterval(jQuery.each, timestep, q, function(name, x) { x.out(); });
|
b = setInterval(jQuery.each, timestep, q, function(name, x) { x.out(); });
|
||||||
graph = container.find('#potential_plot');
|
graph = container.find('.potential_plot');
|
||||||
graph_plot = $.plot(graph, [[]], graph_config);
|
graph_plot = $.plot(graph, [[]], graph_config);
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
Loading…
Reference in New Issue
Block a user