Quote:
Originally Posted by bcbrown
[You must be logged in to view images. Log in or Register.]
although I didn't expect to get much if any engagement, the complete lack of interest is a little discouraging.
|
I started thinking about your posts some (admittedly didn't read them all) but didn't get to the point of having a coherent reply. Given this I'll share the two thoughts I had about it:
1. I think COTH's cast per time instead of mana remaining per time is probably the more interesting way to model this.
2. We should probably graph two competing gear configurations on the same chart for easier comparison.
At the time I had an LLM cook up thought 2 based on your code as a single page of html/js, but I never got back around to swapping it to thought 1.
Code:
<!DOCTYPE html>
<html>
<body>
<div>
<label>Line 1: Starting Mana <input id="mana1" type="number" value="3500"></label>
<label>Health to Burn <input id="health1" type="number" value="2000"></label>
</div>
<div>
<label>Line 2: Starting Mana <input id="mana2" type="number" value="3200"></label>
<label>Health to Burn <input id="health2" type="number" value="2300"></label>
</div>
<button onclick="drawChart()">Update Chart</button>
<svg id="chart" width="600" height="400"></svg>
<script>
function mana(t, params = {}) {
const {
starting_mana = 3500,
mana_burn = 50,
robe_mana = 20,
health_to_burn = 2000,
health_burn = 60,
health_regen = 29,
robe_health = 60
} = params;
const phase1_end = health_to_burn / (health_burn - health_regen);
if (t < phase1_end) {
return starting_mana - (mana_burn - robe_mana) * t;
}
const mana_spent_phase1 = (mana_burn - robe_mana) * health_to_burn / (health_burn - health_regen);
const mana_spent_phase2 = (t - phase1_end) * (mana_burn - robe_mana * health_regen / robe_health);
return starting_mana - mana_spent_phase1 - mana_spent_phase2;
}
function drawChart() {
const svg = document.getElementById('chart');
const width = svg.getAttribute('width');
const height = svg.getAttribute('height');
const margin = 40;
const chartWidth = width - 2 * margin;
const chartHeight = height - 2 * margin;
const tMax = 110;
const manaMax = 3500;
const params1 = {
starting_mana: Number(document.getElementById('mana1').value),
health_to_burn: Number(document.getElementById('health1').value)
};
const params2 = {
starting_mana: Number(document.getElementById('mana2').value),
health_to_burn: Number(document.getElementById('health2').value)
};
const points1 = Array.from({length: 100}, (_, i) => {
const t = i * tMax / 99;
return `${margin + t/tMax*chartWidth},${height - margin - mana(t, params1)/manaMax*chartHeight}`;
}).join(' ');
const points2 = Array.from({length: 100}, (_, i) => {
const t = i * tMax / 99;
return `${margin + t/tMax*chartWidth},${height - margin - mana(t, params2)/manaMax*chartHeight}`;
}).join(' ');
svg.innerHTML = `
<polyline points="${points1}" fill="none" stroke="blue" stroke-width="2" />
<polyline points="${points2}" fill="none" stroke="red" stroke-width="2" />
<line x1="${margin}" y1="${height-margin}" x2="${width-margin}" y2="${height-margin}" stroke="black" />
<line x1="${margin}" y1="${margin}" x2="${margin}" y2="${height-margin}" stroke="black" />
<text x="${width/2}" y="${height-10}" text-anchor="middle">Time</text>
<text x="10" y="${height/2}" text-anchor="middle" transform="rotate(-90 10,${height/2})">Mana</text>
`;
}
drawChart();
</script>
</body>
</html>