8 美麗線條程式修改

最後，我們要把上一個小單元用方塊堆出來的程式拿來做一些修改。我們希望每次畫線轉彎的角度，可以用 Smart 開發板的感光元件來控制，也希望幫線條加上一點顏色。這個部份如果覺得比較困難，可以直接點選這裡進入程式頁面玩看看。那如果有興趣的話，可以參照以下的製作說明。

把上一個小單元的 JavaScript 程式碼找出來，複製一份到 jsbin 的專案中。
把 Smart 板感光的 JavaScript 程式碼也找出來（先拉方塊，再看它的 JavaScript 程式碼）。
現在在 jsbin 的專案中，修改 JavaScript 的部份，先把變數的部份通通移到 JS 檔的開頭位置，像下面這樣：

var photocell;
var size;
var cx;
var deg;
var cy;
var rad;
var len;
var degree;
var nx;
var ny;
var color = 0x000000;
var colorstep = 0x011020;
var colorstr = '#00cccc';
var Did = window.prompt('設備號碼');

1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意這邊我們加上了 color, colorstep, colorstr 三個變數，主要用來控制顏色的變化，另外加上 Did 變數，用來讀取設備號碼。

注意到主程式的部份，通通會被包到 async 的一個函數中，這主要是因為用到了延遲函數 await 的緣故。那我們把 smart 感光的部份放在開頭，當板子 Ready 之後，才開始畫圖。另外，當感光值改變的時候，我們同時改變線條轉彎的角度 (80~180)。

(async function () {

boardReady({board: 'Smart', device: Did, transport: 'mqtt', multi: true}, function (board) {
  board.samplingInterval = 50;
  photocell = getPhotocell(board, 0);
  StartDrawing();
  photocell.measure(function (val) {
    photocell.detectedVal = val;
    degree = 80+val * 100;
    console.log(degree);
  });
});

1
2
3
4
5
6
7
8
9
10
11
12

接下來是畫圖的部份，這邊我們加上了一個敘述，就是當目前座標已經超出畫面太遠的時候，把螢幕清除掉 (使用 canvas_clear 函數)。另外，畫線條的部份，我們加上了顏色的變數 (colorstr)，還有延遲時間縮短為 0.1 秒。

async function StartDrawing() {
  while (true) {
    if ((cx<0 || cx>size) && (cy<0 || cy>size)) {
      cx = size/2;
      cy = size/2;
      len = 5;
      deg = 0;
      canvas_clear('canvas');
    }
    UpdateParameters();
    canvas_line('canvas',1,cx,cy,nx,ny,colorstr,0,0.8);
    cx = nx;
    cy = ny;
    await delay(0.1);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

更新參數的部份，主要是加上顏色的變化，基本上是把顏色加上一個值，然後轉成 16 進位的整數，再加上一個 # 字字元。

function UpdateParameters() {
  console.log("Updat degree = "+degree);
  deg = deg + degree;
  color = color + colorstep;
  color = color & 0xFFFFFF;
  colorstr = "#"+color.toString(16);
  rad = (deg * Math.PI) / 180;
  nx = cx + len * (Math.cos(rad));
  ny = cy - len * (Math.sin(rad));
  len = len + 2;
}

1
2
3
4
5
6
7
8
9
10
11

那最後就是畫布的產生了，這部份基本上沒什麼變動：

size = 500;
cx = size / 2;
cy = size / 2;
len = 5;
deg = 0;
degree = 104;
canvas_create('canvas',size,size,0,0,0);

1
2
3
4
5
6
7

最後完整的程式碼如下：

← 7 用遊戲模組創作美麗線條致謝 →

# 8 美麗線條程式修改

8 美麗線條程式修改