1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-02 04:42:43 +02:00

this rename is absolutely stupid

This commit is contained in:
Pomax
2020-08-20 13:01:32 -07:00
parent 59fdafb2c5
commit d92e370bd1
470 changed files with 22 additions and 9 deletions

View File

@@ -0,0 +1,47 @@
# Preface
In order to draw things in 2D, we usually rely on lines, which typically get classified into two categories: straight lines, and curves. The first of these are as easy to draw as they are easy to make a computer draw. Give a computer the first and last point in the line, and BAM! straight line. No questions asked.
Curves, however, are a much bigger problem. While we can draw curves with ridiculous ease freehand, computers are a bit handicapped in that they can't draw curves unless there is a mathematical function that describes how it should be drawn. In fact, they even need this for straight lines, but the function is ridiculously easy, so we tend to ignore that as far as computers are concerned; all lines are "functions", regardless of whether they're straight or curves. However, that does mean that we need to come up with fast-to-compute functions that lead to nice looking curves on a computer. There are a number of these, and in this article we'll focus on a particular function that has received quite a bit of attention and is used in pretty much anything that can draw curves: Bézier curves.
They're named after [Pierre Bézier](https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier), who is principally responsible for making them known to the world as a curve well-suited for design work (publishing his investigations in 1962 while working for Renault), although he was not the first, or only one, to "invent" these type of curves. One might be tempted to say that the mathematician [Paul de Casteljau](https://en.wikipedia.org/wiki/Paul_de_Casteljau) was first, as he began investigating the nature of these curves in 1959 while working at Citroën, and came up with a really elegant way of figuring out how to draw them. However, de Casteljau did not publish his work, making the question "who was first" hard to answer in any absolute sense. Or is it? Bézier curves are, at their core, "Bernstein polynomials", a family of mathematical functions investigated by [Sergei Natanovich Bernstein](https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein), whose publications on them date back at least as far as 1912.
Anyway, that's mostly trivia, what you are more likely to care about is that these curves are handy: you can link up multiple Bézier curves so that the combination looks like a single curve. If you've ever drawn Photoshop "paths" or worked with vector drawing programs like Flash, Illustrator or Inkscape, those curves you've been drawing are Bézier curves.
But what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want when you do with these curves? That's what this page is for. Prepare to be mathed!
<div class="print">
## PS: buy me a coffee?
If you enjoyed this book enough to print it out, you might be wondering if there is some way to give something back. To answer that question: you can always buy me a coffee, however-much a coffee is where you live. Or, if you want to pay a fair price for this book, you can buy me a really expensive coffee =)
This book has grown over the years from a short primer to a 100+ print-page-equivalent ebook on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing! Please visit https://pomax.github.io/bezierinfo and click on the link in the "Help support the book" preface section to donate some coffee money.
</div>
—Pomax (or in the tweetworld, [@TheRealPomax](https://twitter.com/TheRealPomax))
<div class="note">
## Virtually all Bézier graphics are interactive.
This page uses interactive examples, relying heavily on [Bezier.js](http://pomax.github.io/bezierjs), as well as maths formulae which are typeset into SVG using the [XeLaTeX](https://ctan.org/pkg/xetex) typesetting system and [pdf2svg](https://github.com/dawbarton/pdf2svg) by [David Barton](http://www.cityinthesky.co.uk/).
## This book is open source.
This book is an open source software project, and lives on two github repositories. The first is [https://github.com/pomax/bezierinfo](https://github.com/pomax/bezierinfo) and is the purely-for-presentation version you are viewing right now. The other repository is [https://github.com/pomax/BezierInfo-2](https://github.com/pomax/BezierInfo-2), which is the development version, housing all the HTML, JavaScript, and CSS. You can fork either of these, and pretty much do with them as you please, except for passing it off as your own work wholesale, of course =)
## How complicated is the maths going to be?
Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be *far* more complicated maths, but if you don't feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.
## Questions, comments:
If you have suggestions for new sections, hit up the [Github issue tracker](https://github.com/pomax/BezierInfo-2/issues) (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical "select this section of text and hit the 'question' button to ask a question about it" system. We'll see.
## Help support the book!
If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you have two options: you can either head on over to the [Patreon page](https://patreon.com/bezierinfo) for this book, or if you prefer to make a one-time donation, head on over to the [buy Pomax a coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW) page. This work has grown from a small primer to a 100-plus print-page-equivalent reader on the subject of Bézier curves over the years, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!
</div>

View File

@@ -0,0 +1,49 @@
# まえがき
2次元上になにかを描くとき、普通は線を使いますが、これは直線と曲線の2つに分類することができます。直線を描くのはとても簡単で、これをコンピュータに描かせるのも容易です。直線の始点と終点をコンピュータに与えてやれば、ポン直線が描けました。疑問の余地もありません。
しかしながら、曲線の方はもっと大きな問題です。私たちはフリーハンドでいとも簡単に曲線を描くことができますが、コンピュータの方は少し不利です。曲線の描き方を表した数学的な関数が与えられないと、コンピュータは曲線を描くことができないのです。実際には、直線でさえも関数が必要になります。直線の関数はとても簡単なので、わたしたちはよく無視してしまいますが、コンピュータにとっては直線であれ曲線であれ、線はすべて「関数」なのです。しかしこれは、コンピュータで速く計算できて、きれいな曲線が得られるような関数を見つける必要がある、ということになります。そのような関数はたくさんありますが、多くの関心を集め続け、そしてどんな場面でも使われている、ある特定の関数に対してこの記事では焦点を絞ります。この関数は「ベジエ」曲線を描きます。
ベジエ曲線は[Pierre Bézier](https://ja.wikipedia.org/wiki/ピエール・ベジェ)から名付けられました。この曲線がデザイン作業に適していることを世界に知らしめたのが、彼なのですーに勤務し、1962年にその研究を発表しました。ただし、この曲線を「発明」したのは彼が最初で唯一というわけではありません。数学者[Paul de Casteljau](https://en.wikipedia.org/wiki/Paul_de_Casteljau)はシトロエンで働いていた1959年、この曲線の性質について研究し、ベジエ曲線の非常にエレガントな描き方を発見しました。これが最初だと言う人もいます。しかしながら、de Casteljauは自分の成果を発表しなかったため、「誰が最初か」という問いに答えるのがとても難しくなっています。またベジエ曲線は、核心的には[Sergei Natanovich Bernstein](https://ja.wikipedia.org/wiki/セルゲイ・ベルンシュテイン)が研究した「ベルンシュタイン多項式」という数学関数の一種ですが、こちらの公刊に関しては少なくとも1912年まで遡ることができます。いずれにせよ、これらはほとんど瑣末なことです。より注目すべきなのは、ベジエ曲線は取り扱いに便利だいうことです。たとえば複数のベジエ曲線を繋いで、1つの曲線に見えるようにすることができます。もしあなたがPhotoshopで「パス」を描いたり、FlashやIllustrator、Inkscapeのようなベクタードローイングソフトを使ったことがあるのであれば、そこで描いてきた曲線はベジエ曲線です。
では、これを自分でプログラムしなければならないとなったらどうでしょう?ハマりどころは何でしょうか?どうやってベジエ曲線を描くのでしょう?バウンディングボックスとは何で、どうやって交点を求め、どうやったら曲線を押し出せるのでしょうか?つまるところ、ベジエ曲線に対して行いたいあらゆる操作は、どのようにすればいいのでしょう?このページはそれに答えるためにあります。数学にとりかかりましょう!
<div class="print">
## 追伸:コーヒーをおごってくれませんか?
この本のことを印刷するほど気に入ったのであれば、あなたは「何かお礼をする方法はないか」と考えているかもしれません。この質問に対する答えはこうですいつでもわたしにコーヒーをおごってください。あなたが住んでいるところの、コーヒー1杯の値段でかまいません。この本にかなりの金額を支払いたいのであれば、非常に高価なコーヒーをおごってくれてもかまいません =)
この本は小さな入門からはじまり、印刷85ページ以上に相当するようなベジエ曲線の電子書籍へと、年々成長してきています。そして、多くのコーヒーがその執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのですhttps://pomax.github.io/bezierinfoにアクセスしてオンライン版のまえがきにあるリンクをクリックし、コーヒー代を寄付してください。
</div>
—Pomax (Twitter上では[@TheRealPomax](https://twitter.com/TheRealPomax))
<div class="note">
## 注:ベジエの図はすべてインタラクティブになっています。
このページでは[Bezier.js](http://pomax.github.io/bezierjs)を活用し、インタラクティブな例示を行っています。
<!-- The following is no longer true
また、[MathJax](http://mathjax.org)というすばらしいライブラリによって、LaTeX式の「本物」の数学組版を行っています。このページはWebpackを使い、Reactアプリケーションとしてオフラインで生成されていますが、このために「ソースを表示」オプションを追加することがかなり難しくなってしまいました。これをどうやって追加すべきかは今もまだ考え中ですが、かといって、数年ぶりとなる今回の更新を延期したくはありませんでした。
-->
## 本書はオープンソースです。
この本はオープンソースソフトウェアのプロジェクトで、2つのGitHubリポジトリ上に存在しています。1つ目の[https://github.com/pomax/bezierinfo](https://github.com/pomax/bezierinfo)は表示のためだけに用意されたバージョンで、あなたが今読んでいるものです。もう一方の[https://github.com/pomax/BezierInfo-2](https://github.com/pomax/BezierInfo-2)は開発版で、すべてのHTML・JavaScript・CSSが含まれています。どちらのリポジトリもフォークすることができますし、あなたの好きなように使ってかまいません。ただし、これを自分の成果だと騙って売ることはもちろん除きます。=)
## 数学はどこまで難しくなりますか?
この入門に出てくる数学は、大半が高校初年度程度です。基本的な計算を理解していて、英語の読み方が分かっていれば、こなすことができるはずです。時には*ずっと*難しい数学も出てきますが、もし理解できないように感じたら、そこは読み飛ばしても大丈夫です。節の中の「詳細欄」を飛ばしてもいいですし、厄介そうな数学があれば節の最後まで読み飛ばしてもかまいません。各節の最後にはたいてい結論を並べてありますので、これを直に利用することもできます。
## 質問・コメント:
新しい節の提案があれば、[GitHubのissueトラッカー](https://github.com/pomax/BezierInfo-2/issues)をクリックしてください右上にあるリポジトリのリンクからでもたどり着けます。改訂中のため、現在はこのページにはコメント欄がありませんが、内容に関する質問がある場合にもissueトラッカーを使ってかまいません。改訂が完了したら、総合的なコメント欄を復活させる予定です。あるいは、「質問対象の節を選択して『質問』ボタンをクリック」するような項目別のシステムになるかもしれません。いずれわかります。
## コーヒーをおごってくれませんか?
この本が気に入った場合や、取り組んでいたことに役に立つと思った場合、あるいは、この本への感謝をわたしに伝えるにはどうすればいいのかわからない場合。そのような場合には、[わたしにコーヒーをおごってください](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW)。あなたが住んでいるところのコーヒー1杯の値段でかまいません。この本は小さな入門からはじまり、印刷で70ページほどに相当するようなベジエ曲線の読み物へと、年々成長してきています。そして、多くのコーヒーが執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのです
</div>

View File

@@ -0,0 +1,40 @@
# 序言
我们通常用线条来绘制2D图形大致分为两种线条直线和曲线。不论我们动手还是用电脑都能很容易地画出第一种线条。只要给电脑起点和终点直线就画出来了。没什么好疑问的。
然而,绘制曲线却是个大问题。虽然我们可以很容易地徒手画出曲线,但除非给出描述曲线的数学函数,不然计算机无法画出曲线。实际上,画直线时也需要数学函数,但画直线所需的方程式很简单,我们在这里不去考虑。在计算机看来,所有线条都是“函数”,不管它们是直线还是曲线。然而,这就表示我们需要找到能在计算机上表现良好的曲线方程。这样的曲线有很多种,在本文我们主要关注一类特殊的、备受关注的函数,基本上任何画曲线的地方都会用到它:贝塞尔曲线。
它们是以[Pierre Bézier](https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier)命名的尽管他并不是第一个或者说唯一“发明”了这种曲线的人但他让世界知道了这种曲线十分适合设计工作在1962年为Renault工作并发表了他的研究。有人也许会说数学家[Paul de Casteljau](https://en.wikipedia.org/wiki/Paul_de_Casteljau)是第一个发现这类曲线特性的人在Citroën工作时他提出了一种很优雅的方法来画这些曲线。然而de Casteljau没有发表他的工作这使得“谁先发现”这一问题很难有一个确切的答案。
贝塞尔曲线本质上是伯恩斯坦多项式,这是[Sergei Natanovich Bernstein](https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein)研究的一种数学函数关于它们的出版物至少可以追溯到1912年。无论如何这些都只是一些冷知识你可能更在意的是这些曲线很方便你可以连接多条贝塞尔曲线并且连接起来的曲线看起来就像是一条曲线。甚至在你在Photoshop中画“路径”或使用一些像Flash、Illustrator和Inkscape这样的矢量绘图程序时所画的曲线都是贝塞尔曲线。
那么,要是你自己想编程实现它们呢?有哪些陷阱?你怎么画它们?包围盒是怎么样的,怎么确定交点,怎么拉伸曲线,简单来说:你怎么对曲线做一切你想做的事?这就是这篇文章想说的。准备好学习一些数学吧!
—Pomax (推特账号, [@TheRealPomax](https://twitter.com/TheRealPomax))
<div class="note">
## 注意:几乎所有的贝塞尔图形都是可交互的。
这个页面使用了基于[Bezier.js](http://pomax.github.io/bezierjs) 的可交互例子。
<!-- The following is no longer true
,还有一些用[MathJax](http://MathJax.org) 排版的“真正的”数学LaTeX形式。这个页面是用Webpack离线生成的React应用这便让加入“查看源码”选项更具挑战性了。我仍然试图将它们添加回来但跟前几年的版本相比不觉得它能够支撑部署这个更新。
-->
## 这本书是开源的。
这本书是开源的软件项目现有两个github仓库。第一个[https://github.com/pomax/bezierinfo]( https://github.com/pomax/bezierinfo ),它是你现在在看的这个,纯粹用来展示的版本。另外一个[https://github.com/pomax/BezierInfo-2]( https://github.com/pomax/BezierInfo-2 )是带有所有html, javascript和css的开发版本。你可以fork任意一个随便做些什么当然除了把它当作自己的作品来商用。 =)
## 用到的数学将有多复杂?
这份入门读物用到的大部分数学知识都是高中所学的。如果你理解基本的计算并能看懂英文的话,就能上手这份材料。有时候会用到*复杂*一点的数学,但如果你不想深究它们,可以选择跳过段落里的“详解”部分,或者直接跳到章节末尾,避开那些看起来很深入的数学。章节的末尾往往会列出一些结论,因此你可以直接利用这些结论。
## 问题,评论:
如果你有对于新章节的一些建议,点击 [Github issue tracker](https://github.com/pomax/BezierInfo-2/issues) 也可以点右上角的repo链接。如果你有关于材料的一些问题由于我现在在做改写工作目前没有评论功能但你可以用issue跟踪来发表评论。一旦完成重写工作我会把评论功能加上或者会有“选择文字段落点击问题按钮来提问”的系统。到时候我们看看。
## 给我买杯咖啡?
如果你很喜欢这本书,或发现它对你要做的事很有帮助,或者你想知道怎么表达自己对这本书的感激,你可以 [给我买杯咖啡](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW) 所少钱取决于你。这份工作持续了很多年从一份小小的简要到70多页关于贝塞尔曲线的读物在完成它的过程中倾注了很多咖啡。我从未后悔花在这上面的每一分钟但如果有更多咖啡的话我可以坚持写下去!
</div>