情報科学生のクリエイティブコーディング入門 part.1

夏休みになっても別段遊びに行くことがない休暇を送っております... 泣

今回ご紹介するのは僕が初めてクリエイティブコーディングを意識して書いたプログラムです.

f:id:Eddie_Le_Garden:20190803141207p:plain

//Main
int num = 200; //星の数
Star[] stars = new Star[num];

void setup() {
  size(500, 500);
  background(0, 10, 20); //背景色
  noStroke();

  //インスタンスの生成
  for (int i=0; i<stars.length; i++)
    stars[i] = new Star();
}

void draw() {

  //軌跡を残す
  fill(0, 10, 20, 20);
  rect(0, 0, width, height);

  translate(width/2, height/2); //原点の変更
  rotate(frameCount*0.01); //原点から回転

  for (Star star : stars) star.draw();
}

//Starクラス
class Star {
  float x, y, size; //x座標, y座標, 大きさ
  int col; //星の色

  Star() {
    x = random(-width/2, width/2);
    y = random(-height/2, height/2);
    size = random(1, 3);
    col = color(0, random(30, 255), 255); //水色～青の範囲からランダムに決定
  }

  //描画処理
  void draw() {
    fill(col);
    ellipse(x, y, size, size);
  }
}

Starクラスの説明

class Star {
  float x, y, size; //x座標, y座標, 大きさ
  int col; //星の色

  Star() {
    x = random(-width/2, width/2);
    y = random(-height/2, height/2);
    size = random(1, 3);
    col = color(0, random(30, 255), 255); //水色～青の範囲からランダムに決定
  }

  //描画処理
  void draw() {
    fill(col);
    ellipse(x, y, size, size);
  }
}

Starクラスはそれぞれの座標と大きさ, 色を属性として持っています.
コンストラクタ内でそれぞれの属性をランダムに決定しています.
（x座標, y座標の範囲が上記のようになる利用は後ほど説明します）

Mainプログラム

frameCount

frameCountとはプログラム実行時から実行したフレームの数を示します

void draw(){
  println(frameCount);
}

Processingではデフォルトでフレームレートを60に設定してあるので, 上記のように実行することで 1, 2, 3... と一秒間に60回カウントします.

translate()

通常Processingで原点は実行画面左上を示しますが, translate()を使用することで引数として与えたx座標, y座標の位置を原点して設定することができます.
今回は(width/2, height/2)を指定しているので実行画面の中心座標を原点として設定しています.
よって以降, プログラムでは座標として原点 (0,0)を指定すると実行画面の中心座標を示すようになります.
f:id:Eddie_Le_Garden:20190804120050p:plain

そのため, コンストラクタで各インスタンスの座標を指定する際はx座標を(-width/2 ~ width/2), y座標を(-height/2 ~ height/2)の範囲で与えることで画面にまんべんなく星を描画することができます.

rotate()

また, rotate()では原点を中心に引数として与えた角度 (弧度法) 分, 実行画面を回転させることができます.
個人的なイメージとしては画用紙の原点にピンを刺し, それを中心に画用紙を回転させる感じです.
今回は実行画面の中心座標を原点とし, frameCount*0.01を引数として与えています. (frameCountに0.01を乗算することで回転する早さをゆっくりにしている)

軌跡の残し方

Mainプログラム内のdraw()では

fill( 0, 10, 20, 20);
rect( 0, 0, width, height);

との記述があります.
fill()内の4番目の引数は色のアルファ値 (透明度)を示しており, 255で不透明, 0で見えなくなります.
今回は4番目の引数に20を指定しているのでとても色の薄い背景色で四角を画面いっぱいに描画しています.
これにより, 毎フレーム透明な背景色のフィルムが重なるように古い描画結果がゆっくりと塗りつぶされていきます.

おわりに

以上で簡単にですがこのプログラムの説明はおわりになります.
文章で説明するのが苦手で分かりづらい点もあると思いますが, それぞれの記述がどのような役割を持つのかはその行をコメントアウトしながら確認してもらうと良いかと思います.

来週は夏コミですね！
まだ行くかは検討中ですが, 色んなクリエイターの方々集まる場なので一度行ってみたいです！＼＼└(‘ω’)┘//／／

like coffeeの進捗ダメです

Unity, Processingとか