Processingとp5.js入門(他の言語をやったことある人向け)01

Processingとは

インタラクティブなアートや作品が得意で、しばしばメディアアートに使われる言語およびIDE

特徴

• とても簡単に動く作品が作れる
• プロトタイプが得意
• 環境構築が死ぬほど楽

非常に楽しい言語で、私はこの言語でプログラミング沼に堕ちました。
たとえばどんなのが作れるかと言うと(gifExportというライブラリもあるんだけど、挙動がおかしいので、画面キャプチャしてます)

マウスの動きに伴って周りの円が回転しています。フレームレートクソなせいで全然きれいに見えない。

ソースコード

ソースコードはこんな感じで簡潔になります。(コードを書く人がクソなので汚いですが)
最初に一度だけ起こるイベントをsetupに繰り返したいものをdrawに書きます。
javaベースなのですぐに慣れることができます
void setup()
と
void draw()

に関数がわかれる性質上グローバル変数が多くなりがちです。

kurukuru.pde

float[] x, y, pX, pY;
float[] distance;
float[] gapTheata;
color[] c;

final int n = 200;

void setup(){
  size(1000, 1000);
  background(255);
  colorMode(HSB);
  
  x = new float[n];
  y = new float[n];
  pX = new float[n];
  pY = new float[n];
  distance = new float[n];
  gapTheata = new float[n];
  c = new color[n];
  
  for(int i = 0; i < n; i++){
    x[i] = y[i] = pX[i] = pY[i] = 30;
    distance[i] = random(15, 150);
    gapTheata[i] = random(-PI, PI);
    c[i] = color(random(255), 255, 255, random(255));
  }
  
}

void draw(){
  background(255);
  noStroke();
  colorMode(HSB);
  
  for(int i = 0; i < n; i++){
    fill(c[i]);
    float theata = radians(frameCount*5.0) + gapTheata[i];
    float dist =distance[i] + 90.0*noise(theata/1.0, frameCount/100.0, i);
    x[i] = (mouseX + dist*cos(theata) + pX[i])/2.0;
    y[i] = (mouseY + dist*sin(theata) + pY[i])/2.0;
    pushMatrix();
    translate(x[i], y[i]);
    ellipse(0, 0, 20, 20);
    popMatrix();
    pX[i] = x[i]; pY[i] = y[i];
  }

  colorMode(RGB);
  fill(0);
  ellipse(mouseX, mouseY, 40, 40);
}

細かい説明は省きます。

面白いもの

• noise(w, x, y, z)
  • 0 ～ 1の値を返します。
  • w以外は任意です。
  • 連続を保ったまま波のようなnoise表現が加えられるという考え方でいいと思います(randomでは不連続、noiseは連続的)
  • 固定値を与えると固定の値が返ってきます
  • 値を一気に変化させると、前フレームと全然違う値が出てきます。

---

• pushMatrix() popMatrix()
  • 現在の座標状態を保存したり、元に戻したりします

---

• colorMode()
  • HSBとRGBを切り替えられます(これ以外は使っているところを見たことがない)。他にも引数を与えて、値の上限を変えたりできます。

---

• color
  • 色を保持する型です、上記のカラーモードで宣言した色を使えます。αチャネルを追加することもできます

---

• frameCount
  • 今のフレーム数を持っていてくれます。連続的に変化するものを作りたいとき使えます。なぜか代入することもできます。

---

Webに移植したい

じゃあ、これをwebに移植したいと思ったときに
p5.js が使えるんですよね

これをwebに移植してみましょう。(次の記事で)