Mod:Coding Challenge #1: Starfield in Processing

Daniel Shiffmanはクリエイティブコーディングのバイブル「Nature of Code」の著者として知られている。それ以外にも、Processing/p5.jsのチュートリアル動画をYoutubeに多数公開している。その量たるや膨大で、どれも観ていてわかりやすく面白い。学生にとっては英語がネックになる場合もあると思うけど、日本語で予め学習した内容を復習するつもりで観ると英語の学習にもなるし一石二鳥だ。家だと夜流しっぱなしにして観たりしてる。

Youtubeのプレイリストは内容別に沢山ある。最初はProcessingの要素ごとに紹介しているビデオを観ていくだけでも勉強になるし、彼のテンションが高い。プログラミングの楽しさを教えてくれる。以下のリンク先が整理されている。

www.youtube.com

個人的にすごく良いなと思うのが、動画内のコーディングで失敗している箇所もほとんどカットしてないところ。好きな「コーディングチャレンジ」という、決まった時間内にあるテーマでプログラミングしてみるというチャンネルでも、割とトチる（笑）。でもその中で、何かをゼロから作るってそんなに簡単じゃないってことを、楽しく教えてくれる。制作にはいつでもそういうポジティブさ、楽しさを盛り込んでいきたいと思っている。そうでもないとLED照明も電源繋いでリモコンで照明パターン制御出来るこんな時代に、新しく自分だけのものを作る意味はないんじゃないかとも思う。

今日はこの動画を観ながら書いたコードを、更に改変してみた。

int num = 1000;
Star[] stars = new Star[num];
float speed = 1;
float freq = 0.001;
void setup() {
  size(960, 540);
  colorMode(HSB, 360, 100, 100, 100);
  for (int i = 0; i < num; i++) {
    stars[i] = new Star();
  }
}

void draw() {
  fill(0, 0, 0, 10);
  noStroke();
  rect(0, 0, width, height);
  translate(width/2, height/2);
  rotate(frameCount*freq);
  for (int i = 0; i < num; i++) {
    stars[i].update();
    stars[i].draw();
  }
}

void mouseMoved() {
  speed = map(mouseX, 0, width, 5, 10);
  freq = map(mouseY, 0, height, -0.01, 0.01);
}

class Star {
  float x;
  float y;
  float z;
  float pz;
  color c;

  Star() {
    x = random(-width/2, width/2);
    y = random(-height/2, height/2);
    z = random(width);
    pz = z;
    c = color(((int)random(0, 5))*360/5, 80, 100, 80);
  }

  void update() {
    z = z - speed;
    if ( z < 1) {
      x = random(-width/2, width/2);
      y = random(-height/2, height/2);
      z = random(width);
      pz = z;
    }
  }

  void draw() {
    float sx = map(x / z, 0, 1, 0, width);
    float sy = map(y / z, 0, 1, 0, height);
    float r = map(z, 0, width, 8, 0);

    float px = map(x / pz, 0, 1, 0, width);
    float py = map(y / pz, 0, 1, 0, height);

    fill(0, 0, 100);
    //ellipse(sx, sy, r, r);
    stroke(c);
    strokeWeight(r);
    line(sx, sy, px, py);
    pz = z;
  }
}