Untitled

<!DOCTYPE html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<html>

<body>

    <style>
        body {
            text-align: center;
            width: 100%;
            background-color: black;
        }

        #myCanvas {
            width: 100%;
            height: 256px;
            border: 1px solid #303030;
            background-color: black;
        }

        #frame {
            margin: auto;
            width: 1200px;
        }
    </style>

    <div id="frame">
        <canvas id="myCanvas"></canvas>
    </div>

    <script>
        let canvas = document.getElementById("myCanvas");
        let ctx = canvas.getContext("2d");

        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;

        function Curve(y, delta, shape) {
            this.y = y;
            this.delta = delta;
            this.shape = shape;
        }

        function shaper(x, shape) {
            return x / (x + (1.0 - (1.0 / shape)) * (x - 1.0));
        }

        function lerp(x, a, b) {
            return a + x * (b - a);
        }

        let curveList = [
            new Curve(1.0, 100.0, 0.75),
            new Curve(0.0, 200.0, 0.25),
            new Curve(0.5, 200.0, 0.25),
            new Curve(0.0, 200.0, 0.85)
        ];

        let h = canvas.height;
        let w = canvas.width;
        let x = 0;
        let y = 0;

        ctx.beginPath();
        ctx.moveTo(0, h);

        curveList.forEach(crv => {
            let tx = x + crv.delta;
            let ty = crv.y;
            let steps = 100;
            let shape = ty > y ? crv.shape : 1.0 - crv.shape;

            console.log("Point:");
            console.log("  shape: " + crv.shape);
            console.log("  x: " + x + ", tx: " + tx);
            console.log("  y: " + y + ", ty: " + ty);

            for (let p = 0; p < 1.0; p += (1.0 / steps)) {
                let xp = lerp(p, x, tx);
                let yp = lerp(shaper(p, shape), y, ty);

                ctx.lineTo(xp, h - yp * h);
            }

            x = tx;
            y = ty;
        });

        ctx.strokeStyle = "#FFFFFFE0";
        ctx.stroke();
    </script>

</body>

</html>