mirror of
https://github.com/PolarisSS13/Polaris.git
synced 2026-08-24 05:36:57 +01:00
514->515 initial
adds _version.dm compatibility file + core/math/math.dm dependency adds polyvis.html tool to go along with math.dm converts uses of n_ceil to ceil
This commit is contained in:
Spookerton
@@ -0,0 +1,168 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>cbrand picker</title>
|
||||
<style>
|
||||
html, body {
|
||||
background-color: #222;
|
||||
color: #eee;
|
||||
}
|
||||
</style>
|
||||
<script type="module">
|
||||
|
||||
const quadratic_interp = (t, p0, p1, p2) => {
|
||||
const mt = 1 - t
|
||||
return p0 * mt * mt +
|
||||
2 * p1 * mt * t +
|
||||
p2 * t * t
|
||||
}
|
||||
|
||||
const cubic_interp = (t, p0, p1, p2, p3) => {
|
||||
const t2 = t * t
|
||||
const mt = 1 - t
|
||||
const mt2 = mt * mt
|
||||
return p0 * mt2 * mt +
|
||||
3 * p1 * mt2 * t +
|
||||
3 * p2 * mt * t2 +
|
||||
p3 * t2 * t
|
||||
}
|
||||
|
||||
const quartic_interp = (t, p0, p1, p2, p3, p4) => {
|
||||
const t2 = t * t
|
||||
const t3 = t2 * t
|
||||
const mt = 1 - t
|
||||
const mt2 = mt * mt
|
||||
const mt3 = mt2 * mt
|
||||
return p0 * mt3 * mt +
|
||||
4 * p1 * mt3 * t +
|
||||
6 * p2 * mt2 * t2 +
|
||||
4 * p3 * mt * t3 +
|
||||
p4 * t3 * t
|
||||
}
|
||||
|
||||
const random_iterations = 1e5
|
||||
|
||||
const ctx = document.querySelector('canvas').getContext('2d')
|
||||
const out = document.querySelector('#out')
|
||||
|
||||
const inputs = [ ...document.querySelectorAll('input[type="range"]') ]
|
||||
.reduce(function (inputs, input) {
|
||||
inputs[input.id] = input
|
||||
return inputs
|
||||
}, {})
|
||||
|
||||
let interp_func = quadratic_interp
|
||||
let procname = 'interp2'
|
||||
|
||||
const funcSelector = document.querySelector('select')
|
||||
|
||||
funcSelector.addEventListener('change', updateInterpFunc)
|
||||
|
||||
function updateInterpFunc () {
|
||||
if (funcSelector.value === 'quadratic') {
|
||||
inputs['p4y'].setAttribute('hidden', true)
|
||||
inputs['p5y'].setAttribute('hidden', true)
|
||||
interp_func = quadratic_interp
|
||||
procname = 'poly_interp2'
|
||||
}
|
||||
else if (funcSelector.value === 'cubic') {
|
||||
inputs['p4y'].removeAttribute('hidden')
|
||||
inputs['p5y'].setAttribute('hidden', true)
|
||||
interp_func = cubic_interp
|
||||
procname = 'poly_interp3'
|
||||
}
|
||||
else {
|
||||
inputs['p4y'].removeAttribute('hidden')
|
||||
inputs['p5y'].removeAttribute('hidden')
|
||||
interp_func = quartic_interp
|
||||
procname = 'poly_interp4'
|
||||
}
|
||||
}
|
||||
|
||||
function getInput (...ids) {
|
||||
return ids.map(id => Number.parseFloat(inputs[id].value))
|
||||
}
|
||||
|
||||
function getInputY () {
|
||||
return getInput('p1y', 'p2y', 'p3y', 'p4y', 'p5y')
|
||||
}
|
||||
|
||||
updateInterpFunc()
|
||||
|
||||
let lastInputs
|
||||
|
||||
requestAnimationFrame(function frame() {
|
||||
requestAnimationFrame(frame)
|
||||
let inputs = getInputY()
|
||||
let sig = inputs.join() + funcSelector.value
|
||||
if (sig === lastInputs)
|
||||
return
|
||||
lastInputs = sig
|
||||
const { clientWidth: w, clientHeight: h } = ctx.canvas
|
||||
ctx.strokeStyle = 'black'
|
||||
ctx.fillStyle = 'black'
|
||||
ctx.fillRect(0,0,w,h)
|
||||
const [ y1, y2, y3, y4 ] = inputs
|
||||
ctx.strokeStyle = 'dodgerblue'
|
||||
ctx.lineWidth = 1.0
|
||||
ctx.fillStyle = 'dodgerblue'
|
||||
const results = new Array(101).fill(0)
|
||||
for (let i = 1; i < random_iterations; ++i)
|
||||
++results[Math.round(interp_func(Math.random(), ...inputs) * 100)]
|
||||
let lowest = 100
|
||||
let highest = 0
|
||||
let mode = 0
|
||||
let mode_val = 0
|
||||
for (let i = 0; i <= 100; ++i) {
|
||||
let val = results[i]
|
||||
if (!val)
|
||||
continue
|
||||
if (val > mode_val) {
|
||||
mode = i
|
||||
mode_val = val
|
||||
}
|
||||
if (i < lowest)
|
||||
lowest = i
|
||||
if (i > highest)
|
||||
highest = i
|
||||
}
|
||||
for (let i = lowest; i <= highest; ++i) {
|
||||
let val = results[i]
|
||||
ctx.fillRect(w, h - i * 0.01 * h, -((val / mode_val) * (w / 2)), h * 0.01)
|
||||
}
|
||||
ctx.strokeStyle = 'darkred'
|
||||
ctx.lineWidth = 4.0
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, h - inputs[0] * h)
|
||||
for (let i = 1; i <= 100; ++i)
|
||||
ctx.lineTo(i / 100 * w, h - interp_func(i / 100, ...inputs) * h)
|
||||
ctx.stroke()
|
||||
ctx.strokeStyle = 'white'
|
||||
ctx.lineWidth = 1.0
|
||||
ctx.strokeText(`${(highest/100).toFixed(2)}`, w/2 - 40, h - (highest * 0.01 * h) + 12)
|
||||
ctx.strokeText(`${(lowest/100).toFixed(2)}`, w/2 - 40, h - (lowest * 0.01 * h) - 12)
|
||||
ctx.strokeStyle = 'green'
|
||||
ctx.strokeRect(0, 0, w, h)
|
||||
out.innerText = `${procname}(${inputs.join(', ')}, rand())`
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<select>
|
||||
<option value="quadratic">quadratic</option>
|
||||
<option value="cubic">cubic</option>
|
||||
<option value="quartic">quartic</option>
|
||||
</select>
|
||||
<p><input id="p1y" type="range" min="0" max="1" step="0.01" value="0"></p>
|
||||
<p><input id="p2y" type="range" min="0" max="1" step="0.01" value="0.8"></p>
|
||||
<p><input id="p3y" type="range" min="0" max="1" step="0.01" value="0.2"></p>
|
||||
<p><input id="p4y" type="range" min="0" max="1" step="0.01" value="1"></p>
|
||||
<p><input id="p5y" type="range" min="0" max="1" step="0.01" value="1"></p>
|
||||
<p>red line: the sample curve.</p>
|
||||
<p>blue bars: the distribution, given random 0..1 numbers.</p>
|
||||
<p>white numbers: rough min/max values possible.</p>
|
||||
<p>dm call: <span id="out"></span></p>
|
||||
<p><canvas id="shape" width="500" height="500"></canvas></p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user