Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dag Randy</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = "#0000FF";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const line = [];
    const quadraticCurvePoints = [];
    const pointsOnQuadraticCurve = [];

    for (let i = 0; i < 5; i++) {
        const x = canvas.width / 4 * i;
        const y = (canvas.height - 500) + Math.random() * 100;
        line.push({x, y});
    }

    /* Generate curve */
    ctx.beginPath();
    for (let i = 0; i < line.length; i++) {
        const point = line[i];

        if (i !== 0) {
            const previousPoint = line[i - 1];
            const quadraticCurvePoint = {
                x: Math.min(point.x, previousPoint.x) + Math.abs(point.x - previousPoint.x) / 2 + Math.random() * 500 - 250,
                y: Math.min(point.y, previousPoint.y) + Math.abs(point.y - previousPoint.y) / 2 + Math.random() * 500 - 250
            };
            ctx.moveTo(previousPoint.x, previousPoint.y);
            ctx.strokeStyle = '#000000';
            ctx.quadraticCurveTo(quadraticCurvePoint.x, quadraticCurvePoint.y, point.x, point.y);
            quadraticCurvePoints.push(quadraticCurvePoint);
        }
    }
    ctx.stroke();

    /* Show points */
    ctx.beginPath();
    for (let i = 0; i < line.length; i++) {
        const point = line[i];

        if (i !== 0) {
            const previousPoint = line[i - 1];

            const quadraticPointOnCurve = {
                x: (1 - 0.5) * ((1 - 0.5) * previousPoint.x + (0.5 * quadraticCurvePoints[i - 1].x)) + 0.5 * (((1 - 0.5) * quadraticCurvePoints[i - 1].x + (0.5 * point.x))),
                y: (1 - 0.5) * ((1 - 0.5) * previousPoint.y + (0.5 * quadraticCurvePoints[i - 1].y)) + 0.5 * (((1 - 0.5) * quadraticCurvePoints[i - 1].y + (0.5 * point.y)))
            };

            ctx.strokeStyle = '#00FF00';
            ctx.moveTo(quadraticPointOnCurve.x, quadraticPointOnCurve.y);
            ctx.lineTo(quadraticCurvePoints[i -1].x, quadraticCurvePoints[i - 1].y);

            drawPoint(quadraticCurvePoints[i - 1], 10, '#00FF00');
        }

        drawPoint(point, 10, '#FF0000');
    }
    ctx.stroke();

    for (let i = 0; i < line.length; i++) {
        const point = line[i];
        if (i !== 0) {
            const previousPoint = line[i - 1];
            for (let j = 0.1; j < 1; j += 0.2) {
                const pointOnQuadraticCurve = {
                    x: (1 - j) * ((1 - j) * previousPoint.x + (j * quadraticCurvePoints[i - 1].x)) + j * (((1 - j) * quadraticCurvePoints[i - 1].x + (j * point.x))),
                    y: (1 - j) * ((1 - j) * previousPoint.y + (j * quadraticCurvePoints[i - 1].y)) + j * (((1 - j) * quadraticCurvePoints[i - 1].y + (j * point.y)))
                };
                drawPoint(pointOnQuadraticCurve, 10, '#ffffff');
                pointsOnQuadraticCurve.push(pointOnQuadraticCurve);
            }
        }
    }


    /* Show all points on curve (line points + quadratic line points) */
    let allPointsOnCurve = line.slice();
    for (let i = 0; i < line.length; i++)
        allPointsOnCurve.splice(i * 6 + 1, 0, ...pointsOnQuadraticCurve.slice(i * 5, i * 5 + 5));
    ctx.beginPath();
    ctx.strokeStyle = '#FF00FF';
    for (let i = 0; i < allPointsOnCurve.length; i++) {
        const point = allPointsOnCurve[i];
        if (i === 0)
            ctx.moveTo(point.x, point.y - 5);
        else
            ctx.lineTo(point.x, point.y - 5);
    }
    ctx.stroke();

    /* Show perpendiculars */
    ctx.beginPath();
    ctx.strokeStyle = '#FFFFFF';
    for (let i = 0; i < allPointsOnCurve.length; i++) {
        if (i !== 0) {
            const previousPoint = allPointsOnCurve[i - 1];
            const point  = allPointsOnCurve[i];
            const slope = (point.y - previousPoint.y) / (point.x - previousPoint.x);
            const perpendicularSlope = -1/slope;
            const midOfPoints = {
                x: Math.min(point.x, previousPoint.x) + Math.abs(point.x - previousPoint.x) / 2,
                y: Math.min(point.y, previousPoint.y) + Math.abs(point.y - previousPoint.y) / 2
            };
            const pt1 = {x: midOfPoints.x - 5, y: midOfPoints.y - perpendicularSlope * 5};
            const pt2 = {x: midOfPoints.x + 5, y: midOfPoints.y + perpendicularSlope * 5};
            ctx.moveTo(pt1.x, pt1.y);
            ctx.lineTo(pt2.x, pt2.y);
            console.log(pt1, pt2)
        }
    }
    ctx.stroke();

    function drawPoint(point, size, color) {
        ctx.fillStyle = color;
        ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
    }
</script>
</body>
</html>