bspline.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>B-Spline demo</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        
        canvas {
            display: block;
            margin: 0 auto;
            width: 60%;
            aspect-ratio: 1;
            order: -1;
        }
        
        .inputgrp {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            width: 60%;
        }
    </style>
    <script type="x-shader/x-fragment" id="fragmentShader">
        uniform vec2 resolution;
        precision mediump float;
        const float PI = 3.1415926535897932384626433832795;
        vec3 hsv2rgb(float h, float s, float v) {
            float f = mod(h / 60.0, 6.0);
            float p = v * (1.0 - s);
            float q = v * (1.0 - s * (f - floor(f)));
            float t = v * (1.0 - s * (1.0 - (f - floor(f))));
            if (f < 1.0) return vec3(v, t, p);
            else if (f < 2.0) return vec3(q, v, p);
            else if (f < 3.0) return vec3(p, v, t);
            else if (f < 4.0) return vec3(p, q, v);
            else if (f < 5.0) return vec3(t, p, v);
            else return vec3(v, p, q);
        }
        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;
            vec2 center = vec2(0.5, 0.5);
            vec2 delta = uv - center;
            float r = length(delta);
            float theta = atan(delta.y, delta.x);
            float h = theta / (2.0 * PI) * 360.0;
            float s = r*2.0;
            float v = 1.0;
            vec3 color = hsv2rgb(h, s, v);
            gl_FragColor = vec4(color, 1.0);
        }
    </script>
</head>

<body><canvas id="canvas"></canvas>
    <script src="bspline.js" type="module"></script>
    <span class="inputgrp">
        <input type="range" min="2" max="300" value="200" class="slider" id="splineprecision">
        <label>Spline Points count</label>
    </span>
    <span class="en">
        B-Spline demo. Drag the points to change the curve. Left click to add a point. Right click to remove a point.
        If you add more than 4 points, the curve will automatically adjust.
        The slider controls the number of points on the spline(precision/smoothness).
    </span>
    <span class="uk">
        Демонстрація B-Сплайнів. Перетягніть точки, щоб змінити криву. Лівий клік додає точку. Правий клік видаляє точку.
        Якщо ви додасте більше 4 точок, крива автоматично оновиться.
        Слайдер контролює кількість точок на сплайні(точність/гладкість).
    </span>
    <script>
        var lang = navigator.language || navigator.userLanguage;
        if (lang == "uk-UA" || lang == "ru-RU") {
            document.querySelector(".en").style.display = "none";
        } else {
            document.querySelector(".uk").style.display = "none";
        }
    </script>
    <h3>
        <a href="index.html">Hermite demo</a>
        <br>
        <a href="bezier.html">Bezier demo</a>
        <br>
        <a href="bspline.html">B Spline demo</a>
    </h3>
</body>

</html>