bezier-lt/tangent.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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="slidecontainer">
    <div class="tvaluetext" id="sliderlabel"></div>
    <input
      type="range"
      min="0"
      max="100"
      value="0"
      class="slider"
      id="tvalue"
    />
  </div>
  <div class="info" id="infobox3" style="display: box">
    P'(<span style="color: #f07508">t</span>)=<br />
    <span style="color: #0a98d8">P<sub>0</sub></span> * (-3<span
      style="color: #f07508"
      >t<sup>2</sup></span
    >+6<span style="color: #f07508">t</span>-3) +<br />
    <span style="color: #d3e549">P<sub>1</sub></span> * (9<span
      style="color: #f07508"
      >t<sup>2</sup></span
    >-12<span style="color: #f07508">t</span>+3) + <br />
    <span style="color: #981e82">P<sub>2</sub></span> * (-9<span
      style="color: #f07508"
      >t<sup>2</sup></span
    >+6<span style="color: #f07508">t</span>) +
    <br />
    <span style="color: #0f7373">P<sub>3</sub></span> * 3<span
      style="color: #f07508"
      >t<sup>2</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();

      var sx = lerp(
        lerp(lerp(P0.x, P1.x, t), lerp(P1.x, P2.x, t), t),
        lerp(lerp(P1.x, P2.x, t), lerp(P2.x, P3.x, t), t),
        t
      );
      var sy = lerp(
        lerp(lerp(P0.y, P1.y, t), lerp(P1.y, P2.y, t), t),
        lerp(lerp(P1.y, P2.y, t), lerp(P2.y, P3.y, t), t),
        t
      );
      drawPoint(sx, sy, "white", "S");

      var tx =
        P0.x * (-3 * t * t + 6 * t - 3) +
        P1.x * (9 * t * t - 12 * t + 3) +
        P2.x * (-9 * t * t + 6 * t) +
        P3.x * (3 * t * t);
      var ty =
        P0.y * (-3 * t * t + 6 * t - 3) +
        P1.y * (9 * t * t - 12 * t + 3) +
        P2.y * (-9 * t * t + 6 * t) +
        P3.y * (3 * t * t);
      var tmag = Math.sqrt(tx * tx + ty * ty);
      tx = (0.25 * tx) / tmag;
      ty = (0.25 * ty) / tmag;

      context.strokeStyle = "red";
      context.beginPath();
      context.moveTo(rX(sx), rY(sy));
      context.lineTo(rX(sx + tx), rY(sy + ty));
      context.stroke();

      context.strokeStyle = "green";
      context.beginPath();
      context.moveTo(rX(sx), rY(sy));
      context.lineTo(rX(sx + ty), rY(sy - tx));
      context.stroke();
    };

    window.addEventListener("keypress", (e) => {
      step++;
      e.preventDefault();

      window.location.href = "./bbox.html";
    });
  </script>
  <script src="helpers.js"></script>
</html>