p5.js [タイルで埋める] 色塗り編

＊この記事はp5.js [タイルで埋める] 基本編の内容を前提にしています
##タイルに色を塗る方法

STEP1：タイルの座標から色を生成する
STEP2：カラーリストを作成して色を呼び出す

以下のコードをテンプレートとし、「塗り方のルール」,「カラーリスト」の部分に変更を加えていきます。

qiita.js

//画面いっぱいにタイルを敷き詰める

//カラーリストを予めグローバル変数として設定
let colorList = [];

let tileCountX, tileCountY;
let tileWidth, tileHeight;

function setup(){
  //キャンバス設定
  createCanvas(600, 500);//600px * 500px
  //色設定
  colorMode(HSB);
  //1.タイルの枚数
  tileCountX = 20;
  tileCountY = 10;
  //2.タイルの幅
  tileWidth = width/tileCountX;
  tileHeight = height/tileCountY;
  //=== カラーリスト ===

  //ここまで
}

function draw(){
  //3.タイルの座標&描画
  for(let gridY = 0; gridY < tileCountY; gridY++){
    for(let gridX = 0; gridX < tileCountX; gridX++){
      //=== 塗り方のルール ===

      //ここまで
      let posX = gridX*tileWidth;
      let posY = gridY*tileHeight;
      rect(posX, posY, tileWidth, tileHeight);
    }
  }
}

##STEP1：タイルの座標から色を生成する
###例１）
まずは実際に見てみましょう。
**「塗り方のルール」**以下に、こんな感じで書いてみます。

qiita.js

  fill(0, gridX*5, gridY*5);

赤のグラデーションができました。

<解説>
赤色（H = 0）に対し、彩度(S)がX座標、明度(B)がY座標に対応して変化します。右に行くほど鮮やかに、下に行くほど明るい色のタイルが生成されます。
###例２）
今度は条件式を使ってみます。

qiita.js

if((gridX + gridY) % 2){
  fill(90);
}else{
  fill(100);
}

こんな感じのモザイク模様ができました。

<解説>
「X座標とY座標を足した値が、偶数なら白、奇数ならグレーで塗る」というルールを適用しています。

===

以上のように、座標の値を直接計算式や条件式に入れて色を生成することができます。
##STEP2：カラーリストを作成して色を呼び出す

例えば20×20=400枚のタイルを、ランダムに生成したグレースケール（fill(0~100)）で塗りたい時どうすればいいでしょうか。

**「塗り方のルール」**以下に「fill(random(100))」としてしまうと、drawが呼び出される度に400枚の色がランダムに再生成され、砂嵐のようなことになってしまいます。

このような事態を避けるには、あらかじめdraw関数の外で色を定義し、保存しておく必要があります。**「カラーリスト」**以下にこのように書いてみましょう。

qiita.js

for(i = 0; i < 400; i++){
  colorList[i] = color(random(100));
}

colorList[]に、400個の色が保存されました。
「塗り方のルール」以下にこのように書いて呼び出してみます。

qiita.js

fill(colorList[20*gridY + gridX]);

無事、400枚のグレースケールが呼び出されました。

===

最後に、二つのステップを利用した例を紹介します。

qiita.js

//画面いっぱいにタイルを敷き詰める

let colorList = [];
let tileCountX,tileCountY;
let tileWidth, tileHeight;

function setup(){
  //キャンバス設定
  createCanvas(600, 600);
  noStroke();
  //色設定
  colorMode(HSB);

  //1.タイルの枚数
  tileCountX = 20;
  tileCountY = 20;
  //2.タイルの幅
  tileWidth = width/tileCountX;
  tileHeight = height/tileCountY;

  //=== カラーリスト ===
  for(let i = 0; i < 7; i++){
    //寒色をランダムに7種類保存
    colorList[i] = color(random(180,360),80,95);
  }
  //ここまで
}

function draw(){
  //3.タイルの座標&描画
  for(let gridY = 0; gridY < tileCountY; gridY++){
    for(let gridX = 0; gridX < tileCountX; gridX++){

      //=== 塗り方のルール ===
      //X,Y座標の積・和をそれぞれ剰余演算し、それらの和をさらに剰余演算
      //→ それぞれのタイルに0~6の数字を代表させ、modColorに代入
      let modColor = (((gridX*gridY) % 3) + ((gridY + gridX) % 5)) %  7;
      //modColorに応じた色をカラーリストから呼びだす
      fill(colorList[modColor]);
      //ここまで

      let posX = gridX*tileWidth;
      let posY = gridY*tileHeight;
      rect(posX, posY, tileWidth, tileHeight);
    }
  }
}

サイケ。