parametric.js

// An elegant solution would be using a reactive JS framework. 
// Considering this is a simple project, I'll probably not adopt it. 
const topCanvas = document.getElementById("canvas-top");
const bottomCanvas = document.getElementById("canvas-bottom");
const funcCanvas = document.getElementById("canvas-func");
const tempCanvas = document.getElementById("canvas-temp");
const xParam = document.getElementById("x=");
const yParam = document.getElementById("y=");
const t1Param = document.getElementById("t1");
const t2Param = document.getElementById("t2");
const dxParam = document.getElementById("dx");
const dyParam = document.getElementById("dy");
const scaleParam = document.getElementById("scale");
const circleParam = document.getElementById("circleRadius");
const clearBeforeDrawingCheck = document.getElementById("clearBeforeDrawing");
const drawingStepParam = document.getElementById("step");
const drawingSpeedParam = document.getElementById("delay");
const skeletonCheck = document.getElementById("showSk");
const functionCheck = document.getElementById("showFunc");
const revolve = document.getElementById("revolve");
const radiusMultipleParam = document.getElementById("radiusMultiple");
const dotSizeMinParam = document.getElementById("dotSizeMin");
const dotSizeMaxParam = document.getElementById("dotSizeMax");
const dotRatioMinParam = document.getElementById("dotRatioMin");
const dotRatioMaxParam = document.getElementById("dotRatioMax");
const dotRotMinParam = document.getElementById("dotRotMin");
const dotRotMaxParam = document.getElementById("dotRotMax");
const mDotSize = document.getElementById("m-dotSize");
const mDotColor = document.getElementById("m-dotColor");
const mDotRatio = document.getElementById("m-dotRatio");
const mDotRot = document.getElementById("m-dotRot");
const mDotID = document.getElementById("m-dotID");
const gifSizeParam = document.getElementById("f-size");
const gifTransparentCheck = document.getElementById("f-transparent");
const gifBgColorParam = document.getElementById("f-bgcolor");
const gifFPSParam = document.getElementById("f-fps");
const gifQualityParam = document.getElementById("f-quality");
const gifLastFrameDelayParam = document.getElementById("f-lastdelay");
const pngWidthParam = document.getElementById("p-width");
const pngTransparentCheck = document.getElementById("p-transparent");
const pngBgColorParam = document.getElementById("p-bgcolor");
const drawButton = document.getElementById("draw");
const drawTime = document.getElementById("d-time");
let dots = {};
let locArray = [];
let cutPoints = [];
let cuspPoints = [];
let SCREEN_FPS = 60;
let animateID = 0;
// estimate fps of the user's monitor
function getFPS() {
    let counter = 0;
    let initialTime = 0;
    const numFrames = 16;
    return new Promise(resolve => {
        function callback(time) {
            if (counter == 0)
                initialTime = time;
            else if (counter == numFrames)
                resolve(1000 / (time - initialTime) * numFrames);
            counter++;
            window.requestAnimationFrame(callback);
        }
        window.requestAnimationFrame(callback);
    });
}
window.onload = () => {
    parseConfigJSON(localStorage.getItem("cache"));
    window.onchange = () => saveConfigToBrowser();
    // parameters that determine the loci. Recalculation of loci is required if they're changed
    for (const eff of [dxParam, dyParam, scaleParam, circleParam, drawingStepParam]) {
        const existingOnchangeHandler = eff.onchange;
        eff.onchange = e => {
            if (typeof existingOnchangeHandler === "function")
                existingOnchangeHandler(e);
            stopDrawing();
            disableDrawing();
            locArray = [];
        };
    }
    // changing these things also requires a reset of cut points
    for (const eff of [xParam, yParam, t1Param, t2Param]) {
        const existingOnchangeHandler = eff.onchange;
        eff.onchange = e => {
            if (typeof existingOnchangeHandler === "function")
                existingOnchangeHandler(e);
            stopDrawing();
            disableDrawing();
            locArray = [];
            cutPoints = [];
            cuspPoints = [];
            document.getElementById("sign-adjust").innerHTML = "";
            document.getElementById("rot-adjust").innerHTML = "";
        };
    }
    for (const eff of [t1Param, t2Param, drawingStepParam, drawingSpeedParam]) {
        const existingOnchangeHandler = eff.onchange;
        eff.onchange = e => {
            if (typeof existingOnchangeHandler === "function")
                existingOnchangeHandler(e);
            updateDrawingTime();
        };
    }
    updateDrawingTime();
    $('[data-toggle="tooltip"]').tooltip();
    setTimeout(() => getFPS().then(fps => {
        console.log("FPS", fps);
        SCREEN_FPS = fps;
    }), 2000);
};
function updateDrawingTime() {
    drawTime.innerHTML = ((+t2Param.value - +t1Param.value) / (+drawingStepParam.value * +drawingSpeedParam.value * SCREEN_FPS)).toFixed(2) + "s";
}
function disableDrawing() {
    drawButton.disabled = true;
    const m = document.getElementById("savepng"), n = document.getElementById("savegif");
    m.className = "dropdown-item disabled";
    n.className = "dropdown-item disabled";
    m.style.color = "#6c757d";
    n.style.color = "#6c757d";
    m.setAttribute("data-target", "#");
    n.setAttribute("data-target", "#");
}
function enableDrawing() {
    drawButton.disabled = false;
    const m = document.getElementById("savepng"), n = document.getElementById("savegif");
    m.className = "dropdown-item";
    n.className = "dropdown-item";
    m.style.color = "#000";
    n.style.color = "#000";
    m.setAttribute("data-target", "#PNGModalCenter");
    n.setAttribute("data-target", "#GIFModalCenter");
}
function removeDot(id) {
    delete dots[id];
    $("#" + id).hide(200, () => {
        $("#" + id).remove();
    });
    saveConfigToBrowser();
}
function removeAllDots() {
    for (const id in dots) {
        $("#" + id).remove();
    }
    dots = {};
}
function addDot() {
    const dotSize = +$("#dotSize").val();
    const dotColor = $("#dotColor").val();
    const dotRatio = +$("#dotRatio").val();
    const dotRot = +$("#dotRotOffset").val();
    addDotHelper(new Date().valueOf().toString(), dotSize, dotColor, dotRatio, dotRot, true);
}
/**
 * return a random integer in [min, max]
 */
function randInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomColor() {
    const R = randInt(0, 255);
    const G = randInt(0, 255);
    const B = randInt(0, 255);
    return ("#" +
        (R < 16 ? "0" + R.toString(16) : R.toString(16)) +
        (G < 16 ? "0" + G.toString(16) : G.toString(16)) +
        (B < 16 ? "0" + B.toString(16) : B.toString(16)));
}
function randomDot() {
    const dotSize = randInt(+dotSizeMinParam.value, +dotSizeMaxParam.value);
    const dotColor = randomColor();
    const dotRatio = randInt(+dotRatioMinParam.value, +dotRatioMaxParam.value);
    const dotRot = randInt(+dotRotMinParam.value, +dotRotMaxParam.value);
    addDotHelper(new Date().valueOf().toString(), dotSize, dotColor, dotRatio, dotRot, true);
}
function addDotHelper(currentTime, dotSize, dotColor, dotRatio, dotRot, save) {
    dots[currentTime] = new Dot(dotSize, dotColor, dotRatio, dotRot);
    $("#settings").append(`
<tr id="${currentTime}">
    <td onclick="preModify(this)" data-toggle="modal" data-target="#DotModalCenter">
        Ratio: ${dotRatio}%&nbsp;&nbsp;Color: <span class="color-blk" style="background-color: ${dotColor}"></span>
        <br> 
        Size: ${dotSize}&nbsp;&nbsp;Rotation: ${dotRot}° 
    </td>
    <th width="50px">
        <button type="button" class="close" aria-label="Close" onclick="removeDot('${currentTime}')">×</button> 
    </th>
</tr>
    `);
    if (save)
        saveConfigToBrowser();
}
/**
 * before the the (dot editing) modal opens, assign the current value to modal fields
 */
function preModify(td) {
    const dot = dots[td.parentNode.id];
    mDotSize.value = dot.size.toString();
    mDotColor.value = dot.color;
    mDotRatio.value = dot.ratio.toString();
    mDotRot.value = Math.round((dot.rotOffset / Math.PI) * 180).toString();
    mDotID.value = td.parentNode.id;
}
/**
 * after user clicks "save", save the new dot attributes and update HTML
 */
function postModify() {
    const dot = dots[mDotID.value];
    const dotSize = +mDotSize.value;
    const dotColor = mDotColor.value;
    const dotRatio = +mDotRatio.value;
    const dotRot = +mDotRot.value;
    const tr = document.getElementById(mDotID.value);
    tr.cells[0].innerHTML = `
<td onclick="preModify(this)" data-toggle="modal" data-target="#DotModalCenter">
    Ratio: ${dotRatio}%&nbsp;&nbsp;Color: <span class="color-blk" style="background-color: ${dotColor}"></span>
    <br> 
    Size: ${dotSize}&nbsp;&nbsp;Rotation: ${dotRot}° 
</td>`;
    dot.size = dotSize;
    dot.color = dotColor;
    dot.ratio = dotRatio;
    dot.rotOffset = (dotRot / 180) * Math.PI;
    saveConfigToBrowser();
}
function stopDrawing() {
    window.cancelAnimationFrame(animateID);
}
function saveConfigToBrowser() {
    localStorage.setItem("cache", getConfigJSON());
}
function getConfigJSON() {
    return JSON.stringify({
        circleRadius: +circleParam.value,
        showSkeleton: skeletonCheck.checked,
        showFunction: functionCheck.checked,
        xParam: xParam.value,
        yParam: yParam.value,
        t1: +t1Param.value,
        t2: +t2Param.value,
        dx: +dxParam.value,
        dy: +dyParam.value,
        scale: +scaleParam.value,
        clearBeforeDrawing: clearBeforeDrawingCheck.checked,
        drawingStep: +drawingStepParam.value,
        drawingSpeed: +drawingSpeedParam.value,
        revolve: revolve.checked,
        radiusMultiple: +radiusMultipleParam.value,
        dots,
        dotSizeMin: +dotSizeMinParam.value,
        dotSizeMax: +dotSizeMaxParam.value,
        dotRatioMin: +dotRatioMinParam.value,
        dotRatioMax: +dotRatioMaxParam.value,
        dotRotMin: +dotRotMinParam.value,
        dotRotMax: +dotRotMaxParam.value,
        frameSize: +gifSizeParam.value,
        fps: +gifFPSParam.value,
        frameTransparent: gifTransparentCheck.checked,
        frameBgColor: gifBgColorParam.value,
        frameQuality: +gifQualityParam.value,
        lastFrameDelay: +gifLastFrameDelayParam.value,
        pngWidth: +pngWidthParam.value,
        pngTransparent: pngTransparentCheck.checked,
        pngBgColor: pngBgColorParam.value,
        cutPoints,
        cuspPoints
    });
}
function parseConfigJSON(json) {
    if (!json)
        return;
    try {
        const obj = JSON.parse(json);
        circleParam.value = obj.circleRadius === undefined ? 120 : obj.circleRadius;
        xParam.value = obj.xParam === undefined ? "" : obj.xParam;
        yParam.value = obj.yParam === undefined ? "" : obj.yParam;
        t1Param.value = obj.t1 === undefined ? -5 : obj.t1;
        t2Param.value = obj.t2 === undefined ? 5 : obj.t2;
        dxParam.value = obj.dx === undefined ? 0 : obj.dx;
        dyParam.value = obj.dy === undefined ? 0 : obj.dy;
        scaleParam.value = obj.scale === undefined ? 1 : obj.scale;
        skeletonCheck.checked = obj.showSkeleton === undefined ? true : obj.showSkeleton;
        functionCheck.checked = obj.showFunction === undefined ? true : obj.showFunction;
        clearBeforeDrawingCheck.checked = obj.clearBeforeDrawing === undefined ? true : obj.clearBeforeDrawing;
        drawingStepParam.value = obj.drawingStep === undefined ? 0.005 : obj.drawingStep;
        drawingSpeedParam.value = obj.drawingSpeed === undefined ? 2 : obj.drawingSpeed;
        revolve.checked = obj.revolve === undefined ? false : obj.revolve;
        radiusMultipleParam.value = obj.radiusMultiple === undefined ? 10 : obj.radiusMultiple;
        dotSizeMinParam.value = obj.dotSizeMin === undefined ? 1 : obj.dotSizeMin;
        dotSizeMaxParam.value = obj.dotSizeMax === undefined ? 3 : obj.dotSizeMax;
        dotRatioMinParam.value = obj.dotRatioMin === undefined ? 50 : obj.dotRatioMin;
        dotRatioMaxParam.value = obj.dotRatioMax === undefined ? 100 : obj.dotRatioMax;
        dotRotMinParam.value = obj.dotRotMin === undefined ? 0 : obj.dotRotMin;
        dotRotMaxParam.value = obj.dotRotMax === undefined ? 360 : obj.dotRotMax;
        gifSizeParam.value = obj.frameSize === undefined ? 320 : obj.frameSize;
        gifFPSParam.value = obj.fps === undefined ? 30 : obj.fps;
        gifTransparentCheck.checked = obj.frameTransparent === undefined ? false : obj.frameTransparent;
        gifBgColorParam.value = obj.frameBgColor === undefined ? "#FFFFFF" : obj.frameBgColor;
        if (gifTransparentCheck.checked)
            gifBgColorParam.disabled = true;
        gifQualityParam.value = obj.frameQuality === undefined ? 10 : obj.frameQuality;
        gifLastFrameDelayParam.value = obj.lastFrameDelay === undefined ? 1000 : obj.lastFrameDelay;
        pngWidthParam.value = obj.pngWidth === undefined ? 640 : obj.pngWidth;
        pngTransparentCheck.checked = obj.pngTransparent === undefined ? false : obj.pngTransparent;
        pngBgColorParam.value = obj.pngBgColor === undefined ? "#FFFFFF" : obj.pngBgColor;
        cuspPoints = obj.cuspPoints || [];
        cutPoints = obj.cutPoints || [];
        if (pngTransparentCheck.checked)
            pngBgColorParam.disabled = true;
        removeAllDots();
        dots = obj.dots;
        for (const key in dots) {
            addDotHelper(key, dots[key].size, dots[key].color, dots[key].ratio, Math.round((180 * dots[key].rotOffset) / Math.PI), false);
        }
        updateDrawingTime();
        previewRuler();
    }
    catch (e) {
        alert(e);
        console.error(e);
    }
}
/**
 * save config as a file
 */
function saveConfig() {
    saveAs(new Blob([getConfigJSON()], { type: "text/plain;charset=utf-8" }), "config.json");
}
/**
 * load config from a file
 */
function loadConfig(files) {
    if (files.length) {
        const file = files[0];
        const reader = new FileReader();
        reader.onload = function () {
            parseConfigJSON(this.result);
        };
        reader.readAsText(file);
    }
}
/**
 * @returns [minX, maxX, minY, maxY] of the global locArray
 */
function getRealBounds() {
    let maxDotRatio = 0;
    for (const key in dots) {
        const dotRatio = Math.abs(dots[key].ratio);
        if (dotRatio > maxDotRatio) {
            maxDotRatio = dotRatio;
        }
    }
    const radius = +circleParam.value * +scaleParam.value;
    maxDotRatio = Math.max(radius, maxDotRatio / 100 * radius + 1) * 2;
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let i = 0; i < locArray.length; i++) {
        const [x, y] = locArray[i];
        if (x < minX)
            minX = x;
        if (x > maxX)
            maxX = x;
        if (y < minY)
            minY = y;
        if (y > maxY)
            maxY = y;
    }
    minX = minX - maxDotRatio;
    maxX = maxX + maxDotRatio;
    minY = minY - maxDotRatio;
    maxY = maxY + maxDotRatio;
    return [minX, maxX, minY, maxY];
}
/**
 * given [minX, maxX, minY, maxY] (two corners of a rectangle), returns the scaling and translation such that when applied,
 * the resulting rectangle is centered at (0, 0) and max(width, height) = `maxSize`
 */
function getScalingAndTranslation(realBounds, maxSize = 640) {
    const [minX, maxX, minY, maxY] = realBounds;
    const width = maxX - minX;
    const height = maxY - minY;
    const scaling = Math.min(maxSize / width, maxSize / height);
    return [scaling, (-width / 2 - minX) * scaling, (-height / 2 - minY) * scaling, scaling * width, scaling * height];
}
/**
 * adjust the scaling and translation of the canvas such that the parametric curve fits within the viewport
 */
function autoAdjustScalingAndTranslation() {
    if (locArray.length > 0 && locArray[0].length >= 6) {
        const result = getScalingAndTranslation(getRealBounds(), 640);
        scaleParam.value = (+scaleParam.value * result[0]).toString();
        dxParam.value = result[1].toString();
        dyParam.value = result[2].toString();
        previewRuler();
    }
    else {
        previewRuler();
        autoAdjustScalingAndTranslation();
    }
}
function saveToPNG() {
    stopDrawing();
    draw(() => {
        const tempCxt = tempCanvas.getContext("2d");
        const [, , , width, height] = getScalingAndTranslation(getRealBounds(), +pngWidthParam.value);
        tempCanvas.width = width;
        tempCanvas.height = height;
        if (!pngTransparentCheck.checked) {
            tempCxt.fillStyle = pngBgColorParam.value;
            tempCxt.fillRect(0, 0, width, height);
        }
        tempCxt.drawImage(funcCanvas, 0, 0, width, height);
        tempCxt.drawImage(bottomCanvas, 0, 0, width, height);
        tempCxt.drawImage(topCanvas, 0, 0, width, height);
        tempCanvas.toBlob(blob => {
            saveAs(blob, "parametric-roulette.png");
        });
    });
}
function saveToGIF() {
    stopDrawing();
    const frameSize = +gifSizeParam.value;
    const transparent = gifTransparentCheck.checked;
    const fps = +gifFPSParam.value;
    const frameDelay = Math.round(1000 / fps);
    const tempCxt = tempCanvas.getContext("2d");
    // const [, , , width, height] = getScalingAndTranslation(getRealBounds(), frameSize);
    // tempCanvas.width = width;
    // tempCanvas.height = height;
    const width = frameSize, height = frameSize;
    const gif = new GIF({
        workers: 4,
        quality: +gifQualityParam.value,
        workerScript: "./gif.worker.min.js",
        width,
        height
    });
    if (!transparent) {
        tempCxt.fillStyle = gifBgColorParam.value;
        tempCxt.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
    }
    const progressLabel = document.getElementById('progressLabel');
    const progressbar = document.getElementById('progressbar');
    progressbar.style.width = "0%";
    draw(() => {
        if (transparent)
            tempCxt.clearRect(0, 0, width, height);
        else
            tempCxt.fillRect(0, 0, width, height);
        tempCxt.drawImage(funcCanvas, 0, 0, width, height);
        tempCxt.drawImage(bottomCanvas, 0, 0, width, height);
        tempCxt.drawImage(topCanvas, 0, 0, width, height);
        gif.addFrame(tempCxt, {
            copy: true,
            delay: +gifLastFrameDelayParam.value
        });
        progressbar.style.width = "0%";
        gif.on("progress", (p) => {
            if (Math.abs(1 - p) < 0.001) {
                progressbar.style.width = "100%";
                progressLabel.innerHTML = "Save as GIF: Finished";
            }
            else {
                p = p * 100;
                progressbar.style.width = p + "%";
                progressLabel.innerHTML = `Save as GIF: ${p.toFixed(1)}%`;
            }
        });
        gif.on("finished", (blob) => {
            saveAs(blob, "parametric-roulette.gif");
        });
        gif.render();
    }, +drawingSpeedParam.value * (SCREEN_FPS / fps), () => {
        if (transparent)
            tempCxt.clearRect(0, 0, width, height);
        else
            tempCxt.fillRect(0, 0, width, height);
        tempCxt.drawImage(funcCanvas, 0, 0, width, height);
        tempCxt.drawImage(bottomCanvas, 0, 0, width, height);
        tempCxt.drawImage(topCanvas, 0, 0, width, height);
        gif.addFrame(tempCxt, {
            copy: true,
            delay: frameDelay
        });
    });
}
function getDotArray() {
    const dotArray = [];
    for (const key in dots)
        dotArray.push(dots[key]);
    return dotArray;
}
/**
 * set the transformation matrix of the given canvas contexts.
 * Note that scaling is not set here because it may not provide a high-res image. Instead, it is applied in the `calculateLocations` function.
 */
function setTransform(cxts) {
    const sx = +dxParam.value;
    const sy = +dyParam.value;
    for (let i = 0; i < cxts.length; i++)
        cxts[i].setTransform(1, 0, 0, -1, sx + 320, 320 - sy);
}
function drawPreview() {
    if (clearBeforeDrawingCheck.checked)
        clear();
    const topCxt = topCanvas.getContext("2d");
    const bottomCxt = bottomCanvas.getContext("2d");
    const funcCxt = funcCanvas.getContext("2d");
    setTransform([topCxt, bottomCxt, funcCxt]);
    funcCxt.beginPath();
    funcCxt.strokeStyle = "#000000";
    funcCxt.moveTo(locArray[0][0], locArray[0][1]);
    for (let i = 1; i < locArray.length; i++)
        if (!isNaN(locArray[i][0]))
            funcCxt.lineTo(locArray[i][0], locArray[i][1]);
    funcCxt.stroke();
    let i = 0, j = 0;
    while (isNaN(locArray[i][0])) {
        i++;
    }
    while (locArray[i][5] > cutPoints[j][0]) {
        j++;
    }
    const initialSigns = cutPoints[j][1];
    const ruler = new Ruler(initialSigns * locArray[i][2] + locArray[i][0], initialSigns * locArray[i][3] + locArray[i][1], +circleParam.value * +scaleParam.value, getDotArray());
    ruler.showSkeleton = true;
    ruler.draw(topCxt, bottomCxt);
    enableDrawing();
}
function previewRuler() {
    stopDrawing();
    if (xParam.value.length == 0 || yParam.value.length == 0)
        return;
    calculateLocations();
    drawPreview();
    saveConfigToBrowser();
}
function clear() {
    clearCxt(topCanvas.getContext('2d'));
    clearCxt(bottomCanvas.getContext('2d'));
    clearCxt(funcCanvas.getContext('2d'));
}
function clearCxt(cxt) {
    cxt.save();
    cxt.resetTransform();
    cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);
    cxt.restore();
}
/**
 * computes the parametric functions'
 * [x(t), y(t), x'(t), y'(t), arcLenth(t), curvature(t)]
 * all as JavaScript function of one variable
 */
function buildNecessaryExpressions(xExp, yExp) {
    const dx = nerdamer.diff(xExp, "t");
    const dy = nerdamer.diff(yExp, "t");
    const dx_2 = nerdamer.diff(dx, "t");
    const dy_2 = nerdamer.diff(dy, "t");
    const curvatureExp = nerdamer(`((${dx.text()}) * (${dy_2.text()}) - (${dx_2.text()}) * (${dy.text()}))/((${dx.text()})^2 + (${dy.text()})^2)^1.5`);
    const arcLengthExp = nerdamer(`sqrt((${dx.text()})^2 + (${dy.text()})^2)`);
    return [
        xExp.buildFunction(["t"]),
        yExp.buildFunction(["t"]),
        dx.buildFunction(["t"]),
        dy.buildFunction(["t"]),
        arcLengthExp.buildFunction(["t"]),
        curvatureExp.buildFunction(["t"]),
    ];
}
function calculateLocations() {
    var _a, _b;
    console.time("calc loc");
    const [xFunc, yFunc, dx, dy, arcLengthExp, curvature] = buildNecessaryExpressions(nerdamer(xParam.value), nerdamer(yParam.value));
    const t1 = +t1Param.value, t2 = +t2Param.value;
    let sign = 1;
    const rotDirec = ((_a = cuspPoints[0]) === null || _a === void 0 ? void 0 : _a[1]) || (revolve.checked ? -1 : 1);
    const newCuspPoints = [[t1, 0, 0, 1]];
    const newCutPoints = [[t1, 1]];
    const step = +drawingStepParam.value, radius = +circleParam.value, scale = +scaleParam.value;
    const locations = [];
    // pre-compute the arcLength for every t
    const arcLengths = new Float64Array(Math.ceil((t2 - t1) / step));
    // trapezoidal rule numerical integration
    // lastV = f(x_{k-1})
    for (let i = 1, sum = arcLengthExp(t1) * 0.5, lastV = 0; i < arcLengths.length; i++) {
        sum += lastV;
        lastV = arcLengthExp(t1 + i * step);
        arcLengths[i] = (sum + lastV * 0.5) * step;
    }
    outer: for (let t = t1, i = 0, idx = 0, lastNormal = 0, lastCuspIdx = 1, offset = 0; t < t2; t += step, i++) {
        const normal = -dx(t) / dy(t);
        if (Math.sign(normal * lastNormal) === -1) { // normal changes sign
            // for stationary points only
            if (Math.abs(normal - lastNormal) > 1)
                newCutPoints.push([t, sign = -sign]);
        }
        const cv = Math.abs(curvature(t));
        if (cv > 50) { // infinite curvature -> cusp
            const lastCusp = newCuspPoints[lastCuspIdx];
            const currentCusp = lastCusp || [t, cv, 0, 1];
            let flag = false;
            if (!lastCusp) {
                newCuspPoints.push(currentCusp);
            }
            else {
                // update the previous cusp's curvature if the current curvature is larger
                if (cv > lastCusp[1]) {
                    lastCusp[0] = t;
                    lastCusp[1] = cv;
                    lastCusp[2] |= 1; // mark increasing trend
                }
                else { // curvature stop increasing: curvature is the maximum
                    flag = revolve.checked && lastCusp[2] === 1; // cusp is available and has an increasing trend
                }
            }
            if (flag) {
                let cuspX, cuspY, rotAngle, cuspT, r1, r2;
                // this branch is problematic. abort.
                if (false && cv > 100000) { // extremely large curvature: cusp at the current t
                    cuspX = xFunc(t);
                    cuspY = yFunc(t);
                    // rotAngle = arcLength / radius;
                    cuspT = t;
                    r1 = lastNormal;
                    r2 = Math.atan(-dx(t + step) / dy(t + step));
                    ;
                }
                else { // otherwise cusp at the previous t
                    idx--; // decrement idx to override the value (last value) at the cusp
                    let i = -1;
                    // find the last non NaN value
                    do {
                        if (idx + i < 0)
                            continue outer;
                        [cuspX, cuspY, , , rotAngle] = locations[idx + i--];
                    } while (isNaN(cuspX));
                    cuspT = t - step;
                    r1 = Math.atan(-dx(t - 2 * step) / dy(t - 2 * step));
                    r2 = Math.atan(normal);
                }
                currentCusp[2] |= 2; // set flag to false: this cusp is no longer available
                // change sign? vertical or horizontal cusp
                const temp = Math.abs(r2 - r1);
                const radians = temp < Math.PI / 2 ? Math.PI - temp : temp;
                for (let i = 0; i < radians; i += step * 4) {
                    locations[idx++] = [
                        cuspX,
                        cuspY,
                        radius * Math.cos(r1 + rotDirec * i) * scale,
                        radius * Math.sin(r1 + rotDirec * i) * scale,
                        rotAngle + i,
                        cuspT
                    ];
                }
                locations[idx++] = [
                    cuspX,
                    cuspY,
                    radius * Math.cos(r1 + rotDirec * radians) * scale,
                    radius * Math.sin(r1 + rotDirec * radians) * scale,
                    rotAngle + radians,
                    cuspT
                ];
                offset += radius * radians; // 
                const lastCut = newCutPoints[newCutPoints.length - 1];
                if (!lastCut || Math.abs(lastCut[0] - t) >= 2 * step) // if the t-value of the lastCut is not the same as this cusp
                    newCutPoints.push([cuspT + step, sign = -sign]); // add a new cut corresponding to this cusp
                else {
                    lastCut[1] = sign = -sign; // otherwise, update the sign of the previous cusp
                }
            }
        }
        else { // curvature falls below threshold: set last cusp to undefined
            lastCuspIdx = newCuspPoints.length;
        }
        const rotAngle = (arcLengths[i] + offset) / radius;
        const delX = radius / Math.sqrt(normal * normal + 1);
        const delY = delX * normal;
        if (Math.abs(normal) > 10e100) { // special case to handle: normal is +/- infinity
            locations[idx++] = [xFunc(t) * scale, yFunc(t) * scale, radius * scale, 0, rotAngle, t];
        }
        else {
            if (isFinite(normal) && isFinite(rotAngle)) {
                locations[idx++] = [xFunc(t) * scale, yFunc(t) * scale, delX * scale, delY * scale, rotAngle, t];
            }
            else {
                locations[idx++] = [NaN, NaN, NaN, NaN, NaN, NaN];
            }
        }
        lastNormal = normal;
    }
    // do not reuse old sign if inconsistent
    // if (newCutPoints.length !== cutPoints.length) {
    //     cutPoints = [];
    // }
    // if (newCuspPoints.length !== cuspPoints.length) {
    //     cuspPoints = [];
    // }
    const signRow = document.getElementById("sign-adjust");
    signRow.innerHTML = "";
    for (let i = 0; i < newCutPoints.length; i++)
        signRow.appendChild(createSignElement(i, (newCutPoints[i][1] = ((_b = cutPoints[i]) === null || _b === void 0 ? void 0 : _b[1]) || newCutPoints[i][1]) === 1 ? "+" : "-", // reuse existing sign if possible
        newCutPoints[i][0], (newCutPoints[i + 1] || [t2])[0] // use last t at the end
        ));
    const rotRow = document.getElementById("rot-adjust");
    rotRow.innerHTML = "";
    for (let i = 0; i < newCuspPoints.length; i++) {
        let sign;
        if (cuspPoints[i] && cuspPoints[i][1] !== 0) {
            sign = cuspPoints[i][1];
        }
        else if (revolve.checked) {
            sign = -1;
        }
        else {
            sign = i % 2 === 0 ? -1 : 1;
        }
        newCuspPoints[i][3] = sign;
        rotRow.appendChild(createRotElement(i, sign === -1 ? "-" : "+", // reuse existing sign if possible
        newCuspPoints[i][0], (newCuspPoints[i + 1] || [t2])[0] // use last t at the end
        ));
    }
    console.log(newCuspPoints);
    console.log(newCutPoints);
    cutPoints = newCutPoints;
    cuspPoints = newCuspPoints.map(x => [x[0], x[3]]);
    $('[data-toggle="tooltip"]').tooltip();
    locArray = locations;
    console.timeEnd("calc loc");
}
/**
 * a template for sign element (the button for changing the sign)
 */
function createSignElement(index, sign, lower, upper) {
    const e = document.createElement("button");
    e.id = "c" + index;
    e.type = "button";
    e.className = "btn btn-secondary btn-sm sign-ele";
    e.innerHTML = upper.toFixed(2) + sign;
    e.setAttribute("data-toggle", "tooltip");
    e.title = "Change the sign for t between " + lower.toFixed(3) + " and " + upper.toFixed(3);
    e.disabled = revolve.checked;
    e.onclick = ev => {
        cutPoints[index][1] = -cutPoints[index][1];
        reverseSign([ev.target]);
    };
    return e;
}
function reverseSign(targets) {
    for (let i = 0; i < targets.length; i++) {
        const t = targets[i];
        const ih = t.innerHTML;
        const sign = ih[ih.length - 1];
        if (sign === "+")
            t.innerHTML = ih.substring(0, ih.length - 1) + "-";
        else
            t.innerHTML = ih.substring(0, ih.length - 1) + "+";
    }
    saveConfigToBrowser();
}
function reverseAllCutSigns() {
    cutPoints.forEach(p => p[1] = -p[1]);
    reverseSign(document.getElementById('sign-adjust').children);
}
function reverseAllCuspSigns() {
    cuspPoints.forEach(p => p[1] = -p[1]);
    reverseSign(document.getElementById('rot-adjust').children);
    if (revolve.checked) { // revolve direction depends on the initial direction
        previewRuler();
    }
}
/**
 * a template for rot (rotation) element (the button for changing the direction of rotation)
 */
function createRotElement(index, sign, lower, upper) {
    const e = document.createElement("button");
    e.id = "r" + index;
    e.type = "button";
    e.className = "btn btn-outline-dark btn-sm rot-ele";
    e.innerHTML = upper.toFixed(2) + sign;
    e.setAttribute("data-toggle", "tooltip");
    e.title = `Change the direction of rotation for t between ${lower.toFixed(3)} and ${upper.toFixed(3)}`;
    e.disabled = revolve.checked;
    e.onclick = ev => {
        cuspPoints[index][1] = -cuspPoints[index][1];
        reverseSign([ev.target]);
        if (revolve.checked) {
            previewRuler();
        }
    };
    return e;
}
function generateRadius() {
    stopDrawing();
    const exps = buildNecessaryExpressions(nerdamer(xParam.value), nerdamer(yParam.value));
    const t1 = +t1Param.value, t2 = +t2Param.value;
    const arcLength = integrate(exps[4], t1, t2, Math.round((t2 - t1) / +drawingStepParam.value) + 10);
    circleParam.value = (arcLength / (+radiusMultipleParam.value * 2 * Math.PI)).toString();
    previewRuler();
}
/**
 * @param doneCallback function to call after drawing is done
 * @param stepInterval interval to update the progressbar and execute stepAction
 * @param stepAction function to call when drawingStep % stepInterval === 0
 */
function draw(doneCallback = () => { }, stepInterval = 64, stepAction = () => { }) {
    stepInterval = Math.round(stepInterval);
    // storing the reference to global locArray for efficiency
    const _locArray = locArray;
    const _cuspPoints = cuspPoints;
    const _cutPoints = cutPoints;
    if (_locArray.length < 1)
        return alert("You must first click 'preview' to calculate drawing path");
    const topCxt = topCanvas.getContext("2d");
    const bottomCxt = bottomCanvas.getContext("2d");
    const funcCxt = funcCanvas.getContext("2d");
    const ruler = new Ruler(320, 320, +scaleParam.value * +circleParam.value, getDotArray());
    ruler.showSkeleton = skeletonCheck.checked;
    if (clearBeforeDrawingCheck.checked || !ruler.showSkeleton) {
        clearCxt(bottomCxt);
        clearCxt(topCxt);
    }
    if (!functionCheck.checked)
        clearCxt(funcCxt);
    setTransform([topCxt, bottomCxt, funcCxt]);
    const progressLabel = document.getElementById('progressLabel');
    const progressbar = document.getElementById('progressbar');
    progressbar.style.width = "0%";
    console.time("creating tasks");
    const tasks = [];
    for (let i = 0, cut = 0, cusp = 0, sign = _cutPoints[0][0], rot = _cuspPoints[0][0]; i < _locArray.length; i++) {
        if (cut < _cutPoints.length && _locArray[i][5] >= _cutPoints[cut][0])
            sign = _cutPoints[cut++][1];
        let changeRot = false;
        if (cusp < _cuspPoints.length && _locArray[i][5] >= _cuspPoints[cusp][0]) {
            rot = _cuspPoints[cusp++][1];
            changeRot = true;
        }
        tasks.push(() => {
            if (isNaN(locArray[i][0]))
                return;
            // erase
            ruler.erase(bottomCxt);
            // update parameters
            ruler.moveTo(_locArray[i][0] + sign * _locArray[i][2], _locArray[i][1] + sign * _locArray[i][3]);
            ruler.angle = _locArray[i][4];
            if (changeRot)
                ruler.changeDirection(rot);
            // draw
            ruler.draw(topCxt, bottomCxt);
            if (i % stepInterval === 0) {
                stepAction();
                const progress = ((i / _locArray.length) * 100).toFixed(1);
                // note: this is actually the slowest line because it causes reflow
                progressbar.style.width = progress + "%";
                progressLabel.innerHTML = `Drawing: t = ${_locArray[i][5].toFixed(3)}, ${progress}%`;
            }
        });
    }
    tasks.push(() => {
        progressbar.style.width = "100%";
        progressLabel.innerHTML = "Drawing: Finished";
        doneCallback();
    });
    console.timeEnd("creating tasks");
    const speed = Math.ceil(+drawingSpeedParam.value);
    let i = 0;
    animateID = window.requestAnimationFrame(animate);
    function animate() {
        if (i < tasks.length) {
            const bound = Math.min(tasks.length, i + speed);
            for (let j = i; j < bound; j++)
                tasks[j]();
            i += speed;
            animateID = window.requestAnimationFrame(animate);
        }
    }
}
/**
 * Numerically integrate function f over [a, b] using the trapezoidal rule
 */
function integrate(f, a, b, n) {
    if (Math.abs(b - a) < 1e-8)
        return 0;
    const step = (b - a) / n;
    let sum = (f(a) + f(b)) * 0.5;
    for (let i = 1; i < n - 1; i++)
        sum += f(a + i * step);
    return sum * step;
}
class Ruler {
    constructor(x, y, radius, dots) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.dots = dots;
        this.angle = 0;
        this.offset = 0;
        this.rotSign = 1;
        this.showSkeleton = true;
    }
    changeDirection(sign) {
        // const a = this.calculateRotation(0);
        if (this.rotSign !== sign) // cancel out previous rotation offset
            this.offset += -sign * 2 * this.angle;
        this.rotSign = sign;
        // console.log((this.calculateRotation(0) - a) % (2*Math.PI), this.angle % (Math.PI * 2));
    }
    erase(bottomCxt) {
        bottomCxt.save();
        bottomCxt.resetTransform();
        bottomCxt.clearRect(0, 0, bottomCxt.canvas.width, bottomCxt.canvas.height);
        bottomCxt.restore();
    }
    draw(topCxt, bottomCxt) {
        bottomCxt.beginPath();
        if (this.showSkeleton)
            bottomCxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        for (const dot of this.dots) {
            const radius = (dot.ratio / 100) * this.radius;
            const rad = this.rotSign * this.angle - dot.rotOffset + this.offset;
            const x = this.x + radius * Math.cos(rad);
            const y = this.y + radius * Math.sin(rad);
            topCxt.beginPath();
            topCxt.fillStyle = dot.color;
            topCxt.arc(x, y, dot.size, 0, 2 * Math.PI);
            topCxt.fill();
            if (this.showSkeleton) {
                bottomCxt.moveTo(this.x, this.y);
                bottomCxt.lineTo(x, y);
            }
        }
        bottomCxt.stroke(); // do the bottomCxt operations in the save batch, improving performance
    }
    moveTo(x, y) {
        this.x = x;
        this.y = y;
    }
}
class Dot {
    constructor(size, color, ratio, rotOffset) {
        this.size = size;
        this.color = color;
        this.ratio = ratio;
        this.rotOffset = (rotOffset / 180) * Math.PI;
    }
}
//# sourceMappingURL=parametric.js.map