最近在實現https://javascript30.com/的課程，其中有一門課程要求利用Canvas實現一個效果，我發現這個效果其中的顏色是線性生成的。結合我之前已經寫過一個隨機顏色生成器，就想將這個隨機顏色生成器寫出來，作爲一個工具使用，雖然實際應用場景不大，就當練練手了。
本示例中使用了大量的Generator，在寫的過程發現ES6所提供的Generator在這個場景中非常適用。可以參考學習。
本工具已經上傳至NPM，詳細介紹了使用方法與注意事項，請移步至：random-color-generator2
1.2.0 版本現已支持HSL算法，線性輸出更平穩。
隨機生成一個顏色
在瀏覽器中這麼使用:
// 生成隨機色
const pointer = rcg2.generateColor(false);
const color = pointer.next().value;
我的示例中使用了300個顏色塊，所以顏色呈現上圖效果。
返回線性遞增顏色
在瀏覽器中這麼使用:
// 生成線性色, 步長爲5
const pointer = rcg2.generateColor(true, 5);
const color = pointer.next().value;
我的示例中使用了300個顏色塊，所以顏色呈現上圖效果。
And (Use HSL algorithm. 😃 Be better! 😃)
HSL算法爲360個單位一週期。
HSL採用單次遞增1個單位的效果:
HSL採用單次遞增2個單位的效果:
文本示例:
| Index | Color |
|---|---|
| 0 | ‘#ff0000’ |
| 1 | ‘#ff1100’ |
| 2 | ‘#ff2200’ |
| 3 | ‘#ff3300’ |
| 4 | ‘#ff4400’ |
HSL算法說明圖:
如有疑問，可以參見項目中的
index.html示例文件。
對generateColor方法及顏色模板的說明
generateColor方法有兩個參數.
- 參數1，類型爲boolean值，表示是否開啓線性輸出。
- 參數2，類型爲整型，表示線性輸出情況下顏色的增量區間。例如這個值傳入3，在第一個值爲#00FF00的情況下，第二個值就爲03FF00，以此類推。
顏色模板的排列組合爲: XXFF00 XX00FF FFXX00 FF00XX 00XXFF 00FFXX，目前從這6箇中循環取模板，後期將支持自定義模板。
分治算法求排列組合
在實現線性遞增的過程中，需要了解情況線性顏色的變化方式，在觀察了ADOBE對於顏色的變化方式之後，知道需要有一個模板的排列組合。雖然這裏需要的只有6種，不用多長時間就可以窮舉出來，但是我還是想通過分治的方法將所有的可能列出來。
實現代碼如下：
// 分治算法計算所有的顏色模板值
function generateColorTemplate(array) {
// 出口
if (array.length === 1)
return array;
const resultArray = [];
for (let index = 0; index < array.length; index++) {
const firstEle = array[index];
const shadow = array.slice();
shadow.splice(array.indexOf(firstEle), 1);
const temp = generateColorTemplate(shadow);
// 組合
for (let indexJ = 0; indexJ < temp.length; indexJ++) {
const secondEle = temp[indexJ];
resultArray.push(`${firstEle}${secondEle}`);
}
}
return resultArray;
}
測試方式如下：
// test.js
const { generateColorTemplate } = require('./src/index.js');
const result = generateColorTemplate(['A', 'B', 'C', 'D', 'E']);
console.info(result.join(' '), result.length);
對於5個元素的排列組合爲: 5的階層, 也就是 5 x 4 x 3 x 2 x 1 = 120.
最終的結果經過多輪測試是正確的:
ABCDE ABCED ABDCE ABDEC ABECD ABEDC ACBDE ACBED ACDBE ACDEB ACEBD ACEDB ADB
CE ADBEC ADCBE ADCEB ADEBC ADECB AEBCD AEBDC AECBD AECDB AEDBC AEDCB BACDE
BACED BADCE BADEC BAECD BAEDC BCADE BCAED BCDAE BCDEA BCEAD BCEDA BDACE BDA
EC BDCAE BDCEA BDEAC BDECA BEACD BEADC BECAD BECDA BEDAC BEDCA CABDE CABED
CADBE CADEB CAEBD CAEDB CBADE CBAED CBDAE CBDEA CBEAD CBEDA CDABE CDAEB CDB
AE CDBEA CDEAB CDEBA CEABD CEADB CEBAD CEBDA CEDAB CEDBA DABCE DABEC DACBE
DACEB DAEBC DAECB DBACE DBAEC DBCAE DBCEA DBEAC DBECA DCABE DCAEB DCBAE DCB
EA DCEAB DCEBA DEABC DEACB DEBAC DEBCA DECAB DECBA EABCD EABDC EACBD EACDB
EADBC EADCB EBACD EBADC EBCAD EBCDA EBDAC EBDCA ECABD ECADB ECBAD ECBDA ECD
AB ECDBA EDABC EDACB EDBAC EDBCA EDCAB EDCBA 120
對於這種場景使用分治算法求排列組合非常合適。
代碼已經上傳Github，地址爲：Random Color Generator
這個工具已上傳NPM，地址爲：random-color-generator2
TODOLIST:
- 支持顏色模板可配置. 例如支持XXFFFF/XX0000/FFXXFF…
- 支持步長可配置. 支持單次遞增變化值: 1 ~ 255
- 支持顏色隨機範圍可配置. 例如支持100 ~ 150的顏色範圍區間
- 支持遞減