[2019鐵人賽] - 10.筆記IoT初練習- Johnny Five -轉吧！七彩霓紅燈～實作篇

[2019鐵人賽] - 10.筆記IoT初練習- Johnny Five -轉吧！七彩霓紅燈～實作篇

  9/13/2019    King Tzeng

---

本篇文章續上篇 - 
「 [2019鐵人賽] - 9.筆記IoT初練習- Johnny Five -轉吧！七彩霓紅燈～LED.RGB 」

實作七彩霓虹燈 

謎之音：不就是七個顏色輪流變嗎??  (╯°Д°)╯~ ┻━┻
本魯宅：不不～我們要加上不一樣的效果當然不能都抄襲官網的範例啊 (*ˇωˇ*人)
謎之音：喔～原來是致敬啊....  (ﾒﾟДﾟ)ﾒ


實作
有淡入效果的七彩霓虹燈～

分成三大區塊動作

1. 宣告變數與參數：
因為顏色不多只有七個顏色，就用最簡單的我們把七個顏色的色碼寫為陣列

2. 顏色部分：
利用for迴圈讓他loop 輪流紅→橙→黃→綠→藍→靛→紫，設定一秒後為下一個顏色！

3. 淡入的效果：
在進入下一個顏色內，呼叫 intensity( ) ，使LED亮度從0(暗) → 99(亮)，藉此來呈現淡入的效果。

但這邊會有個問題！intensity的value值，用for迴圈累加 i 值
因為JS for迴圈執行速度太快了，又沒有像C/C++有類似sleep延遲執行的指令，value 瞬間就會從0加到99了，這樣以人眼來看根本看不出有LED有漸亮的效果....( ˘•ω•˘ )a

所以！參拜一下谷哥大神後，於是就有答案啦！ヾ(◎´・ω・｀)ノ

原來JS有for迴圈的阻塞機制(註一)，讓迴圈延遲幾毫秒後在繼續動作！(心之音：哇～這根本解救了我
這樣我們就可以讓LED的亮度慢慢亮起來，產生淡入的效果了～ σ`∀´)σ

註一：JS實現停留幾秒sleep，Js中for迴圈的阻塞機制，setTimeout延遲執行


進階實作 (並不是X
看透人生的七彩霓虹燈 （謎之音：這殺小....朋友啦XD

沒錯！我們要呼應一下開頭！
你的人生是怎樣的呢？
是色彩繽紛的人生嗎～還是充滿七彩光芒的人生呢～

本魯宅以這個例子來說明我的人生樣態

一樣分成三大區塊動作

宣告變數與參數 和顏色部分和上一個例子是一樣的，就不多說了～
19～23行，這次我們不用淡入的效果，我們用 Math.floor(Math.random() * 100 + 1)  亂數產生1～100的整數，在使用led.intensity放入數值～

我的人生七彩霓虹燈做出來啦～ヽ(・×・´)ゞ

恩..........沒錯就是這樣.........Orz

本文到這邊先下台一鞠躬了～

有錯敬請留言改正，感謝您的閱讀 <(_ _)>