１秒ごとに数多の正方形の色が変わったり明滅するだけのプログラム

2019年9月7日2019年9月21日

１秒ごとに数多の正方形の色が変わったり明滅するだけのプログラムです。
色の種類は
16×16×16×16×16×16パターンです。

こちらの「黒い正方形が明滅するだけのプログラム〜２分の１の確率で明滅〜」と「数多の正方形の色が１秒ごとに変わるだけのプログラム」を組み合わせたものになります。
黒い正方形が明滅するだけのプログラム〜２分の１の確率で明滅〜
数多の正方形の色が１秒ごとに変わるだけのプログラム

残像がちょっと見えたりするのが面白いですね。

gitにソースを公開しております。
https://github.com/Chico27/change-rectangle-sprinkle

jsはこんな感じに作られております。
ところどころコメントがありますが気にしないでください。

const line = 10;
const column = 10;
const maxRectangle = line*column;
var limitCt = 0;
window.onload = function() {
  setInterval("sprinkle()", 1000);

  let k = 1;
  for (let i = 1; i <= line; i++) {
    for (let j = 1; j <= column; j++) {
      // selectChangeCt = Math.floor(Math.random()*10)+1
      const div = document.createElement('div');
      div.id='black_rectangele_' + k;
      div.classList.add('box');
      div.classList.add('flex');
      // div.classList.add('change_ct_' + selectChangeCt);
      document.body.appendChild(div);
      k++;
    }
    const div2 = document.createElement('div');
    document.body.appendChild(div2);
  }
  // sprinkle();
}

function sprinkle(){
  ct = 1;
  // console.log(ct);
  // console.log(colorString);
  let colorString = setColor();
  while(ct <= maxRectangle){
    let colorString = setColor();
    let attr = document.getElementById("black_rectangele_" + ct);
    attr.style.background = colorString;
    randomNum = Math.random();
    if (randomNum < 0.5){
      if (!attr.classList.contains('box_disappear')) {
        attr.classList.add("box_disappear");
        attr.style.background = "#FFF";
      } else {
        attr.classList.remove("box_disappear");
      }
    }
    ct++;
  };
}

function setColor(){

  let colorString = "#";

  for (let i = 0;i < 6; i++){
    colornum = Math.floor(Math.random()*16);
    colorString += colornum.toString(16);
    // console.log(colorString);
  }

  return colorString;
}

const line = 10;

const column = 10;

const maxRectangle = line*column;

var limitCt = 0;

window.onload = function() {

setInterval("sprinkle()", 1000);

let k = 1;

for (let i = 1; i <= line; i++) {

for (let j = 1; j <= column; j++) {

// selectChangeCt = Math.floor(Math.random()*10)+1

const div = document.createElement('div');

div.id='black_rectangele_' + k;

div.classList.add('box');

div.classList.add('flex');

// div.classList.add('change_ct_' + selectChangeCt);

document.body.appendChild(div);

k++;

}

const div2 = document.createElement('div');

document.body.appendChild(div2);

}

// sprinkle();

}

function sprinkle(){

ct = 1;

// console.log(ct);

// console.log(colorString);

let colorString = setColor();

while(ct <= maxRectangle){

let colorString = setColor();

let attr = document.getElementById("black_rectangele_" + ct);

attr.style.background = colorString;

randomNum = Math.random();

if (randomNum < 0.5){

if (!attr.classList.contains('box_disappear')) {

attr.classList.add("box_disappear");

attr.style.background = "#FFF";

} else {

attr.classList.remove("box_disappear");

}

ct++;

};

}

function setColor(){

let colorString = "#";

for (let i = 0;i < 6; i++){

colornum = Math.floor(Math.random()*16);

colorString += colornum.toString(16);

// console.log(colorString);

}

return colorString;

}

私の今までの成果物はこちらです。
成果物一覧

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw

プログラミングアート

Posted by ちこ

１秒ごとに数多の正方形の色が特定の色に変わる可能性のあるだけのプログラム

数多の正方形の色が１秒ごとに変わるだけのプログラム

コメント一覧

まだ、コメントがありません