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に移植してみましょう。(次の記事で)