Dynamic systems and some other stuff.
This commit is contained in:
parent
e1a3d6c639
commit
7b73ee5747
@ -4,6 +4,7 @@
|
||||
{% block head %}
|
||||
<meta charset="utf-8">
|
||||
<title>{% block title %}Writings by Shoofle{% endblock %}</title>
|
||||
<script src="/static/jquery.min.js" type="text/javascript"></script>
|
||||
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
|
||||
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
|
||||
<link href="/static/shoofle.css" rel="stylesheet" type="text/css">
|
||||
|
||||
66
articles/dynamic_systems_in_games.article.html
Normal file
66
articles/dynamic_systems_in_games.article.html
Normal file
@ -0,0 +1,66 @@
|
||||
<article>
|
||||
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
<h1>Dynamic Systems in Games</h1>
|
||||
<p>Here, take a look at this simple game I coded up. Your task is to keep an engine's temperature as high as possible, to maximize power output, without dmaaging the engine. The threshhold for damage is at <span data-var="damage_threshhold">10</span> degrees, and the engine will stop burning and deignite if it goes under <span data-var="ignition_threshhold">2</span> degrees.</p>
|
||||
<div class="row-fluid">
|
||||
<div id="fuel-management-1" class="span4 offset4">
|
||||
<script type="text/javascript">
|
||||
(function (element) {
|
||||
var container = $(element);
|
||||
var T = {
|
||||
"update": function () {
|
||||
this.value += RR.value*timestep/1000;
|
||||
this.value -= this.value*temperature_decay*timestep/1000;
|
||||
if (this.value < 0) { this.value = 0; }
|
||||
},
|
||||
"out": function () {
|
||||
container.find('#temp-out').html(this.value.toFixed(2));
|
||||
if (this.value > damage_threshhold) { container.find('#damage').show();}
|
||||
else { container.find('#damage').hide(); }
|
||||
if (this.value < ignition_threshhold) { container.find('#noignition').show(); }
|
||||
else { container.find('#noignition').hide(); }
|
||||
},
|
||||
"value": 0,
|
||||
};
|
||||
var F = {
|
||||
"update": function () { this.value = container.find('[name=fuel]').val(); },
|
||||
"out": function () {},
|
||||
"value": 0,
|
||||
};
|
||||
var RR = {
|
||||
"update": function () { this.value = T.value * F.value; },
|
||||
"out": function () {},
|
||||
"value": 0,
|
||||
};
|
||||
|
||||
var ignition_threshhold = 2;
|
||||
var damage_threshhold = 10;
|
||||
var temperature_decay = 0.5;
|
||||
var timestep=10;
|
||||
|
||||
var quantities = [T, F, RR];
|
||||
var a, b;
|
||||
|
||||
$(element).ready(function () {
|
||||
container.find('[name=ignition]').on('click', function() { T.value = T.value + 5; });
|
||||
a = setInterval(jQuery.each, timestep, quantities, function() { this.update(); });
|
||||
b = setInterval(jQuery.each, timestep, quantities, function() { this.out(); });
|
||||
});
|
||||
return {
|
||||
'container': container,
|
||||
'quantities': quantities,
|
||||
};
|
||||
})($('#fuel-management-1'));
|
||||
</script>
|
||||
<div id="flow_rate">
|
||||
<label for="fuel">Fuel Flow Rate</label>
|
||||
<input type="range" name="fuel" min=0 max=1 step=0.01 value=.8>
|
||||
</div>
|
||||
<input type="button" name="ignition" value="Ignite!">
|
||||
<span><span id="temp-out">0</span> degrees</span>
|
||||
<span id="noignition" class="label label-info">No ignition</span>
|
||||
<span id="damage" class="label label-warning">DAMAGE!</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>It's interesting! The fundamental relationship here is \[\frac{\partial T}{\partial t} = c_{F} T F - c_{T} (T - T_{0})\]</p>
|
||||
</article>
|
||||
9
articles/vim_indenting.article.html
Normal file
9
articles/vim_indenting.article.html
Normal file
@ -0,0 +1,9 @@
|
||||
<article>
|
||||
<h1>Indent Adventures</h1>
|
||||
<p>Look, I know it's wrong. I know I'm not supposed to do inline javascript. But I just want to put everything together! I want code to be easily accessible from the <em>single</em> place that it's relevant! That's <em>important</em> to me. Rest assured: Once my projects get large, I start pulling them apart. But in the mean time, the code I write (being generally game-related as it is) is extremely specific to the presentation, and I think it's actually inappropriate (not to mention inefficient, from my point of view) to separate them widely. There's just one problem:</p>
|
||||
<p>Vim sucks at autoindenting.</p>
|
||||
<p>Augh, this whole morning has been essentially wasted, because I spent it trying - <em>trying my hardest</em> - to find a vim indenting plugin that will indent javascript inline in HTML. It turns out that, as far as I can find, <em>no such thing exists.</em> There are a million wonderful javascript indenters, which work beautifully, but which only work on files that are javascript through-and-through. Unfortunately, my heart is set on keeping my javascript intertwined lovingly with my HTML, until such time as I feel like I should stop doing that.</p>
|
||||
<p>So I had to fix it myself. <em>The pain.</em> It turns out vim scripting is, like the rest of this horrible death-train of an editor, obtuse, stuck in the past, and hard to work with. I guess I'll give thanks for the fact that I was able to edit it at all... But I feel like that's kind of a basic thing for an extensible editor. Anyway.</p>
|
||||
<p>I got a copy of the HTML indent rules off of a Gary Bernhardt bitbucket link I found from my googling all morning, and delved into it. It turns out that the rules for indenting and dedenting on lines with bracket are only dependent on whether or not the lines in question contain open and close braces - and not <em>how many of those there are.</em> The practical effect of this: <code class="lang-js">function () {};</code> is dedented the same way <code class="lang-js">};</code> is. <strong>What?</strong></p>
|
||||
<p>It's not even hard to fix (<a href="/static/html.vim">and I have managed to</a>) - all you need to do is count the braces and do some subtraction. For every brace closed on this line which isn't also opened on this line, dedent this line. For every brace opened on the previous line which isn't closed on the previous line, indent this line. <em>That's it.</em> As of this writing, my indent script has an unfortunate flaw - it'll treat <code class="lang-js">} {</code> exactly the same as <code class="lang-js">{ }</code>. This is a pretty big problem, but I need to do <em>some</em> work today.</p>
|
||||
</article>
|
||||
71
static/engine_console.html
Normal file
71
static/engine_console.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Engine Console Test</title>
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" src="/static/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="/static/bootstrap.css">
|
||||
<script type="text/javascript">
|
||||
var T = {
|
||||
"update": function () {
|
||||
this.value += RR.value*timestep/1000;
|
||||
this.value -= temperature_decay*timestep/1000;
|
||||
if (this.value < 0) { this.value = 0; }
|
||||
},
|
||||
"out": function () {
|
||||
$('#temp-out').html(this.value);
|
||||
if (this.value > damage_threshhold) { $('#damage').show();}
|
||||
else { $('#damage').hide(); }
|
||||
if (this.value < ignition_threshhold) { $('#noignition').show(); }
|
||||
else { $('#noignition').hide(); }
|
||||
},
|
||||
"value": 0,
|
||||
};
|
||||
var F = {
|
||||
"update": function () { this.value = $('[name=fuel_a]').val(); },
|
||||
"out": function () {},
|
||||
"value": 0,
|
||||
};
|
||||
var RR = {
|
||||
"update": function () { this.value = T.value * F.value; },
|
||||
"out": function () {},
|
||||
"value": 0,
|
||||
};
|
||||
|
||||
var ignition_threshhold = 2;
|
||||
var damage_threshhold = 10;
|
||||
var temperature_decay = 4;
|
||||
var timestep=10;
|
||||
var quantities = [T, F, RR];
|
||||
$(document).ready(function() {
|
||||
$('[name=ignition]').on('click', function() { T.value += 5; });
|
||||
a_interval = setInterval(jQuery.each, timestep, quantities, function() { this.update(); });
|
||||
b_interval = setInterval(jQuery.each, timestep, quantities, function() { this.out(); });
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Should show: level point (equilibrium) plus what flow rates you would need to increase by X/s and what to decrease by X/s
|
||||
<div id="fuela">
|
||||
<label for="fuel_a">Fuel A</label>
|
||||
<input type="range" name="fuel_a" min=0 max=1 step=0.01>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div id="fuelb">
|
||||
<label for="fuel_b">Fuel B</label>
|
||||
<input type="range" name="fuel_b" min=0 max=1 step=0.01>
|
||||
</div>
|
||||
-->
|
||||
<div id="starter">
|
||||
<input type="button" name="ignition" value="Ignite!">
|
||||
</div>
|
||||
<ul id="readout">
|
||||
<li><span id="temperature">0</span> degrees</li>
|
||||
<li id="noignition" class="label label-info">No ignition</li>
|
||||
<li id="damage" class="label label-warning">DAMAGE!</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
74
static/engine_console_2.html
Normal file
74
static/engine_console_2.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Engine Console Test</title>
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" src="/static/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="/static/bootstrap.css">
|
||||
<script type="text/javascript">
|
||||
var T = {
|
||||
"update": function () {
|
||||
this.value += RR.value*timestep/1000;
|
||||
this.value -= this.value*temperature_decay*timestep/1000;
|
||||
if (this.value < 0) { this.value = 0; }
|
||||
},
|
||||
"out": function () {
|
||||
$('#temp-out').html(this.value);
|
||||
if (this.value > damage_threshhold) { $('#damage').show();}
|
||||
else { $('#damage').hide(); }
|
||||
if (this.value < ignition_threshhold) { $('#noignition').show(); }
|
||||
else { $('#noignition').hide(); }
|
||||
},
|
||||
"value": 0,
|
||||
};
|
||||
var F = {
|
||||
"update": function () { this.value = $('[name=fuel_a]').val(); },
|
||||
"out": function () {},
|
||||
"value": 0,
|
||||
};
|
||||
var RR = {
|
||||
"update": function () { this.value = T.value * F.value; },
|
||||
"out": function () {},
|
||||
"value": 0,
|
||||
};
|
||||
|
||||
var ignition_threshhold = 2;
|
||||
var damage_threshhold = 10;
|
||||
var temperature_decay = 0.5;
|
||||
var timestep=10;
|
||||
|
||||
var quantities = [T, F, RR];
|
||||
var a, b;
|
||||
|
||||
$(document).ready(function() {
|
||||
$('[name=ignition]').on('click', function() {
|
||||
T.value = T.value + 5;
|
||||
}).trigger('click');
|
||||
a = setInterval(jQuery.each, timestep, quantities, function() { this.update(); });
|
||||
b = setInterval(jQuery.each, timestep, quantities, function() { this.out(); });
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="fuela">
|
||||
<label for="fuel_a">Fuel A</label>
|
||||
<input type="range" name="fuel_a" min=0 max=1 step=0.01>
|
||||
</div>
|
||||
|
||||
<div id="fuelb">
|
||||
<label for="fuel_b">Fuel B</label>
|
||||
<input type="range" name="fuel_b" min=0 max=1 step=0.01>
|
||||
</div>
|
||||
|
||||
<div id="starter">
|
||||
<input type="button" name="ignition" value="Ignite!">
|
||||
</div>
|
||||
<ul id="readout">
|
||||
<li><span id="temp-out">0</span> degrees</li>
|
||||
<li id="noignition" class="label label-info">No ignition</li>
|
||||
<li id="damage" class="label label-warning">DAMAGE!</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
1
static/html.vim
Symbolic link
1
static/html.vim
Symbolic link
@ -0,0 +1 @@
|
||||
/home/shoofle/.vim/indent/html.vim
|
||||
31
static/scaletest.html
Normal file
31
static/scaletest.html
Normal file
@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
div {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 2em;
|
||||
width: 24%;
|
||||
}
|
||||
.one {
|
||||
background-color: red;
|
||||
min-width: 20em;
|
||||
}
|
||||
.two {
|
||||
background-color: blue;
|
||||
}
|
||||
.three {
|
||||
background-color: green;
|
||||
}
|
||||
.four {
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="one">
|
||||
</div><div class="two">
|
||||
</div><div class="three">
|
||||
</div><div class="four">Hi!</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user