クリエイティブコーディングと配色

はじめに

これはp5.jsやProcessingでコーディングをしていて配色について考え始めた人へ向けたエントリです．合わせてデイリーコーディングのコツや，「グラフィックのためのコード」についてもまとめています．

僕は毎日時間を決めてクリエイティブコーディングをやっています．コードを含めた成果はopenProcessingやTwitterで公開しています．そこでは形と色の組み合わせから着想して，いわゆるグラフィックを生成することを目指してコーディングを始めることが多いです．あまり明確なゴールを決めていないので，場合によっては動くものが出来上がることもあります．こういった形式でコーディングを続けているのにはいくつか理由があることに最近気が付きました．

1. 動きがないので，アニメーションの調整などに時間がとられないこと．
2. 円や正方形など，基本図形からスタートできること．複雑にならないこと．
3. 形が色と組み合わせで人間の知覚や認識がだませること．
4. 短時間でのスプリント的コーディングと相性が良いこと．

などがざっと思いつく限りで挙げられることです．ハードルが低くて，区切りをつけやすく，シンプル，検討が早いのが良いところです．

コーディングのプロセスと「グラフィックのためのコード」

もう少し噛み砕いてみます．クリエイティブコーディングのプロセスを考えてみると

1. コードを書く．
2. 実行する．
3. 実行結果を確認して修正する．（1に戻る）

これらのサイクル通じて，コードを書き変えながら進めていくのがコードベースのクリエイティブコーディングの楽しいところだと思います．僕はその楽しさを毎日味わいたいので，空き時間に始めて数十行のコードで気軽に止めたり，続きを考えやすいようにしたいと思っています．小さく作って組み合わせながらそれを少しずつ大きく育てていく感じ，というか．そのスタイルに合っていると感じるのが「グラフィックのためのコード」です．

プロセスを高速で回そう

先程のプロセスで言うと，「アニメーションのためのコード」では3の実行結果を確認するフェーズで，インタラクションや動きがどうか，実時間で確認が必要です．自分が作る場合，イージングの調整や気持ちいい動きを作るのに実際に触ったり，調整に時間がかかります．それはとても楽しい部分ですが，どうしても1回につきかかる時間は短くても15秒とか，30秒，1分くらいかかる．比較して「グラフィックを作るコード」は実行して，5秒くらいあれば，

• エラーがなく動作しているか？
• 適切に表示されているか？

といった事柄を判断することができます．感覚的に即時フィードバックでとても楽です．1〜3のコーディングのプロセスを高速に回していくのに「グラフィックのためのコード」は結構利点が多くて良いのではと思っています．

「グラフィックのためのコード」テンプレート

では少し「グラフィックのためのコード」の書いてみましょうか．テンプレートは例えばこんな感じです．

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(random(width),random(height),random(50,100));
  
  //ループを停止する
  noLoop();
}

noLoop()でdraw関数のループ処理を停めています．簡単ですね．あるいはdraw関数をまるごと消す形でも良いです．

色について

今年の2月に開催されたProcessing Community Day Tokyoの基調講演で多摩美術大学の久保田晃弘さんはジョセフ・アルバースの「配色の設計」を例に，色彩を数理を用いてデザインすることを説明されていました．

配色の設計 ―色の知覚と相互作用 Interaction of Color

久保田さんは参加者からの質問に対して，HSBのカラーモードを使うということが基本，と答えていました．HSBの色空間についてはWikipediaなどを参照してもらえるといいですが，簡単に言うと色を，0〜360°の色相（Hue），0〜100の彩度（Saturation），0〜100の明度（Brightness）で表します．これをコードに反映させてみます．合わせてfor文を使って円を10個描いてみましょう．

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  background(220);

  //10回円を描く
  for (let i = 0; i < 10; i++) {

    //ランダムな色相から色を作り変数cに代入
    let h = random(360); //色相
    let s = 80; //彩度
    let b = 100; //明度 
    
    //色を作る
    let c = color(h,s,b); 
    noStroke(); // 線をナシ
    fill(c);
    ellipse(random(width), random(height), random(20, 40));
  }
  //ループを停止する
  noLoop();
}

実行結果はいい感じですね．では繰り返しを10回から100回にしてみましょう．for文のi < 10;の部分をi < 100;に変えるだけです．

「あれ，少しごちゃっとした？」と感じた人もいるかもしれません．色は円を書くたびにランダムに生成されるので，最高で100種類の色が使われていることになります．さっきまでの10種類だとそれほど違和感がなかった色も，数が増えてくるとごちゃごちゃして見えますね．

色数を制限する方法はたくさんあります．例えば，色相の部分のコードをこんなふうに書いてみましょう．

//色相を4分割し，4つの色からランダムに選ぶ
let h = int(random(4)) * 360 / 4;

解説してみます．int(random(4))のrandom(4)は，0〜3.999...までの値を作ります．int()はそれを整数にするので0,1,2,3の4つの整数が作られます．それに合わせて360°の色相を4分割する（360 / 4，つまり90°）ことで，0,90,180,270という値が生成されることになります．

ここで重要なのは，「0〜360の範囲からランダムに選んだ色相から色を作る」のではなくて「0,90,180,270の色相から1つ選ぶ」というように制限していることです．行内に2つある4の部分を，他の数字に変えてみてください．N個の色から選ぶコードが書けるはずです．今回は色相をランダムに動かしましたが，逆に彩度や明度で試すこともできます．

「服を着る」あるいは「季節を感じる」ように色を選ぶ

同じ色空間でも「無数の色から1つ選ぶ」と「制限された色から1つ選ぶ」では結果も印象も異なります．自分がコードを書くときはなんとなくその日の気分で色を選ぶことが多いです．雨だなとか，春だな，とか，今日着てる服に合う感じで作ってみようかなとか．写真から色を選ぶこともあります．

色の配色は，いくつかのカラーパレットが作れるサービスを使っています．COOLORSや，HELLO-COLOR，Colormind などあります．自分で配色を作る場合はAdobe Colorをよく使っています．色彩論的に色を設計できたり，写真からカラーパレットが作れたりと便利です．コードでは"#FF5345"のようなHEXコードを配列に入れて，それをランダムに呼び出すようなやり方で色を選んだりしています．以下はカラーパレットの色からランダムな色を選び線を引く例です．

//カラーパレット
let pallete = ["#CC8529","#8C7C66","#FFC880","#FFA733","#805319"];

function setup() {
  createCanvas(400, 400);
  colorMode(HSB,360,100,100,100);
}

function draw() {
  background(0,0,95);
    
  let offset = 40;//上下左右の余白
  let step = (width - offset * 2) / (10 - 1); //x方向の移動幅
  
  //10本線を引く
  for (let i = 0; i < 10; i++) {
    let x1 = offset + i * step;
    let y1 = offset;
    let x2 = x1;
    let y2 = height - offset;

    //カラーパレットの配列の要素からランダムに1つ選ぶ
    let n = int(random(pallete.length));
    stroke(pallete[n]); //線の色をカラーパレットから選ぶ
    strokeWeight(10);
    line(x1, y1, x2, y2);
  }
  noLoop();
}

色について考える時，学生時代に，フィールドレコーディングのように色を採取するグラフィックデザイナーの話を授業で聞いたことをたまに思い出します．その人は散歩したり散策して拾った小枝や葉っぱ，花びらや石ころを収集して，それをDICのカラーチップのように印刷所とのやりとりで使っていたそうです．砂浜で拾った貝殻や流木で作ったカラーパレットから人は，説明されなくても海を感じることができます．コードはコンピュータの世界で向こう側にあるけれど，現実世界の情報や原理を持ち込むと向こう側とこちら側がつながって見えてきます．服を着るようにコードの配色を選んだり，コードで描いたグラフィックを着たりする，そういう融け合った世界ことをぼんやり考えながらコーディングをしています．

カラー・アズ・ア・コンセプト―デジタル時代の色彩論