plot.js (c4793cc) - functle · DKL9 GitList

Improve instructions, export score, split code

dkl9 commited c4793cc at 2025-209 17:28:24

plot.js

Blame History Raw

const width = 400, height = 400;
const ctx = document.getElementById("plot").getContext("2d");
const bound = 10;
const xs = [];
const targetYs = [];
for (let i = 0; i <= width; i++) {
    const x = bound * (2 * i / width - 1);
    xs.push(x);
    const yv = evalPostfix(target, x);
    targetYs.push(yv);
}
const clampLow = 1.5;
const clampHigh = 20;
let yMin = Math.min(...targetYs);
let yMax = Math.max(...targetYs);
if (isNaN(yMin) || yMin < -clampHigh) yMin = -clampHigh;
else if (yMin > -clampLow) yMin = -clampLow;
if (isNaN(yMax) || yMax > clampHigh) yMax = clampHigh;
else if (yMax < clampLow) yMax = clampLow;
const guessYsList = [];
const darkTheme = matchMedia('(prefers-color-scheme: dark)').matches;

redrawAll();

function drawAxes() {
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    const y0 = mapY(0);
    ctx.moveTo(0, y0);
    ctx.lineTo(width, y0);
    const x0 = mapX(0);
    ctx.moveTo(x0, 0);
    ctx.lineTo(x0, height);
    [1, -1].forEach(val => {
        const px = mapX(val);
        ctx.moveTo(px, y0 - 5);
        ctx.lineTo(px, y0 + 5);
    });
    [1, -1].forEach(val => {
        const py = mapY(val);
        ctx.moveTo(x0 - 5, py);
        ctx.lineTo(x0 + 5, py);
    });
    ctx.lineWidth = 1;
    ctx.strokeStyle = darkTheme ? "white" : "black";
    ctx.stroke();
}

function drawCurve(ys, color, width = 4) {
    ctx.beginPath();
    for (let i = 0; i < xs.length; i++) {
        const px = mapX(xs[i]), py = mapY(ys[i]);
        if (i === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
    }
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.stroke();
}

function redrawAll() {
    drawAxes();
    drawCurve(targetYs, darkTheme ? "lime" : "green");
    guessYsList.forEach((ys, idx) => drawCurve(ys, "red", (idx < guessYsList.length - 1) ? 1 : 4));
}

function mapX(x) { return (x + bound) / (2 * bound) * width; }
function mapY(y) { return height - (y - yMin) / (yMax - yMin) * height; }