functle.html (d8328ee) - functle

functle.html

<!DOCTYPE html>
<html>
    <head>
        <title>Functle</title>
        <style>
            body { font-family: sans-serif; }
            #plot { border: 1px solid grey; flex-shrink: 0; height: 400px; }
            #grid { border-collapse: separate; border-spacing: 3px 12px; margin-top: 10px; }
            #grid td { min-width: 60px; height: 60px; border: 1px solid #ccc; text-align: center; vertical-align: middle; font-weight: bold; transition: transform 0.3s ease; }
            .grey { background: #3a3a3c; color: white; }
            .yellow { background: #b59f3b; color: white; }
            .green { background: #538e4e; color: white; }
            #message { color: red; margin-top: 5px; }
            .side { margin-left: 20px; }
            .shake { animation: shake 0.3s; }
            @keyframes shake {
                0% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                50% { transform: translateX(5px); }
                75% { transform: translateX(-5px); }
                100% { transform: translateX(0); }
            }
            @media (min-aspect-ratio: 4/3) { .container { display: flex; } }
            @media (prefers-color-scheme: dark) { body { color: white; background-color: black; } }
        </style>
    </head>
    <body>
        <div class="container">
            <canvas id="plot" width="400" height="400"></canvas>
            <div class="side">
                <div>
                    <div id="message"></div>
                </div>
                <table id="grid"></table>
            </div>
            <div class="side">
                <p>Guess the function based on its plot on the left.
                Tick marks on axes indicate <var>x</var> = ±1 and <var>y</var> = ±1.
                Functions here are made of values <var>x</var>, 1, and 2, modified by functions ^2 (square), ^3 (cube), sin, exp, and ln, combined by operators +, -, *, /.</p>
                <p>Enter your answer in postfix (reverse Polish) notation.
                For example, express 1 - <var>x</var> / (sin <var>x</var>) as "1 x x sin / -".</p>
                <p>The correct answer will be five tokens.
                Numerically equivalent rearranged answers will be accepted.</p>
                <p>Enhanced from a prototype by ChatGPT o4-mini.</p>
            </div>
        </div>
        <script>
            const allowed = {
                terminals: ["x", "2", "1"],
                unary: ["^2", "^3", "sin", "exp", "ln"],
                binary: ["+", "-", "*", "/"]
            };
            const allTokens = [...allowed.terminals, ...allowed.unary, ...allowed.binary];
            const tl = 5;
            const keyToToken = { x:"x", 1:"1", 2:"2", q:"^2", c:"^3", s:"sin", e:"exp", l:"ln", "+":"+", "-":"-", "*":"*", "/":"/" };
            const target = generateExpr();
            const maxGuesses = 6;
            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;

function shakeRow(row) {
                row.classList.remove("shake");
                void row.offsetWidth;
                row.classList.add("shake");
            }

const grid = document.getElementById("grid");
            for (let i = 0; i < 6; i++) {
                const tr = document.createElement("tr");
                for (let j = 0; j < tl; j++) {
                    const td = document.createElement("td");
                    tr.appendChild(td);
                }
                grid.appendChild(tr);
            }

let currentRow = 0;
            let currentInput = [];
            redrawAll();

function fillRow(tokens, cls) {
                const row = grid.rows[currentRow];
                for (let i = 0; i < tl; i++) {
                    const cell = row.cells[i];
                    cell.textContent = tokens[i];
                    cell.classList.add(cls);
                }
            }

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; }

function closeEnough(a, b) {
                for (let i = 0; i < a.length; i++) {
                    if (isNaN(a[i]) && !isNaN(b[i])) return false;
                    if (Math.abs(a[i] - b[i]) > 0.1 * (Math.abs(b[i]) + 1)) return false;
                }
                return true;
            }
        </script>
    </body>
</html>

functle

Take input by keypresses and animate