Pythonの勉強を始めました。
何か出力して楽しめるものがないか探していたところ、ラズパイでLチカ関連の記事が目に付いたので色々と調べてみました。
ラズパイ。
本体と色々なモジュール込み込みでおよそ1万円くらいかかりそうです。
。。。と、その前にJavaScriptで、ブラウザ版のLチカ（LEDがチカチカするわけではないけど。。。）を作ってみようと決心しました。
仕様
ボカシ処理した円をブラウザの表示領域に並べる。
ランダムなRGB値を取得し全ての円に着色する。
ランダムなRGB値でチカチカさせる。
一応レスポンシブにも対応。
以上
ソースコードは以下。
Lチカもどき.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Lチカ もどき</title>
<style>
/*リセットCSS*/
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--親要素-->
<div id="obj__container" style="display: flex; flex-wrap: wrap;justify-content: space-around; align-content: space-around; background-color: #000; overflow: hidden;"></div>
<script>
var docWidth = document.documentElement.clientWidth; //ドキュメントの横の表示領域
var docHeight = document.documentElement.clientHeight; //ドキュメントの縦の表示領域
var horiLength = 10; //横の個数
var objSize = docWidth / horiLength; //オブジェクトのサイズ
console.log(horiLength * Math.floor(docHeight / objSize)); //オブジェクトの総数
console.log(docWidth + "X" + docHeight); //表示領域
console.log(objSize); //サイズ表示
var objContainer = document.getElementById('obj__container');
for (var i = 1, objLen = horiLength * Math.floor(docHeight / objSize); i <= objLen; i++) {
var myDiv = document.createElement('div'); //divの子要素を作成
objContainer.appendChild(myDiv);
myDiv.setAttribute('id', 'obj__contents' + zeroPad(i)); //個数分、連番付与の要素を作成
myDiv.setAttribute('style', 'width:' + objSize + 'px; height:' + objSize + 'px; left: ' + objSize * i + 'px; border-radius:50%; filter: blur(' + objSize / 8 + 'px);'); //諸設定
putColor(myDiv); //チカチカ関数実行
}
//▼ランダムなカラー値を与える関数
function putColor(ele) {
setInterval(function() { //setInterval
var rColor = getRandomColorNum(255, 0), //R値
gColor = getRandomColorNum(255, 0), //G値
bColor = getRandomColorNum(255, 0); //B値
ele.style.backgroundColor = 'rgb(' + rColor + ',' + gColor + ',' + bColor + ')';
}, 500);
return ele;
}
//▼ランダムな数値を取得する関数
function getRandomColorNum(maxColorNum, minColorNum) {
var colorNum = parseInt(Math.random() * (maxColorNum + 1 - minColorNum) + minColorNum);
return colorNum;
}
//▼ゼロパッディング関数
function zeroPad(zeroNum) {
var zeroNum = ('00' + zeroNum).slice(-2);
return zeroNum
}
</script>
</body>
</html>
▲ランダムなRGB値でチカチカします。
課題
ボタンなどを設置しチカチカの速度を速くしたり、円の大きさを変えたりしても楽しいかも知れません。。。
ベンダープレフィックスは付与していないのでIEではボカシ効果が得られません。
動作確認は適当です。