[ko-KR] Chapter 3 translation (#340)

* Automated build

* Automated build

* Translate chapter 3 into ko-KR

Co-authored-by: Bezierinfo CI <action@github.com>

docs/chapters/explanation/content.ko-KR.md

@@ -0,0 +1,173 @@
+# 베지에 곡선을 이루는 수학
+
+베지에 곡선은 "매개변수" 함수의 일종입니다. 수학적으로 말하자면 매개변수 함수는 꼼수입니다. "함수"란 임의의 개수의 입력에서 <strong>하나의</strong> 출력으로 가는 대응을 의미하는, 엄연한 정의가 있는 용어입니다. 수를/수들을 넣으면 하나의 값이 나옵니다. 다른 수를 넣어도 값이 하나만 나오는 점은 변하지 않습니다.
+
+매개변수 함수는 꼼수입니다. "저는 여러 값이 나오는 함수가 필요한데 그냥 함수를 여러 개 쓰면 안 돼요?"인 것이죠. 예컨대 어떤 값(<i>x</i>라고 합시다)을 어떤 연산을 통해 다른 값과 대응시키는 함수가 있다고 합시다.
+
+\[
+  f(x) = \cos(x)
+\]
+
+<i>f(x)</i>라는 표기는 <i>f</i>(함수가 하나만 있을 때는 관습적으로 <i>f</i>를 씁니다)가 함수이며, 그 값이 하나의 변수(여기서는 <i>x</i>)에 따라 바뀜을 나타내는 표준적인 방법입니다. <i>x</i>를 바꾸면 <i>f(x)</i>의 값도 바뀝니다.
+
+여기까지는 좋습니다. 이제 매개변수 함수를 보고, 어떤 꼼수를 쓰는지 확인해 봅시다. 아래의 두 함수를 생각해 봅시다.
+
+\[
+\begin{matrix}
+  f(a) = \cos(a) \\
+  f(b) = \sin(b)
+\end{matrix}
+\]
+
+별 특이할 점이 없는 사인과 코사인 함수인데, 자세히 보면 두 입력이 다른 이름을 가지는 것을 확인할 수 있습니다. <i>a</i>의 값을 바꾸더라도 <i>f(b)</i>에서는 <i>a</i>를 쓰지 않으므로 <i>f(b)</i>의 값이 바뀌지는 않습니다. 바로 이 부분을 조금 고치는 것이 매개변수 함수의 꼼수입니다. 매개변수 함수에서는 아래와 같이 여러 가지 함수가 같은 변수를 공유합니다.
+
+\[
+\left \{ \begin{matrix}
+  f_a(t) = \cos(t) \\
+  f_b(t) = \sin(t)
+\end{matrix} \right.
+\]
+
+함수는 여러 개인데 변수는 하나뿐이네요. <i>t</i>의 값을 바꾸면 <i>f<sub>a</sub>(t)</i>와 <i>f<sub>b</sub>(t)</i>의 값이 모두 바뀝니다. 이게 어딜 봐서 유용한지 궁금해하는 독자가 있다면, 답은 의외로 간단합니다. <i>f<sub>a</sub>(t)</i>와 <i>f<sub>b</sub>(t)</i>라는 이름표를 매개변수 곡선을 만들 때 보통 의미하는 바를 나타내도록 바꾸면 이 식이 눈에 더 잘 들어올지도 모르겠습니다.
+
+\[
+\left \{ \begin{matrix}
+  x = \cos(t) \\
+  y = \sin(t)
+\end{matrix} \right.
+\]
+
+짜잔! <i>x</i>/<i>y</i>좌표가 어떤 미지의 값 <i>t</i>를 통해 이어져 있었습니다.
+
+정리하자면, 매개변수 곡선은 보통의 함수처럼 <i>y</i>좌표를 <i>x</i>좌표값에 대해 정의하는 대신 두 값을 어떤 "조절" 변수로 연결합니다. <i>t</i>의 값을 바꿀 때마다 매개변수 함수에서 <strong>두</strong> 값을 얻을 수 있고, 이 값을 그래프에 (<i>x</i>,<i>y</i>) 좌표로 나타낼 수 있습니다. 예를 들어 위에서 소개한 매개변수 함수는 원 위의 점을 생성합니다. <i>t</i>의 값을 음의 무한대에서 양의 무한대까지 잡을 수 있고, 여기서 나오는 (<i>x</i>,<i>y</i>) 좌표는 항상 중심이 원점 (0,0)이고 반지름이 1인 원 위에 있습니다. <i>t</i>의 값 0부터 5까지에 대해 그래프를 그리면 다음과 같습니다.
+
+<graphics-element title="원(의 일부): x=sin(t), y=cos(t)" src="./circle.js">
+  <input type="range" min="0" max="10" step="0.1" value="5" class="slide-control">
+</graphics-element>
+
+베지에 곡선은 여러 종류의 매개변수 함수 중 한 종류이고, 모든 출력값을 같은 기초 함수로 구합니다. 위에서 살펴본 예제에서는 <i>x</i>와 <i>y</i> 값을 다른 함수로 구했지만(하나는 사인, 다른 하나는 코사인), 베지에 곡선은 <i>x</i>, <i>y</i> 값을 모두 "이항 다항식"으로 구합니다. 이항 다항식은 또 뭘까요?
+
+중·고등학교에서 다항식을 배운 기억이 나시나요? 이렇게 생긴 합을 다항식이라고 합니다.
+
+\[
+  f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
+\]
+
+여기서 가장 높은 차수의 항이 <i>x³</i>이면 3차( 다항)식, <i>x²</i>이면 2차식이라 하고, <i>x</i>라면 1차식, 즉 직선이 됩니다. (혹시 <i>x</i>가 있는 항이 하나도 없다면 그건 애초에 다항식이 아니죠!)
+
+베지에 곡선은 <i>x</i>가 아니라 <i>t</i>에 대한 다항식이고, <i>t</i>의 값이 0과 1 사이로 고정되며 <i>a</i>, <i>b</i> 등의 계수가 "이항계수"의 형태를 띱니다. 이항계수라고 하면 어려워 보이지만 사실은 두 값을 섞는 것을 간단하게 나타낸 것입니다.
+
+\[
+\begin{aligned}
+  \textit{1차} &= (1-t) + t \\
+  \textit{2차} &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\
+  \textit{3차} &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
+\end{aligned}
+\]
+
+제가 한 말이긴 하지만 저 식이 딱히 간단해 보이지는 않죠! 그런데 여기서 <i>t</i>를 없애고 대신 "곱하기 1"을 넣으면, 복잡한 수식이 갑자기 간단하게 바뀝니다. 밑에 늘어놓은 이항계수를 보세요.
+
+\[
+\begin{aligned}
+  \textit{1차} &= \hspace{2.5em} 1 + 1 \\
+  \textit{2차} &= \hspace{1.7em} 1 + 2 + 1\\
+  \textit{3차} &= \hspace{0.85em} 1 + 3 + 3 + 1\\
+  \textit{4차} &= 1 + 4 + 6 + 4 + 1
+\end{aligned}
+\]
+
+식을 잘 보면 2는 1+1과 같고, 3은 2+1과 1+2이고, 6은 3+3...이라는 것을 알 수 있습니다. 보신 바와 같이 한 차수가 높아질 때마다 양 끝은 1이고, 그 사이의 모든 수는 "윗줄에 있는 두 수를 더한 것"과 같으며, 이렇게 만들어진 모양을 [파스칼의 삼각형](https://ko.wikipedia.org/wiki/%ED%8C%8C%EC%8A%A4%EC%B9%BC%EC%9D%98_%EC%82%BC%EA%B0%81%ED%98%95)이라고 합니다. <i>이건</i> 기억하기 쉽죠?
+
+다항식의 문자 부분도 쉽게 외울 수 있는 방법이 있습니다. <i>(1-t)</i>를 <i>a</i>로, <i>t</i>를 <i>b</i>로 바꾸고 계수를 잠깐 지우면 아래의 식을 얻습니다.
+
+\[
+\begin{aligned}
+  \textit{1차} &= BLUE[a] + RED[b] \\
+  \textit{2차} &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot RED[b] \\
+  \textit{3차} &= BLUE[a] \cdot BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot BLUE[a] \cdot RED[b] + BLUE[a] \cdot RED[b] \cdot RED[b] + RED[b] \cdot RED[b] \cdot RED[b]\\
+\end{aligned}
+\]
+
+이제 이 식은 "<i>a</i>와 <i>b</i>의 모든 조합의 합"인데, + 부호가 나올 때마다 <i>a</i>가 하나씩 <i>b</i>로 바뀌는 것으로 외울 수 있습니다. 이쪽도 그렇게 어렵지 않았네요. 이것으로 이항 다항식을 모두 배웠고, 혹시 필요할 경우를 위해 아래에 일반항의 식을 추가합니다.
+
+\[
+  \textit{Bézier}(n,t) = \sum_{i=0}^{n}
+                \underset{\textit{이항계수 부분}}{\underbrace{\binom{n}{i}}}
+                \cdot\
+                \underset{\textit{문자 부분}}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
+\]
+
+위 식으로 베지에 곡선을 완전히 기술할 수 있습니다. 이때 위 함수에서 Σ(시그마) 기호는 여러 개의 값을 더한다는 의미입니다(Σ 기호 밑에 적힌 문자를 ...=&lt;값&gt;에서 시작해서 Σ 위에 적힌 값까지 바꿔가면서 더합니다).
+
+<div class="howtocode">
+
+### 기저 함수를 구현하는 방법
+
+기저 함수를 구현할 때, 아래와 같이 위에서 본 수식을 그대로 함수로 옮겨서 구현할 수는 있습니다.
+
+```
+function Bezier(n,t):
+  sum = 0
+  for(k=0; k<n; k++):
+    sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)
+  return sum
+```
+
+구현할 "수는" 있다고 한 것은 이렇게 구현하지 않을 것이기 때문입니다. 계승 함수는 *매우* 무겁고, 위에서 배운 것과 같이 계승을 쓰지 않고도 파스칼의 삼각형은 쉽게 만들 수 있습니다. [1]부터 시작하고, 그 다음에는 [1,1], [1,2,1], [1,3,3,1]과 같은 식으로, 줄이 바뀔 때마다 수 하나를 더 넣고 양쪽 끝은 1로, 그 사이의 모든 수는 지금 계산하고 있는 줄 바로 위의 양쪽 원소의 합으로 채우면 됩니다.
+
+위의 삼각형은 리스트의 리스트로 눈 깜짝할 새 구현할 수 있고, 이제 룩업 테이블을 만들었으니 이항계수는 다시 구할 필요도 없습니다.
+
+```
+lut = [      [1],           // n=0
+            [1,1],          // n=1
+           [1,2,1],         // n=2
+          [1,3,3,1],        // n=3
+         [1,4,6,4,1],       // n=4
+        [1,5,10,10,5,1],    // n=5
+       [1,6,15,20,15,6,1]]  // n=6
+
+function binomial(n,k):
+  while(n >= lut.length):
+    s = lut.length
+    nextRow = new array(size=s+1)
+    nextRow[0] = 1
+    for(i=1, prev=s-1; i<s; i++):
+      nextRow[i] = lut[prev][i-1] + lut[prev][i]
+    nextRow[s] = 1
+    lut.add(nextRow)
+  return lut[n][k]
+```
+
+코드를 해석해 볼까요? 우선 웬만한 <i>n/k</i> 값을 모두 다룰 수 있는 적당한 크기로 룩업 테이블을 선언합니다. 그 다음에는 필요한 값을 읽어오는 함수를 선언하고, 인자로 전달된 <i>n/k</i> 값이 테이블에 없으면 우선 테이블을 키우도록 합니다. 이제 기저 함수를 아래와 같이 구현할 수 있습니다.
+
+```
+function Bezier(n,t):
+  sum = 0
+  for(k=0; k<=n; k++):
+    sum += binomial(n,k) * (1-t)^(n-k) * t^(k)
+  return sum
+```
+
+좋습니다. 물론 여기에서도 최적화의 여지가 남아 있습니다. 대부분의 컴퓨터 그래픽 용도로는 임의 차수의 곡선이 필요 없습니다(물론 입문서에서는 임의 차수 곡선을 다루는 코드를 제공할 예정입니다). 보통 2차와 3차 곡선만 사용하기 때문에, 아래와 같이 훨씬 간단한 코드로 고칠 수 있습니다.
+
+```
+function Bezier(2,t):
+  t2 = t * t
+  mt = 1-t
+  mt2 = mt * mt
+  return mt2 + 2*mt*t + t2
+
+function Bezier(3,t):
+  t2 = t * t
+  t3 = t2 * t
+  mt = 1-t
+  mt2 = mt * mt
+  mt3 = mt2 * mt
+  return mt3 + 3*mt2*t + 3*mt*t2 + t3
+```
+
+이제 기저 함수를 프로그래밍하는 법을 모두 배웠습니다. 와!
+
+</div>
+
+지금까지 베지에 곡선의 기저 함수를 살펴보았습니다. 이제 베지에 곡선을 그토록 특별하게 만드는 것, 조절점을 살펴볼 시간입니다.

docs/images/snippets/explanation/085719517aacb7e37072113fd63040b0.ascii

@@ -0,0 +1,5 @@
+ 
+1차=  1 + 1           
+2차=  1 + 2 + 1       
+3차=  1 + 3 + 3 + 1   
+4차= 1 + 4 + 6 + 4 + 1

docs/images/snippets/explanation/0a5182969272e9b5c229bdd6e8ce7e6f.ascii

@@ -0,0 +1,4 @@
+ 
+              __ n                                                                            n-i     i
+Bézier(n,t) = ❯      \underset 이항계수 부분\underbrace\binomni  · \ \underset 문자 부분\underbrace(1-t)     · t 
+              ‾‾ i=0

docs/images/snippets/explanation/28d5dfe5c9275ee236560041d9107938.ascii

@@ -0,0 +1,6 @@
+ 
+1차= (1-t) + t                                        
+         2                      2
+2차= (1-t)  + 2  · (1-t)  · t + t                     
+         3             2                       2    3
+3차= (1-t)  + 3  · (1-t)   · t + 3  · (1-t)  · t  + t 

docs/images/snippets/explanation/43ec2ac2931d7c620736b56afa69d37b.ascii

@@ -0,0 +1,7 @@
+
+1차= \colorblue a + \colorred b                                                                                                                       
+2차= \colorblue a  · \colorblue a + \colorblue a  · \colorred b + \colorred b  · \colorred b                                                          
+3차= \colorblue a  · \colorblue a  · \colorblue a + \colorblue a  · \colorblue a  · \colorred b + \colorblue a  · \colorred b  · \colorred b + \colorr
+                                                                                           
+                                                                                           
+                                                         ed b  · \colorred b  · \colorred b

docs/news/2020-09-18.html

@@ -1,208 +1,176 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>A Primer on Bézier Curves - Rewriting the tech stack</title>
 
-		<base href=".." />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>A Primer on Bézier Curves - Rewriting the tech stack</title>
 
-		<link rel="icon" href="images/favicon.png" type="image/png" />
+  <base href="..">
 
-		<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
+  <link rel="icon" href="images/favicon.png" type="image/png" />
 
-		<!-- page styling -->
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
-		<link rel="preload" href="images/paper.png" as="image" />
-		<style>
-			:root[lang="en-GB"] {
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				font-size: 18px;
-			}
-		</style>
 
-		<link rel="stylesheet" href="style.css" />
 
-		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
+  <!-- page styling -->
-		<meta name="description" content="Rewriting the tech stack" />
+  <link rel="preload" href="images/paper.png" as="image" />
+  <style>
 
-		<!-- opengraph information -->
-		<meta property="og:title" content="Rewriting the tech stack" />
-		<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-		<meta property="og:type" content="text" />
-		<meta property="og:url" content="https://pomax.github.io/bezierinfo/news/2020-09-18.html" />
-		<meta property="og:description" content="Rewriting the tech stack" />
-		<meta property="og:locale" content="en-GB" />
-		<meta property="og:type" content="article" />
-		<meta property="og:published_time" content="Fri Sep 18 2020 00:00:00 +00:00" />
-		<meta property="og:updated_time" content="Sat Jan 08 2022 18:19:49 +00:00" />
-		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
-		<meta property="og:section" content="Bézier Curves" />
-		<meta property="og:tag" content="Bézier Curves" />
 
-		<!-- twitter card information -->
+    :root[lang="en-GB"] {
-		<meta name="twitter:card" content="summary" />
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-		<meta name="twitter:site" content="@TheRealPomax" />
+        font-size: 18px;
-		<meta name="twitter:creator" content="@TheRealPomax" />
+    }
-		<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-		<meta name="twitter:url" content="https://pomax.github.io/bezierinfo/news/" />
-		<meta name="twitter:description" content="Rewriting the tech stack" />
 
-		<!-- my own referral/page hit tracker, because Google knows enough -->
-		<script src="./js/site/referrer.js" type="module" async></script>
 
-		<!--
+</style>
+
+  <link rel="stylesheet" href="style.css" />
+
+  <!-- And a slew of SEO related meta elements, because being discoverable is important -->
+<meta name="description" content="Rewriting the tech stack" />
+
+<!-- opengraph information -->
+<meta property="og:title" content="Rewriting the tech stack" />
+<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta property="og:type" content="text" />
+<meta property="og:url" content="https://pomax.github.io/bezierinfo/news/2020-09-18.html" />
+<meta property="og:description" content="Rewriting the tech stack" />
+<meta property="og:locale" content="en-GB" />
+<meta property="og:type" content="article" />
+<meta property="og:published_time" content="Fri Sep 18 2020 09:00:00 +00:00" />
+<meta property="og:updated_time" content="Sun Jan 09 2022 03:27:20 +00:00" />
+<meta property="og:author" content="Mike 'Pomax' Kamermans" />
+<meta property="og:section" content="Bézier Curves" />
+<meta property="og:tag" content="Bézier Curves" />
+
+<!-- twitter card information -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@TheRealPomax" />
+<meta name="twitter:creator" content="@TheRealPomax" />
+<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta name="twitter:url" content="https://pomax.github.io/bezierinfo/news/" />
+<meta name="twitter:description" content="Rewriting the tech stack" />
+
+
+
+  <!-- my own referral/page hit tracker, because Google knows enough -->
+  <script src="./js/site/referrer.js" type="module" async></script>
+
+  <!--
           The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
           Note that we're not defering this: we just want it to kick in as soon as possible, and
           given how much HTML there is, that means this can, and thus should, kick in before the
           document is done even transferring.
         -->
-		<script src="./js/graphics-element/graphics-element.js" type="module" async></script>
+  <script src="./js/graphics-element/graphics-element.js" type="module" async></script>
-		<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
+  <link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
 
-		<!-- make images lazy load much earlier  -->
+  <!-- make images lazy load much earlier  -->
-		<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
+  <script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
-	</head>
 
-	<body>
+</head>
-		<div class="dev" style="display: none;">
-			DEV PREVIEW ONLY
-			<script>
-				(function () {
-					var loc = window.location.toString();
-					if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
-						var e = document.querySelector("div.dev");
-						e.removeAttribute("style");
-					}
-				})();
-			</script>
-		</div>
 
-		<div class="github">
+<body>
-			<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
+  <div class="dev" style="display:none;">
-			<map name="githubmap">
+    DEV PREVIEW ONLY
-				<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    <script>
-			</map>
+        (function () {
-		</div>
+            var loc = window.location.toString();
+            if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
+                var e = document.querySelector('div.dev');
+                e.removeAttribute("style");
+            }
+        }());
+    </script>
+</div>
 
-		<header>
+  <div class="github">
-			<h1>Rewriting the tech stack</h1>
+    <img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
-			<h5 class="post-date">Fri, 18 Sep 2020</h5>
+    <map name="githubmap">
-		</header>
+        <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    </map>
+</div>
 
-		<main>
-			<!-- Because people probably want to share this article -->
-			<div class="notforprint scl">
-				<img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
-				<map name="rhtimap">
-					<area
-						class="sclnk-rdt"
-						shape="rect"
-						coords="0, 0, 19, 15"
-						href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo/news/2020-09-18.html&title==A Primer on Bézier Curves - Rewriting the tech stack&text=An update about the Primer on Bézier curves."
-						alt="submit to reddit"
-						title="submit to reddit"
-					/>
-					<area
-						class="sclnk-hn"
-						shape="rect"
-						coords="0, 20, 19, 35"
-						href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo/news/2020-09-18.html&t=A Primer on Bézier Curves - Rewriting the tech stack"
-						alt="submit to hacker news"
-						title="submit to hacker news"
-					/>
-					<area
-						class="sclnk-twt"
-						shape="rect"
-						coords="0, 40, 19, 55"
-						href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading “Rewriting the tech stack” by @TheRealPomax over on https://pomax.github.io/bezierinfo/news/2020-09-18.html"
-						alt="tweet your read"
-						title="tweet your read"
-					/>
-				</map>
-			</div>
 
-			<p>
-				Once upon a time, I needed to draw some Bezier curves because I was trying to create a Japanese kanji composition system that turned strokes
-				into outlines, and that required knowing how to offset Bezier curves and... at the time (2011, time flies) there was no good single source of
-				information for Bezier curves on the web. So I made one. Sure it started small, but it turns out that if you just keep adding bits to
-				something, several years later you have quite the monster, and a single HTML file becomes intractible.
-			</p>
-			<p>
-				So, in 2016, when <a href="https://reactjs.org/">React.js</a> exploded onto the scene, I rewrote the primer as a React app, and it became a
-				lot easier to maintain. Like, <em>a lot</em> a lot. However, there was a downside: no JS meant no content. Sure, server-side rendering sort of
-				existed, but not really, and because the Primer is hosted through github, there was no "server" to run. Plus, trying to rehydrate an app the
-				size of the Primer from a giant HTML file had truly <em>dire</em> performance.
-			</p>
-			<p>
-				So I left it a regular React app, and every time I thought "wouldn't it be nice if it was just... a web page again?" the browser landscape
-				just hadn't caught up. Finally, in 2020, things are different: with a global pandemic, and some vacation time, and something random causing me
-				to look up the state of HTML custom elements, everything was pointing at it being time to finally, <em>finally</em>, turn the Primer back into
-				a normal web page.
-			</p>
-			<p>
-				The new tech stack is, frankly, pretty amazing. It does some things that weren't possible even half a year before I started the rewrite, let
-				alone being possible in 2016, and so because so much has changed, this post will be the first in a series of posts on how the new tech stack
-				works.
-			</p>
-			<p>To give a bit of a teaser, some of the things I'll be writing about:</p>
-			<ul>
-				<li>Essentially reinventing (a limited form of) Processing.js</li>
-				<li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li>
-				<li>Using modern ES module code that runs in both the browser and Node.js.</li>
-				<li>
-					Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.
-				</li>
-				<li>A custom <code>&lt;graphics-element&gt;</code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li>
-				<li>
-					...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images so that even without JS,
-					graphics work.
-				</li>
-			</ul>
-			<blockquote>
-				<graphics-element title="An example graphic" width="275" height="275" src="./news/example.js">
-					<fallback-image>
-						<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-						<img width="275px" height="275px" src="./images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png" loading="lazy" />
-						<label>An example graphic</label>
-					</fallback-image></graphics-element
-				>
-			</blockquote>
 
-			<ul>
+  <header>
-				<li>
+
-					Real LaTeX code, that gets saved as <code>.tex</code> file, so it can be compiled into optimized SVG using <code>xelatex</code>,
+  <h1>Rewriting the tech stack</h1>
-					<code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>:
+  <h5 class="post-date">Fri, 18 Sep 2020</h5>
-				</li>
+
-			</ul>
+  </header>
-			<blockquote>
+
-				<!--
+  <main>
- 
+
+  <!-- Because people probably want to share this article -->
+<div class="notforprint scl">
+    <img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
+    <map name="rhtimap">
+        <area class="sclnk-rdt" shape="rect" coords="0, 0, 19, 15"
+            href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo/news/2020-09-18.html&title==A Primer on Bézier Curves - Rewriting the tech stack&text=An update about the Primer on Bézier curves."
+            alt="submit to reddit" title="submit to reddit">
+        <area class="sclnk-hn" shape="rect" coords="0, 20, 19, 35"
+            href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo/news/2020-09-18.html&t=A Primer on Bézier Curves - Rewriting the tech stack"
+            alt="submit to hacker news" title="submit to hacker news">
+        <area class="sclnk-twt" shape="rect" coords="0, 40, 19, 55"
+            href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading “Rewriting the tech stack” by @TheRealPomax over on https://pomax.github.io/bezierinfo/news/2020-09-18.html"
+            alt="tweet your read" title="tweet your read">
+    </map>
+</div>
+
+
+<p>Once upon a time, I needed to draw some Bezier curves because I was trying to create a Japanese kanji composition system that turned strokes into outlines, and that required knowing how to offset Bezier curves and... at the time (2011, time flies) there was no good single source of information for Bezier curves on the web. So I made one. Sure it started small, but it turns out that if you just keep adding bits to something, several years later you have quite the monster, and a single HTML file becomes intractible.</p>
+<p>So, in 2016, when <a href="https://reactjs.org/">React.js</a> exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to maintain. Like, <em>a lot</em> a lot. However, there was a downside: no JS meant no content. Sure, server-side rendering sort of existed, but not really, and because the Primer is hosted through github, there was no "server" to run. Plus, trying to rehydrate an app the size of the Primer from a giant HTML file had truly <em>dire</em> performance.</p>
+<p>So I left it a regular React app, and every time I thought "wouldn't it be nice if it was just... a web page again?" the browser landscape just hadn't caught up. Finally, in 2020, things are different: with a global pandemic, and some vacation time, and something random causing me to look up the state of HTML custom elements, everything was pointing at it being time to finally, <em>finally</em>, turn the Primer back into a normal web page.</p>
+<p>The new tech stack is, frankly, pretty amazing. It does some things that weren't possible even half a year before I started the rewrite, let alone being possible in 2016, and so because so much has changed, this post will be the first in a series of posts on how the new tech stack works.</p>
+<p>To give a bit of a teaser, some of the things I'll be writing about:</p>
+<ul>
+<li>Essentially reinventing (a limited form of) Processing.js</li>
+<li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li>
+<li>Using modern ES module code that runs in both the browser and Node.js.</li>
+<li>Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.</li>
+<li>A custom <code>&lt;graphics-element&gt;</code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li>
+<li>...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images so that even without JS, graphics work.</li>
+</ul>
+<blockquote>
+    <graphics-element title="An example graphic" width="275" height="275" src="./news/example.js"  >
+        <fallback-image>
+          <span class="view-source">Scripts are disabled. Showing fallback image.</span>
+          <img width="275px" height="275px" src="./images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png" loading="lazy">
+          <label>An example graphic</label>
+        </fallback-image></graphics-element>
+</blockquote>
+
+<ul>
+<li>Real LaTeX code, that gets saved as <code>.tex</code> file, so it can be compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>:</li>
+</ul>
+<blockquote>
+<!--
+
            __ n=3                  n-k k
-B(t)     = ❯     \ P  \binomnk(1-t)   t                
+B(t)     = ❯     \ P  \binomnk(1-t)   t
-    cubic  ‾‾ k=0    
+    cubic  ‾‾ k=0
                     k
-                                                       
+
                    3            2             2       3
-         = P  (1-t)  + 3 P (1-t) t + 3P (1-t)t  + P  t 
+         = P  (1-t)  + 3 P (1-t) t + 3P (1-t)t  + P  t
-                                                    
+
             0             1            2           3
 -->
-				<img class="LaTeX SVG" src="./images/news/2020-09-18.html/15225da473048d8c7b5b473b89de0b66.svg" width="401px" height="97px" loading="lazy" />
+<img class="LaTeX SVG" src="./images/news/2020-09-18.html/15225da473048d8c7b5b473b89de0b66.svg" width="401px" height="97px" loading="lazy">
-			</blockquote>
+</blockquote>
 
-			<ul>
+<ul>
-				<li>"Lazy loaded everything", so that you get what you need, only when or even just before you need it.</li>
+<li>"Lazy loaded everything", so that you get what you need, only when or even just before you need it.</li>
-				<li>Localized content based on a simple filenaming scheme.</li>
+<li>Localized content based on a simple filenaming scheme.</li>
-				<li>Nicely formatted HTML, CSS, and JS thanks to <code>prettier</code>.</li>
+<li>Nicely formatted HTML, CSS, and JS thanks to <code>prettier</code>.</li>
-				<li>with some code formatting so that there are line numbers without needing JS:</li>
+<li>with some code formatting so that there are line numbers without needing JS:</li>
-			</ul>
+</ul>
 
-			<table class="code">
+    <table class="code"><tr><td>1</td><td rowspan="13">
-				<tr>
+          <textarea disabled rows="13" role="doc-example">let curve;
-					<td>1</td>
-					<td rowspan="13">
-						<textarea disabled rows="13" role="doc-example">
-let curve;
 
 setup() {
     curve = Bezier.defaultCubic();
@@ -214,68 +182,44 @@ draw() {
     clear(`lightblue`);
     curve.drawCurve();
     curve.drawPoints();
-}</textarea
+}</textarea>
-						>
+        </td></tr>
-					</td>
+<tr><td>2</td></tr>
-				</tr>
+<tr><td>3</td></tr>
-				<tr>
+<tr><td>4</td></tr>
-					<td>2</td>
+<tr><td>5</td></tr>
-				</tr>
+<tr><td>6</td></tr>
-				<tr>
+<tr><td>7</td></tr>
-					<td>3</td>
+<tr><td>8</td></tr>
-				</tr>
+<tr><td>9</td></tr>
-				<tr>
+<tr><td>10</td></tr>
-					<td>4</td>
+<tr><td>11</td></tr>
-				</tr>
+<tr><td>12</td></tr>
-				<tr>
+<tr><td>13</td></tr></table>
-					<td>5</td>
-				</tr>
-				<tr>
-					<td>6</td>
-				</tr>
-				<tr>
-					<td>7</td>
-				</tr>
-				<tr>
-					<td>8</td>
-				</tr>
-				<tr>
-					<td>9</td>
-				</tr>
-				<tr>
-					<td>10</td>
-				</tr>
-				<tr>
-					<td>11</td>
-				</tr>
-				<tr>
-					<td>12</td>
-				</tr>
-				<tr>
-					<td>13</td>
-				</tr>
-			</table>
 
-			<ul>
+<ul>
-				<li>Responsive CSS, so the content intelligently reflows where possible.</li>
+<li>Responsive CSS, so the content intelligently reflows where possible.</li>
-				<li>A "Live build" setup for working on the content and code.</li>
+<li>A "Live build" setup for working on the content and code.</li>
-				<li>Automatic link-checking to make sure none of the links in the Primer lead you to a 404.</li>
+<li>Automatic link-checking to make sure none of the links in the Primer lead you to a 404.</li>
-				<li>This "news" section, so that I can write posts to go along with new sections getting added, or notable changes being made.</li>
+<li>This "news" section, so that I can write posts to go along with new sections getting added, or notable changes being made.</li>
-			</ul>
+</ul>
-			<p>
+<p>It's going to take me a while to detail the entire tech stack, but ultimately what matters is that you get a Primer that is a normal "vanilla" HTML, CSS, and JS page again, that "just works" even with JS disabled.</p>
-				It's going to take me a while to detail the entire tech stack, but ultimately what matters is that you get a Primer that is a normal "vanilla"
+<p>Enjoy <a href="https://pomax.github.io/bezierinfo">The new Primer on Bézier Curves</a>, and if you find any problems, <a href="https://github.com/Pomax/BezierInfo-2/issues">you know where to go</a>.</p>
-				HTML, CSS, and JS page again, that "just works" even with JS disabled.
+<p>See you in the next post!</p>
-			</p>
+<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
-			<p>
-				Enjoy <a href="https://pomax.github.io/bezierinfo">The new Primer on Bézier Curves</a>, and if you find any problems,
-				<a href="https://github.com/Pomax/BezierInfo-2/issues">you know where to go</a>.
-			</p>
-			<p>See you in the next post!</p>
-			<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
-		</main>
 
-		<hr />
 
-		<footer class="copyright">This post is a news entry for the <a href="https://pomax.github.io/bezierinfo/">Primer on Bézier Curves</a></footer>
+  </main>
-	</body>
+
-</html>
+  <hr>
+
+  <footer class="copyright">
+
+  This post is a news entry for the <a href="https://pomax.github.io/bezierinfo/">Primer on Bézier Curves</a>
+
+  </footer>
+
+
+</body>
+
+</html>

docs/news/2020-11-22.html

@@ -1,143 +1,142 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>A Primer on Bézier Curves - Curve-circle intersections</title>
 
-		<base href=".." />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>A Primer on Bézier Curves - Curve-circle intersections</title>
 
-		<link rel="icon" href="images/favicon.png" type="image/png" />
+  <base href="..">
 
-		<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
+  <link rel="icon" href="images/favicon.png" type="image/png" />
 
-		<!-- page styling -->
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
-		<link rel="preload" href="images/paper.png" as="image" />
-		<style>
-			:root[lang="en-GB"] {
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				font-size: 18px;
-			}
-		</style>
 
-		<link rel="stylesheet" href="style.css" />
 
-		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
+  <!-- page styling -->
-		<meta name="description" content="Curve-circle intersections" />
+  <link rel="preload" href="images/paper.png" as="image" />
+  <style>
 
-		<!-- opengraph information -->
-		<meta property="og:title" content="Curve-circle intersections" />
-		<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-		<meta property="og:type" content="text" />
-		<meta property="og:url" content="https://pomax.github.io/bezierinfo/news/2020-11-22.html" />
-		<meta property="og:description" content="Curve-circle intersections" />
-		<meta property="og:locale" content="en-GB" />
-		<meta property="og:type" content="article" />
-		<meta property="og:published_time" content="Sun Nov 22 2020 00:00:00 +00:00" />
-		<meta property="og:updated_time" content="Sat Jan 08 2022 18:19:49 +00:00" />
-		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
-		<meta property="og:section" content="Bézier Curves" />
-		<meta property="og:tag" content="Bézier Curves" />
 
-		<!-- twitter card information -->
+    :root[lang="en-GB"] {
-		<meta name="twitter:card" content="summary" />
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-		<meta name="twitter:site" content="@TheRealPomax" />
+        font-size: 18px;
-		<meta name="twitter:creator" content="@TheRealPomax" />
+    }
-		<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-		<meta name="twitter:url" content="https://pomax.github.io/bezierinfo/news/" />
-		<meta name="twitter:description" content="Curve-circle intersections" />
 
-		<!-- my own referral/page hit tracker, because Google knows enough -->
-		<script src="./js/site/referrer.js" type="module" async></script>
 
-		<!--
+</style>
+
+  <link rel="stylesheet" href="style.css" />
+
+  <!-- And a slew of SEO related meta elements, because being discoverable is important -->
+<meta name="description" content="Curve-circle intersections" />
+
+<!-- opengraph information -->
+<meta property="og:title" content="Curve-circle intersections" />
+<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta property="og:type" content="text" />
+<meta property="og:url" content="https://pomax.github.io/bezierinfo/news/2020-11-22.html" />
+<meta property="og:description" content="Curve-circle intersections" />
+<meta property="og:locale" content="en-GB" />
+<meta property="og:type" content="article" />
+<meta property="og:published_time" content="Sun Nov 22 2020 09:00:00 +00:00" />
+<meta property="og:updated_time" content="Sun Jan 09 2022 03:27:20 +00:00" />
+<meta property="og:author" content="Mike 'Pomax' Kamermans" />
+<meta property="og:section" content="Bézier Curves" />
+<meta property="og:tag" content="Bézier Curves" />
+
+<!-- twitter card information -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@TheRealPomax" />
+<meta name="twitter:creator" content="@TheRealPomax" />
+<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta name="twitter:url" content="https://pomax.github.io/bezierinfo/news/" />
+<meta name="twitter:description" content="Curve-circle intersections" />
+
+
+
+  <!-- my own referral/page hit tracker, because Google knows enough -->
+  <script src="./js/site/referrer.js" type="module" async></script>
+
+  <!--
           The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
           Note that we're not defering this: we just want it to kick in as soon as possible, and
           given how much HTML there is, that means this can, and thus should, kick in before the
           document is done even transferring.
         -->
-		<script src="./js/graphics-element/graphics-element.js" type="module" async></script>
+  <script src="./js/graphics-element/graphics-element.js" type="module" async></script>
-		<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
+  <link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
 
-		<!-- make images lazy load much earlier  -->
+  <!-- make images lazy load much earlier  -->
-		<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
+  <script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
-	</head>
 
-	<body>
+</head>
-		<div class="dev" style="display: none;">
-			DEV PREVIEW ONLY
-			<script>
-				(function () {
-					var loc = window.location.toString();
-					if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
-						var e = document.querySelector("div.dev");
-						e.removeAttribute("style");
-					}
-				})();
-			</script>
-		</div>
 
-		<div class="github">
+<body>
-			<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
+  <div class="dev" style="display:none;">
-			<map name="githubmap">
+    DEV PREVIEW ONLY
-				<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    <script>
-			</map>
+        (function () {
-		</div>
+            var loc = window.location.toString();
+            if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
+                var e = document.querySelector('div.dev');
+                e.removeAttribute("style");
+            }
+        }());
+    </script>
+</div>
 
-		<header>
+  <div class="github">
-			<h1>Curve-circle intersections</h1>
+    <img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
-			<h5 class="post-date">Sun, 22 Nov 2020</h5>
+    <map name="githubmap">
-		</header>
+        <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    </map>
+</div>
 
-		<main>
-			<!-- Because people probably want to share this article -->
-			<div class="notforprint scl">
-				<img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
-				<map name="rhtimap">
-					<area
-						class="sclnk-rdt"
-						shape="rect"
-						coords="0, 0, 19, 15"
-						href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo/news/2020-11-22.html&title==A Primer on Bézier Curves - Curve-circle intersections&text=An update about the Primer on Bézier curves."
-						alt="submit to reddit"
-						title="submit to reddit"
-					/>
-					<area
-						class="sclnk-hn"
-						shape="rect"
-						coords="0, 20, 19, 35"
-						href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo/news/2020-11-22.html&t=A Primer on Bézier Curves - Curve-circle intersections"
-						alt="submit to hacker news"
-						title="submit to hacker news"
-					/>
-					<area
-						class="sclnk-twt"
-						shape="rect"
-						coords="0, 40, 19, 55"
-						href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading “Curve-circle intersections” by @TheRealPomax over on https://pomax.github.io/bezierinfo/news/2020-11-22.html"
-						alt="tweet your read"
-						title="tweet your read"
-					/>
-				</map>
-			</div>
 
-			<p>
-				While the primer covered line/line, line/curve, and curve/curve intersections, there was one other obvious intersection conspicuously missing:
-				circle/curve intersections. You'd think those were just an extension on the maths used for the other three, but unfortunately, this is not the
-				case. Rather than using calculus, the only real way to determine where a polynomial curve intersects it is to sample the curve at a resolution
-				high enough to find you intervals on the curve where there likely is an intersection, then refining that interval until you find actual
-				intersections.
-			</p>
-			<p>
-				It is, in fact, rather similar to <a href="https://pomax.github.io/bezierinfo/#projections">projecting a point onto a bezier curve</a> where
-				the point is the circle's center, and where the projection distance actually needs to match the circle radius, so:
-				<a href="https://pomax.github.io/bezierinfo/#circleintersection">let's see how to do that</a>!
-			</p>
-			<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
-		</main>
 
-		<hr />
+  <header>
 
-		<footer class="copyright">This post is a news entry for the <a href="https://pomax.github.io/bezierinfo/">Primer on Bézier Curves</a></footer>
+  <h1>Curve-circle intersections</h1>
-	</body>
+  <h5 class="post-date">Sun, 22 Nov 2020</h5>
-</html>
+
+  </header>
+
+  <main>
+
+  <!-- Because people probably want to share this article -->
+<div class="notforprint scl">
+    <img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
+    <map name="rhtimap">
+        <area class="sclnk-rdt" shape="rect" coords="0, 0, 19, 15"
+            href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo/news/2020-11-22.html&title==A Primer on Bézier Curves - Curve-circle intersections&text=An update about the Primer on Bézier curves."
+            alt="submit to reddit" title="submit to reddit">
+        <area class="sclnk-hn" shape="rect" coords="0, 20, 19, 35"
+            href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo/news/2020-11-22.html&t=A Primer on Bézier Curves - Curve-circle intersections"
+            alt="submit to hacker news" title="submit to hacker news">
+        <area class="sclnk-twt" shape="rect" coords="0, 40, 19, 55"
+            href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading “Curve-circle intersections” by @TheRealPomax over on https://pomax.github.io/bezierinfo/news/2020-11-22.html"
+            alt="tweet your read" title="tweet your read">
+    </map>
+</div>
+
+
+<p>While the primer covered line/line, line/curve, and curve/curve intersections, there was one other obvious intersection conspicuously missing: circle/curve intersections. You'd think those were just an extension on the maths used for the other three, but unfortunately, this is not the case. Rather than using calculus, the only real way to determine where a polynomial curve intersects it is to sample the curve at a resolution high enough to find you intervals on the curve where there likely is an intersection, then refining that interval until you find actual intersections.</p>
+<p>It is, in fact, rather similar to <a href="https://pomax.github.io/bezierinfo/#projections">projecting a point onto a bezier curve</a> where the point is the circle's center, and where the projection distance actually needs to match the circle radius, so: <a href="https://pomax.github.io/bezierinfo/#circleintersection">let's see how to do that</a>!</p>
+<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
+
+
+  </main>
+
+  <hr>
+
+  <footer class="copyright">
+
+  This post is a news entry for the <a href="https://pomax.github.io/bezierinfo/">Primer on Bézier Curves</a>
+
+  </footer>
+
+
+</body>
+
+</html>

docs/news/index.html

@@ -1,113 +1,138 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>A Primer on Bézier Curves - News</title>
 
-		<base href=".." />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>A Primer on Bézier Curves - News</title>
 
-		<link rel="icon" href="images/favicon.png" type="image/png" />
+  <base href="..">
 
-		<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
+  <link rel="icon" href="images/favicon.png" type="image/png" />
 
-		<!-- page styling -->
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
-		<link rel="preload" href="images/paper.png" as="image" />
-		<style>
-			:root[lang="en-GB"] {
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				font-size: 18px;
-			}
-		</style>
 
-		<link rel="stylesheet" href="style.css" />
 
-		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
+  <!-- page styling -->
-		<meta name="description" content="" />
+  <link rel="preload" href="images/paper.png" as="image" />
+  <style>
 
-		<!-- opengraph information -->
-		<meta property="og:title" content="" />
-		<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-		<meta property="og:type" content="text" />
-		<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
-		<meta property="og:description" content="" />
-		<meta property="og:locale" content="en-GB" />
-		<meta property="og:type" content="article" />
-		<meta property="og:published_time" content="Sat Jan 08 2022 18:19:49 GMT+0000 (Coordinated Universal Time)" />
-		<meta property="og:updated_time" content="" />
-		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
-		<meta property="og:section" content="Bézier Curves" />
-		<meta property="og:tag" content="Bézier Curves" />
 
-		<!-- twitter card information -->
+    :root[lang="en-GB"] {
-		<meta name="twitter:card" content="summary" />
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-		<meta name="twitter:site" content="@TheRealPomax" />
+        font-size: 18px;
-		<meta name="twitter:creator" content="@TheRealPomax" />
+    }
-		<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
-		<meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
-		<meta name="twitter:description" content="" />
 
-		<!-- my own referral/page hit tracker, because Google knows enough -->
-		<script src="./js/site/referrer.js" type="module" async></script>
 
-		<!--
+</style>
+
+  <link rel="stylesheet" href="style.css" />
+
+  <!-- And a slew of SEO related meta elements, because being discoverable is important -->
+<meta name="description" content="" />
+
+<!-- opengraph information -->
+<meta property="og:title" content="" />
+<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta property="og:type" content="text" />
+<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
+<meta property="og:description" content="" />
+<meta property="og:locale" content="en-GB" />
+<meta property="og:type" content="article" />
+<meta property="og:published_time" content="Sun Jan 09 2022 03:27:20 GMT+0900 (Korean Standard Time)" />
+<meta property="og:updated_time" content="" />
+<meta property="og:author" content="Mike 'Pomax' Kamermans" />
+<meta property="og:section" content="Bézier Curves" />
+<meta property="og:tag" content="Bézier Curves" />
+
+<!-- twitter card information -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@TheRealPomax" />
+<meta name="twitter:creator" content="@TheRealPomax" />
+<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
+<meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
+<meta name="twitter:description" content="" />
+
+
+
+  <!-- my own referral/page hit tracker, because Google knows enough -->
+  <script src="./js/site/referrer.js" type="module" async></script>
+
+  <!--
           The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
           Note that we're not defering this: we just want it to kick in as soon as possible, and
           given how much HTML there is, that means this can, and thus should, kick in before the
           document is done even transferring.
         -->
-		<script src="./js/graphics-element/graphics-element.js" type="module" async></script>
+  <script src="./js/graphics-element/graphics-element.js" type="module" async></script>
-		<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
+  <link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
 
-		<!-- make images lazy load much earlier  -->
+  <!-- make images lazy load much earlier  -->
-		<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
+  <script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
-	</head>
 
-	<body>
+</head>
-		<div class="dev" style="display: none;">
-			DEV PREVIEW ONLY
-			<script>
-				(function () {
-					var loc = window.location.toString();
-					if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
-						var e = document.querySelector("div.dev");
-						e.removeAttribute("style");
-					}
-				})();
-			</script>
-		</div>
 
-		<div class="github">
+<body>
-			<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
+  <div class="dev" style="display:none;">
-			<map name="githubmap">
+    DEV PREVIEW ONLY
-				<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    <script>
-			</map>
+        (function () {
-		</div>
+            var loc = window.location.toString();
+            if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
+                var e = document.querySelector('div.dev');
+                e.removeAttribute("style");
+            }
+        }());
+    </script>
+</div>
 
-		<header>
+  <div class="github">
-			<h1>News posts</h1>
+    <img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
-		</header>
+    <map name="githubmap">
+        <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
+    </map>
+</div>
 
-		<main>
-			<p>
-				Every now and then the Primer gets updated - these posts chronicle the evolution of the site, and hopefully offer interesting information not
-				just about the process of maintaining a resource like this, but also neat tech tricks, implementation approaches, maths that didn't make it
-				into the primer itself, etc.
-			</p>
 
-			<p>
-				This section is still very new, so for the moment there aren't all that many posts up yet, but there's a series of posts planned already, and
-				if you're the kind of person who likes to keep tabs on updates by using RSS: good news, <a href="news/rss.xml">have an RSS link!</a>.
-			</p>
 
-			<ul>
+  <header>
-				<li><a href="news/2020-09-18.html">Rewriting the tech stack</a> (Fri, 18 Sep 2020)</li>
-				<li><a href="news/2020-11-22.html">Curve-circle intersections</a> (Sun, 22 Nov 2020)</li>
-			</ul>
-		</main>
 
-		<hr />
+  <h1>News posts</h1>
 
-		<footer class="copyright">This post is a news entry for the <a href="..">Primer on Bézier Curves</a></footer>
+  </header>
-	</body>
+
-</html>
+  <main>
+
+<p>
+  Every now and then the Primer gets updated - these posts chronicle the evolution of the site,
+  and hopefully offer interesting information not just about the process of maintaining a resource
+  like this, but also neat tech tricks, implementation approaches, maths that didn't make it into
+  the primer itself, etc.
+</p>
+
+<p>
+  This section is still very new, so for the moment there aren't all that many posts up yet, but
+  there's a series of posts planned already, and if you're the kind of person who likes to keep
+  tabs on updates by using RSS: good news, <a href="news/rss.xml">have an RSS link!</a>.
+</p>
+
+<ul>
+  <li><a href="news/2020-09-18.html">Rewriting the tech stack</a> (Fri, 18 Sep 2020) </li>
+<li><a href="news/2020-11-22.html">Curve-circle intersections</a> (Sun, 22 Nov 2020) </li>
+
+</ul>
+
+  </main>
+
+  <hr>
+
+  <footer class="copyright">
+
+  This post is a news entry for the <a href="..">Primer on Bézier Curves</a>
+
+  </footer>
+
+
+</body>
+
+</html>

docs/news/rss.xml

@@ -6,7 +6,7 @@
   <atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
   <description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
   <language>en-GB</language>
-  <lastBuildDate>Sat Jan 08 2022 18:19:49 +00:00</lastBuildDate>
+  <lastBuildDate>Sun Jan 09 2022 03:27:20 +00:00</lastBuildDate>
   <image>
     <url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
     <title>A Primer on Bézier Curves</title>
@@ -17,19 +17,19 @@
     <title>Curve-circle intersections</title>
     <link>https://pomax.github.io/bezierinfo/news/2020-11-22.html</link>
     <description>
-    
+
 &lt;p&gt;While the primer covered line/line, line/curve, and curve/curve intersections, there was one other obvious intersection conspicuously missing: circle/curve intersections. You&#39;d think those were just an extension on the maths used for the other three, but unfortunately, this is not the case. Rather than using calculus, the only real way to determine where a polynomial curve intersects it is to sample the curve at a resolution high enough to find you intervals on the curve where there likely is an intersection, then refining that interval until you find actual intersections.&lt;/p&gt;
 &lt;p&gt;It is, in fact, rather similar to &lt;a href=&quot;https://pomax.github.io/bezierinfo/#projections&quot;&gt;projecting a point onto a bezier curve&lt;/a&gt; where the point is the circle&#39;s center, and where the projection distance actually needs to match the circle radius, so: &lt;a href=&quot;https://pomax.github.io/bezierinfo/#circleintersection&quot;&gt;let&#39;s see how to do that&lt;/a&gt;!&lt;/p&gt;
 &lt;p&gt;— &lt;a href=&quot;https://twitter.com/TheRealPomax&quot;&gt;Pomax&lt;/a&gt;&lt;/p&gt;
 
     </description>
-    <pubDate>Sun Nov 22 2020 00:00:00 +00:00</pubDate>
+    <pubDate>Sun Nov 22 2020 09:00:00 +00:00</pubDate>
     <guid>2020-11-22.html</guid>
   </item><item>
     <title>Rewriting the tech stack</title>
     <link>https://pomax.github.io/bezierinfo/news/2020-09-18.html</link>
     <description>
-    
+
 &lt;p&gt;Once upon a time, I needed to draw some Bezier curves because I was trying to create a Japanese kanji composition system that turned strokes into outlines, and that required knowing how to offset Bezier curves and... at the time (2011, time flies) there was no good single source of information for Bezier curves on the web. So I made one. Sure it started small, but it turns out that if you just keep adding bits to something, several years later you have quite the monster, and a single HTML file becomes intractible.&lt;/p&gt;
 &lt;p&gt;So, in 2016, when &lt;a href=&quot;https://reactjs.org/&quot;&gt;React.js&lt;/a&gt; exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to maintain. Like, &lt;em&gt;a lot&lt;/em&gt; a lot. However, there was a downside: no JS meant no content. Sure, server-side rendering sort of existed, but not really, and because the Primer is hosted through github, there was no &quot;server&quot; to run. Plus, trying to rehydrate an app the size of the Primer from a giant HTML file had truly &lt;em&gt;dire&lt;/em&gt; performance.&lt;/p&gt;
 &lt;p&gt;So I left it a regular React app, and every time I thought &quot;wouldn&#39;t it be nice if it was just... a web page again?&quot; the browser landscape just hadn&#39;t caught up. Finally, in 2020, things are different: with a global pandemic, and some vacation time, and something random causing me to look up the state of HTML custom elements, everything was pointing at it being time to finally, &lt;em&gt;finally&lt;/em&gt;, turn the Primer back into a normal web page.&lt;/p&gt;
@@ -57,15 +57,15 @@
 &lt;/ul&gt;
 &lt;blockquote&gt;
 &lt;!--
- 
+
            __ n=3                  n-k k
-B(t)     = ❯     \ P  \binomnk(1-t)   t                
+B(t)     = ❯     \ P  \binomnk(1-t)   t
-    cubic  ‾‾ k=0    
+    cubic  ‾‾ k=0
                     k
-                                                       
+
                    3            2             2       3
-         = P  (1-t)  + 3 P (1-t) t + 3P (1-t)t  + P  t 
+         = P  (1-t)  + 3 P (1-t) t + 3P (1-t)t  + P  t
-                                                    
+
             0             1            2           3
 --&gt;
 &lt;img class=&quot;LaTeX SVG&quot; src=&quot;./images/news/2020-09-18.html/15225da473048d8c7b5b473b89de0b66.svg&quot; width=&quot;401px&quot; height=&quot;97px&quot; loading=&quot;lazy&quot;&gt;
@@ -105,7 +105,7 @@ draw() {
 &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;13&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
-  
+
 &lt;ul&gt;
 &lt;li&gt;Responsive CSS, so the content intelligently reflows where possible.&lt;/li&gt;
 &lt;li&gt;A &quot;Live build&quot; setup for working on the content and code.&lt;/li&gt;
@@ -118,7 +118,7 @@ draw() {
 &lt;p&gt;— &lt;a href=&quot;https://twitter.com/TheRealPomax&quot;&gt;Pomax&lt;/a&gt;&lt;/p&gt;
 
     </description>
-    <pubDate>Fri Sep 18 2020 00:00:00 +00:00</pubDate>
+    <pubDate>Fri Sep 18 2020 09:00:00 +00:00</pubDate>
     <guid>2020-09-18.html</guid>
   </item>
 </channel>