Merge pull request #285 from yoga1234/master

Partially translate data storage and animation/article

Author: yoga1234

6-data-storage/index.md

@@ -1,2 +1 @@
-
-# Storing data in the browser
+# Menyimpan data didalam _Browser_

7-animation/1-bezier-curve/article.md

@@ -1,58 +1,59 @@
-# Bezier curve
+# _Bezier curve_
 
-Bezier curves are used in computer graphics to draw shapes, for CSS animation and in many other places.
+_Bezier Curves_ digunakan didalam grafis komputer untuk menggambar bentuk, untuk animasi _CSS_ dan di bagian lainnya.
 
-They are a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations.
+_Bezier Curves_ merupakan hal yang cukup simple, dan sangat layak untuk dipelajari dan akan terasa kenyamanan penggunaannya didalam grafis vektor dan animasi lanjutan.
 
-## Control points
+## Titik Kontrol
 
-A [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is defined by control points.
+Sebuah [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) didefinisikan dengan menggunakan titik kontrol.
 
-There may be 2, 3, 4 or more.
+Kemungkinan akan terdapat 2, 3, 4 atau lebih.
 
 For instance, two points curve:
+Untuk contoh ini menggunakan dua titik lengkungan.
 
 ![](bezier2.svg)
 
-Three points curve:
+Tiga titik lengkungan:
 
 ![](bezier3.svg)
 
-Four points curve:
+Empat titik lengkungan:
 
 ![](bezier4.svg)
 
-If you look closely at these curves, you can immediately notice:
+Jika kamu perhatikan secara seksama, kamu dapat melihat:
 
-1. **Points are not always on curve.** That's perfectly normal, later we'll see how the curve is built.
-2. **The curve order equals the number of points minus one**.
-For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for four points -- cubic curve.
-3. **A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:**
+1. **Titik tidak selalu sama dengan lengkungan.** Itu merupakan hal yang normal, kita akan lihat nanti bagaimana lengkungan itu diciptakan.
+2. **Urutan lengkungan sama dengan titik dikurangi satu.**
+   Untuk dua titik kita mempunyai lengkungan linear (garis lurus), untuk tiga titik kita mempunyai -- garis kuadratik (parabolik), untuk empat titik -- _cubic curve_ atau lengkungan kubik.
+3. **Sebuah lengkungan selalu didalam [convex hull](https://en.wikipedia.org/wiki/Convex_hull) dari titik kontrol.**
 
-    ![](bezier4-e.svg) ![](bezier3-e.svg)
+   ![](bezier4-e.svg) ![](bezier3-e.svg)
 
-Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast "no intersection" result. Checking the intersection of convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve.
+Karena properti terakhir, didalam komputer grafis memungkinkan untuk mengoptimalkan test titik potong. Jika _Convex Hull_ tidak berpotongan maka lengkungannya juga tidak akan berpotongan. Jadi memeriksa potongan _convex hull_ di awal akan memberikan hasil "tanpa potongan" dengan cepat. Memeriksa potongan _convex hull_ lebih mudah dilakukan karena bentuknya kotak, segitiga dan lainnya (lihat contoh diatas), bentuk yang lebih simple daripada lengkungan.
 
-**The main value of Bezier curves for drawing -- by moving the points the curve is changing *in intuitively obvious way*.**
+**Nilai utaman dari _Bezier Curves_ untuk menggambar -- dengan memindahkan titik lengkungan dengan cara yang jelas secara intuitif.**
 
-Try to move control points using a mouse in the example below:
+Cobalah memindahkan titik kontrol menggunakan _mouse_ di contoh dibawah:
 
 [iframe src="demo.svg?nocpath=1&p=0,0,0.5,0,0.5,1,1,1" height=370]
 
-**As you can notice, the curve stretches along the tangential lines 1 -> 2 and 3 -> 4.**
+**Seperti yang kamu perhatikan, lengkungannya meregang bersama dengan garis tangen 1 -> 2 dan 3 -> 4.**
 
-After some practice it becomes obvious how to place points to get the needed curve. And by connecting several curves we can get practically anything.
+Setelah beberapa latihan nantinya akan jelas bagaimana caranya untuk memasangkan titik agar menjari lengkungan. dan menyambungkan beberapa lengkungan kita dapat membuat apapun.
 
-Here are some examples:
+Ini adalah beberapa contoh:
 
 ![](bezier-car.svg) ![](bezier-letter.svg) ![](bezier-vase.svg)
 
-## De Casteljau's algorithm
+## Algoritma _De Casteljau's_
 
-There's a mathematical formula for Bezier curves, but let's cover it a bit later, because
-[De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm) is identical to the mathematical definition and visually shows how it is constructed.
+Terdapat sebuah rumus matematika untuk _Bezier Curve_, tapi kita akan membahasnya nanti karena [De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm) identik dengan definisinya sendiri dan dapat dilihat jelas bagaimana membangunnya.
 
 First let's see the 3-points example.
+Pertama-tama kita lihat contoh 3 titik:
 
 Here's the demo, and the explanation follow.
 
@@ -66,18 +67,17 @@ Control points (1,2 and 3) can be moved by the mouse. Press the "play" button to
 2. Build segments between control points 1 -> 2 -> 3. In the demo above they are <span style="color:#825E28">brown</span>.
 3. The parameter `t` moves from `0` to `1`. In the example above the step `0.05` is used: the loop goes over `0, 0.05, 0.1, 0.15, ... 0.95, 1`.
 
-    For each of these values of `t`:
+   For each of these values of `t`:
 
-    - On each <span style="color:#825E28">brown</span> segment we take a point located on the distance proportional to `t` from its beginning. As there are two segments, we have two points.
+   - On each <span style="color:#825E28">brown</span> segment we take a point located on the distance proportional to `t` from its beginning. As there are two segments, we have two points.
 
-        For instance, for `t=0` -- both points will be at the beginning of segments, and for `t=0.25` -- on the 25% of segment length from the beginning, for `t=0.5` -- 50%(the middle), for `t=1` -- in the end of segments.
+     For instance, for `t=0` -- both points will be at the beginning of segments, and for `t=0.25` -- on the 25% of segment length from the beginning, for `t=0.5` -- 50%(the middle), for `t=1` -- in the end of segments.
 
-    - Connect the points. On the picture below the connecting segment is painted <span style="color:#167490">blue</span>.
+   - Connect the points. On the picture below the connecting segment is painted <span style="color:#167490">blue</span>.
 
-
-| For `t=0.25`             | For `t=0.5`            |
-| ------------------------ | ---------------------- |
-| ![](bezier3-draw1.svg)   | ![](bezier3-draw2.svg) |
+| For `t=0.25`           | For `t=0.5`            |
+| ---------------------- | ---------------------- |
+| ![](bezier3-draw1.svg) | ![](bezier3-draw2.svg) |
 
 4. Now in the <span style="color:#167490">blue</span> segment take a point on the distance proportional to the same value of `t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is <span style="color:red">red</span>.
 
@@ -93,9 +93,9 @@ The algorithm for 4 points:
 
 - Connect control points by segments: 1 -> 2, 2 -> 3, 3 -> 4. There will be 3 <span style="color:#825E28">brown</span> segments.
 - For each `t` in the interval from `0` to `1`:
-    - We take points on these segments on the distance proportional to `t` from the beginning. These points are connected, so that we have two <span style="color:#0A0">green segments</span>.
-    - On these segments we take points proportional to `t`. We get one <span style="color:#167490">blue segment</span>.
-    - On the blue segment we take a point proportional to `t`. On the example above it's <span style="color:red">red</span>.
+  - We take points on these segments on the distance proportional to `t` from the beginning. These points are connected, so that we have two <span style="color:#0A0">green segments</span>.
+  - On these segments we take points proportional to `t`. We get one <span style="color:#167490">blue segment</span>.
+  - On the blue segment we take a point proportional to `t`. On the example above it's <span style="color:red">red</span>.
 - These points together form the curve.
 
 The algorithm is recursive and can be generalized for any number of control points.
@@ -112,7 +112,6 @@ These points make the curve.
 **Run and pause examples to clearly see the segments and how the curve is built.**
 ```
 
-
 A curve that looks like `y=1/t`:
 
 [iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370]
@@ -144,7 +143,6 @@ Sometimes we have another task: to draw a curve *through several points*, so tha
 There are mathematical formulas for such curves, for instance [Lagrange polynomial](https://en.wikipedia.org/wiki/Lagrange_polynomial). In computer graphics [spline interpolation](https://en.wikipedia.org/wiki/Spline_interpolation) is often used to build smooth curves that connect many points.
 ```
 
-
 ## Maths
 
 A Bezier curve can be described using a mathematical formula.
@@ -155,14 +153,15 @@ Given the coordinates of control points <code>P<sub>i</sub></code>: the first co
 
 - The formula for a 2-points curve:
 
-    <code>P = (1-t)P<sub>1</sub> + tP<sub>2</sub></code>
+  <code>P = (1-t)P<sub>1</sub> + tP<sub>2</sub></code>
+
 - For 3 control points:
 
-    <code>P = (1−t)<sup>2</sup>P<sub>1</sub> + 2(1−t)tP<sub>2</sub> + t<sup>2</sup>P<sub>3</sub></code>
-- For 4 control points:
+  <code>P = (1−t)<sup>2</sup>P<sub>1</sub> + 2(1−t)tP<sub>2</sub> + t<sup>2</sup>P<sub>3</sub></code>
 
-    <code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub>  +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code>
+- For 4 control points:
 
+  <code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub> +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code>
 
 These are vector equations. In other words, we can put `x` and `y` instead of `P` to get corresponding coordinates.
 
@@ -173,10 +172,10 @@ For instance, the 3-point curve is formed by points `(x,y)` calculated as:
 
 Instead of <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> we should put coordinates of 3 control points, and then as `t` moves from `0` to `1`, for each value of `t` we'll have `(x,y)` of the curve.
 
-For instance, if control points are  `(0,0)`, `(0.5, 1)` and `(1, 0)`, the equations become:
+For instance, if control points are `(0,0)`, `(0.5, 1)` and `(1, 0)`, the equations become:
 
-- <code>x = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 0.5 + t<sup>2</sup> * 1 = (1-t)t + t<sup>2</sup> = t</code>
-- <code>y = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 1 + t<sup>2</sup> * 0 = 2(1-t)t = –2t<sup>2</sup> + 2t</code>
+- <code>x = (1−t)<sup>2</sup> _ 0 + 2(1−t)t _ 0.5 + t<sup>2</sup> \* 1 = (1-t)t + t<sup>2</sup> = t</code>
+- <code>y = (1−t)<sup>2</sup> _ 0 + 2(1−t)t _ 1 + t<sup>2</sup> \* 0 = 2(1-t)t = –2t<sup>2</sup> + 2t</code>
 
 Now as `t` runs from `0` to `1`, the set of values `(x,y)` for each `t` forms the curve for such control points.