info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-01-17 13:38:33 +01:00
Code Issues Releases Wiki Activity

Automated build

Browse Source
This commit is contained in:
Bezierinfo CI 2022-09-03 17:01:23 +00:00
parent 152db3cdf6
commit 6df7c47688
10 changed files with 47925 additions and 19208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9822
docs/index.html generated
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

10251
docs/ko-KR/index.html generated
View File

File diff suppressed because it is too large Load Diff

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

@ -1,59 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-GB"> <html lang="en-GB">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Primer on Bézier Curves - Rewriting the tech stack</title> <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="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 --> <!-- page styling -->
<link rel="preload" href="images/paper.png" as="image" /> <link rel="preload" href="images/paper.png" as="image" />
<style> <style>
:root[lang="en-GB"] { :root[lang="en-GB"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px; font-size: 18px;
} }
</style>
</style>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<!-- And a slew of SEO related meta elements, because being discoverable is important --> <!-- And a slew of SEO related meta elements, because being discoverable is important -->
<meta name="description" content="Rewriting the tech stack" /> <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="Thu Sep 17 2020 17:00:00 +00:00" />
<meta property="og:updated_time" content="Sat Sep 03 2022 09:57:02 +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" />
<!-- 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 Sep 03 2022 17:00:46 +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 --> <!-- my own referral/page hit tracker, because Google knows enough -->
<script src="./js/site/referrer.js" type="module" async></script> <script src="./js/site/referrer.js" type="module" async></script>
@ -69,85 +61,121 @@
<!-- 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>
</head> <body>
<div class="dev" style="display: none;">
<body>
<div class="dev" style="display:none;">
DEV PREVIEW ONLY DEV PREVIEW ONLY
<script> <script>
(function () { (function () {
var loc = window.location.toString(); var loc = window.location.toString();
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) { if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
var e = document.querySelector('div.dev'); var e = document.querySelector("div.dev");
e.removeAttribute("style"); e.removeAttribute("style");
} }
}()); })();
</script> </script>
</div> </div>
<div class="github"> <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"> <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" /> <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
</map> </map>
</div> </div>
<header> <header>
<h1>Rewriting the tech stack</h1> <h1>Rewriting the tech stack</h1>
<h5 class="post-date">Fri, 18 Sep 2020</h5> <h5 class="post-date">Fri, 18 Sep 2020</h5>
</header> </header>
<main> <main>
<!-- Because people probably want to share this article --> <!-- Because people probably want to share this article -->
<div class="notforprint scl"> <div class="notforprint scl">
<img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" /> <img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
<map name="rhtimap"> <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." 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"> alt="submit to reddit"
<area class="sclnk-hn" shape="rect" coords="0, 20, 19, 35" 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" 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"> alt="submit to hacker news"
<area class="sclnk-twt" shape="rect" coords="0, 40, 19, 55" 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" 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> </map>
</div> </div>
<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> 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
<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> 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
<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> 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
<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> something, several years later you have quite the monster, and a single HTML file becomes intractible.
<p>To give a bit of a teaser, some of the things I'll be writing about:</p> </p>
<ul> <p>
<li>Essentially reinventing (a limited form of) Processing.js</li> 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
<li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li> 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
<li>Using modern ES module code that runs in both the browser and Node.js.</li> 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
<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> size of the Primer from a giant HTML file had truly <em>dire</em> performance.
<li>A custom <code>&lt;graphics-element&gt;</code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li> </p>
<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> <p>
</ul> 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
<blockquote> just hadn't caught up. Finally, in 2020, things are different: with a global pandemic, and some vacation time, and something random causing me
<graphics-element title="An example graphic" width="275" height="275" src="./news/example.js" > 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> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <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> <label>An example graphic</label>
</fallback-image></graphics-element> </fallback-image></graphics-element
</blockquote> >
</blockquote>
<ul> <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>
</ul> Real LaTeX code, that gets saved as <code>.tex</code> file, so it can be compiled into optimized SVG using <code>xelatex</code>,
<blockquote> <code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>:
<!-- </li>
</ul>
<blockquote>
<!--
__ n=3 n-k k __ n=3 n-k k
B(t) = ❯ \ P \binomnk(1-t) t B(t) = ❯ \ P \binomnk(1-t) t
@ -159,18 +187,22 @@ B(t) = ❯ \ P \binomnk(1-t) t
0 1 2 3 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"><tr><td>1</td><td rowspan="13"> <table class="code">
<textarea disabled rows="13" role="doc-example">let curve; <tr>
<td>1</td>
<td rowspan="13">
<textarea disabled rows="13" role="doc-example">
let curve;
setup() { setup() {
curve = Bezier.defaultCubic(); curve = Bezier.defaultCubic();
@ -182,44 +214,68 @@ draw() {
clear(`lightblue`); clear(`lightblue`);
curve.drawCurve(); curve.drawCurve();
curve.drawPoints(); curve.drawPoints();
}</textarea> }</textarea
</td></tr> >
<tr><td>2</td></tr> </td>
<tr><td>3</td></tr> </tr>
<tr><td>4</td></tr> <tr>
<tr><td>5</td></tr> <td>2</td>
<tr><td>6</td></tr> </tr>
<tr><td>7</td></tr> <tr>
<tr><td>8</td></tr> <td>3</td>
<tr><td>9</td></tr> </tr>
<tr><td>10</td></tr> <tr>
<tr><td>11</td></tr> <td>4</td>
<tr><td>12</td></tr> </tr>
<tr><td>13</td></tr></table> <tr>
<td>5</td>
<ul> </tr>
<li>Responsive CSS, so the content intelligently reflows where possible.</li> <tr>
<li>A "Live build" setup for working on the content and code.</li> <td>6</td>
<li>Automatic link-checking to make sure none of the links in the Primer lead you to a 404.</li> </tr>
<li>This "news" section, so that I can write posts to go along with new sections getting added, or notable changes being made.</li> <tr>
</ul> <td>7</td>
<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> </tr>
<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> <tr>
<p>See you in the next post!</p> <td>8</td>
<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p> </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> </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>
</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> </html>

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

@ -1,59 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-GB"> <html lang="en-GB">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Primer on Bézier Curves - Curve-circle intersections</title> <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="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 --> <!-- page styling -->
<link rel="preload" href="images/paper.png" as="image" /> <link rel="preload" href="images/paper.png" as="image" />
<style> <style>
:root[lang="en-GB"] { :root[lang="en-GB"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px; font-size: 18px;
} }
</style>
</style>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<!-- And a slew of SEO related meta elements, because being discoverable is important --> <!-- And a slew of SEO related meta elements, because being discoverable is important -->
<meta name="description" content="Curve-circle intersections" /> <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="Sat Nov 21 2020 16:00:00 +00:00" />
<meta property="og:updated_time" content="Sat Sep 03 2022 09:57:02 +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" />
<!-- 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 Sep 03 2022 17:00:46 +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 --> <!-- my own referral/page hit tracker, because Google knows enough -->
<script src="./js/site/referrer.js" type="module" async></script> <script src="./js/site/referrer.js" type="module" async></script>
@ -69,74 +61,83 @@
<!-- 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>
</head> <body>
<div class="dev" style="display: none;">
<body>
<div class="dev" style="display:none;">
DEV PREVIEW ONLY DEV PREVIEW ONLY
<script> <script>
(function () { (function () {
var loc = window.location.toString(); var loc = window.location.toString();
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) { if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
var e = document.querySelector('div.dev'); var e = document.querySelector("div.dev");
e.removeAttribute("style"); e.removeAttribute("style");
} }
}()); })();
</script> </script>
</div> </div>
<div class="github"> <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"> <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" /> <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
</map> </map>
</div> </div>
<header> <header>
<h1>Curve-circle intersections</h1> <h1>Curve-circle intersections</h1>
<h5 class="post-date">Sun, 22 Nov 2020</h5> <h5 class="post-date">Sun, 22 Nov 2020</h5>
</header> </header>
<main> <main>
<!-- Because people probably want to share this article --> <!-- Because people probably want to share this article -->
<div class="notforprint scl"> <div class="notforprint scl">
<img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" /> <img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
<map name="rhtimap"> <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." 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"> alt="submit to reddit"
<area class="sclnk-hn" shape="rect" coords="0, 20, 19, 35" 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" 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"> alt="submit to hacker news"
<area class="sclnk-twt" shape="rect" coords="0, 40, 19, 55" 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" 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> </map>
</div> </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>
<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> </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>
</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> </html>

125
docs/news/index.html generated
View File

@ -1,59 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-GB"> <html lang="en-GB">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Primer on Bézier Curves - News</title> <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="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 --> <!-- page styling -->
<link rel="preload" href="images/paper.png" as="image" /> <link rel="preload" href="images/paper.png" as="image" />
<style> <style>
:root[lang="en-GB"] { :root[lang="en-GB"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px; font-size: 18px;
} }
</style>
</style>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<!-- And a slew of SEO related meta elements, because being discoverable is important --> <!-- And a slew of SEO related meta elements, because being discoverable is important -->
<meta name="description" content="" /> <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="Sat Sep 03 2022 09:57:02 GMT-0700 (Pacific Daylight 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="" />
<!-- 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 Sep 03 2022 17:00:46 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="" />
<!-- my own referral/page hit tracker, because Google knows enough --> <!-- my own referral/page hit tracker, because Google knows enough -->
<script src="./js/site/referrer.js" type="module" async></script> <script src="./js/site/referrer.js" type="module" async></script>
@ -69,70 +61,53 @@
<!-- 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>
</head> <body>
<div class="dev" style="display: none;">
<body>
<div class="dev" style="display:none;">
DEV PREVIEW ONLY DEV PREVIEW ONLY
<script> <script>
(function () { (function () {
var loc = window.location.toString(); var loc = window.location.toString();
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) { if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
var e = document.querySelector('div.dev'); var e = document.querySelector("div.dev");
e.removeAttribute("style"); e.removeAttribute("style");
} }
}()); })();
</script> </script>
</div> </div>
<div class="github"> <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"> <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" /> <area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
</map> </map>
</div> </div>
<header> <header>
<h1>News posts</h1> <h1>News posts</h1>
</header> </header>
<main> <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> <p>
Every now and then the Primer gets updated - these posts chronicle the evolution of the site, 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
and hopefully offer interesting information not just about the process of maintaining a resource 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>.
like this, but also neat tech tricks, implementation approaches, maths that didn't make it into </p>
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>
<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> </main>
<hr> <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> </html>

6
docs/news/rss.xml
View File

@ -6,7 +6,7 @@
<atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link> <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> <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> <language>en-GB</language>
<lastBuildDate>Sat Sep 03 2022 09:57:02 +00:00</lastBuildDate> <lastBuildDate>Sat Sep 03 2022 17:00:46 +00:00</lastBuildDate>
<image> <image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url> <url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title> <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; &lt;p&gt;— &lt;a href=&quot;https://twitter.com/TheRealPomax&quot;&gt;Pomax&lt;/a&gt;&lt;/p&gt;
</description> </description>
<pubDate>Sat Nov 21 2020 16:00:00 +00:00</pubDate> <pubDate>Sun Nov 22 2020 00:00:00 +00:00</pubDate>
<guid>2020-11-22.html</guid> <guid>2020-11-22.html</guid>
</item><item> </item><item>
<title>Rewriting the tech stack</title> <title>Rewriting the tech stack</title>
@ -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; &lt;p&gt;— &lt;a href=&quot;https://twitter.com/TheRealPomax&quot;&gt;Pomax&lt;/a&gt;&lt;/p&gt;
</description> </description>
<pubDate>Thu Sep 17 2020 17:00:00 +00:00</pubDate> <pubDate>Fri Sep 18 2020 00:00:00 +00:00</pubDate>
<guid>2020-09-18.html</guid> <guid>2020-09-18.html</guid>
</item> </item>
</channel> </channel>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff