bezier-lt/bernstein.html at main · opera-emoller/bezier-lt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
    <script src="colors.js"></script>
    <script src="points.js"></script>
  </head>
  <canvas></canvas>
  <div class="info" id="infobox" style="display: block">
    P(<span style="color: #f07508">t</span>)=lerp(<br />lerp(lerp(<span
      style="color: #0a98d8"
      >P<sub>0</sub></span
    >, <span style="color: #d3e549">P<sub>1</sub></span
    >, <span style="color: #f07508">t</span>), lerp(<span style="color: #d3e549"
      >P<sub>1</sub></span
    >, <span style="color: #981e82">P<sub>2</sub></span
    >, <span style="color: #f07508">t</span>),
    <span style="color: #f07508">t</span>),<br />lerp(lerp(<span
      style="color: #d3e549"
      >P<sub>1</sub></span
    >, <span style="color: #981e82">P<sub>2</sub></span
    >, <span style="color: #f07508">t</span>), lerp(<span style="color: #981e82"
      >P<sub>2</sub></span
    >, <span style="color: #0f7373">P<sub>3</sub></span
    >, <span style="color: #f07508">t</span>),
    <span style="color: #f07508">t</span>),<br /><span style="color: #f07508"
      >t</span
    >)
  </div>
  <div class="info" id="infobox2" style="display: none">
    P(<span style="color: #f07508">t</span>)=<br />
    <span style="color: #0a98d8">P<sub>0</sub></span> * (-<span
      style="color: #f07508"
      >t<sup>3</sup></span
    >+3<span style="color: #f07508">t<sup>2</sup></span
    >-3<span style="color: #f07508">t</span>+1) +<br />
    <span style="color: #d3e549">P<sub>1</sub></span> * (3<span
      style="color: #f07508"
      >t<sup>3</sup></span
    >-6<span style="color: #f07508">t<sup>2</sup></span
    >+3<span style="color: #f07508">t</span>) + <br />
    <span style="color: #981e82">P<sub>2</sub></span> * (-3<span
      style="color: #f07508"
      >t<sup>3</sup></span
    >+3<span style="color: #f07508">t<sup>2</sup></span
    >) +
    <br />
    <span style="color: #0f7373">P<sub>3</sub></span> *
    <span style="color: #f07508">t<sup>3</sup></span>
  </div>

  <script>
    var step = 0;

    var drawCanvas = (t) => {
      context.clearRect(0, 0, canvas.width, canvas.height);

      drawPoint(P0.x, P0.y, clightblue, "P0");
      drawPoint(P1.x, P1.y, clightgreen, "P1");
      drawPoint(P2.x, P2.y, clightpurple, "P2");
      drawPoint(P3.x, P3.y, clightaqua, "P3");
      drawLine(P0.x, P0.y, P1.x, P1.y, clightblue, clightgreen);
      drawLine(P2.x, P2.y, P3.x, P3.y, clightpurple, clightaqua);

      context.strokeStyle = "white";
      context.beginPath();
      context.moveTo(rX(P0.x), rY(P0.y));
      context.bezierCurveTo(
        rX(P1.x),
        rY(P1.y),
        rX(P2.x),
        rY(P2.y),
        rX(P3.x),
        rY(P3.y)
      );
      context.stroke();
    };

    window.addEventListener("keypress", () => {
      step++;
      var infobox = document.getElementById("infobox");
      var infobox2 = document.getElementById("infobox2");
      if (step == 1) {
        infobox.style.display = "none";
        infobox2.style.display = "block";
      } else {
        window.location.href = "./derivative.html";
      }
    });
  </script>
  <script src="helpers.js"></script>
</html>