info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-29 19:20:39 +02:00
Code Issues Releases Wiki Activity

[ko-KR] Preface translation (#335)

Browse Source 
* Translate preface into ko-KR
This commit is contained in:
잇창명
2022-01-04 08:30:35 +09:00
committed by GitHub
parent bd6110f618
commit ce1ee672a4
14 changed files with 23935 additions and 42375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/chapters/preface/content.ko-KR.md Normal file
View File

@@ -0,0 +1,39 @@
# 머리말
2D에 그림을 그리려면 보통 선을 사용하고, 선이라고 하면 직선과 곡선의 두 종류로 나뉩니다. 전자는 컴퓨터에게 그리기를 시킬 줄 안다면 쉽게 그릴 수 있습니다. 시작점과 끝점만 입력하면 짜잔! 직선이 나왔습니다. 어렵지 않죠.
하지만 곡선은 훨씬 까다롭습니다. 손그림으로는 곡선 그리기가 그렇게 쉬울 수 없었겠지만, 컴퓨터는 곡선을 어떻게 그릴지 기술하는 수학적 함수 없이 곡선을 그릴 수 없다는 제한이 있습니다. 실은 직선을 그릴 때조차도 함수가 필요하지만, 어차피 직선의 함수는 간단하니 컴퓨터를 사용할 때는 보통 이 사실을 무시합니다. 직선이든 곡선이든 모든 선은 "함수"입니다. 그러나 선 그리기에 함수가 필요하기에, 빠르게 계산할 수 있고 컴퓨터로 그렸을 때 보기도 좋은 함수를 만들어야 할 필요성이 생깁니다. 이런 함수는 여러 종류가 있는데, 이 글에서 다룰 것은 이 중 많은 주목을 받고 곡선을 그릴 수 있으면 어디서나 쓰이는 것, 바로 베지에 곡선입니다.
베지에 곡선이라는 이름은 이 곡선이 설계 작업을 하기에 좋다고 세상에 알린 [피에르 베지에](https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier)의 이름을 땄지만(1962년에 르노 소속으로서 연구 결과를 발표함), 베지에가 이 곡선을 "발명"한 최초의, 혹은 유일한 사람은 아닙니다. 베지에 곡선을 처음 발견한 사람은 1959년에 시트로엥에서 일하면서 이 곡선의 성질을 연구하고 이 곡선을 그리는 정말 우아한 방법을 찾아낸 [폴 드 카스텔죠](https://en.wikipedia.org/wiki/Paul_de_Casteljau)라고 하는 경우도 있습니다. 그러나 드 카스텔죠는 본인의 연구 결과를 발표하지 않았기 때문에 누가 먼저인지를 단언하기는 어렵습니다... 정말일까요? 사실 베지에 곡선은 근본적으로 "베른시테인 다항식"으로, [세르게이 나타노비치 베른시테인](https://ko.wikipedia.org/wiki/%EC%84%B8%EB%A5%B4%EA%B2%8C%EC%9D%B4_%EB%82%98%ED%83%80%EB%85%B8%EB%B9%84%EC%B9%98_%EB%B2%A0%EB%A5%B8%EC%8B%9C%ED%85%8C%EC%9D%B8)이 연구하여 자그마치 1912년에 발표한 수학적 함수의 집합입니다.
아무튼 위의 내용은 잡설이었고, 독자가 관심을 가질 만한 내용은 이 곡선이 편리하다는 것입니다. 여러 개의 베지에 곡선을 연결해서 하나의 곡선처럼 보이게 만들 수도 있습니다. 포토샵에서 패스를 한 번이라도 그려봤거나, 플래시, 일러스트레이터, 잉크스케이프 등 벡터 드로잉 프로그램을 써본 적이 있다면, 이 프로그램에서 그동안 그리던 곡선이 전부 베지에 곡선입니다.
그런데 이를 직접 프로그래밍하려면 어떻게 해야 할까요? 함정이 어디에 도사리고 있을까요? 곡선의 바운딩 박스는 어떻게 구하고, 교차 판정은 어떻게 하고, 밖으로 튀어나오게는 어떻게 하고... 간단히 말해서, 이 곡선으로 할 만한 온갖 것들을 어떻게 하는 것이 좋을까요? 그것이 바로 이 책의 존재 이유입니다. 수학 할 준비 되셨나요?
<div class="note">
## 거의 모든 베지에 그래픽이 인터랙티브입니다.
이 페이지에서는 [Bezier.js](https://pomax.github.io/bezierjs/)를 사용하여 인터랙티브 예제를 제공하며, 수학 공식은 [XeLaTeX](https://ctan.org/pkg/xetex) 조판 체계를 이용해 조판하고 [David Barton](https://cityinthesky.co.uk/)님의 [pdf2svg](https://github.com/dawbarton/pdf2svg)를 이용해 SVG로 변환하여 표시하고 있습니다.
## 이 책은 오픈 소스입니다.
이 책은 오픈 소스 소프트웨어 프로젝트의 일환으로, 소스 코드가 GitHub 레포지토리 두 곳에 보관되어 있습니다. 하나는 [https://github.com/pomax/bezierinfo](https://github.com/pomax/bezierinfo)로, 지금 읽고 계시는 완전히 공개용인 버전입니다. 다른 하나는 개발 버전인 [https://github.com/pomax/BezierInfo-2](https://github.com/pomax/BezierInfo-2)로 _웹 버전으로 변환되는_ 코드가 보관되어 있습니다. 버그를 찾아서 제보하려고 하거나 입문서의 내용을 수정하거나 추가할 아이디어가 있다면 이곳으로 보내 주세요.
## 이 책의 수식은 얼마나 어렵나요?
입문서에 등장하는 대부분의 수식은 고등학교 수준입니다. 기본적인 산수 계산을 할 수 있고 영어를 읽을 줄 안다면 대부분 이해할 수 있을 정도입니다. *훨씬* 어려운 수식도 가끔 등장하지만, 너무 어려워 보이는 상자 안의 세부 내용을 건너뛰거나, 읽고 있는 장의 끝으로 건너뛰어도 좋습니다. 각 장의 끝에는 도출된 값만 활용할 수 있도록 결론을 단순 나열합니다.
## 예제 코드는 무슨 언어로 되어 있나요?
특정한 프로그래밍 언어 하나를 선호하기에는 프로그래밍 언어가 너무 많기 때문에, 입문서에 수록된 모든 예제는 JS나 Python 등 현대적인 스크립트 언어와 문법이 어느 정도 비슷하지만 같지는 않은 의사코드로 작성했습니다. 그렇기 때문에 예제 코드를 생각 없이 복사해서 쓸 수 없지만, 이는 의도적인 결정입니다. 이 입문서를 보고 계시는 것은 웬만하면 *배우기 위해서*이고, 배움은 복붙으로 이루어지지 않죠. 학습은 무언가를 직접 해 보고, _실수를 하며_, 그 실수를 고치면서 이루어집니다. 독자들이 실수를 하라고 일부러 예제 코드에 오류를 넣는다거나 하는 것은 당연히 아니지만(그건 끔찍하겠죠!), 어떤 한 프로그래밍 언어에 편중된 코드는 _의도적으로_ 지양하고 있습니다. 절차적 프로그래밍 언어를 하나라도 알고 있다면 예제 코드를 읽는 데는 전혀 어려움이 없으니 걱정은 하지 말아주세요.
## 질문이나 의견이 있다면
새로운 장을 제안하고 싶다면, [GitHub 이슈 트래커](https://github.com/pomax/BezierInfo-2/issues)를 찾아 주세요(오른쪽 위에 링크한 레포지토리에서도 확인할 수 있습니다). 코드 재작성이 끝날 때까지는 댓글창이 없을 예정이지만, 내용에 대한 질문이 있다면 역시 이슈 트래커를 이용할 수 있습니다. 재작성을 마치면 내용 전반에 대한 댓글창을 추가하고, 확실치는 않지만 아마 "이 부분을 마우스로 선택하고 질문 버튼을 눌러서 질문하기" 시스템을 만들 수도 있겠습니다.
## 이 책을 지원해 주세요!
이 책을 재미있게 읽었거나 하려고 했던 작업에 도움이 되었고, 제게 고마움을 표하고 싶다면 두 가지 방법이 있습니다. 이 책의 [Patreon 페이지](https://www.patreon.com/bezierinfo)에서 정기 후원을 하거나, 일회성 후원을 하고 싶다면 [buy Pomax a coffee](https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA) 페이지를 찾아 주세요. 이 책은 지난 몇 년 동안 베지에 곡선에 관한 조그마한 입문서에서 종이책 100페이지짜리 교재로 커졌고, 책을 쓰면서 수백 잔의 커피가 들었습니다. 저는 이 책을 쓰게 된 것이 전혀 후회되지 않지만, 약간의 커피만 더 있으면 집필을 이어나갈 수 있겠죠!
</div>

BIN
docs/fonts/noto-sans-korean-regular.woff Normal file
View File

Binary file not shown.

10703
docs/index.html generated
View File

File diff suppressed because it is too large Load Diff

10985
docs/ja-JP/index.html generated
View File

File diff suppressed because it is too large Load Diff

5640
docs/ko-KR/index.html generated Normal file
View File

File diff suppressed because it is too large Load Diff

402
docs/news/2020-09-18.html
View File

@@ -1,181 +1,153 @@
<!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="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="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<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" />
<!-- page styling -->
<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="Sun Jan 02 2022 16:41:32 +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" />
:root[lang="en-GB"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
<!-- 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="Tue Jan 04 2022 03:29:08 +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>
<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
<script src="./js/graphics-element/graphics-element.js" type="module" async></script>
<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
<body>
<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>
</head>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
<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>
<body>
<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>
<header>
<h1>Rewriting the tech stack</h1>
<h5 class="post-date">Fri, 18 Sep 2020</h5>
</header>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
<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>
<!-- 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>
<!--
<header>
<h1>Rewriting the tech stack</h1>
<h5 class="post-date">Fri, 18 Sep 2020</h5>
</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-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>
<!--
\setmainfont[Ligatures=TeX]TeX Gyre Pagella \setmathfontTeX Gyre Pagella Math
__ n=3 n-k k
@@ -188,22 +160,18 @@
0 1 2 3
-->
<img class="LaTeX SVG" src="./images/news/2020-09-18.html/15225da473048d8c7b5b473b89de0b66.svg" width="401px" height="97px" loading="lazy" />
</blockquote>
<img class="LaTeX SVG" src="./images/news/2020-09-18.html/15225da473048d8c7b5b473b89de0b66.svg" width="401px" height="97px" loading="lazy">
</blockquote>
<ul>
<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>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>
</ul>
<ul>
<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>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>
</ul>
<table class="code">
<tr>
<td>1</td>
<td rowspan="13">
<textarea disabled rows="13" role="doc-example">
let curve;
<table class="code"><tr><td>1</td><td rowspan="13">
<textarea disabled rows="13" role="doc-example">let curve;
setup() {
curve = Bezier.defaultCubic();
@@ -215,68 +183,44 @@ draw() {
clear(`lightblue`);
curve.drawCurve();
curve.drawPoints();
}</textarea
>
</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<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>
}</textarea>
</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><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>
<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>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>
</ul>
<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>
<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>
<ul>
<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>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>
</ul>
<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>
<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>
<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>
</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>

233
docs/news/2020-11-22.html
View File

@@ -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="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="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<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" />
<!-- page styling -->
<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="Sun Jan 02 2022 16:41:32 +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" />
:root[lang="en-GB"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
<!-- 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="Tue Jan 04 2022 03:29:08 +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>
<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
<script src="./js/graphics-element/graphics-element.js" type="module" async></script>
<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
<body>
<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>
</head>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
<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>
<body>
<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>
<header>
<h1>Curve-circle intersections</h1>
<h5 class="post-date">Sun, 22 Nov 2020</h5>
</header>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
<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>
<!-- 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>
<h1>Curve-circle intersections</h1>
<h5 class="post-date">Sun, 22 Nov 2020</h5>
</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>
<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>

197
docs/news/index.html generated
View File

@@ -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="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="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<link rel="stylesheet" href="style.css" />
<!-- And a slew of SEO related meta elements, because being discoverable is important -->
<meta name="description" content="" />
<!-- page styling -->
<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="Sun Jan 02 2022 16:41:32 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 -->
<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="" />
:root[lang="en-GB"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
<!-- 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="Tue Jan 04 2022 03:29:08 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>
<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
<script src="./js/graphics-element/graphics-element.js" type="module" async></script>
<link rel="stylesheet" href="./js/graphics-element/graphics-element.css" />
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
<body>
<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>
</head>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
<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>
<body>
<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>
<header>
<h1>News posts</h1>
</header>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
<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>
<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>
<header>
<hr />
<h1>News posts</h1>
</header>
<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>
<footer class="copyright">This post is a news entry for the <a href="..">Primer on Bézier Curves</a></footer>
</body>
</html>

6
docs/news/rss.xml
View File

@@ -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>Sun Jan 02 2022 16:41:32 +00:00</lastBuildDate>
<lastBuildDate>Tue Jan 04 2022 03:29:08 +00:00</lastBuildDate>
<image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title>
@@ -23,7 +23,7 @@
&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>
@@ -119,7 +119,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>

11233
docs/ru-RU/index.html generated
View File

File diff suppressed because it is too large Load Diff

11193
docs/uk-UA/index.html generated
View File

File diff suppressed because it is too large Load Diff

10954
docs/zh-CN/index.html generated
View File

File diff suppressed because it is too large Load Diff

12
src/html/fragments/fonts.html
View File

@@ -32,6 +32,18 @@
font-size: 17.4px;
}
{% elif locale == "ko-KR" %}
@font-face {
font-family: "Noto Sans Korean";
src: url(./fonts/noto-sans-korean-regular.woff) format("WOFF");
}
:root[lang="{{ locale }}"] {
font-family: "Noto Sans Korean", "맑은 고딕", Helvetica, Arial, sans-serif;
font-size: 17.2px;
}
{% else %}
:root {

31
src/locale-strings.js
View File

@@ -5,18 +5,21 @@ const localeStringData = {
"zh-CN": `贝塞尔曲线底漆`,
"ru-RU": `Основы кривых Безье`,
"uk-UA": `Підручник з кривих Безьє`,
"ko-KR": `베지에 곡선 입문`,
},
subtitle: {
"en-GB": `A free, online book for when you really need to know how to do Bézier things.`,
"ru-RU": `Бесплатная онлайн-книга для тех, кому действительно важно знать, как работают кривые Безье`,
"uk-UA": `Безкоштовна онлайн-книга, яка навчить вас всьому необхідному, щоб працювати з кривими Безьє.`,
"ko-KR": `베지에 곡선이 꼭 필요할 때 읽기 좋은 무료 온라인 서적.`,
},
description: {
"en-GB": `A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.`,
"ru-RU": `Подробное обьяснение кривых Безье и возможностей их применения`,
"uk-UA": `Детальне пояснення кривих Безьє та можливостей їх застосування.`,
"ko-KR": `베지에 곡선에 대한 자세한 설명과 베지에 곡선으로 할 만한 여러 가지 것들을 어떻게 할 수 있는지를 다룹니다.`,
},
longDescription: {
@@ -55,11 +58,23 @@ const localeStringData = {
якщо вас цікавить щось, пов'язане з кривими Безьє, чого немає у підручнику.
</p>
`,
"ko-KR": `
<p>
베지에 곡선 입문서에 오신 것을 환영합니다. 이곳은 베지에 곡선의 수학과 프로그래밍을
모두 다루는 무료 웹사이트/eBook으로, 포토샵 패스부터 CSS easing 함수와 글꼴 테두리까지
어느 곳에서든 튀어나오는 바로 그 곡선을 다루고 그리는 데 대한 다양한 주제를 다룹니다.
</p>
<p>
이 책은 처음인가요? 어서 오세요! 이 입문서에 없는 것 중 꼭 다루었으면 좋겠는 것이 있다면
<a href="https://github.com/Pomax/BezierInfo-2/issues">이슈 트래커</a>로 의견을 나누어 주세요!
</p>
`,
},
donationsHeading: {
"en-GB": `Donations and sponsorship`,
"ru-RU": `Пожертвования и спонсорство`,
"ko-KR": `기부와 후원`,
},
donationCTA: {
@@ -132,6 +147,7 @@ const localeStringData = {
"zh-CN": `目录`,
"ru-RU": `Оглавление`,
"uk-UA": `Зміст`,
"ko-KR": `목차`,
},
localeName: {
@@ -140,24 +156,28 @@ const localeStringData = {
"zh-CN": `中文`,
"ru-RU": `Русский`,
"uk-UA": `Українська`,
"ko-KR": `한국어`,
},
langSwitchLabel: {
"en-GB": `Read this in your own language:`,
"ru-RU": `Читайте на своём языке:`,
"uk-UA": `Читати рідною мовою:`,
"ko-KR": `다른 언어로 읽기:`,
},
langHelpLabel: {
"en-GB": `Don't see your language listed, or want to see it reach 100%? <a href="https://github.com/Pomax/BezierInfo-2/wiki/help-localize-the-primer-on-bezier-curves">Help translate this content!</a>`,
"ru-RU": `Не нашли свой язык или хотите, чтобы он достиг до 100%? <a href="https://github.com/Pomax/BezierInfo-2/wiki/help-localize-the-primer-on-bezier-curves">Помогите нам с переводом!</a>`,
"uk-UA": `Не бачите своєї мови у списку або хочете, щоб вона досягла 100%? <a href="https://github.com/Pomax/BezierInfo-2/wiki/help-localize-the-primer-on-bezier-curves">Допоможіть перекласти цей контент!</a>`,
"ko-KR": `원하는 언어가 없거나, 100%까지 올리고 싶다면 <a href="https://github.com/Pomax/BezierInfo-2/wiki/help-localize-the-primer-on-bezier-curves">내용 번역을 도와주세요!</a>`,
},
disabledMessage: {
"en-GB": `Scripts are disabled. Showing fallback image.`,
"ru-RU": `Скрипты отключены. Показываем резервное изображение.`,
"uk-UA": `Скрипти вимкнено. показує резервний.`,
"ko-KR": `스크립트가 꺼져 있어 대체 이미지를 대신 표시합니다.`,
},
reset: {
@@ -166,22 +186,26 @@ const localeStringData = {
"zh-CN": `重启`,
"ru-RU": `cбросить`,
"uk-UA": `скинути`,
"ko-KR": `초기화`,
},
viewSource: {
"en-GB": `view source`,
"ko-KR": `소스 보기`,
},
changelogTitle: {
"en-GB": `What's new?`,
"ru-RU": `Что нового?`,
"uk-UA": `Що нового?`,
"ko-KR": `업데이트 내역`,
},
toggleLabel: {
"en-GB": `Toggle changes`,
"ru-RU": `Показать/скрыть изменения`,
"uk-UA": `Перемкнути зміни`,
"ko-KR": `수정사항 확인`,
},
preambleLabel: {
@@ -190,6 +214,7 @@ const localeStringData = {
"zh-CN": `前言`,
"ru-RU": `Преамбула`,
"uk-UA": `Преамбула`,
"ko-KR": `서문`,
},
prefaceLabel: {
@@ -198,24 +223,28 @@ const localeStringData = {
"zh-CN": `序言`,
"ru-RU": `Предисловие`,
"uk-UA": `Передмова`,
"ko-KR": `머리말`,
},
mainContentLabel: {
"en-GB": `Main content`,
"ru-RU": `Содержание`,
"uk-UA": `Основний вміст`,
"ko-KR": `본문`,
},
changelogLabel: {
"en-GB": `What's new`,
"ru-RU": `Что нового`,
"uk-UA": `Зміни`,
"ko-KR": `업데이트 내역`,
},
changelogDescription: {
"en-GB": `This primer is a living document, and so depending on when you last look at it, there may be new content. Click the following link to expand this section to have a look at what got added, when, or click through to the <a href="./news">News posts</a> for more detailed updates. (<a href="./news/rss.xml">RSS feed</a> available)`,
"ru-RU": `Этот документ живое пособие, в зависимости от даты вашего последнего посещения, может появиться новый материал. Кликайте <a href="./news">здесь</a> для просмотра лога изменений. (также доступен <a href="./news/rss.xml">RSS-канал</a>)`,
"uk-UA": `Цей підручник постійно розвививається, тож залежно від того, коли ви востаннє його переглядали, тут можуть бути оновлення. Перейдіть за <a href="./news">цим посиланням</a>, щоб побачити, що було додано. (Також доступний <a href="./news/rss.xml">RSS-канал</a>)`,
"ko-KR": `이 입문서는 "살아 숨쉬는" 문서로, 오랜만에 다시 찾아왔다면 새로운 내용이 추가되었을 수도 있습니다. 아래 링크를 눌러서 무엇이 언제 추가되었는지 확인할 수도 있고, <a href="./news">뉴스 포스트</a>(영문, <a href="./news/rss.xml">RSS 피드</a>도 있습니다)에서 자세한 내역을 확인할 수도 있습니다.`,
},
previous: {
@@ -224,6 +253,7 @@ const localeStringData = {
"zh-CN": `前`,
"ru-RU": `предыдущий`,
"uk-UA": `попередній`,
"ko-KR": `이전`,
},
next: {
@@ -232,6 +262,7 @@ const localeStringData = {
"zh-CN": `下`,
"ru-RU": `следующий`,
"uk-UA": `наступний`,
"ko-KR": `다음`,
},
};