読者です 読者をやめる 読者になる 読者になる

Processing中毒者の嘔吐物

ProcessingやらopenFrameworksやら色んなプログラミングについて吐きます

Processingの文字で遊ぶ

Processing Advent Calendar 2015 : ATNDの参加記事です。

昨日に続き今日も僕が担当します。昨日はちょっと重たい内容だったので今回は軽めにサクッと、ちょっと前に書いたスケッチ晒します。
f:id:P5Aholic:20151210215605p:plain
これ↓を真似て作りました。
codedoodl.es
ソースはこちら。

Letter[] letters;
int numX; // x軸方向の文字数
int numY; // y軸方向の文字数
int size; // 文字サイズ

void setup() {
  fullScreen();
  textAlign(CENTER, CENTER);

  size = 20;
  textSize(size);
  numX = width/size;
  numY = height/size;
  
  letters = new Letter[numX * numY];
  
  for (int x = 0; x < numX; x++) {
    for (int y = 0; y < numY; y++) {
      letters[x*numY+y] = new Letter(x*size+size/2, y*size+size/2);
    }
  }
}

void draw() {
  background(255);
  
  // 文字を描画
  for (int i = 0; i < letters.length; i++) {
    letters[i].display();
  }
}

class Letter {
  char c;   // 表示する文字
  int x, y; // 座標
  int gray = 255; // 色

  Letter(int x, int y) {
    this.x = x;
    this.y = y;
    //  a ~ zの文字を設定
    c = char(int(random(97, 123)));
  }

  void display() {
    // マウスとの距離を計算
    float dist = dist(mouseX, mouseY, x, y);
    
    // 100px以内なら黒で描画
    if (dist <= 100) {
      gray = 0;
    }
    
    // 10%の確率で文字を再設定
    if (random(100) < 10) {
      c = char(int(random(97, 123)));
    }
    
    // 文字を描画
    fill(gray);
    text(c, x, y);
    
    // 色を白に近づけていく
    gray += 10;
  }
}


文字を縦横に敷き詰めてマウスと距離が近い文字は黒で描画し、毎フレーム10%の確率で文字をランダムに設定しています。

Processing Advent Calendarは25日以降も枠があるのでまだ参加できますよ。