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

更新が遅くなってしまいました... 汗

今回はProcessingでデジタル時計を作っていきたいと思います.

f:id:Eddie_Le_Garden:20190817143938g:plain

ソースコードは下記のとおりです.

int num = 7; //花びらの枚数
PFont font; //フォント

void setup() {
  size(500, 500);
  background(0, 10, 20);
  strokeWeight(5);
  rectMode(CENTER);
  colorMode(HSB,360,100,100);
  
  font = loadFont("DSEG7ClassicMini-Regular-48.vlw"); //フォントファイル
  textAlign(CENTER); //中央揃え
  textFont(font,48); //文字サイズの設定
}

void draw() {
  pushMatrix();
  translate(width/2, height/2);
  
  noStroke();
  fill(209,99,7,10); //RGB(0,10,20)
  rect(0,0,width-1,height-1);
  
  sinFlower();
  popMatrix();
  
  display();
}

//sin波模様
void sinFlower(){
  rotate(frameCount*0.01);
  float r = sin(frameCount*0.05)*width/2; //sin波  
  
  stroke(map(abs(r),0,width/2,0,360),99,99); //中心からの距離で色を決定
  for (int i=0; i<num; i++) {
    float angle = radians(360*i/num);
    point(cos(angle)*r, sin(angle)*r);
  }
}

//時刻の表示
void display(){
  String hour = String.format("%02d",hour());
  String minute = String.format("%02d",minute());
  String second = String.format("%02d",second());
  String ms = String.format("%02d",20+millis()/6000);
  
  fill(209,99,7);
  noStroke();
  rect(width/2,height/2,255,60);
  fill(0,0,99,50);
  text("88:88:88",width/2,height/2+25);
  fill((map((frameCount*0.7)%359,0,width/2,0,359)),99,99);
  text(hour+":"+minute+":"+second,width/2,height/2+25);
}

フォントの設定

Processingでは hour(), minute(), second() 関数を利用することで簡単に現在時刻を取得することができます.
今回, 時刻を表示するフォントはこちらを利用させていただきました.
www.keshikan.net

このフォントは数字が0～9まで同じ大きさで作られているため, サイズによるずれが生じない点がとてもよかったです.

ファイルをダウンロード・解凍したら, そのなかの "DSEG7ClassicMini-Regular.ttf" ファイルをインストールしましょう.
windowsでのインストール方法は下記を参考にします.

opentype.jp

インストールができたらProcessingを起動します.
ツール>フォントの作成を開き, インストールしたフォントを探します.

f:id:Eddie_Le_Garden:20190817150851p:plain

今回はサイズを48にしておき "OK"を押下します.
すると, 現在のスケッチのフォルダ内に"data"というフォルダができ, その中にフォントのvlmファイルが生成されます.

追記: インストールしたフォントが見つからない場合は, フォントをインストールする際に, "すべてのユーザーに対してインストール"を選択することで解決することがあります.
（僕はそうでした)

下記のように実行するとインストールしたフォントが使用できてることが確認できます.

PFont font; //フォント

void setup() {
  size(500, 200);
  background(0);
  strokeWeight(5);

  font = loadFont("DSEG7ClassicMini-Regular-48.vlw"); //フォントファイル
  textAlign(CENTER); //中央揃え
  textFont(font, 48); //文字サイズの設定

  text("hello world", width/2, height/2);
}

実行結果
f:id:Eddie_Le_Garden:20190817151734p:plain

模様

今回はsin波を描画し, rotate()で回転させることで模様を描画しています.
f:id:Eddie_Le_Garden:20190817154618p:plain

また, 下記のコードを追加で記述することで簡単に模様を変えることができるので色々なバリエーションが楽しめます.

//三角波模様
void triangleFlower(){
  rotate(frameCount*0.01);
 float r = triangleWave(90,frameCount*0.5)*width;
  
  stroke(map(abs(r),0,width/2,0,360),99,99); //中心からの距離で色を決定
  for (int i=0; i<num; i++) {
    float angle = radians(360*i/num);
    point(cos(angle)*r, sin(angle)*r);
  }
}

//三角波
float triangleWave(float wl, float t) { 
  return abs((t+wl/2)%wl/wl-0.5);
}