yoppa.org

人工言語入門 A 2010

Processingで時間を表現する

「時間」を表現する

前回の授業で取り上げた、時計のプログラムで学んだ内容を生かして、時間を表現するプログラムについて考えてみる

  • 場所 (位置) による時間の表現
  • 色・濃度 による時間の表現
  • 数で時間を表現する …etc.

時間の表現の例

  • NOOKA
    • マシュー・ウォルドマンデザインによるシンプルな図形で時間を表現した腕時計
    • http://nooka.com/
  • Tokyoflash
  • Ora Unica
    • Denis Guidoneデザイン、1本の線で時間を表示する
  • Clocks Series by rhizomatics
    • iPhone向けの時計アプリシリーズ、継続的に、多様でユニークな時計アプリをリリースしている
  • Creative Applicationsで紹介されている様々な時計の試み

Processingで時間を表現してみる

Processingで、シンプルなサンプルを作りながら、いろいろな表現の可能性について考えてみましょう。

  • clock01： 場所による時間の表現
  • clock02： 濃度による時間の表現
  • clock03： 色相による時間の表現
  • clock04： 文字と動きによる時間表現
  • clock05： 2進数による時間表現

時間の表現1：場所による時間の表現

  • 図形の場所によって、時間を表現する
  • 時間、分、秒、ミリ秒の値に対応して、ラインの位置を変化させてみる
int ms, s, m, h;
int lastSecond = 0;

void setup() {
    size(640, 480);
    frameRate(60);
    background(0);
}

void draw() {
    ms = millis() % 1000;
    s = second();
    m = minute();
    h = hour();

    fill(0, 4);
    noStroke();
    rect(0, 0, width, height);

    noFill();

    float ms_pos = width / 1000.0 * ms;
    stroke(255);
    line(ms_pos, 0, ms_pos, height / 4);

    translate(0, height / 4);
    stroke(63);
    line(0, 0, width, 0);

    float s_pos = width / 60.0 * s;
    stroke(255);
    line(s_pos, 0, s_pos, height / 4);

    translate(0, height / 4);
    stroke(63);
    line(0, 0, width, 0);

    float m_pos = width / 60.0 * m;
    stroke(255);
    line(m_pos, 0, m_pos, height / 4);

    translate(0, height / 4);
    stroke(63);
    line(0, 0, width, 0);

    float h_pos = width / 24.0 * h;
    stroke(255);
    line(h_pos, 0, h_pos, height / 4);
}

時間の表現2：濃度による時間の表現

  • 図形の濃度 (アルファ値) によって時間を表現する
  • 4つの正方形を横に並べて、その濃度を、時間、分、秒、ミリ秒に対応させてみる
float ms, s, m, h;

void setup() {
    size(800, 200);
    noStroke();
}

void draw() {
    ms = millis() % 1000;
    s = second();
    m = minute();
    h = hour();

    background(0);

    fill(255, 255 * (h / 24.0));
    rect(0, 0, width / 4, height);

    translate(width / 4, 0);
    fill(255, 255 * (m / 60.0));
    rect(0, 0, width / 4, height);

    translate(width / 4, 0);
    fill(255, 255 * (s / 60.0));
    rect(0, 0, width / 4, height);

    translate(width / 4, 0);
    fill(255, 255 * (ms / 1000.0));
    rect(0, 0, width / 4, height);
}

時間の表現3：色相による時間の表現

  • 同じ図形で、今度は透明度はそのまで、色の色相(Hue)を変化させていく
  • colorModeをCSVにして、色相の変化を計算しやすいように
  • あとは色相を、時間、分、秒、ミリ秒に適用させるだけ
float ms, s, m, h;

void setup() {
    size(800, 200);
    colorMode(HSB, 360, 100, 100);
    noStroke();
}

void draw() {
    ms = millis() % 1000;
    s = second();
    m = minute();
    h = hour();

    background(0);

    fill(360 * (h / 24.0), 50, 100);
    rect(0, 0, width / 4, height);

    translate(width / 4, 0);
    fill(360 * (m / 60.0), 50, 100);
    rect(0, 0, width / 4, height);

    translate(width / 4, 0);
    fill(360 * (s / 60.0), 50, 100);
    rect(0, 0, width / 4, height);

    translate(width / 4, 0);
    fill(360 * (ms / 1000.0), 50, 100);
    rect(0, 0, width / 4, height);
}

時間の表現4：文字と動きによる時間表現

  • デジタル時計と、アナログ時計を融合させてみる
  • 時間、分、秒を表示した針が、秒針の角度で回転していく
  • 時間の経過を感じさせるため、余韻を残しながら、消えていくようにする
  • フォントの表示のため、Tools → Create font を利用して、”myFont.vlw” を生成する
PFont font;
int s, m, h;
int lastSecond = 0;

void setup() {
    size(600, 600);

    font = loadFont("myFont.vlw");
    textFont(font);

    frameRate(30);
    smooth();
    background(0);
}

void draw() {
    s = second();
    m = minute();
    h = hour();

    if (lastSecond != s) {
        textAlign(CENTER);
        fill(0, 10);
        noStroke();
        rect(0, 0, width, height);

        fill(255);
        stroke(255);

        pushMatrix();
        translate(width / 2, height / 2);
        rotate(radians(6.0 * s));
        String time = nf(h, 2) + "\n" + nf(m, 2) + "\n" + nf(s, 2);
        text(time, 0, -height / 2.2);
        line(0, 0, 0, -height / 3);
        popMatrix();
    }
    lastSecond = s;
}

時間の表現5：2進数による時間表現

  • 時間の経過を2進数のon/offで表現してみる
  • 現在の時刻をの時間、分、秒をそれぞれ6桁の2進数に変換
    • 例：18:11:49 → 010010001011110001
  • 2進数の0と1を利用して図形を描いていく
  • 時間の経過が蓄積していくように工夫
PFont font;
int s, m, h;
int lastSecond = 0;
int bufferNum = 480;
String[] timeArray = new String[bufferNum];

void setup() {
  size(640, 480);
  frameRate(30);
  background(0);
  noStroke(); h

  for (int i = 0; i < timeArray.length; i++) {
    timeArray[i] = "000000000000000000";
  }
}

void draw() {
  s = second();
  m = minute();
  h = hour();

  if (lastSecond != s) {
    background(0);

    String bs = nf(int(binary(s)), 6);
    String bm = nf(int(binary(m)), 6);
    String bh = nf(int(binary(h)), 6);

    println(nf(h, 2) + ":" + nf(m, 2) + ":" + nf(s, 2) + ", " + bh + bm + bs);

    float rectWidth = width / 18.0;
    float rectHeight = height / float(bufferNum);

    for (int i = timeArray.length; i & gt; 1; i--) {
      timeArray[i - 1] = timeArray[i - 2];
    }
    timeArray[0] = bh + bm + bs;

    for (int j = 0; j < timeArray.length - 1; j++) {
      for (int i = 0; i < 18; i++) {
        if (timeArray[j].charAt(i) == '1') {
          fill(255);
        }
        else {
          fill(0);
        }
        rect(i * rectWidth, j * rectHeight, rectWidth, rectHeight);
      }
    }
  }
  lastSecond = s;
}

サンプルファイルのダウンロード

今回のとりあげた全てのサンプルのソースコードは、下記からダウンロードしてください。