## 三角函數（二）
這一章依舊是關于三角函數的，讓我們來看看使用三角函數能做些什么，內容如下：
波形（平滑的上下運動、線性運動、脈沖運動）
圓周運動與橢圓運動
兩點間的距離（勾股定律）
**1、波形**
看到下面這張邪惡的波形圖，我們又要感慨一聲：初中的回憶
沒錯，這就是正弦波，也就是正弦曲線（sin()），上面的圖只是正弦函數的一個周期[0,2π]，對應正弦值范圍是：[-1,1]。如果你要取sin()在[0,2π]之間的值，我們可以這樣獲取：
```
for(var angle = 0; angle < Math.PI*2; angle += 0.1){
console.log(Math.sin(angle));
}
```
上面的值并沒有包括-1、1和0，因為以0.1的步長是不會出現π或π/2的整數倍。
再次提醒，Math對象中所有關于三角函數的計算都是基于 弧度 的。
還是那句話，不要紙上談兵，下面還是用例子說話：
**（1）平滑的上下運動**
實例：canvas-demo/sin.html
在上面的例子中，我們通過 angle+=0.1 改變angle的值，然后傳遞給Math.sin()，它會根據angle值的變化，返回從0到1再變到-1最后回到0的值，最終就產生了跟正弦波軌跡一樣的平滑運動，如下代碼：
```
ball.x += 1;
ball.y += Math.sin(ball.angle) * 10;
ball.angle += 0.1;
```
**（2）線性運動**
線性運動也可稱為勻速運動，也就是物體朝著一個方向做勻速（等速度）運動。對于線性運動，這里就不給例子了，你只需將上面平滑運動中的例子內這段代碼注釋掉就是線性運動：
ball.angle += 0.1;
**（3）脈沖運動**
我們都知道，動畫并不僅僅局限于坐標的變化，還有很多，比如：物體顏色、物體大小等等。而脈沖運動就是通過改變物體的大小（比例）而形成的。
實例：canvas-demo/pulsingMotion.html
在這個例子中，給Ball類添加了一個scale屬性，表示Ball的大小比例，通過下面的代碼改變比例：
```
ball.scale = 1 + Math.sin(ball.angle);
ball.angle += 0.1;
ball.radius = 10 * ball.scale;
```
特別強調，不要讓上面的這些例子限制了你的思維，你可以利用正弦波進行任何屬性的改變，相信你會得到各種有趣酷炫的視覺效果。
**2、圓周運動與橢圓運動**
**（1）圓周運動**
圓周運動是指繞著一個完整的圓形軌跡做運動，也可以這樣理解，物體離圓心的距離不變的運動。
表達式：
```
sin(θ) = x1 / R => x1 = R * sin(θ)
cos(θ) = y1 / R => y1 = R * cos(θ)
```
實例：
主要計算公式（radius為50）：
```
ball.x = centerX + Math.sin(ball.angle)*radius;
ball.y = centerY + Math.cos(ball.angle)*radius;
```
**（2）橢圓運動**
我們將橢圓的長軸和短軸分別設為2a和2b。
表達式：
```
x2 = a * cosθ
y2 = b * sinθ
```
橢圓和正圓的唯一區別就是，正圓上任何一個點到圓心的距離都是一樣的，而橢圓卻不一樣。
實例：canvas-demo/ellipseMotion.html
與正圓運動不一樣的是，橢圓運動是根據兩個半徑值來計算的（radiusX為100，radiusY為50）：
```
ball.x = centerX + Math.sin(ball.angle)*radiusX;
ball.y = centerY + Math.cos(ball.angle)*radiusY;
```
**3、兩點間的距離（勾股定律）**
很多時候，我們需要知道兩個物體間的距離（對于后面的碰撞檢測很重要），這時我們又要用到數學了，那就是勾股定律（要知道詳情，請百度）。
假設有點A(x1,y1)和點B(x2,y2)，要求它們的距離很簡單：
```
var dx = x2 - x1;
var dy = y2 - y1;
var dist = Math.sqrt(dx * dx + dy * dy);
```
dist就是兩點間的距離了。其實在上面我們用到了很多，比如圓的半徑，就是這樣計算來的，只不過它有一個特殊點（原點(0,0)），就相等于 x1 = 0, y1 = 0 。
**附錄：**
**（1）角度與弧度互轉**
```
radians = degrees * Math.PI /180
degrees = radians * 180 / Math.PI
```
**（2）旋轉（弧度）**
```
dx = point.x - object.x;
dy = point.y - object.y;
boject.rotation = Math.atan2(dy, dx);
```
**（3）平滑運動**
```
value = center + Math.sin(angle) * range;
angle += speed;
```
**（4）圓形運動**
```
xposition = centerX + Math.cos(angle) * radius;
yposition = centerY + Math.sin(angle) * radius;
angle += speed;
```
**（5）橢圓運動**
```
xposition = centerX + Math.cos(angle) * radiusX;
yposition = centerY + Math.sin(angle) * radiusY;
angle += speed;
```
**（6）兩點間的距離**
```
var dx = x2 - x1;
var dy = y2 - y1;
var dist = Math.sqrt(dx * dx + dy * dy);
```
