mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-02-24 01:22:26 +01:00
202 lines
8.6 KiB
HTML
202 lines
8.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ja-JP">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
|
|||
|
|
<title>A Primer on Bézier Curves</title>
|
|||
|
|
<link rel="shortcut icon" href="favicon.png" type="image/png" />
|
|||
|
|
|
|||
|
|
<base href=".." />
|
|||
|
|
|
|||
|
|
<!-- opengraph information -->
|
|||
|
|
<meta property="og:title" content="A Primer on Bézier Curves" />
|
|||
|
|
<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="A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them."
|
|||
|
|
/>
|
|||
|
|
<meta property="og:locale" content="en_GB" />
|
|||
|
|
<meta property="og:type" content="article" />
|
|||
|
|
<meta property="og:published_time" content="2013-06-13 12: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" />
|
|||
|
|
|
|||
|
|
<!-- my own referral/page hit tracker -->
|
|||
|
|
<script src="./lib/site/referrer.js" type="module" async></script>
|
|||
|
|
|
|||
|
|
<!-- the part that makes interactive graphics work: an HTML5 <graphics-element> custom element -->
|
|||
|
|
<script
|
|||
|
|
src="./lib/custom-element/graphics-element.js"
|
|||
|
|
type="module"
|
|||
|
|
async
|
|||
|
|
defer
|
|||
|
|
></script>
|
|||
|
|
<link rel="stylesheet" href="./lib/custom-element/graphics-element.css" />
|
|||
|
|
|
|||
|
|
<!-- page styling -->
|
|||
|
|
<link rel="stylesheet" href="style.css" />
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<header>
|
|||
|
|
<h1>A Primer on Bézier Curves</h1>
|
|||
|
|
<h2>
|
|||
|
|
A free, online book for when you really need to know how to do Bézier
|
|||
|
|
things.
|
|||
|
|
</h2>
|
|||
|
|
<span>Read this in your own language:</span>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="../index.html">English</a></li>
|
|||
|
|
<li><a href="../ja-JP/index.html">日本語</a></li>
|
|||
|
|
<li><a href="../zh-CN/index.html">中文</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main>
|
|||
|
|
<section id="preface"></section>
|
|||
|
|
|
|||
|
|
<section id="toc">
|
|||
|
|
<ol>
|
|||
|
|
<li><a href="#introduction">バッとした導入</a></li>
|
|||
|
|
<li><a href="#whatis">So what makes a Bézier Curve?</a></li>
|
|||
|
|
</ol>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section id="changelog"></section>
|
|||
|
|
|
|||
|
|
<section id="chapters">
|
|||
|
|
<section id="introduction">
|
|||
|
|
<h1>バッとした導入</h1>
|
|||
|
|
<p>
|
|||
|
|
まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。
|
|||
|
|
</p>
|
|||
|
|
<div class="figure">
|
|||
|
|
<graphics-element
|
|||
|
|
title="2次のベジエ曲線"
|
|||
|
|
width="200"
|
|||
|
|
height="200"
|
|||
|
|
src="./chapters/introduction/quadratic.js"
|
|||
|
|
>
|
|||
|
|
<fallback-image>
|
|||
|
|
<img
|
|||
|
|
src="./chapters/introduction/quadratic.png"
|
|||
|
|
width="200"
|
|||
|
|
height="200"
|
|||
|
|
/>
|
|||
|
|
<span>JSがなくて、画像を表示しています。</span>
|
|||
|
|
</fallback-image>
|
|||
|
|
</graphics-element>
|
|||
|
|
|
|||
|
|
<graphics-element
|
|||
|
|
title="3次のベジエ曲線"
|
|||
|
|
width="200"
|
|||
|
|
height="200"
|
|||
|
|
src="./chapters/introduction/cubic.js"
|
|||
|
|
>
|
|||
|
|
<fallback-image>
|
|||
|
|
<img
|
|||
|
|
src="./chapters/introduction/cubic.png"
|
|||
|
|
width="200"
|
|||
|
|
height="200"
|
|||
|
|
/>
|
|||
|
|
<span>JSがなくて、画像を表示しています。</span>
|
|||
|
|
</fallback-image>
|
|||
|
|
</graphics-element>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
ベジエ曲線は、CAD（computer aided designやCAM（computer aided
|
|||
|
|
manufacturing）のアプリケーションで多用されています。もちろん、Adobe
|
|||
|
|
Illustrator・Photoshop・Inkscape・Gimp
|
|||
|
|
などのグラフィックデザインアプリケーションや、SVG（scalable vector
|
|||
|
|
graphics）・OpenTypeフォント（otf/ttf）のようなグラフィック技術でも利用されています。ベジエ曲線はたくさんのものに使われていますので、これについてもっと詳しく学びたいのであれば……さあ、準備しましょう！
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
<section id="whatis">
|
|||
|
|
<h1>So what makes a Bézier Curve?</h1>
|
|||
|
|
<p>
|
|||
|
|
Playing with the points for curves may have given you a feel for how
|
|||
|
|
Bézier curves behave, but what <em>are</em> Bézier curves, really?
|
|||
|
|
There are two ways to explain what a Bézier curve is, and they turn
|
|||
|
|
out to be the entirely equivalent, but one of them uses complicated
|
|||
|
|
maths, and the other uses really simple maths. So... let's start
|
|||
|
|
with the simple explanation:
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
Bézier curves are the result of
|
|||
|
|
<a href="https://en.wikipedia.org/wiki/Linear_interpolation"
|
|||
|
|
>linear interpolations</a
|
|||
|
|
>. That sounds complicated but you've been doing linear
|
|||
|
|
interpolation since you were very young: any time you had to point
|
|||
|
|
at something between two other things, you've been applying linear
|
|||
|
|
interpolation. It's simply "picking a point between two points".
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
If we know the distance between those two points, and we want a new
|
|||
|
|
point that is, say, 20% the distance away from the first point (and
|
|||
|
|
thus 80% the distance away from the second point) then we can
|
|||
|
|
compute that really easily:
|
|||
|
|
</p>
|
|||
|
|
<img
|
|||
|
|
className="LaTeX SVG"
|
|||
|
|
src="images/latex/0ee04e4056391f945c1c21c1174a03b5.svg"
|
|||
|
|
width="507px"
|
|||
|
|
height="103px"
|
|||
|
|
/>
|
|||
|
|
<p>
|
|||
|
|
So let's look at that in action: the following graphic is
|
|||
|
|
interactive in that you can use your up and down arrow keys to
|
|||
|
|
increase or decrease the interpolation ratio, to see what happens.
|
|||
|
|
We start with three points, which gives us two lines. Linear
|
|||
|
|
interpolation over those lines gives us two points, between which we
|
|||
|
|
can again perform linear interpolation, yielding a single point. And
|
|||
|
|
that point —and all points we can form in this way for all ratios
|
|||
|
|
taken together— form our Bézier curve:
|
|||
|
|
</p>
|
|||
|
|
<graphics-element
|
|||
|
|
title="Linear Interpolation leading to Bézier curves"
|
|||
|
|
width="200"
|
|||
|
|
height="200"
|
|||
|
|
src="./chapters/whatis/interpolation.js"
|
|||
|
|
>
|
|||
|
|
<fallback-image>
|
|||
|
|
<img src="./chapters/whatis/interpolation.png" />
|
|||
|
|
<span>JSがなくて、画像を表示しています。</span>
|
|||
|
|
</fallback-image>
|
|||
|
|
</graphics-element>
|
|||
|
|
|
|||
|
|
<p>And that brings us to the complicated maths: calculus.</p>
|
|||
|
|
<p>
|
|||
|
|
While it doesn't look like that's what we've just done, we actually
|
|||
|
|
just drew a quadratic curve, in steps, rather than in a single go.
|
|||
|
|
One of the fascinating parts about Bézier curves is that they can
|
|||
|
|
both be described in terms of polynomial functions, as well as in
|
|||
|
|
terms of very simple interpolations of interpolations of [...].
|
|||
|
|
That, in turn, means we can look at what these curves can do based
|
|||
|
|
on both "real maths" (by examining the functions, their derivatives,
|
|||
|
|
and all that stuff), as well as by looking at the "mechanical"
|
|||
|
|
composition (which tells us, for instance, that a curve will never
|
|||
|
|
extend beyond the points we used to construct it).
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
So let's start looking at Bézier curves a bit more in depth: their
|
|||
|
|
mathematical expressions, the properties we can derive from them,
|
|||
|
|
and the various things we can do to, and with, Bézier curves.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<!-- ...code goes here... -->
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|