https://qiita.com/mizumasa/items/887c4e85c688a2b0d5f1
このページをみながらこんな簡単にできるものなのかな・・・と思いつつやってみたのですが、あっけないほどあっさり動きました。
上のページにはほとんど何も説明がなく簡単なサンプルのみが載ってますがそれを見ると
(1) GLSLでシェーダーを記述しておき、それをスケッチの下のdataフォルダーに入れておく
(2) Processing側でloadShaderとするとシェーダーインスタンスができる。
(3) GLSLシェーダーの入力パラメータはuniformで宣言しておき(GLSL言語の仕様)
(4) Processing側からシェーダーインスタンスのsetメソッドでGLSL側のuniform変数へ値を渡す
(5) Processing側でshader(シェーダーインスタンス)
とやれば1フレーム分が描画される
シンプルです...
自分はGLSL言語をほぼ知らないので
・vec2同士の距離を求めるには?
・頂点の座標を表すuniform変数をvec2配列にしたとして、Processingでどう渡す?
・繰り返し文はC言語と同じでいいのかな
といった不明点をProcessingのリファレンスとgoogleを頼りに調べ、以下のようなものを書いてみました。なんとなくボロノイっぽいものが描けてるような気がします。
残念ながら任意の長さのvec2配列を渡すという方法がわからず配列長を固定にしてます。
processing
1PShader sd;
2float[] pts;
3
4void setup() {
5 size(600, 600, P2D);
6 sd = loadShader("FragmentShader.glsl");
7 // 適当に定義した頂点座標
8 pts = new float[] {
9 10, 30,
10 50, 10,
11 100, 50,
12 50, 150
13 };
14}
15
16void draw() {
17 // sd.set("time", millis() / 1E3);
18 // sd.set("resolution", width, height);
19 sd.set("pts", pts, 2);
20 shader(sd);
21 rect(0, 0, width, height);
22}
data/FragmentShader.glsl
glsl
1// uniform vec2 resolution; // 今回は不要
2// uniform float time; // 今回は不要
3uniform vec2 pts[4]; // ボロノイ図を描くための頂点座標(配列長は固定)
4
5void main() {
6 int n = pts.length();
7 int min_idx = -1;
8 float min_dist = 0.;
9 for (int i = 0; i < n; i++) {
10 float dist = distance(gl_FragCoord.xy, pts[i]);
11 if (i == 0 || dist < min_dist) {
12 min_dist = dist;
13 min_idx = i;
14 }
15 }
16 float h = float(min_idx) / n;
17 float s = 1.;
18 float v = 1.;
19 vec3 rgb = ((clamp(abs(fract(h + vec3(0, 2, 1) / 3.) * 6. - 3.) - 1., 0., 1.) -1.) * s + 1.) * v;
20 gl_FragColor = vec4(rgb.r, rgb.g, rgb.b, 1.);
21}
(上の実装はテキトーなので参考程度にご覧ください)
Windows 10 64bit
Processing (64bit) 3.5.3
GPU NVIDIA GeForce
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 12:01
2019/05/09 13:13 編集
2019/05/10 03:28
2019/05/10 03:42
2019/05/10 03:59