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>
|