北極熊 Week03 點連成線動畫、HSB顏色模型、diffColor小遊戲

點連成線動畫

• 打開Processing
• 先畫一個圓
  
  
  
• 加入dx dy，讓圓可以移動，執行時會發現原點會一直往右下移動，離開視窗範圍
  

  

  
• 更改背景為黑色，調整dx dy為隨機產生-1到1間的數值，讓原點不會離開視線範圍

  

  
• 加入陣列和迴圈

  

  
• 開始依據兩個點的距離遠近畫線

• 新增視窗內顯示的點數量，設一個變數Ｎ方便用來改數量
  
  
  
• 新增畫線的顏色變化，距離近顏色越白，距離遠顏色越淡（黑）
  

  

  
• 讓他看起來更有趣一點，新增兩點連線拉扯的感覺（吸引力）
  

  

  
  

  
  
  

顏色變化

• 使用HSB顏色模式（H單位是角度，S、B單位是百分比）
• 在draw函式裡使用frameCount%360，讓背景可以從0~360循環變化顏色，S和B的數值則不變，預先設定好
  
  
• 執行後會看到背景色不斷變化
  
  
  
  
  
  

產生像顏色選擇器的樣子

• 一樣選用HSB顏色模式，數值設定400，產生400個顏色
  
  
• 執行結果
  
  
  
  

用HSB顏色模型製作diffColor小遊戲

• 設定chooseColor函數用來隨機產生HSB顏色
  

  
  
• 新增滑鼠按下呼叫chooseColor函數，設定顏色產生範圍

  
• 新增兩個隨機產生顏色