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

Ru ru (#292)

Browse Source 
* ru-RU introduction

Translation of introduction to Russian

* ru-RU whatis

Translation of chapter 2 to Russian

* (fixup) ru-RU intro

fixed missing translations

* ru-RU index.html

Translated header, meta, title and link names for existing chapter's traslations. (will be updated with every new commit)

* .

* locale fixup

* build chapters 1,2

* npm start

Co-authored-by: Mammoth <echo@mammothnotes.com>
This commit is contained in:
Pomax
2020-12-25 12:03:17 -08:00
committed by GitHub
parent acc9b9ebad
commit 4b14d2c07b
14 changed files with 17628 additions and 30601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/chapters/introduction/content.ru-RU.md Normal file
View File

@@ -0,0 +1,10 @@
# Быстрое введение
Начнем с приятного: говоря о кривых Безье, мы говорим о штуках доступных нашему лицезрению на картинках ниже. Отрезки протекают от начальной до конечной точек, искривление обусловленно одной или более вспомогательными контрольными точками. Теперь, поскольку вся графика на данной странице интереактивна, вы можете манипулировать кривыми посредством перемещения вышеупомянутых точек и наблюдать производимый эффект соотносительно вашим действиям.
<div class="figure">
<graphics-element title="Квадратная кривая безье" src="./quadratic.js"></graphics-element>
<graphics-element title="Кубическая кривая безье" src="./cubic.js"></graphics-element>
</div>
Данный тип кривых активно используется в компьютерном дизайне и производственных (CAD/CAM) применениях, в графических программах, таких как Adobe Illustrator and Photoshop, Inkscape, GIMP ... в графических технологиях, таких как маштабируемая векторная графика (SVG) и шрифты OpenType (TTF/OTF). Области использования кривых Безье довольно широки, и если вы желаете узнать больше о составляющих их аспектах: пристегните ремни!

30
docs/chapters/whatis/content.ru-RU.md Normal file
View File

@@ -0,0 +1,30 @@
# Итак, из чего сделаны кривые Безье?
Играя с позициями точек, вы, возможно, получили общее представление о том, как кривые Безье себя ведут. Но чем же является кривая Безье? Ее можно объяснять двумя способами. Оба эквиваленты, однако один из них затрагивает объемные математические описания, тогда как второй пользуется довольно простой математикой. Итак... давайте начнем с простейшего:
Кривая Безье есть результатом [линейной интерполяции](https://ru.wikipedia.org/wiki/%D0%9B%D0%B8%D0%BD%D0%B5%D0%B9%D0%BD%D0%B0%D1%8F_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) (*в оригинале текста [другая ссылка](https://en.wikipedia.org/wiki/Linear_interpolation), тут и далее пр. переводчика). Звучит заморочено, но в действительности вы занимались линейной интерполяций с юных лет: каждый раз когда вам приходилось указывать на что либо лежащее между двумя другими "чем либо" — вы применяли линейную интерполяцию. Т.е. попросту "выбор точки лежащей на линии между двумя другими точками".
Вот, скажем, зная расстояние между двух точек и желая поставить третью на удалении 20ти % этого расстояния до первой и, соответственно, 80ти % до второй, вычислить результат можно следующим образом:
\[
Дано \left (
\begin{aligned}
p_1 &= неикая~точка \\
p_2 &= неикая~другая~точка \\
расстояние &= (p_2 - p_1) \\
соотношение &= \frac{процентаж}{100} \\
\end{aligned}
\right ),~наша~новая~точка = p_1 + расстояние \cdot соотношение
\]
Что же, посмотрим на это в действии: ниже представлена интерактивная проекция, кликнув на ползунок, можно пользоваться клавишами вниз-вверх для увеличения и уменьшения соотношения интерполяции и наблюдать получаемый результат. Сначала, основываясь на трех точках, задаем два отрезка, затем производим линейную интерполяцию по длине каждого из них, получая еще две точки. Далее мы опять производим линейную интерполяцию уже между полученными точками и в итоге получаем искомую точку. (* на изображении видим 3 проекции соответственно этим трем действиям).
<graphics-element title="Линейная интерполяция составляющая кривую Безье" width="825" src="./interpolation.js">
<input type="range" min="10" max="90" step="1" value="25" class="slide-control">
</graphics-element>
И это приводит нас к более замороченному математическому анализу.
Хотя и не очевидно, но мы только что прорисовали квадратную кривую Безье, просто пошагово вместо цельной линии. Один увлекательный аспект кривых Безье является тем, что кривая может одновременно быть описана как полиномиальная функция и так же как набор линейных интерполяций. Это предоставляет возможность рассматривать эти типы кривых с двух планов: математического (анализа функции, ее производных, и все такое) а так же с механической композиции (которая, к примеру, позволяет легко заметить, что точка никогда не выйдет за рамки заданных точек, используемых для ее конструкции).
С этим, давайте рассмотрим кривые Безье более подробно: в частности их математические выражения, свойства, доступные к вычислению на их основе, и вариации действий применимых к и производимых из кривых Безье.

1
docs/images/chapters/whatis/e0600b3be5b95f105a1cf2a2c0378b98.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

11
docs/images/snippets/whatis/e0600b3be5b95f105a1cf2a2c0378b98.ascii Normal file
View File

@@ -0,0 +1,11 @@
\setmainfont[Ligatures=TeX]TeX Gyre Pagella \setmathfontTeX Gyre Pagella Math
╭ p = неикая точка ╮
│ 1 │
│ p = неикая другая точка │
│ 2 │
Дано │ расстояние= (p - p ) │, наша новая точка = p + расстояние · соотношение
│ 2 1 │ 1
│ процентаж │
│ соотношение= ───────── │
╰ 100 ╯

7717
docs/index.html
View File

File diff suppressed because it is too large Load Diff

8084
docs/ja-JP/index.html
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,23 +1,29 @@
<!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=".." />
<base href="..">
<link rel="icon" href="images/favicon.png" type="image/png" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<!-- 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="stylesheet" href="style.css" />
@@ -33,8 +39,8 @@
<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="Fri Dec 25 2020 19:54:14 +00:00" />
<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
<meta property="og:updated_time" content="Fri Dec 25 2020 12:00:11 +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" />
@@ -47,6 +53,8 @@
<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>
@@ -61,6 +69,7 @@
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<body>
@@ -69,110 +78,73 @@
<script>
(function () {
var loc = window.location.toString();
if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
var e = document.querySelector("div.dev");
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
var e = document.querySelector('div.dev');
e.removeAttribute("style");
}
})();
}());
</script>
</div>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
<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>
<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"
<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"
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"
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"
/>
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>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>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>
<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" />
<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
>
</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>
<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>
<!--
@@ -188,7 +160,7 @@
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>
<ul>
@@ -198,12 +170,8 @@
<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,47 +183,20 @@ 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>
@@ -263,20 +204,23 @@ draw() {
<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>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>
<hr />
<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>
<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>

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

@@ -1,23 +1,29 @@
<!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=".." />
<base href="..">
<link rel="icon" href="images/favicon.png" type="image/png" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<!-- 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="stylesheet" href="style.css" />
@@ -33,8 +39,8 @@
<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="Fri Dec 25 2020 19:54:14 +00:00" />
<meta property="og:published_time" content="Sat Nov 21 2020 16:00:00 +00:00" />
<meta property="og:updated_time" content="Fri Dec 25 2020 12:00:11 +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" />
@@ -47,6 +53,8 @@
<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>
@@ -61,6 +69,7 @@
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<body>
@@ -69,75 +78,65 @@
<script>
(function () {
var loc = window.location.toString();
if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
var e = document.querySelector("div.dev");
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
var e = document.querySelector('div.dev');
e.removeAttribute("style");
}
})();
}());
</script>
</div>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
<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>
<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"
<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"
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"
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"
/>
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>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 />
<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>
<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>

53
docs/news/index.html
View File

@@ -1,23 +1,29 @@
<!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=".." />
<base href="..">
<link rel="icon" href="images/favicon.png" type="image/png" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<!-- 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="stylesheet" href="style.css" />
@@ -33,7 +39,7 @@
<meta property="og:description" content="" />
<meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="Fri Dec 25 2020 19:54:14 GMT+0000 (Coordinated Universal Time)" />
<meta property="og:published_time" content="Fri Dec 25 2020 12:00:11 GMT-0800 (Pacific Standard Time)" />
<meta property="og:updated_time" content="" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />
@@ -47,6 +53,8 @@
<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>
@@ -61,6 +69,7 @@
<!-- make images lazy load much earlier -->
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<body>
@@ -69,45 +78,61 @@
<script>
(function () {
var loc = window.location.toString();
if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
var e = document.querySelector("div.dev");
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
var e = document.querySelector('div.dev');
e.removeAttribute("style");
}
})();
}());
</script>
</div>
<div class="github">
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
<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>
<header>
<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.
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>.
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 />
<hr>
<footer class="copyright">
This post is a news entry for the <a href="..">Primer on Bézier Curves</a>
</footer>
<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>Fri Dec 25 2020 19:54:14 +00:00</lastBuildDate>
<lastBuildDate>Fri Dec 25 2020 12:00:11 +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>Sat Nov 21 2020 16: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>Thu Sep 17 2020 17:00:00 +00:00</pubDate>
<guid>2020-09-18.html</guid>
</item>
</channel>

5368
docs/ru-RU/index.html Normal file
View File

File diff suppressed because it is too large Load Diff

8208
docs/uk-UA/index.html
View File

File diff suppressed because it is too large Load Diff

8035
docs/zh-CN/index.html
View File

File diff suppressed because it is too large Load Diff

35
src/locale-strings.js
View File

@@ -3,16 +3,19 @@ const localeStringData = {
"en-GB": `A Primer on Bézier Curves`,
"ja-JP": `ベジェ曲線入門`,
"zh-CN": `贝塞尔曲线底漆`,
"ru-RU": `Основы кривых Безье`,
"uk-UA": `Підручник з кривих Безьє`,
},
subtitle: {
"en-GB": `A free, online book for when you really need to know how to do Bézier things.`,
"ru-RU": `Бесплатное пособие о всем, что вам нужно знать о кривых Безье`,
"uk-UA": `Безкоштовна онлайн-книга, яка навчить вас всьому необхідному, щоб працювати з кривими Безьє.`,
},
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": `Детальне пояснення кривих Безьє та можливостей їх застосування.`,
},
@@ -38,6 +41,19 @@ const localeStringData = {
be helping keep a resource alive and well!
</p>
`,
"ru-RU": `
<p>
Приветствуем на Основах кривых Безье. Это бесплатное пособие/страница/электронная книга затрагивает математику и программирование кривых Безье, охватывает большое количество тем касающихся прорисовки и работы с этим типом кривых, который, по всей видимости, выскакивает везде: от кривых в Фотошоп-е до временных функций CSS и начертаний Шрифтов.
</p>
<p>
Если вы здесь впервые: салют! Обязательно напишите мне, если вы ищете что-то конкретное, на что не найдете ответ в тексте.
<a href="https://github.com/Pomax/BezierInfo-2/issues">трекер</a>!
</p>
<p>
Ежели сей ресурс помог вам в ваших исследованиях или в написании собственной программы рассмотрите возможность
<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">задонатить</a> (любая сума годится) или станьте <a href="https://www.patreon.com/bezierinfo">патроном на Patreon</a>. Мне не платят за эту работу, потому, если нашли что-то для себя нужное на этом сайте и вам бы хотелось дабы существование его было долгим и успешным вот вам мысль: на создание этих страниц ушло много кофе, и уйдет еще больше на их совершенствование; если вы можете помочь с кофе — уже это может стать залогом долгой и счастливой жизни этого ресурса.
</p>
`,
"uk-UA": `
<p>
Ласкаво прошу до Підручника з кривих Безьє. Це безкоштовний вебсайт/електронна книга, що пояснює і математичні, і програмувальні аспекти
@@ -61,6 +77,7 @@ const localeStringData = {
"en-GB": `Table of Contents`,
"ja-JP": `目次`,
"zh-CN": `目录`,
"ru-RU": `Оглавление`,
"uk-UA": `Зміст`,
},
@@ -68,6 +85,7 @@ const localeStringData = {
"en-GB": `English`,
"ja-JP": `日本語`,
"zh-CN": `中文`,
"ru-RU": `Русский`,
"uk-UA": `Українська`,
},
@@ -78,6 +96,7 @@ const localeStringData = {
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>`,
},
@@ -88,9 +107,10 @@ const localeStringData = {
reset: {
"en-GB": `reset`,
"uk-UA": `скинути`,
"ja-JP": `リセット`,
"zh-CN": `重启`,
"ru-RU": `cбросить`,
"uk-UA": `скинути`,
},
viewSource: {
@@ -99,11 +119,13 @@ const localeStringData = {
changelogTitle: {
"en-GB": `What's new?`,
"ru-RU": `Что нового?`,
"uk-UA": `Що нового?`,
},
toggleLabel: {
"en-GB": `Toggle changes`,
"ru-RU": `Показать/скрыть изменения`,
"uk-UA": `Перемкнути зміни`,
},
@@ -111,6 +133,7 @@ const localeStringData = {
"en-GB": `Preamble`,
"ja-JP": `前文`,
"zh-CN": `前言`,
"ru-RU": `Преамбула`,
"uk-UA": `Преамбула`,
},
@@ -118,36 +141,42 @@ const localeStringData = {
"en-GB": `Preface`,
"ja-JP": `まえがき`,
"zh-CN": `序言`,
"ru-RU": `Предисловие`,
"uk-UA": `Передмова`,
},
mainContentLabel: {
"en-GB": `Main content`,
"ru-RU": `Содержание`,
"uk-UA": `Основний вміст`,
},
changelogLabel: {
"en-GB": `What's new`,
"ru-RU": `Что нового`,
"uk-UA": `Зміни`,
},
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>)`,
},
previous: {
"en-GB": `previous`,
"uk-UA": `попередній`,
"ja-JP": `前`,
"zh-CN": `前`,
"ru-RU": `предыдущий`,
"uk-UA": `попередній`,
},
next: {
"en-GB": `next`,
"uk-UA": `наступний`,
"ja-JP": `次`,
"zh-CN": `下`,
"ru-RU": `следующий`,
"uk-UA": `наступний`,
},
};