-
-
Notifications
You must be signed in to change notification settings - Fork 289
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
48,466 additions
and
19,654 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,142 +1,143 @@ | ||
<!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=".."> | ||
|
||
<link rel="icon" href="images/favicon.png" type="image/png" /> | ||
|
||
<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" /> | ||
|
||
<!-- 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="Sat Nov 21 2020 16:00:00 +00:00" /> | ||
<meta property="og:updated_time" content="Wed Jun 19 2024 15:11:56 +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> | ||
|
||
<!-- | ||
<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=".." /> | ||
|
||
<link rel="icon" href="images/favicon.png" type="image/png" /> | ||
|
||
<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" /> | ||
|
||
<!-- 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="Sat Nov 21 2020 16:00:00 +00:00" /> | ||
<meta property="og:updated_time" content="Wed Jun 19 2024 15:12:56 +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" /> | ||
|
||
<!-- make images lazy load much earlier --> | ||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script> | ||
|
||
</head> | ||
|
||
<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> | ||
|
||
<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> | ||
|
||
|
||
|
||
<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://mastodon.social/@TheRealPomax">Pomax</a></p> | ||
|
||
|
||
</main> | ||
|
||
<hr> | ||
|
||
<footer class="copyright"> | ||
|
||
This post is a news entry for the <a href="https://pomax.github.io/bezierinfo/">Primer on Bézier Curves</a> | ||
|
||
</footer> | ||
|
||
|
||
</body> | ||
|
||
</html> | ||
<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> | ||
|
||
<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> | ||
|
||
<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> | ||
|
||
<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://mastodon.social/@TheRealPomax">Pomax</a></p> | ||
</main> | ||
|
||
<hr /> | ||
|
||
<footer class="copyright">This post is a news entry for the <a href="https://pomax.github.io/bezierinfo/">Primer on Bézier Curves</a></footer> | ||
</body> | ||
</html> |
Oops, something went wrong.