// ボール。出たり入ったり。 let gr; let properFrameCount = 0; let myShader; let vs = "precision mediump float;" + "attribute vec3 aPosition;" + "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; let fs = "precision mediump float;" + // ユニフォーム "uniform vec2 u_resolution;" + "uniform float u_count;" + // 定数 "const float pi = 3.14159;" + "const float eps = 0.00001;" + "const vec3 ex = vec3(1.0, 0.0, 0.0);" + "const vec3 ey = vec3(0.0, 1.0, 0.0);" + "const vec3 ez = vec3(0.0, 0.0, 1.0);" + // 色 "const vec3 black = vec3(0.2);" + "const vec3 red = vec3(0.95, 0.3, 0.35);" + "const vec3 orange = vec3(0.98, 0.49, 0.13);" + "const vec3 yellow = vec3(0.95, 0.98, 0.2);" + "const vec3 green = vec3(0.3, 0.9, 0.4);" + "const vec3 lightgreen = vec3(0.7, 0.9, 0.1);" + "const vec3 purple = vec3(0.6, 0.3, 0.98);" + "const vec3 blue = vec3(0.2, 0.25, 0.98);" + "const vec3 skyblue = vec3(0.1, 0.65, 0.9);" + "const vec3 white = vec3(1.0);" + "const vec3 aquamarine = vec3(0.47, 0.98, 0.78);" + "const vec3 turquoise = vec3(0.25, 0.88, 0.81);" + "const vec3 coral = vec3(1.0, 0.5, 0.31);" + "const vec3 limegreen = vec3(0.19, 0.87, 0.19);" + "const vec3 khaki = vec3(0.94, 0.90, 0.55);" + "const vec3 navy = vec3(0.0, 0.0, 0.5);" + "const vec3 silver = vec3(0.5);" + "const vec3 gold = vec3(0.85, 0.67, 0.14);" + // 回転 "void rotX(out vec3 p, float theta){" + " p.yz *= mat2(cos(theta), -sin(theta), sin(theta), cos(theta));" + "}" + "void rotY(out vec3 p, float theta){" + " p.zx *= mat2(cos(theta), -sin(theta), sin(theta), cos(theta));" + "}" + "void rotZ(out vec3 p, float theta){" + " p.xy *= mat2(cos(theta), -sin(theta), sin(theta), cos(theta));" + "}" + // 最初のfold. // x=y,y=z,z=xでくるくるして6分割、z>|x|かつz>|y|に落とす処理。 "vec3 topFold(vec3 p){" + " if(p.z < p.x){ p.xz = p.zx; }" + " if(p.z < p.y){ p.yz = p.zy; }" + " if(p.z < -p.x){ p.xz = -p.zx; }" + " if(p.z < -p.y){ p.yz = -p.zy; }" + " return p;" + "}" + // hsbで書かれた(0.0～1.0)の数値vec3をrgbに変換する魔法のコード "vec3 getRGB(float h, float s, float b){" + " vec3 c = vec3(h, s, b);" + " vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);" + " rgb = rgb * rgb * (3.0 - 2.0 * rgb);" + " return c.z * mix(vec3(1.0), rgb, c.y);" + "}" + "vec3 getRGB(vec3 col){ return getRGB(col.x, col.y, col.z); }" + // 円 "float circle(vec2 p, float r){" + " return length(p) - r;" + "}" + // 球 "float sphere(vec3 p, float r){" + " return length(p) - r;" + "}" + // トーラス～ "float torus(vec3 p, float a, float b){" + " return length(vec2(abs(p.z), length(p.xy) - a)) - b;" + "}" + // ロングトーラス // hだけ横に伸びたトーラス // 原理としてはあれ、xが-h～hの場合には計算で単にy座標だけ使うようにする、 // 外側ではhと-hの差を使うことで中心点がずれるわけね。この中心点がずれるというのがポイントらしい。 "float longTorus(vec3 p, float a, float b, float h){" + " p.x -= clamp(p.x, -h, h);" + " return length(vec2(abs(p.z), length(p.xy) - a)) - b;" + "}" + // フリートーラス。軸の向きが自由。 "float freeTorus(vec3 p, vec3 n, float a, float b){" + " float k = dot(p, n);" + " return length(vec2(abs(k), length(p - k * n) - a)) - b;" + "}" + // 棒 "float bar(vec3 p, vec3 e, float r){" + " return length(p - dot(p, e) * e) - r;" + "}" + // 半分の棒。eとは反対側にできる。 "float halfBar(vec3 p, vec3 e, float r){" + " return length(p - min(0.0, dot(p, e)) * e) - r;" + "}" + // 長さ制限の棒。eとは反対側にhだけの長さ。 "float limitBar(vec3 p, vec3 e, float r, float h){" + " return length(p - max(-h, min(0.0, dot(p, e))) * e) - r;" + "}" + // 立方体～ "float freeCube(vec3 p, vec3 n1, vec3 n2, float r){" + " return max(abs(dot(p, n1)), max(abs(dot(p, n2)), abs(dot(p, cross(n1, n2))))) - r;" + "}" + // 角柱 "float polyBar(vec3 p, vec3 e, float r, float n){" + " vec3 e1;" + " if(abs(e.x) > 0.0){ e1 = normalize(vec3(e.y, -e.x, 0.0)); }else{ e1 = normalize(vec3(0.0, e.z, -e.y)); }" + " vec3 e2 = cross(e, e1);" + " float t = dot(p, e1) - r;" + " vec3 q;" + " float k = pi * 2.0 / n;" + " for(float i = 1.0; i < 99.0; i += 1.0){" + " if(i == n){ break; }" + " q = cos(k * i) * e1 + sin(k * i) * e2;" + " t = max(t, dot(p, q) - r);" + " }" + " return t;" + "}" + // 色変え // 0:min.つまり合併。重なっているときは近い方を採用するので。 // 1ってなんだっけ・・あ、max？んー。共通部分じゃないの。平面でスライスするのとか。で、断面の色とか指定する。 // 新しく追加された距離関数に対して、そっちの方が大きかったらそっちで置き換える。 // これをたとえば平面で使うと平面の向こう側だけが描画されてスライスができる（はず）。 // つまりこの1で指定された距離関数のオブジェクトに対してそれと共通であるような // それまでに描画されたオブジェクトが得られると。 // だからベースはそれまでのオブジェクトで、それと新しいオブジェクトとの共通部分を切り取って描画するのね。 // 最後はくりぬき。これは逆に、新しいオブジェクトのところだけカットする技術。 // 何のことはない、新しいオブジェクトのdを反転させて補集合の距離関数を取得してそれと1をやるだけ。つまり // 1でマイナスにして放り込めばいいんだけどまあ別に用意しましょうって話。 "void updateDist(out vec3 col, out float t, vec3 newCol, float d, int id){" + " if(id == 0){" + " float newD = min(t, d);" + " if(newD < t){ col = newCol; t = newD; }" + " }" + " if(id == 1){" + " float newD = max(t, d);" + " if(newD > t){ col = newCol; t = newD; }" + " }" + " if(id == 2){" + " float newD = max(t, -d);" + " if(newD > t){ col = newCol; t = newD; }" + " }" + "}" + // 距離の総合関数 "vec4 dist(vec3 p){" + " rotY(p, pi * u_count * 0.01);" + " rotZ(p, pi * u_count * 0.005);" + " vec3 col = vec3(0.0, 0.5, 1.0);" + " float scale = 0.8;" + " for(int i = 0; i < 3; i++){" + " if(p.z < p.x){ p.xz = p.zx; }" + " if(p.z < p.y){ p.yz = p.zy; }" + " if(p.z < -p.x){ p.xz = -p.zx; }" + " if(p.z < -p.y){ p.yz = -p.zy; }" + " p.z -= scale;" + " scale *= 0.5;" + " }" + " float t = dot(p, ez);" + " updateDist(col, t, col, halfBar(p, ez, 0.1), 2);" + " updateDist(col, t, vec3(1.0, 0.0, 0.0), sphere(p - ez * 0.2 * sin(u_count * 0.1), 0.05), 0);" + " return vec4(col, t);" + "}" + // レイマーチング "vec4 march(vec3 eye, vec3 ray){" + " const float threshold = 0.001;" + " const float far = 20.0;" + // 視認できる限界 " const int limit = 64;" + " vec3 col = vec3(0.0);" + " float t = 0.0;" + " float d;" + " vec3 p = eye;" + " for(int i = 0; i < limit; i++){" + " col = dist(p).xyz;" + " d = dist(p).w;" + " if(d < threshold || d > far){ break; }" + " p += d * ray;" + " t += d;" + " }" + " if(d < threshold){ return vec4(col, t); }" + " return vec4(col, -1.0);" + "}" + // 法線取得 "vec3 getNormal(vec3 pos){" + " float dx = dist(pos + eps * ex).w - dist(pos - eps * ex).w;" + " float dy = dist(pos + eps * ey).w - dist(pos - eps * ey).w;" + " float dz = dist(pos + eps * ez).w - dist(pos - eps * ez).w;" + " return normalize(vec3(dx, dy, dz));" + "}" + "void main(){" + // こうすると今横長なので上下±1.0みたいになる。 " vec2 p = (gl_FragCoord.xy - u_resolution.xy) / min(u_resolution.x, u_resolution.y);" + // 視点を用意する。z軸正方向5.0くらいで。 " vec3 eye = vec3(0.0, 0.0, 5.0);" + // スクリーンは目の前2.0くらいのところにあるイメージ。つまりz=3.0の平面の中にあるわけね。 // その中に点pがあって、eyeからpに向かう線がその先にある物体に突き刺さって色とか取得してスクリーンに落とす。 " float d = 2.0;" + // で、距離が2.0で、そこに向かうベクトルを・・する。 " vec3 ray = normalize(vec3(p, d) - eye);" + // それと別に光のベクトルを用意しておく感じ。これは刺さる方向と逆のベクトルにする。 " vec3 light = normalize(vec3(1.0));" + // レイマーチングする。 // 仕組み。まず視点eyeにおける距離関数の値を調べる。その分だけ進む。直進する。 // それで届かなかったらその位置からまた計算してその分だけ進む。それを定められた回数繰り返し、 // 閾値を下回ったら到達したとみなす。そこにおける法線ベクトルを距離関数から算出し、 // 光のベクトルと内積を取って明るさを調節しつつそこにおける色をスクリーンに映し出して処理終了。 // とりあえず色はいいや // やっぱ色付けたいよなぁ " vec4 data = march(eye, ray);" + " float t = data.w;" + " vec3 col = vec3(0.0);" + " if(t > 0.0){ col = data.xyz; }" + " vec3 pos = eye + t * ray;" + // posにおける法線 " vec3 n = getNormal(pos);" + // colをnとlightで補正する " col *= clamp(dot(n, light), 0.2, 1.0);" + " gl_FragColor = vec4(col, 1.0);" + "}"; function setup() { createCanvas(windowWidth, windowHeight); gr = createGraphics(width, height, WEBGL); myShader = gr.createShader(vs, fs); gr.shader(myShader); } function draw() { background(220); frameRate(30); myShader.setUniform("u_resolution", [width, height]); myShader.setUniform("u_count", properFrameCount); gr.quad(-1, -1, -1, 1, 1, 1, 1, -1); image(gr, 0, 0); properFrameCount++; }

in out balls