/
fox-sim.html
79 lines (70 loc) · 2.18 KB
/
fox-sim.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<svg viewBox="0 0 100 100">
<polyline
id="grid"
points="0,0 0,100 100,100 100,0 0,0"
stroke="#ccc" fill="none"/>
<polyline
id="growing"
points=""
fill="none"
stroke="brown"
stroke-width=".5"
stroke-linejoin="round"/>
</svg>
<p><div id=controls>
<!-- birth rate <span id=birthratereadout></span><br>
<input type=range id=birthrate min=0 max=300 style="width: 300px"><br>
lifespan <span id=lifespanreadout></span><br>
<input type=range id=lifespan min=0 max=300 style="width: 300px"> -->
</div></p>
<script type=module>
import * as sim from './fox-sim.js'
const state = {year:0}
sim.reset()
const px = v => 100 * (v/250)
const py = v => 100 - (100 * (v/100))
function start () {
sim.reset()
state.year = 0
}
function adjust(key) {
window.controls.innerHTML += `
<div class=control>
<span class=key>${key.replaceAll('_',' ')}</span> <span class=value>0</span><br>
<input type=range min=0 max=300 init=${sim.calc(key)} style="width:300px;"><br>
</div>
`
}
adjust('prey_fractional_growth_rate_alpha')
adjust('reference_predation_rate')
adjust('reference_predator_growth_rate')
adjust('predator_fractional_decrease_rate_gamma')
function inputs () {
document.querySelectorAll('.control').forEach(div => {
const key = div.querySelector('.key').innerText.replaceAll(' ','_')
const input = div.querySelector('input')
const scale = input.value/300+.5
const value = input.getAttribute('init') * scale
div.querySelector('.value').innerText = value.toFixed(3)
sim.set(key,value)
})
}
function grow () {
let points = growing.getAttribute('points')
if (px(state.year) > 14) {points=''; save(); start()}
inputs()
sim.step()
state.year += .1
const point = [px(sim.calc('prey_x')), py(sim.calc('predators_y'))]
growing.setAttribute('points', points+' '+point)
}
function save () {
let hist = growing.cloneNode()
hist.setAttribute('id','')
hist.setAttribute('stroke','#ddd')
grid.before(hist)
let lines = [...document.querySelectorAll('polyline')]
if(lines.length>5) lines[0].remove()
}
setInterval(grow, 16)
</script>