mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-02-24 09:33:19 +01:00
170 lines
16 KiB
HTML
170 lines
16 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>A Primer on Bézier Curves</title>
|
||
<link rel="shortcut icon" href="favicon.png" type="image/png">
|
||
|
||
<script>
|
||
(function() {
|
||
// force https except during local testing (e.g. not on port 80)
|
||
let loc = window.location.toString();
|
||
if (loc.indexOf(":8080") === -1 && loc.indexOf("http:") === 0) {
|
||
window.location = loc.replace("http:","https:");
|
||
}
|
||
// if we're still here, load google analytics
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-69475841-3', 'auto');
|
||
ga('send', 'pageview');
|
||
}());
|
||
</script>
|
||
|
||
<!-- optional <base> element to make sure localised content still uses the base location -->
|
||
<base href="..">
|
||
|
||
<!-- mobile optimize -->
|
||
<meta name="viewport" content="width=800, initial-scale=1.0">
|
||
|
||
<!-- 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">
|
||
|
||
<style>
|
||
html, body, article { height: 100%; margin: 0; }
|
||
body { width: 800px; margin: auto; font-size: 4.25mm!important; }
|
||
</style>
|
||
|
||
<link rel="stylesheet" href="stylesheets/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- referral tracking, because I like knowing who's linking to my book -->
|
||
<script src="lib/site/referrer.js" async></script>
|
||
|
||
<div class="dev" style="display:none;">
|
||
<style>
|
||
div.dev {
|
||
background: rgb(43, 49, 95);
|
||
color: rgb(81, 181, 255);
|
||
position: fixed;
|
||
transform: rotate(-45deg);
|
||
width: 22em;
|
||
text-align: center;
|
||
top: 4em;
|
||
left: -6em;
|
||
font-variant: small-caps;
|
||
font-weight: bolder;
|
||
font-family: Helvetica;
|
||
box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
</style>
|
||
DEV PREVIEW ONLY
|
||
<script>
|
||
(function() {
|
||
var loc = window.location.toString();
|
||
if(loc.indexOf('localhost')!==-1 || loc.indexOf('-2')!==-1) {
|
||
var e = document.querySelector('div.dev');
|
||
e.removeAttribute("style");
|
||
}
|
||
}());
|
||
</script>
|
||
</div>
|
||
|
||
<!-- Because people probably want to share this article -->
|
||
<div class="sharebuttons">
|
||
<style>
|
||
div.sharebuttons {
|
||
position: fixed;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
padding: 0.1em;
|
||
background: white;
|
||
}
|
||
div.sharebuttons img {
|
||
min-width: 1.25rem;
|
||
min-height: 1.25rem;
|
||
max-height: 1.25rem;
|
||
}
|
||
}
|
||
</style>
|
||
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
||
</a>
|
||
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
||
</a>
|
||
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
||
</a>
|
||
</div>
|
||
|
||
<article>
|
||
<div id="article">
|
||
<!-- these rules will get overwritten by the style in the article.js React bundle -->
|
||
<style>
|
||
header h1, header h2 { text-align: center; }
|
||
header h1 { font-size: 300%; margin: 0.2em; }
|
||
p.jsnote { margin: 2em; text-align: justify; }
|
||
p.jsnote:first-child { width: 13em; margin: auto; }
|
||
</style>
|
||
|
||
<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>
|
||
</header>
|
||
|
||
<!-- This content only shows for as long as JS/React hasn't loaded the page content -->
|
||
<section>
|
||
<p class="jsnote">Loading the article<span id="loader">...</span></p>
|
||
|
||
<p class="enabling jsnote">If you have JavaScript disabled, you'll have to enable it, as this book heavily relies on JS rendering, both for the base content (it's been written as a React application) and all the interactive graphics, which rely on JS not just for the user interaction but also for the live-drawing (none of the graphics in this book are flat images, they're all live-rendered).</p>
|
||
|
||
<script>var n=document.querySelector(".enabling");n.parentNode.removeChild(n);(function update(el,str){str=(str.length===3)?'':str+'.';el.textContent=str;setTimeout(function(){update(el,str);},333);}(document.querySelector("#loader"),"..."));</script>
|
||
</section>
|
||
|
||
<!-- this content is retrieved from the preface section -->
|
||
<section className="preface"><h2>まえがき</h2>
|
||
<p>2次元上になにかを描くとき、普通は線を使いますが、これは直線と曲線の2つに分類することができます。直線を描くのはとても簡単で、これをコンピュータに描かせるのも容易です。直線の始点と終点をコンピュータに与えてやれば、ポン！直線が描けました。疑問の余地もありません。</p>
|
||
<p>しかしながら、曲線の方はもっと大きな問題です。私たちはフリーハンドでいとも簡単に曲線を描くことができますが、コンピュータの方は少し不利です。曲線の描き方を表した数学的な関数が与えられないと、コンピュータは曲線を描くことができないのです。実際には、直線でさえも関数が必要になります。直線の関数はとても簡単なので、わたしたちはよく無視してしまいますが、コンピュータにとっては直線であれ曲線であれ、線はすべて「関数」なのです。しかしこれは、コンピュータで速く計算できて、きれいな曲線が得られるような関数を見つける必要がある、ということになります。そのような関数はたくさんありますが、多くの関心を集め続け、そしてどんな場面でも使われている、ある特定の関数に対してこの記事では焦点を絞ります。この関数は「ベジエ」曲線を描きます。</p>
|
||
<p>ベジエ曲線は<a href="https://ja.wikipedia.org/wiki/ピエール・ベジェ">Pierre Bézier</a>から名付けられました。この曲線がデザイン作業に適していることを世界に知らしめたのが、彼なのです（ルノーに勤務し、1962年にその研究を発表しました）。ただし、この曲線を「発明」したのは彼が最初で唯一というわけではありません。数学者<a href="https://en.wikipedia.org/wiki/Paul_de_Casteljau">Paul de Casteljau</a>はシトロエンで働いていた1959年、この曲線の性質について研究し、ベジエ曲線の非常にエレガントな描き方を発見しました。これが最初だと言う人もいます。しかしながら、de Casteljauは自分の成果を発表しなかったため、「誰が最初か？」という問いに答えるのがとても難しくなっています。またベジエ曲線は、核心的には<a href="https://ja.wikipedia.org/wiki/セルゲイ・ベルンシュテイン">Sergei Natanovich Bernstein</a>が研究した「ベルンシュタイン多項式」という数学関数の一種ですが、こちらの公刊に関しては少なくとも1912年まで遡ることができます。いずれにせよ、これらはほとんど瑣末なことです。より注目すべきなのは、ベジエ曲線は取り扱いに便利だいうことです。たとえば複数のベジエ曲線を繋いで、1つの曲線に見えるようにすることができます。もしあなたがPhotoshopで「パス」を描いたり、FlashやIllustrator、Inkscapeのようなベクタードローイングソフトを使ったことがあるのであれば、そこで描いてきた曲線はベジエ曲線です。</p>
|
||
<p>では、これを自分でプログラムしなければならないとなったらどうでしょう？ハマりどころは何でしょうか？どうやってベジエ曲線を描くのでしょう？バウンディングボックスとは何で、どうやって交点を求め、どうやったら曲線を押し出せるのでしょうか？つまるところ、ベジエ曲線に対して行いたいあらゆる操作は、どのようにすればいいのでしょう？このページはそれに答えるためにあります。数学にとりかかりましょう！</p>
|
||
|
||
<div className="print">
|
||
<h2 id="-">追伸：コーヒーをおごってくれませんか？</h2>
|
||
<p>この本のことを印刷するほど気に入ったのであれば、あなたは「何かお礼をする方法はないか」と考えているかもしれません。この質問に対する答えはこうです：いつでもわたしにコーヒーをおごってください。あなたが住んでいるところの、コーヒー1杯の値段でかまいません。この本にかなりの金額を支払いたいのであれば、非常に高価なコーヒーをおごってくれてもかまいません =)</p>
|
||
<p>この本は小さな入門からはじまり、印刷85ページ以上に相当するようなベジエ曲線の電子書籍へと、年々成長してきています。そして、多くのコーヒーがその執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのです！<a href="https://pomax.github.io/bezierinfoにアクセスしてオンライン版のまえがきにあるリンクをクリックし、コーヒー代を寄付してください。">https://pomax.github.io/bezierinfoにアクセスしてオンライン版のまえがきにあるリンクをクリックし、コーヒー代を寄付してください。</a></p>
|
||
</div><p>—Pomax (Twitter上では<a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
|
||
|
||
<div className="note">
|
||
<h2 id="-">注：ベジエの図はすべてインタラクティブになっています。</h2>
|
||
<p>このページでは<a href="http://pomax.github.io/bezierjs">Bezier.js</a>を活用し、インタラクティブな例示を行っています。また、<a href="http://mathjax.org">MathJax</a>というすばらしいライブラリによって、（LaTeX式の）「本物」の数学組版を行っています。このページはWebpackを使い、Reactアプリケーションとしてオフラインで生成されていますが、このために「ソースを表示」オプションを追加することがかなり難しくなってしまいました。これをどうやって追加すべきかは今もまだ考え中ですが、かといって、数年ぶりとなる今回の更新を延期したくはありませんでした。</p>
|
||
<h2 id="-">本書はオープンソースです。</h2>
|
||
<p>この本はオープンソースソフトウェアのプロジェクトで、2つのGitHubリポジトリ上に存在しています。1つ目の<a href="https://github.com/pomax/bezierinfo">https://github.com/pomax/bezierinfo</a>は表示のためだけに用意されたバージョンで、あなたが今読んでいるものです。もう一方の<a href="https://github.com/pomax/BezierInfo-2">https://github.com/pomax/BezierInfo-2</a>は開発版で、すべてのHTML・JavaScript・CSSが含まれています。どちらのリポジトリもフォークすることができますし、あなたの好きなように使ってかまいません。ただし、これを自分の成果だと騙って売ることはもちろん除きます。=)</p>
|
||
<h2 id="-">数学はどこまで難しくなりますか？</h2>
|
||
<p>この入門に出てくる数学は、大半が高校初年度程度です。基本的な計算を理解していて、英語の読み方が分かっていれば、こなすことができるはずです。時には<em>ずっと</em>難しい数学も出てきますが、もし理解できないように感じたら、そこは読み飛ばしても大丈夫です。節の中の「詳細欄」を飛ばしてもいいですし、厄介そうな数学があれば節の最後まで読み飛ばしてもかまいません。各節の最後にはたいてい結論を並べてありますので、これを直に利用することもできます。</p>
|
||
<h2 id="-">質問・コメント：</h2>
|
||
<p>新しい節の提案があれば、<a href="https://github.com/pomax/BezierInfo-2/issues">GitHubのissueトラッカー</a>をクリックしてください（右上にあるリポジトリのリンクからでもたどり着けます）。改訂中のため、現在はこのページにはコメント欄がありませんが、内容に関する質問がある場合にもissueトラッカーを使ってかまいません。改訂が完了したら、総合的なコメント欄を復活させる予定です。あるいは、「質問対象の節を選択して『質問』ボタンをクリック」するような項目別のシステムになるかもしれません。いずれわかります。</p>
|
||
<h2 id="-">コーヒーをおごってくれませんか？</h2>
|
||
<p>この本が気に入った場合や、取り組んでいたことに役に立つと思った場合、あるいは、この本への感謝をわたしに伝えるにはどうすればいいのかわからない場合。そのような場合には、<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW">わたしにコーヒーをおごってください</a>。あなたが住んでいるところのコーヒー1杯の値段でかまいません。この本は小さな入門からはじまり、印刷で70ページほどに相当するようなベジエ曲線の読み物へと、年々成長してきています。そして、多くのコーヒーが執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのです！</p>
|
||
</div></section>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- the actual article is a JS bundle -->
|
||
<script src="ja-JP/article.js" async></script>
|
||
<script src="lib/site/social-updater.js" async></script>
|
||
</body>
|
||
</html>
|