成果索引表

LineLib_01.js

--主函式對應表，與線條上下順序對應--

1. WideSnowFlake(0,100,700,5,50);
2. NarrowSnowFlake(0,150,700,5,50);
3. SnowFlakeBorad(0,250,700,50);
4. ResidualCurve(0,350,700,20,20);
5. ResidualCurve(0,400,700,20,8);
6. theta+=TWO_PI/frms;
   RoundNoise(400,500,50,10,0.6,2,theta,2);
7. theta+=TWO_PI/frms;
   RoundNoise(500,500,50,25,0.2,3,theta,2);
   ——6\7為右下的兩個動態對話方塊

Pattern.js

1. drawSmileFace(80,500,50,1);32
2. drawSmileFace(140,500,50,0.5);
3. drawSmileFace(200,500,50,0.1);
   ——1、2、3為三個固定笑臉
4. time++;
   var Smile=cos(time/10);
   drawSmileFace(260,500,50,Smile);
   ——眨眼笑臉

線條部分

• 在LineLib_0*.js中實現線條的繪製

LineLib_01.js檔案

1.function WideSnowFlake

• 核心思想：
  利用noise與random的屬性對y值進行上下的改變，再利用line函式畫出短線模擬雪花點。
  跳轉到預覽目錄

2.function NarrowSnowFlake

• 核心思想：
  自WideSnowFlake衍生而來。
  起初時因為發現每次重新整理時WideSnowFlake繪製出的線條寬度不一，發現可以設定引數調整線條的寬度，形成新的效果。
  將WideSnowFlake()中固定的movespeed乘上隨機小數，獲得隨機值move，利用noise(move)來隨機控制線條的寬度，形成聚合效果。
  
  跳轉到預覽目錄

3.function SnowFlakeBorad

• 核心思想：
  發現了可以控制WideSnowFlake()中繪製線條的寬度後，思考是否能夠在固定(x,y)範圍內實現雪花屏效果。
  

4.function ResidualCurve

• 核心思想：
  希望結合之前的隨機方法，生成隨機波動的曲線。
  尋找到了curveVertex()方法記錄點用於繪製曲線。
  想要控制曲線的平滑度，設想是增加繪製點間的距離，於是增加了Smooth變數。同時yHeight變數可以控制y值變化的最大區間，配合Smooth可以更好的實現範例中平滑拉伸的效果。
  
  跳轉到預覽目錄

5.function RoundNoise

• 核心思想：
  環形動態對話方塊繪製。
  用於互動漫畫，設想可以控制繪製位置(x0,y0)、對話方塊大小®、線條的平滑值(nInt)、上下跳動的極限範圍(nAmp)、重疊對話方塊效果(num)、對話方塊寬度(w)。
  利用前面在ResidualCurve()中學習的*curveVertex()*方法繪製平滑的曲線。
  
  跳轉到預覽目錄

動態圖形部分

Pattern.js

1.function drawSmileFace

• 核心思想：
  繪製可自由設定的動態笑臉。
  利用弧函式arc(x,y,w,h,[start],[end])繪製會眨動的眼睛。
  UpDown引數為0~1內小數，對圓的y軸值進行調整，達到由圓變線的效果。
  
• 動態繪製：
  主函式呼叫時：

  time++;
  var Smile=cos(time/10);
  drawSmileFace(260,500,50,Smile);

跳轉到預覽目錄