特定の色のパターンで明滅するだけのプログラム〜初期値のカウントを保持〜

2019年9月14日2019年9月21日

こちらで色のパターンを特定の色にしてみました。
特定の色のパターンで正方形が明滅するだけのプログラムです。
どの色が出現するかはランダムです。
色の種類は
赤、オレンジ、黄色、緑、水色、青、紫の合計７パターンとなっております。

明滅かつ正方形の色が変わる特定パターンは
1.それぞれの正方形が１〜９のカウントを持つ
2.1秒ごとにそれぞれのカウントが減り、カウントが0になると正方形が消える
3.消えた正方形はまた初期値である１〜９のカウントから始め、カウントが0になると色がランダムに特定のパターンの色に変わった正方形が再度現れる
となっております。

JavaScriptは用意されている関数が微妙なものが多いため、無理やり実現しています。
よってソースはかなり汚いです。

色のパターンを絞ってもあまり綺麗には見えません。
やっぱりモノクロの方が良いですね。

色の種類が３種類のものも試しました。
色の種類は
赤、黄色、青です。
相変わらずどこか子供っぽい色合いです。

gitにソースを公開しております。
こちらのソースは７色のものになります。
https://github.com/Chico27/colorful-rectangle-sprinkle-count2

jsはこんな感じに作られております。
コメントが混じっておりますが気にしないでください。
主にデバッグ用です。
function setColorのcolorList1をcolorList2に変えれば３色になります。

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()*9)+1
      let colorString = setColor();
      const div = document.createElement('div');
      div.id='black_rectangele_' + k;
      div.style.background = colorString;
      div.classList.add('box');
      div.classList.add('flex');
      div.classList.add('having_ct_' + selectChangeCt);
      div.classList.add('change_ct_' + selectChangeCt);
      document.body.appendChild(div);
      k++;
    }
    const div2 = document.createElement('div');
    document.body.appendChild(div2);
  }
}

//現在時刻を表示する関数
function sprinkle(){
  ct = 1;
  while(ct <= maxRectangle){
    let colorString = setColor();
    let attr = document.getElementById("black_rectangele_" + ct);
    let attrClass =  attr.className;
    let chars = attrClass.split(' ');
    let containDisappear = false;

    if (chars.includes("box_disappear")) {
      chars.splice(chars.indexOf("box_disappear"), 1);
      containDisappear = true;
    }

    let having_ct = chars[2].slice(-1);
    let change_string = chars[3];
    let change_ct = change_string.slice(-1);
    change_ct--;
    if (change_ct == 0){
      // console.log(containDisappear)
      if (!containDisappear) {
        // console.log(true)
        attr.classList.add("box_disappear");
        attr.style.background = "#fff";
      } else {
        // console.log(false)
        attr.classList.remove("box_disappear");
        attr.style.background = colorString;
      }
      change_ct = having_ct;
    }
    attr.classList.remove(change_string)
    attr.classList.add('change_ct_' + change_ct)
    // if(!chars.indexOf(pattern)){
    //   console.log(chars[string.indexOf(pattern)])
    // }
    ct++;
  }
}

function setColor(){

  // let colorString = "#";
  let colorList1 = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];
  let colorList2 = ['red', 'yellow', 'blue'];

  // for (let i = 0;i < 6; i++){
    colornum = Math.floor(Math.random()*colorList1.length);
    let colorString = colorList1[colornum];
    // 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()*9)+1

let colorString = setColor();

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

div.id='black_rectangele_' + k;

div.style.background = colorString;

div.classList.add('box');

div.classList.add('flex');

div.classList.add('having_ct_' + selectChangeCt);

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

document.body.appendChild(div);

k++;

}

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

document.body.appendChild(div2);

}

//現在時刻を表示する関数

function sprinkle(){

ct = 1;

while(ct <= maxRectangle){

let colorString = setColor();

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

let attrClass = attr.className;

let chars = attrClass.split(' ');

let containDisappear = false;

if (chars.includes("box_disappear")) {

chars.splice(chars.indexOf("box_disappear"), 1);

containDisappear = true;

}

let having_ct = chars[2].slice(-1);

let change_string = chars[3];

let change_ct = change_string.slice(-1);

change_ct--;

if (change_ct == 0){

// console.log(containDisappear)

if (!containDisappear) {

// console.log(true)

attr.classList.add("box_disappear");

attr.style.background = "#fff";

} else {

// console.log(false)

attr.classList.remove("box_disappear");

attr.style.background = colorString;

}

change_ct = having_ct;

}

attr.classList.remove(change_string)

attr.classList.add('change_ct_' + change_ct)

// if(!chars.indexOf(pattern)){

// console.log(chars[string.indexOf(pattern)])

// }

ct++;

}

function setColor(){

// let colorString = "#";

let colorList1 = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];

let colorList2 = ['red', 'yellow', 'blue'];

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

colornum = Math.floor(Math.random()*colorList1.length);

let colorString = colorList1[colornum];

// console.log(colorString);

// }

return colorString;

}

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

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

ITパスポート、基本情報技術者、応用情報技術者などIPAが提供する国家資格の過去問を学べるモバイルアプリをリリースしました。
詳しくは下記のプレスリリースをご覧ください。
https://prtimes.jp/main/html/rd/p/000000008.000073303.html

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

プログラミングアート

Posted by ちこ

だちょう牧場並木屋に行った感想

カラフルな正方形が明滅するだけのプログラム〜初期値のカウントを保持〜

コメント一覧

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