From be5303545ab344897b1858c7997a307c8df3e60a Mon Sep 17 00:00:00 2001
From: Masaya Nakamura <mashabow@shiromoji.net>
Date: Sat, 18 Feb 2017 04:27:36 +0900
Subject: [PATCH] [ja-JP] Add introduction and whatis (#59)

* [ja-JP] Translate introduction

* [ja-JP] Translate whatis

* Update content.ja-JP.md

removed spaces
---
 .../sections/introduction/content.ja-JP.md    | 10 +++++++
 components/sections/whatis/content.ja-JP.md   | 28 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 components/sections/introduction/content.ja-JP.md
 create mode 100644 components/sections/whatis/content.ja-JP.md

diff --git a/components/sections/introduction/content.ja-JP.md b/components/sections/introduction/content.ja-JP.md
new file mode 100644
index 00000000..5cb1d76d
--- /dev/null
+++ b/components/sections/introduction/content.ja-JP.md
@@ -0,0 +1,10 @@
+# バッとした導入
+
+まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。
+
+<div className="figure">
+  <Graphic inline={true} title="2次のベジエ曲線" setup={ this.drawQuadratic } draw={ this.drawCurve }/>
+  <Graphic inline={true} title="3次のベジエ曲線" setup={ this.drawCubic } draw={ this.drawCurve }/>
+</div>
+
+ベジエ曲線は、CAD（computer aided designやCAM（computer aided manufacturing）のアプリケーションで多用されています。もちろん、Adobe Illustrator・Photoshop・Inkscape・Gimp などのグラフィックデザインアプリケーションや、SVG（scalable vector graphics）・OpenTypeフォント（otf/ttf）のようなグラフィック技術でも利用されています。ベジエ曲線はたくさんのものに使われていますので、これについてもっと詳しく学びたいのであれば……さあ、準備しましょう！
diff --git a/components/sections/whatis/content.ja-JP.md b/components/sections/whatis/content.ja-JP.md
new file mode 100644
index 00000000..a3922c04
--- /dev/null
+++ b/components/sections/whatis/content.ja-JP.md
@@ -0,0 +1,28 @@
+# ではベジエ曲線はどうやってできるのでしょう？
+
+ベジエ曲線がどのように動くのか、点を触ってみて感覚が摑めたかもしれません。では、実際のところベジエ曲線*とは*いったい何でしょうか？　これを説明する方法は2通りありますが、どちらの説明でも行き着く先はまったく同じです。一方は複雑な数学を使うのに対し、もう一方はとても簡単です。というわけで……簡単な説明の方から始めましょう。
+
+ベジエ曲線は、[線形補間](https://ja.wikipedia.org/wiki/%E7%B7%9A%E5%BD%A2%E8%A3%9C%E9%96%93)の結果です。というと難しそうに聞こえますが、誰でも幼い頃から線形補間をやってきています。例えば、何か2つのものの間を指し示すときには、いつも線形補間を行っています。線形補間とは、単純に「2点の間から点を得る」ことなのです。
+
+例えば、2点間の距離がわかっているとして、一方の点から距離の20%だけ離れた（すなわち、もう一方の点から80%離れた）新しい点を求めたい場合、次のようにとても簡単に計算できます。
+
+\[
+Given \left (
+  \begin{align}
+    p_1 &= some\ point \\
+    p_2 &= some\ other\ point \\
+    distance &= (p_2 - p_1) \\
+    ratio &= \frac{percentage}{100} \\
+  \end{align}
+\right ),\ our\ new\ point = p_1 + distance \cdot ratio
+\]
+
+では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。
+
+<Graphic title="線形補間でベジエ曲線を得る" setup={this.setup} draw={this.draw} onKeyDown={this.onKeyDown}/>
+
+また、これが複雑な方の数学につながっていきます。微積分です。
+
+いま上で行ったものとは似つかないように思えますが、実はあれは2次曲線を描いていたのです。ただし一発で描きあげるのではなく、手順を追って描いていきました。ベジエ曲線は多項式関数で表現できますが、その一方で、とても単純な補間の補間の補間の……というふうにも説明できます。これがベジエ曲線のおもしろいところです。これはまた、ベジェ曲線は「本当の数学」で見る（関数を調べたり微分を調べたり、あらゆる方法で）ことも可能ですし、「機械的」な組み立て操作として見る（例えば、ベジエ曲線は組み立てに使う点の間からは決してはみ出ないということがわかります）ことも可能だということを意味しています。
+
+それでは、もう少し詳しくベジエ曲線を見ていきましょう。数学的な表現やそこから導かれる性質、さらには、ベジエ曲線に対して／ベジエ曲線を使ってできるさまざまな内容についてです。