// --------------------------------------------------------------- // // global. let _gl, gl; let _node; // これが統括する。 let _system; // system. const PATTERN_NUM = 9; // パターンのMAX. const INITIAL_PATTERN_INDEX = 0; let _font; // font. let pikachu; // states. const CREATE_FIGURE = 0; // 図形生成モーション const SLICE_FIGURE = 1; // 図形切断モーション const DELETE_FIGURE = 2; // 図形消去モーション const CREATE_FIGURE_TIME = 60; const SLICE_COUNT = 24; const SLICE_TIME = 20; // 半分で線を走らせその直後にスライスして // 残りの半分で動かしつつ線を消す const WAIT_FOR_DELETE_TIME = 15; // スライス終了から消去開始までの時間 const DELETE_TIME_MAX = 60; // 消去は左下から右上に向かって1つずつ // 消していくんですけどその際の消えるまでの時間のMAXのこと // つまり右上ほど遅いわけ // んで全部消えたらeventCountが0に戻る感じ。stateもCREATE_FIGUREに戻る。 // --------------------------------------------------------------- // // shader. let customLightVert= "precision mediump float;" + "attribute vec3 aPosition;" + "attribute vec4 aVertexColor;" + "attribute vec3 aNormal;" + "uniform vec3 uAmbientColor;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + "uniform mat3 uNormalMatrix;" + "varying vec4 vVertexColor;" + "varying vec3 vNormal;" + "varying vec3 vViewPosition;" + "varying vec3 vAmbientColor;" + "varying vec2 vTexCoord;" + // 頑張ってこれを構築する "void main(void){" + // 場合によってはaPositionをいじる（頂点位置） // 場合によってはaNormalもここで計算するかもしれない " vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);" + // Pass varyings to fragment shader " vViewPosition = viewModelPosition.xyz;" + " gl_Position = uProjectionMatrix * viewModelPosition;" + " vNormal = uNormalMatrix * aNormal;" + " vVertexColor = aVertexColor;" + " vAmbientColor = uAmbientColor;" + "}"; let customLightFrag = "precision mediump float;" + "uniform mat4 uViewMatrix;" + // directionalLight関連 "uniform vec3 uLightingDirection;" + "uniform vec3 uDirectionalDiffuseColor;" + "uniform vec3 uPointLightLocation;" + "uniform vec3 uPointLightDiffuseColor;" + "uniform vec3 uAttenuation;" + // デフォルトは1,0,0. // pointLight関連 "uniform bool uUseDirectionalLight;" + // デフォルトはfalse. "uniform bool uUsePointLight;" + // デフォルトはfalse; "const float diffuseFactor = 0.73;" + "const int USE_VERTEX_COLOR = 0;" + "const int USE_MONO_COLOR = 1;" + "const int USE_UV_COLOR = 2;" + // textureを用いるためのフラグ変数:2 // DirectionalLight項の計算。 "vec3 getDirectionalLightDiffuseColor(vec3 normal){" + " vec3 lightVector = (uViewMatrix * vec4(uLightingDirection, 0.0)).xyz;" + " vec3 lightDir = normalize(lightVector);" + " vec3 lightColor = uDirectionalDiffuseColor;" + " float diffuse = max(0.0, dot(-lightDir, normal));" + " return diffuse * lightColor;" + "}" + // PointLight項の計算。attenuationも考慮。 "vec3 getPointLightDiffuseColor(vec3 modelPosition, vec3 normal){" + " vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation, 1.0)).xyz;" + " vec3 lightVector = modelPosition - lightPosition;" + " vec3 lightDir = normalize(lightVector);" + " float lightDistance = length(lightVector); " + " float d = lightDistance;" + " float lightFallOff = 1.0 / dot(uAttenuation, vec3(1.0, d, d*d));" + " vec3 lightColor = lightFallOff * uPointLightDiffuseColor;" + " float diffuse = max(0.0, dot(-lightDir, normal));" + " return diffuse * lightColor;" + "}" + // _lightはこれで。 "vec3 totalLight(vec3 modelPosition, vec3 normal){" + " vec3 result = vec3(0.0);" + // 0.0で初期化 // directionalLightの影響を加味する " if(uUseDirectionalLight){" + " result += getDirectionalLightDiffuseColor(normal);" + " }" + // pointLightの影響を加味する " if(uUsePointLight){" + " result += getPointLightDiffuseColor(modelPosition, normal);" + " }" + " result *= diffuseFactor;" + " return result;" + "}" + // include lighting.glsl "uniform vec4 uMonoColor;" + "uniform int uUseColorFlag;" + // 0:vertex. 1:mono. 2.texture. "uniform sampler2D uTex;" + "varying vec4 vVertexColor;" + "varying vec3 vNormal;" + "varying vec3 vViewPosition;" + "varying vec3 vAmbientColor;" + "varying vec2 vTexCoord;" + // メインコード "void main(void){" + " vec3 diffuse = totalLight(vViewPosition, normalize(vNormal));" + " vec4 col = vec4(1.0);" + " if(uUseColorFlag == USE_MONO_COLOR) {" + " col = uMonoColor;" + // uMonoColor単色 " }" + " if(uUseColorFlag == USE_VERTEX_COLOR){" + " col = vVertexColor;" + // 頂点色 " }" + " if(uUseColorFlag == USE_UV_COLOR){" + " col = texture2D(uTex, vTexCoord);" + " if(col.a < 0.1){ discard; }" + " }" + // diffuseの分にambient成分を足してrgbに掛けて色を出してspecular成分を足して完成みたいな（？？） " col.rgb *= (diffuse + vAmbientColor);" + " gl_FragColor = col;" + "}"; // 頂点色つけるだけの簡易シェーダ let myVert= "precision mediump float;" + "attribute vec3 aPosition;" + "attribute vec4 aVertexColor;" + "varying vec4 vVertexColor;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + "void main(){" + " vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);" + " gl_Position = uProjectionMatrix * viewModelPosition;" + " vVertexColor = aVertexColor;" + "}"; let myFrag= "precision mediump float;" + "varying vec4 vVertexColor;" + "void main(){" + " gl_FragColor = vVertexColor;" + "}"; // --------------------------------------------------------------- // // preload. function preload(){ _font = loadFont("https://inaridarkfox4231.github.io/assets/Mplus1-Regular.ttf"); pikachu = loadJSON("https://stat.neort.io/externalResource/c7dvp043p9fdutchaoo0.json"); } // --------------------------------------------------------------- // // setup. function setup() { _gl = createCanvas(640, 640, WEBGL); pixelDensity(1); gl = _gl.GL; // レンダリングコンテキストの取得 // カリング間違えてた。難しいね。 gl.enable(gl.CULL_FACE); gl.cullFace(gl.FRONT); // nodeを用意 _node = new RenderNode(); textureFloatCheck(); Uint32ArrayCheck(); // 左クリックのメニュー表示禁止 document.oncontextmenu = (e) => { e.preventDefault(); } _system = new System(); _system.prepareShader(); _system.prepareBG(); _system.initialize(); } // --------------------------------------------------------------- // // main loop. function draw(){ _system.update(); _system.display(); _system.shift(); } // --------------------------------------------------------------- // // texture float usability check. // RenderNodeの処理にした方がいいかもです // texture floatが使えるかどうかチェック function textureFloatCheck(){ let ext; ext = gl.getExtension('OES_texture_float') || this._renderer.getExtension('OES_texture_half_float'); if(ext == null){ alert('float texture not supported'); return; } } // Uint32Arrayが使えるかどうかチェック function Uint32ArrayCheck(){ if (!gl.getExtension('OES_element_index_uint')) { throw new Error('Unable to render a 3d model with > 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.'); } } // --------------------------------------------------------------- // // global functions. // vboの作成 function create_vbo(data){ // バッファオブジェクトの生成 let vbo = gl.createBuffer(); // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, vbo); // バッファにデータをセット gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); // バッファのバインドを無効化 gl.bindBuffer(gl.ARRAY_BUFFER, null); // 生成したVBOを返して終了 return vbo; } // attributeの登録 function set_attribute(attributes){ // 引数として受け取った配列を処理する for(let name of Object.keys(attributes)){ const attr = attributes[name]; // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, attr.vbo); // attributeLocationを有効にする gl.enableVertexAttribArray(attr.location); // attributeLocationを通知し登録する gl.vertexAttribPointer(attr.location, attr.stride, gl.FLOAT, false, 0, 0); } } // iboの作成 function create_ibo(data, type){ // type:Uint16ArrayまたはUint32Array. // バッファオブジェクトの生成 let ibo = gl.createBuffer(); // バッファをバインドする gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); // バッファにデータをセット gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new (type)(data), gl.STATIC_DRAW); // バッファのバインドを無効化 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // 生成したIBOを返して終了 return ibo; } // --------------------------------------------------------------- // // utility. function _RGB(r, g, b){ if(arguments.length === 1){ g = r; b = r; } return {r:r, g:g, b:b}; } function _HSV(h, s, v){ h = constrain(h, 0, 1); s = constrain(s, 0, 1); v = constrain(v, 0, 1); let _r = constrain(abs(((6 * h) % 6) - 3) - 1, 0, 1); let _g = constrain(abs(((6 * h + 4) % 6) - 3) - 1, 0, 1); let _b = constrain(abs(((6 * h + 2) % 6) - 3) - 1, 0, 1); _r = _r * _r * (3 - 2 * _r); _g = _g * _g * (3 - 2 * _g); _b = _b * _b * (3 - 2 * _b); let result = {}; result.r = v * (1 - s + s * _r); result.g = v * (1 - s + s * _g); result.b = v * (1 - s + s * _b); return result; } // --------------------------------------------------------------- // // UnionFind. // 0,1,2,...,n-1をqueryでまとめる // いくつの塊になったのかとそのレベルを返す感じ（lvで参照できる） function getUnionFind(n, query){ let parent = []; let rank = []; for(let i = 0; i < n; i++){ parent.push(i); rank.push(0); } function Find(a){ if(parent[a] == a){ return a; }else{ parent[a] = Find(parent[a]); return parent[a]; } } function Union(a, b){ let aRoot = Find(a); let bRoot = Find(b); if(rank[aRoot] > rank[bRoot]){ parent[bRoot] = aRoot; }else if(rank[bRoot] > rank[aRoot]){ parent[aRoot] = bRoot; }else if(aRoot != bRoot){ parent[bRoot] = aRoot; rank[aRoot] = rank[aRoot] + 1; } } for(let i = 0; i < 2; i++){ for(let q of query){ Union(q[0], q[1]); } } let uf = []; for(let i = 0; i < n; i++){ uf.push({id:i, pt:parent[i]}); } uf.sort((x, y) => { if(x.pt < y.pt){ return -1; } if(x.pt > y.pt){ return 1; } return 0; }); uf[0].lv = 0; let count = 1; for(let i = 1; i < n; i++){ if(uf[i].pt == uf[i-1].pt){ uf[i].lv = uf[i-1].lv; }else{ uf[i].lv = uf[i-1].lv + 1; count++; } } uf.sort((x, y) => { if(x.id < y.id){ return -1; } if(x.id > y.id){ return 1; } return 0; }); return {uf:uf, count:count}; // countは集合の個数 } // --------------------------------------------------------------- // // RenderSystem class. // shaderとprogramとtopologyのsetとあとテクスチャのロケーション // その組です // topologyはattribute群ですね // たとえば立方体やトーラスを登録するわけ（もちろん板ポリも） class RenderSystem{ constructor(name, _shader){ this.name = name; this.shader = _shader; shader(_shader); this.program = _shader._glProgram; this.topologies = {}; this.uniformLocations = {}; } getName(){ return this.name; } registTopology(topologyName){ if(this.topologies[topologyName] !== undefined){ return; } this.topologies[topologyName] = new Topology(topologyName); } getProgram(){ return this.program; } getShader(){ return this.shader; } getTopology(topologyName){ return this.topologies[topologyName]; } registUniformLocation(uniformName){ if(this.uniformLocations[uniformName] !== undefined){ return; } this.uniformLocations[uniformName] = gl.getUniformLocation(this.program, uniformName); } setTexture(uniformName, _texture, locationID){ gl.activeTexture(gl.TEXTURE0 + locationID); gl.bindTexture(gl.TEXTURE_2D, _texture); gl.uniform1i(this.uniformLocations[uniformName], locationID); } } // --------------------------------------------------------------- // // RenderNode class. // RenderSystemを登録して名前で切り替える感じ // こっちで統一しよう。で、トポロジー。 // 一つのプログラムに複数のトポロジーを登録できる // そして同じプログラムを使い回すことができる // 立方体やトーラスを切り替えて描画したりできるというわけ class RenderNode{ constructor(){ this.renderSystems = {}; this.currentRenderSystem = undefined; this.currentShader = undefined; this.currentTopology = undefined; this.useTextureFlag = false; this.tfMatrix = new p5.Matrix(); // デフォルト4x4行列 // uMVをここにコピーして使い回す感じ } registRenderSystem(renderSystemName, _shader){ if(this.renderSystems[renderSystemName] !== undefined){ return; } this.renderSystems[renderSystemName] = new RenderSystem(renderSystemName, _shader); } use(renderSystemName, topologyName){ // まとめてやれた方がいい場合もあるので if(this.renderSystems[renderSystemName] == undefined){ return; } this.useRenderSystem(renderSystemName); this.registTopology(topologyName); // 登録済みなら何もしない this.useTopology(topologyName); return this; } useRenderSystem(renderSystemName){ // 使うプログラムを決める this.currentRenderSystem = this.renderSystems[renderSystemName]; this.currentShader = this.currentRenderSystem.getShader(); this.currentShader.useProgram(); return this; } registTopology(topologyName){ // currentProgramに登録するので事前にuseが必要ですね this.currentRenderSystem.registTopology(topologyName); } useTopology(topologyName){ // たとえば複数のトポロジーを使い回す場合ここだけ切り替える感じ this.currentTopology = this.currentRenderSystem.getTopology(topologyName); return this; } registAttribute(attributeName, data, stride){ this.currentTopology.registAttribute(this.currentRenderSystem.getProgram(), attributeName, data, stride); return this; } registAttributes(attrData){ for(let attrName of Object.keys(attrData)){ const attr = attrData[attrName]; this.registAttribute(attrName, attr.data, attr.stride); } return this; } setAttribute(){ // その時のtopologyについて準備する感じ this.currentTopology.setAttribute(); return this; } registIndexBuffer(data, type){ // デフォルトはUint16Array. 多い場合はUint32Arrayを指定する。 if(type === undefined){ type = Uint16Array; } this.currentTopology.registIndexBuffer(data, type); return this; } bindIndexBuffer(){ this.currentTopology.bindIndexBuffer(); return this; } registUniformLocation(uniformName){ this.currentRenderSystem.registUniformLocation(uniformName); return this; } setTexture(uniformName, _texture, locationID){ this.currentRenderSystem.setTexture(uniformName, _texture, locationID); this.useTextureFlag = true; // 1回でも使った場合にtrue return this; } setUniform(uniformName, data){ this.currentShader.setUniform(uniformName, data); return this; } clear(){ // 描画の後処理 // topologyを切り替える場合にも描画後にこれを行なったりする感じ // 同じプログラム、トポロジーで点描画や線描画を行う場合などは // その限りではない（レアケースだけどね） this.currentTopology.clear(); // textureを使っている場合はbindを解除する if(this.useTextureFlag){ gl.bindTexture(gl.TEXTURE_2D, null); this.useTextureFlag = false; } } setMatrixStandard(uMV){ // uMVをuMVMatrixとして一通り通知する関数 const sh = this.currentShader; sh.setUniform('uProjectionMatrix', _gl.uPMatrix.mat4); sh.setUniform('uModelViewMatrix', uMV.mat4); sh.setUniform('uViewMatrix', _gl._curCamera.cameraMatrix.mat4); _gl.uNMatrix.inverseTranspose(uMV); sh.setUniform('uNormalMatrix', _gl.uNMatrix.mat3); } setMatrix(tf){ // uMVとuPとuViewとuNormalを登録(uNormalは使われないこともあるけど) let uMV = _gl.uMVMatrix.copy(); if(tf !== undefined){ this.transform(tf, uMV); // tfは配列。tr, rotX, rotY, rotZ, scale. // rotAxisも一応残しといて。 } this.setMatrixStandard(uMV); return this; } transform(tf, uMV){ // tfのコマンドに従っていろいろ。 for(let command of tf){ const name = Object.keys(command)[0]; const value = command[name]; switch(name){ case "tr": // 長さ1の配列の場合は同じ値にする感じで if(value.length === 1){ value.push(value[0], value[0]); } uMV.translate(value); break; // rotX～rotZはすべてスカラー値 case "rotX": uMV.rotateX(value); break; case "rotY": uMV.rotateY(value); break; case "rotZ": uMV.rotateZ(value); break; case "rotAxis": // 角度と、軸方向からなる長さ4の配列 uMV.rotate(...value); break; case "scale": // 長さ1の場合は同じ値にする。 if(value.length === 1){ value.push(value[0], value[0]); } uMV.scale(...value); break; } } } setVertexColor(){ const sh = this.currentShader; sh.setUniform('uUseColorFlag', 0); return this; } setMonoColor(col, a = 1){ const sh = this.currentShader; sh.setUniform('uUseColorFlag', 1); sh.setUniform('uMonoColor', [col.r, col.g, col.b, a]); return this; } setUVColor(){ const sh = this.currentShader; sh.setUniform("uUseColorFlag", 2); return this; } setDirectionalLight(col, x, y, z){ const sh = this.currentShader; sh.setUniform('uUseDirectionalLight', true); sh.setUniform('uDirectionalDiffuseColor', [col.r, col.g, col.b]); sh.setUniform('uLightingDirection', [x, y, z]); return this; } setAmbientLight(col){ const sh = this.currentShader; sh.setUniform('uAmbientColor', [col.r, col.g, col.b]); return this; } setPointLight(col, x, y, z, att0 = 1, att1 = 0, att2 = 0){ // att0,att1,att2はattenuation（減衰） // たとえば0,0,1だと逆2乗の減衰になるわけ const sh = this.currentShader; sh.setUniform('uUsePointLight', true); sh.setUniform('uPointLightDiffuseColor', [col.r, col.g, col.b]); sh.setUniform('uPointLightLocation', [x, y, z]); sh.setUniform('uAttenuation', [att0, att1, att2]); return this; } drawArrays(mode, first, count){ // 引数はドローコール、スタートと終わりなんだけどね。んー。 // トポロジーがサイズ持ってるからそれ使って描画？ if(arguments.length == 1){ first = 0; count = this.currentTopology.getAttrSize(); } gl.drawArrays(mode, first, count); return this; } drawElements(mode, count){ // 大きい場合はgl.UNSIGNED_INTを指定 const _type = this.currentTopology.getIBOType(); const type = (_type === Uint16Array ? gl.UNSIGNED_SHORT : gl.UNSIGNED_INT); // 基本的にサイズをそのまま使うので if(count === undefined){ count = this.currentTopology.getIBOSize(); } gl.drawElements(mode, count, type, 0); return this; } flush(){ gl.flush(); return this; } } // --------------------------------------------------------------- // // Topology class. // topologyのsetを用意して、それで・・・うん。 // 同じ内容でもプログラムが違えば違うトポロジーになるので // 使い回しはできないですね・・・（ロケーション） class Topology{ constructor(name){ this.name = name; this.attributes = {}; // Object.keysでフェッチ。delete a[name]で削除。 this.attrSize = 0; this.ibo = undefined; this.iboType = undefined; this.iboSize = 0; } getName(){ return this.name; } getAttrSize(){ return this.attrSize; } getIBOType(){ return this.iboType; } getIBOSize(){ return this.iboSize; } registAttribute(program, attributeName, data, stride){ let attr = {}; attr.vbo = create_vbo(data); attr.location = gl.getAttribLocation(program, attributeName); attr.stride = stride; this.attrSize = Math.floor(data.length / stride); // attrの個数 this.attributes[attributeName] = attr; } setAttribute(){ set_attribute(this.attributes); } registIndexBuffer(data, type){ this.ibo = create_ibo(data, type); this.iboType = type; this.iboSize = data.length; // iboのサイズ } bindIndexBuffer(){ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo); } clear(){ // 描画が終わったらbindを解除する gl.bindBuffer(gl.ARRAY_BUFFER, null); if(this.ibo !== undefined){ gl.bindBuffer(gl.ELEMENT_BUFFER, null); } return this; } } // ------------------------------------------------------------ // // computeNormals // verticesは3つずつ頂点座標が入ってて // indicesは3つずつ三角形の頂点のインデックスが入ってるわけね // indicesの3*i,3*i+1,3*i+2それぞれに対して // たとえばk=indices[3*i]に対して // verticesの3*k,3*k+1,3*k+2番目の成分を取り出してベクトルを作る // それを3つやる // 次にv0,v1,v2で作る三角形のそれぞれの内角の大きさを出す // なお外積とarcsinで出すのでそのまま正規化されてる // 向きについてはv0,v1,v2の順に時計回りであることが想定されてる // 得られた角度を法線ベクトル（大きさ1）にかけて // それぞれk番目のnormalsに加える // 終わったらnormalsをすべて正規化 // あとは成分ごとにばらして終了 function getNormals(vertices, indices){ let normals = []; for(let i = 0; i < Math.floor(vertices.length / 3); i++){ normals.push(createVector(0, 0, 0)); } let v0 = createVector(); let v1 = createVector(); let v2 = createVector(); for(let i = 0; i < Math.floor(indices.length / 3); i++){ const id = [indices[3*i], indices[3*i+1], indices[3*i+2]]; v0.set(vertices[3*id[0]], vertices[3*id[0]+1], vertices[3*id[0]+2]); v1.set(vertices[3*id[1]], vertices[3*id[1]+1], vertices[3*id[1]+2]); v2.set(vertices[3*id[2]], vertices[3*id[2]+1], vertices[3*id[2]+2]); const w0 = p5.Vector.sub(v1, v0); const w1 = p5.Vector.sub(v2, v0); const w2 = p5.Vector.sub(v2, v1); const u0 = p5.Vector.cross(w0, w1); const u1 = p5.Vector.cross(w0, w2); const u2 = p5.Vector.cross(w1, w2); const m0 = w0.mag(); const m1 = w1.mag(); const m2 = w2.mag(); const sin0 = u0.mag() / (m0 * m1); const sin1 = u1.mag() / (m0 * m2); const sin2 = u2.mag() / (m1 * m2); const angle0 = asin(sin0); const angle1 = asin(sin1); const angle2 = asin(sin2); const n = p5.Vector.normalize(u0); normals[id[0]].add(createVector(n.x*angle0, n.y*angle0, n.z*angle0)); normals[id[1]].add(createVector(n.x*angle1, n.y*angle1, n.z*angle1)); normals[id[2]].add(createVector(n.x*angle2, n.y*angle2, n.z*angle2)); } let result = []; for(let n of normals){ n.normalize(); result.push(...n.array()); } return result; } // ------------------------------------------------------ // // BackgroundManager. // やりかたとしては・・ね、 // まずこれを作って、 // 使い方1:普通に2Dでなんか描いてそれずーっとうしろにおいておく // これはdrawでいろいろ描いたうえでdisplayしまくりだけ // 使い方2:2Dで以下略 // 名前を付けました。 // これで複数のbgManagerを併用できる。 // _nodeは一つしかないので複数ほしいときに困るわけです・・ // まあメモリ解放すればいいんだろうけど。 class BackgroundManager{ constructor(){ const id = BackgroundManager.id++; this.name = "bgManager" + id; this.layers = []; this.layers.push(createGraphics(width, height)); this.currentLayerId = 0; // シェーダーとか用意して_node.use("bgShader", "bg")とでもして // もろもろ用意する感じですかね // 余裕があればポストエフェクト（・・・） let _shader = this.getBGShader(); _node.registRenderSystem(this.name, _shader); _node.use(this.name, 'plane') .registAttribute('aPosition', [-1,1,0,1,1,0,-1,-1,0,1,-1,0], 3) .registUniformLocation('uTex'); this.texture = new p5.Texture(_gl, this.layers[0]); } getBGShader(){ // bgShader. 背景を描画する。 const bgVert= "precision mediump float;" + "attribute vec3 aPosition;" + "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; const bgFrag= "precision mediump float;" + "uniform sampler2D uTex;" + "uniform vec2 uResolution;" + "void main(){" + " vec2 p = gl_FragCoord.xy / uResolution.xy;" + " p.y = 1.0 - p.y;" + " vec4 tex = texture2D(uTex, p);" + " if(tex.a < 0.5){ discard; }" + // 透明度0でdiscardしないとダメ " gl_FragColor = tex;" + "}"; return createShader(bgVert, bgFrag); } addLayer(){ this.layers.push(createGraphics(width, height)); return this; } removeLayer(id){ if(id === 0){ return; } // 0番は特別なのでリムーブしないでください this.layers.splice(id, 1); } setLayer(id){ // selectの方が良くない？ this.currentLayerId = id; return this; } getLayer(id){ // 柔軟性大事 return this.layers[id]; } draw(command, args = []){ this.layers[this.currentLayerId][command](...args); return this; } display(){ // 0おいて1おいて・・ gl.disable(gl.DEPTH_TEST); // uMVMatrixをいじる必要はないです // 「そういう」行列を渡せばいいだけの話なのでいじらないでくださいね // 0番に1,2,3,...を乗せていきます for(let i = 1; i < this.layers.length; i++){ this.layers[0].image(this.layers[i], 0, 0); } this.texture.update(); camera(0, 0, height * 0.5 * Math.sqrt(3), 0, 0, 0, 0, 1, 0); _node.use(this.name, 'plane') .setAttribute() .setTexture('uTex', this.texture.glTex, 0) // 0はbg用に予約。 .setUniform("uResolution", [width, height]) .drawArrays(gl.TRIANGLE_STRIP) .clear(); // clearも忘れずに gl.enable(gl.DEPTH_TEST); } } BackgroundManager.id = 0; // 識別子 // ------------------------------------------------------ // // intersections. // ポジ辺ネガ辺は成分で分かるので // すべての辺をfrom,to,dirtyFlagで入れてしまい // まとめて巡回置換分割して // 各サイクルをネガポジ見て分類すればいい // dirtyFlagはサイクル分割で走査に使う // ネガポジチェック(falseの場合は分割しない) function negaposiCheck(contours, r, theta){ let posi_n = 0; let nega_n = 0; for(let ctr of contours){ const n = ctr.length / 3; for(let i = 0; i < n; i++){ const a = ctr[3*i]; const b = ctr[3*i+1]; if(a*cos(theta) + b*sin(theta) - r > 0){ posi_n++; }else{ nega_n++; } if(posi_n > 0 && nega_n > 0){ return true; } } } return false; } function getContoursPair(contours, r, theta){ let points = []; let edges = []; let posiIntersections = []; // ソートする let negaIntersections = []; // ソートする let index = 0; for(let ctr of contours){ const n = ctr.length / 3; const initialIndex = index; for(let i = 0; i < n; i++){ const a = ctr[3*i]; const b = ctr[3*i+1]; if(a*cos(theta) + b*sin(theta) - r > 0){ points.push({i:index, x:a, y:b, posi:true}); }else{ points.push({i:index, x:a, y:b, posi:false}); } index++; } for(let i = 0; i < n; i++){ const i0 = initialIndex + i; const i1 = initialIndex + (i+1)%n; // ポジ辺 if(points[i0].posi && points[i1].posi){ edges.push({from:i0, to:i1, dirtyFlag:false}); } // ネガ辺 if(!points[i0].posi && !points[i1].posi){ edges.push({from:i0, to:i1, dirtyFlag:false}); } // ポジからネガへ, もしくはネガからポジへ。 if(points[i0].posi != points[i1].posi){ const a = points[i0].x; const b = points[i0].y; const c = points[i1].x; const d = points[i1].y; const upper = a * cos(theta) + b * sin(theta) - r; const lower = (a-c) * cos(theta) + (b-d) * sin(theta); const t = upper/lower; const xmid = (1-t) * a + t * c; const ymid = (1-t) * b + t * d; // ソート用のキー const value = xmid * sin(theta) - ymid * cos(theta); if(points[i0].posi){ // ポジからmid,midからネガ。で、inはtrueでfalse. const p0 = {i:index, x:xmid, y:ymid, posi:true, in:true, value:value}; const n0 = {i:index+1, x:xmid, y:ymid, posi:false, in:false, value:value}; points.push(p0, n0); posiIntersections.push(p0); negaIntersections.push(n0); edges.push({from:i0, to:index, dirtyFlag:false}); edges.push({from:index+1, to:i1, dirtyFlag:false}); index += 2; }else{ // ネガからポジ const n1 = {i:index, x:xmid, y:ymid, posi:false, in:true, value:value}; const p1 = {i:index+1, x:xmid, y:ymid, posi:true, in:false, value:value}; points.push(n1, p1); negaIntersections.push(n1); posiIntersections.push(p1); edges.push({from:i0, to:index, dirtyFlag:false}); edges.push({from:index+1, to:i1, dirtyFlag:false}); index += 2; } } } } // 下準備完了。 const sortFunction = (p, q) => { if(p.value < q.value){ return -1; } if(p.value > q.value){ return 1; } return 0; } posiIntersections.sort(sortFunction); negaIntersections.sort(sortFunction); // ここで、このタイミングで・・ // つまりですね // 2*iと2*i+1でinの真偽がかぶってたら2*i+1と2*i+2をスワップ、 // っていうのを最初から最後まで通してやる。 // それでいけるはずです。 // できました・・・・・ for(let i = 0; i < posiIntersections.length/2 - 1; i++){ let p0 = posiIntersections[2*i]; let p1 = posiIntersections[2*i+1]; if(p0.in == p1.in){ let p2 = posiIntersections[2*i+2]; posiIntersections[2*i+2] = {i:p1.i, x:p1.x, y:p1.y, posi:p1.posi, in:p1.in}; posiIntersections[2*i+1] = {i:p2.i, x:p2.x, y:p2.y, posi:p2.posi, in:p2.in}; } } for(let i = 0; i < negaIntersections.length/2 - 1; i++){ let n0 = negaIntersections[2*i]; let n1 = negaIntersections[2*i+1]; if(n0.in == n1.in){ let n2 = negaIntersections[2*i+2]; negaIntersections[2*i+2] = {i:n1.i, x:n1.x, y:n1.y, posi:n1.posi, in:n1.in}; negaIntersections[2*i+1] = {i:n2.i, x:n2.x, y:n2.y, posi:n2.posi, in:n2.in}; } } // どういうことかというと、 // クリティカルケースですね、その場合にvalueによるソートが通用しない // 場合が出てくるのですよ。 // それを解消するために、隣接でinがかぶっちゃってるところを // ときほぐしたわけです。 // inで偶数なら奇数へ、inで奇数なら偶数へ引く。 for(let i = 0; i < posiIntersections.length/2; i++){ const p0 = posiIntersections[2*i]; const p1 = posiIntersections[2*i+1]; if(p0.in){ edges.push({from:p0.i, to:p1.i, dirtyFlag:false}); } else if(p1.in){ edges.push({from:p1.i, to:p0.i, dirtyFlag:false}); } } for(let i = 0; i < negaIntersections.length/2; i++){ const n0 = negaIntersections[2*i]; const n1 = negaIntersections[2*i+1]; if(n0.in){ edges.push({from:n0.i, to:n1.i, dirtyFlag:false}); } else if(n1.in){ edges.push({from:n1.i, to:n0.i, dirtyFlag:false}); } } // これで辺はすべてなので、それぞれつなぎ合わせる。 // さすがにこれはメソッドにしましょうね・・・ // edgesにはすべてのインデックスが入っているはず // つまりL=edges.lengthとして0,1,2,...,L-1の置換になってるはず const cycles = createCycles(edges); let posiContours = []; let negaContours = []; for(let cycle of cycles){ let c = []; let posiFlag = true; for(let i = 0; i < cycle.length; i++){ const index = cycle[i]; const p = points[index]; posiFlag = p.posi; c.push(p.x, p.y, 0); } if(posiFlag){ posiContours.push(c); }else{ negaContours.push(c); } } // intersectionsを使って輪郭線を作る予定 let intersections = []; for(let i = 0; i < posiIntersections.length; i++){ const p = posiIntersections[i]; intersections.push({x:p.x, y:p.y}); } return {posi:posiContours, nega:negaContours, intersections:intersections}; // おつかれさま！ } function createCycles(edges){ // edgesに入っている2つの数の組たちから // 頭とおしりでつながる数の列の組(cycle)を作って出力 // そのあと点データに変換するのはあとでやる。0挿入忘れずに。 const L = edges.length; // fromには0,1,2,...,L-1が現れているはずなのでsortする edges.sort((e0, e1) => { if(e0.from < e1.from){ return -1; } if(e0.from > e1.from){ return 1; } return 0; }); // これでたとえばedges[k]のto:mだったら次はedges[m]を見ればいい、 // みたいになる。現れたedgeのflagをtrueにしていってすべてtrueになったら // 終了 let debug = 99999; let result = []; while(debug-->0){ // まず始点を探す let hasStartPoint = false; let c = []; let currentEdge; for(let i = 0; i < L; i++){ const edge = edges[i]; if(!edge.dirtyFlag){ hasStartPoint = true; c.push(edge.from); edge.dirtyFlag = true; currentEdge = edge; break; } } if(!hasStartPoint){ break; } // edge.fromから始まってサーチしていく const startId = c[0]; while(debug-->0 && (currentEdge.to != startId)){ c.push(currentEdge.to); currentEdge = edges[currentEdge.to]; currentEdge.dirtyFlag = true; } result.push(c); } return result; } // contoursから交点の情報を直線状に並ぶように取得 /* function getIntersections(contours, r, theta){ // 法線ベクトル(cos(theta),sin(theta))で // 直線の方程式はxcos(theta)+ysin(theta)=rで // これでぶった切る // contoursには[[],[],...]で // []は[x,y,0,x,y,0,x,y,0,.....]ですね let result = []; const e = createVector(cos(theta), sin(theta)); for(let ctr of contours){ const n = ctr.length / 3; for(let i = 0; i < n; i++){ //const {x:a, y:b} = ctr[3*i]; //const {x:c, y:d} = ctr[3*i+1]; const j = (i+1)%n; const a = ctr[3*i]; const b = ctr[3*i+1]; const c = ctr[3*j]; const d = ctr[3*j+1]; const tmp0 = a * cos(theta) + b * sin(theta) - r; const tmp1 = c * cos(theta) + d * sin(theta) - r; if((tmp0 <= 0 && tmp1 > 0) || (tmp0 > 0 && tmp1 <= 0)){ // (a,b)と(c,d)を結ぶ直線が交わる点を求める const upper = a * cos(theta) + b * sin(theta) - r; const lower = (a-c) * cos(theta) + (b-d) * sin(theta); const t = upper/lower; const x1 = (1-t) * a + t * c; const y1 = (1-t) * b + t * d; // (x1, y1)が交点 let obj = {x:x1, y:y1}; // さらに作業は続く let v = createVector(a-c, b-d); const m = p5.Vector.dot(v, e); v.mult(0.3/m); // eとの内積が0.3になるように修正 obj.p = {x:x1 + v.x, y:y1 + v.y}; obj.q = {x:x1 - v.x, y:y1 - v.y}; obj.value = x1 * sin(theta) - y1 * cos(theta); // この値でsortする result.push(obj); } } } // 重心についても(cos(theta),sin(theta))と内積取って、 // 正ならその方向に動かし負なら逆方向に動かす。 if(result.length == 0){ return []; } result.sort((o1, o2) => { if(o1.value < o2.value){ return -1; } if(o1.value > o2.value){ return 1; } return 0; }); return result; } // contoursから // resultを一旦出してその結果が[]でなければスライスされるので // 改変されたcontoursを出力する感じですかね // これをgetIslandに渡してデータを取得 // そのときislandごとのcontoursデータ、これはTessaに渡して // 分解する際に使用します。 // 加えて速度と加速度を設定 // さらにカウント20を与えて0になったら停止させる // そのあと一斉に速度と加速度を与えて落とす // 画面外に出たら排除 // からっぽになったらsystemInitializeする function getSlicedContours(contours, result){ let finalContours = contours; const L = result.length / 2; for(let i = 0; i < L; i++){ const {p:p0, q:q0} = result[2*i]; const {p:p1, q:q1} = result[2*i+1]; finalContours.push([p0.x, p0.y, 0, p1.x, p1.y, 0, q1.x, q1.y, 0, q0.x, q0.y, 0]); } return finalContours; } */ // ここをcontoursの2つ組にする。最初から別々なら問題ない。 // これの320を使えばいい。要するに手抜きです。 function getIntersectionsWithSquare(r, a, b, c, d){ const delta = a*d-b*c; let result = new Array(4); // XP; if(abs(a-c)<0.00001){ result[0]=undefined; result[2]=undefined; }else{ const y0 = ((d-b)*r-delta) / (c-a); const y1 = (-(d-b)*r-delta) / (c-a); if(abs(y0)<=r){ result[0]={x:r,y:y0}; }else{result[0]=undefined;} if(abs(y1)<=r){ result[2]={x:-r,y:y1}; }else{result[2]=undefined;} } if(abs(b-d)<0.00001){ result[1]=undefined; result[3]=undefined; }else{ const x0 = ((c-a)*r+delta) / (d-b); const x1 = (-(c-a)*r+delta) / (d-b); if(abs(x0) 0); const direction = (flag ? t : t + Math.PI); child.slide(direction); newChilds.push(child); } return newChilds; } update(){ // 基本的には全部updateするだけ for(let tess of this.tesses){ tess.update(); } } sliceTesses(r, t){ // 直線{r,t}でtessたちを分割する関数を分離する。 // これをSystem側から然るべきタイミングで呼び出す。 // updateの後に。 let childs = []; for(let i = this.tesses.length-1; i>=0; i--){ let tess = this.tesses[i]; let contours = tess.getContours(); // ネガポジチェック if(!negaposiCheck(contours, r, t)){ continue; } const offset = tess.getOffset(); //const result = getIntersections(contours, r, t); //if(result.length == 0){ continue; } // つまり、ここ↓で2つのcontoursを受け取り・・ //let newContours = getSlicedContours(contours, result); let newContoursPair = getContoursPair(contours, r, t); // 別々にTessaの集合を取得してそれぞれchildsに放り込む。 childs.push(...this.getChilds(newContoursPair.posi, r, t, offset)); childs.push(...this.getChilds(newContoursPair.nega, r, t, offset)); this.tesses.splice(i, 1); // 親を排除 } this.tesses.push(...childs); // return result; // resultの情報を元に輪郭線を取得したいので。 // まあこのくらいなら許されるでしょう。多用するとスパゲティるけど。 } activateTesses(){ // DELETE_FIGUREになってからちょっとしたら // これを呼び出してtessたちをactivateする for(let tess of this.tesses){ tess.activate(); } } display(){ if(this.tesses.length == 0){ return; } // 描画と排除 for(let tess of this.tesses){ tess.display(); } for(let i = this.tesses.length-1; i>=0; i--){ let tess=this.tesses[i]; if(!tess.isAlive()){ this.tesses.splice(i, 1); // 画面外に出たら排除 } } } } Tessellator.id = 0; // tessaはdrawerで生成したメッシュの・・ // つまり動かさない場合、そのままなんですよね。修正がなければ。 // 当たり前ですけど。 // で、それを取得するにあたり、取得部分を分離します。 // offsetについては // 最初にcreateVector(0,0,0)を持たせたうえで // 速度を足すたびに引いていき // シェーダーにはそれにpositionを足した値を渡して0～640x0～640で // 計算してUVに変換する // 引き継がせるときに引き継がせる class Tessa{ constructor(name, centerOfGravity, contours, offset){ this.name = name; this.position = createVector(0, 0, 0); this.centerOfGravity = centerOfGravity; this.contours = contours; this.velocity = createVector(0, 0, 0); this.acceleration = createVector(0, 0, 0); this.active = false; this.slideCount = 0; this.delayCount = 0; this.offset = offset; // テクスチャ座標計算用 } getOffset(){ return this.offset; } slide(direction){ // direction方向にずらす準備 // 分裂時に実行する // 重心(gx,gy)についてgx*cos(t)+gy*sin(t)-rが正ならcos(t),sin(t)の // 方向で負なら-cos(t),-sin(t)の方向 this.slideCount = Math.floor(SLICE_TIME * 0.65); this.velocity.set(0.8 * cos(direction), 0.8 * sin(direction), 0.0); this.acceleration.set(-0.08*cos(direction), -0.08*sin(direction), 0.0); } activate(){ this.active = true; this.delayCount = DELETE_TIME_MAX * Math.random(); const vx = 3*(Math.random()-0.5); const vz = 3*(Math.random()-0.5); const vy = -2-2*Math.random(); this.velocity = createVector(vx, vy, vz); this.acceleration = createVector(0, 0.5, 0); } isAlive(){ if(!this.active){ return true; } if(this.centerOfGravity.y + this.position.y < height){ return true; } return false; } getName(){ return this.name; } getContours(){ return this.contours; } contoursUpdate(){ // スライド終了時にcontoursの情報を更新。positionの分だけ動かす。 for(let ctr of this.contours){ for(let i = 0; i < ctr.length / 3; i++){ ctr[3*i] += this.position.x; ctr[3*i+1] += this.position.y; } } } update(){ if(!this.active){ if(this.slideCount == 0){ return; } this.velocity.add(this.acceleration); this.position.add(this.velocity); this.slideCount--; if(this.slideCount == 0){ this.contoursUpdate(); } return; } if(this.delayCount > 0){ this.delayCount--; return; } this.velocity.add(this.acceleration); this.position.add(this.velocity); } display(){ const {x:px, y:py, z:pz} = this.position; _node.useTopology(this.name) .setAttribute() .setMatrix([{tr:[px, py, pz]}]) .setVertexColor() //.setUVColor() .bindIndexBuffer() .drawElements(gl.TRIANGLES); //.clear(); // clearは全部描画してから行えばいいよね } } // ------------------------------------------------------------ // // determinant. // ベクトル(a,b,c),(d,e,f),(g,h,i)に対し // 位置ベクトルが作る平行六面体の符号付体積 // これが0の場合三角形はつぶれているという証明にもなる // 1を使う！ // 三角形が平面上にあるときは暫定的にz座標を1にするとかする // calcDet(a,b,1,c,d,1,e,f,1)のabsを2で割ると(a,b)(c,d)(e,f)を // 頂点とする三角形の面積が出る function calcDet(a,b,c,d,e,f,g,h,i){ const det = a*(e*i-f*h) + b*(f*g-d*i) + c*(d*h-e*g); return det; } // ------------------------------------------------------------ // // calculateTessellation. // pointsは重複なしでの上面の頂点座標群 // contoursはループの集合ですね、ひとつながりとは限らないので。 // facesは三角形のインデックス列の集合で時計回りにポリゴンですね。 // contourに紐付けることも考えたんですけど、 // まあ、めんどくさいですから・・無しで・・・・・・ // contoursをあれ、する。で、{points, contours, faces}を出力する感じ。 function calculateTessellation(ctrs){ // step0.triangulateする。 let tr = _gl._triangulate(ctrs); // step1:つぶれた三角形を排除 for(let i = tr.length - 1; i >= 0; i -= 9){ const localArea = 0.5*Math.abs(calcDet(tr[i-8],tr[i-7],1,tr[i-5],tr[i-4],1,tr[i-2],tr[i-1],1)); if(localArea < 0.00001){ for(let k = 0; k < 9; k++){ tr.splice(i-k, 1); } } } const L1 = tr.length / 3; // 片面の重複込みの頂点数 // ここでL1が0のときはundefinedを返す感じですかね if(L1 == 0){ return undefined; } // step2:点オブジェクト生成 let ps = []; for(let i = 0; i < L1; i++){ ps.push({x:tr[3*i], y:tr[3*i+1], z:i}); } // step3:xとyでソート(xが同じならyの小さい順) // おそらくほんとに同じ点のはずなので大丈夫 ps.sort((p, q) => { if(p.x < q.x){ return -1; } if(p.x == q.x && p.y < q.y){ return -1; } return 0; }); // step4:点の数の配列を用意 let ps2 = new Array(L1); // ここには重複込みでpointが入る // step5:Pointオブジェクトを生成 let points = []; let index = 0; points.push({x:ps[0].x, y:ps[0].y, id:index, next:[]}); index++; ps2[ps[0].z] = points[0]; for(let i = 1; i < L1; i++){ // ps[i]を取る // ps[i-1]と一緒だったらps[i-1].zからps2のを取ってそれを // 一緒じゃなかったらindexのPoint作って格納しつつindex++; if(ps[i].x == ps[i-1].x && ps[i].y == ps[i-1].y){ ps2[ps[i].z] = ps2[ps[i-1].z]; }else{ const newPoint = {x:ps[i].x, y:ps[i].y, id:index, next:[]}; ps2[ps[i].z] = newPoint; points.push(newPoint); index++; } } const L = points.length; // 片面の頂点の個数（重複無し） // 三角形の個数はL1/3です。ここでL1/3個の[]を生成します。 // これらひとつひとつが三角形と対応します。 const T1 = L1 / 3; // T1は三角形の個数 // step6:3つの頂点をフェッチしつつ・・idを入れていく。 // queryでfaceIndexをつないでUnionFindにまとめてもらう。 let faces = []; faces.push(ps2[0].id, ps2[1].id, ps2[2].id); // fIdは何番目の三角形の辺として現れたかのコード // これが隣接辺で参照されるときに三角形同士が接続を得る ps2[0].next.push({id:ps2[2].id, fId:0}); ps2[1].next.push({id:ps2[0].id, fId:0}); ps2[2].next.push({id:ps2[1].id, fId:0}); let query = []; // 統合用クエリ配列 for(let i = 3; i < L1; i += 3){ const faceIndex = floor(i/3); // faceIndexはiから計算できます // iとi+1とi+2を見る faces.push(ps2[i].id, ps2[i+1].id, ps2[i+2].id); for(let k = 0; k < 3; k++){ const from = i+k; const to = i+((k+2)%3); let pFrom = ps2[from]; let pTo = ps2[to]; const target = pFrom.id; let isDouble = false; for(let m = 0; m < pTo.next.length; m++){ if(pTo.next[m].id === target){ const _fId = pTo.next[m].fId;// 逆方向辺の属する三角形のid query.push([_fId, faceIndex]); // _fIdとfaceIndexを接続します pTo.next.splice(m, 1); isDouble = true; break; } } // 重複しないならば新規のedgeを追加 if(!isDouble){ pFrom.next.push({id:pTo.id, fId:faceIndex}); } } } const ufResult = getUnionFind(T1, query); // T1は三角形の個数 const islandCount = ufResult.count; // 島の数 const uf = ufResult.uf; // uf[fId].lvで属するレベルを確認できる // nextを排除するときにそのfIdを常に更新していく感じですね // どんな値であってもそれがufに入って・・どれでもいいんだっけ？ // じゃあ最初に決めてしまえ。 // step7:contoursの生成 // nextのところでidを参照するようにする以外特に変更はないです let debug = 0; let _contours = []; // ここにループを入れていく let islandLevels = []; // level配列。k番contourのレベルがkに入ってる. while(debug < 999999){ // nextが存在する点を探す let hasNextExists = false; let hasNextPoint; for(let p of points){ if(p.next.length > 0){ hasNextPoint = p; hasNextExists = true; break; } } // 無ければ終了 if(!hasNextExists){ break; } let cur = hasNextPoint; let prev; // prevがある場合にチョイスの仕方を工夫する // ループの起点のインデックス const startId = hasNextPoint.id; let _contour = []; // ここにidを入れていく(頭とおしりは重複させる) let islandLevel = -1; _contour.push(startId); while(debug < 999999){ let targetId = -1; if(cur.next.length == 1 || prev == undefined){ targetId = 0; }else{ // prevが存在してなおかつnextが2以上の場合 const dirFromCurToPrev = atan2(prev.y - cur.y, prev.x - cur.x); let dirs = []; const curV = createVector(cur.x, cur.y); for(let i = 0; i < cur.next.length; i++){ let nextP = createVector(points[cur.next[i].id].x, points[cur.next[i].id].y); nextP.sub(curV); nextP.rotate(-dirFromCurToPrev); let _dir = atan2(nextP.y, nextP.x); if(_dir<0){ _dir += TAU; } dirs.push(_dir); } // dirsの中身が最小なところを探す let minDir = 99999; for(let i = 0; i < dirs.length; i++){ if(dirs[i] < minDir){ minDir = dirs[i]; targetId = i; } } } const _next = cur.next[targetId]; const nextId = _next.id; islandLevel = uf[_next.fId].lv; // これがレベル let q = points[nextId]; cur.next.splice(targetId, 1); // targetIdを排除 _contour.push(nextId); // qが起点の場合は起点のIndexを格納して抜ける if(nextId == startId){ break; } // そうでない場合は起点を更新しつつループ prev = cur; // 2回目以降のチョイスでprevを適用 cur = q; debug++; } _contours.push(_contour); islandLevels.push(islandLevel); debug++; } // countはレベルの個数でlevelsはk番contourの属するレベルがlevels[k] // という意味。すなわちcountの長さの配列に次々とcontourを入れていく // その際に末尾除くすべてのidについてpointsを参照して点の座標を // あれすることで個別にできるわけです。 return {points:points, contours:_contours, faces:faces, count:islandCount, levels:islandLevels}; } // ------------------------------------------------------------ // // contoursからメッシュを取得する関数作ろうかと思って // Planeで。今回表面のみで板にする必要がないので。 function getPlaneMeshFromContours(contours){ let tessData = calculateTessellation(contours); if(tessData == undefined){ return undefined; } let points = tessData.points; let _contours = tessData.contours; let faces = tessData.faces; let vertices = []; for(let p of points){ vertices.push(p.x, p.y, 0); } let vertexNormals = []; for(let i = 0; i < vertices.length; i++){ vertexNormals.push(0, 0, 1); } let island = []; for(let ctr of _contours){ let part = []; for(let i = 0; i < ctr.length - 1; i++){ const p = points[ctr[i]]; part.push(p.x, p.y, 0); } island.push(part); } return {v:vertices, f:faces, n:vertexNormals, island:island}; } // getIslandBoardMeshesFromContours. // アイランドボードメッシュズ。 // 島ごとにv,f,nを計算し配列を返す。 function getIslandPlaneMeshesFromContours(contours){ let tessData = calculateTessellation(contours); if(tessData == undefined){ return undefined; } let ps = tessData.points; let _ctrs = tessData.contours; const count = tessData.count; let islands = []; for(let i = 0; i < count; i++){ islands.push([]); } let levelMap = tessData.levels; for(let k = 0; k < _ctrs.length; k++){ const lv = levelMap[k]; const contourIds = _ctrs[k]; let ctr = []; // 頭とおしりが重複なので1つ前まで入れる for(let h = 0; h < contourIds.length-1; h++){ const id = contourIds[h]; ctr.push(ps[id].x, ps[id].y, 0); } islands[lv].push(ctr); } // 各々のislands[k]たちで新しく～～～って感じ let meshes = []; for(let lv = 0; lv < count; lv++){ // このislandが生成に用いたcontoursの情報です // これを分割に使うので保持しておきます // Tessa生成時に放り込む感じですかね // 分割が終わったらもうこの情報は使わないです落とすだけなので const island = islands[lv]; let _tess = calculateTessellation(island); if(_tess == undefined){ continue; } let points = _tess.points; let _contours = _tess.contours; let faces = _tess.faces; let vertices = []; for(let p of points){ vertices.push(p.x, p.y, 0); } let vertexNormals = []; for(let i = 0; i < vertices.length; i++){ vertexNormals.push(0, 0, 1); } meshes.push({v:vertices, f:faces, n:vertexNormals, island:island}); } return meshes; } // islandで作るのに使ったcontoursを取得できるように修正 // これでTessa作るときにcontoursを付与できる // ----------------------------------------------------------------- // // System. class System{ constructor(){ this.tessellator = new Tessellator(); this.bg = new BackgroundManager(); this.eventCount = 0; this.state = CREATE_FIGURE; this.sliceLineData = new Array(SLICE_COUNT); this.sliceLineIndex = 0; // いちいち計算するのめんどくさい this.patternId = INITIAL_PATTERN_INDEX; this.hueTable = [0.0, 0.1, 0.05, 0.85, 0.15, 0.35, 0.55, 0.2, 0.4]; // テクスチャ手ごわいねぇ this.img = createGraphics(width, height); this.img.background(0, 128, 255); this.img.noStroke(); this.img.fill(255); this.img.rect(164,164, 312, 312); this.tex = new p5.Texture(_gl, this.img); } prepareShader(){ // 今回はcustomLightShaderということでcustomしたlightShaderを // 使います。 let _shader = createShader(customLightVert, customLightFrag); _node.registRenderSystem('customLight', _shader); } prepareBG(){ // 線を表示する背景の準備 this.bg.addLayer(); this.bg.setLayer(1).draw("translate", [width * 0.5, height * 0.5]) .draw("stroke", [255, 0, 0]) .draw("strokeWeight", [4]); } initialize(){ this.eventCount = 0; this.state = CREATE_FIGURE; let r = new Array(SLICE_COUNT); let theta = new Array(SLICE_COUNT); //randomSeed(999); // 最終的には図形ごとに変える for(let i = 0; i < SLICE_COUNT; i++){ r[i] = 0.01 + 160 * Math.random(); theta[i] = Math.random() * Math.PI * 2.0; } // 線の両端の座標を出力しま～す for(let i = 0; i < SLICE_COUNT; i++){ const data = getIntersectionsWithBound(r[i], theta[i]); this.sliceLineData[i] = {r:r[i], t:theta[i], x0:data[0], y0:data[1], x1:data[2], y1:data[3]}; // x0,y0,x1,y1,r,tの情報。 } this.sliceLineIndex = 0; // indexをリセット const initialContours = this.getInitialContours(this.patternId); if(initialContours == undefined){ return; } const hue = this.hueTable[this.patternId]; this.tessellator.setPaintColor(_HSV(hue, 1, 1)); this.tessellator.setInitialTess(initialContours); this.patternId = (this.patternId + 1) % PATTERN_NUM; // パターン更新 } getInitialContours(){ const id = this.patternId; if(id == 0){ return getSquareContours(160); } if(id == 1){ return getCircleContours(200, 100); } if(id == 2){ return getCircleContours(240, 6); } // 正六角形 if(id == 3){ return getHeartContours(); } if(id == 4){ return getMoonContours(); } if(id == 5){ return getStarContours(); } if(id == 6){ return getTextContours(); } if(id == 7){ return getPikachuContours(); } if(id == 8){ return getRingContours(200, 100, 100); } // 環 return undefined; } drawSliceLineOnBackground(){ // 先にclearしよう this.bg.setLayer(1).draw("clear"); if(this.state != SLICE_FIGURE){ return; } let prg = (this.eventCount % SLICE_TIME) / SLICE_TIME; // prg<0.5: 伸ばす。 prg>=0.5:縮める const data = this.sliceLineData[this.sliceLineIndex]; const a = data.x0; const b = data.y0; const c = data.x1; const d = data.y1; if(prg < 0.5){ prg = prg * 2.0; prg = prg * prg * (3 - 2 * prg); this.bg.draw("line", [a, b, a + (c-a) * prg, b + (d-b) * prg]); }else{ prg = 1.0 - (prg - 0.5) * 2.0; prg = prg * prg * (3 - 2 * prg); this.bg.draw("line", [c + (a-c) * prg, d + (b-d) * prg, c, d]); } } getEventCount(){ return this.eventCount; } update(){ this.drawSliceLineOnBackground(); this.tessellator.update(); if(this.state == SLICE_FIGURE){ if(this.eventCount % SLICE_TIME == Math.floor(SLICE_TIME * 0.5)){ const data = this.sliceLineData[this.sliceLineIndex]; const r = data.r; const t = data.t; this.tessellator.sliceTesses(r, t); // ここでresultを受け取ってimgを更新して輪郭線を描ける // それしか方法がなさそうです // tessellatorに描画してもらうわけにもいかないので } } if(this.state == DELETE_FIGURE && this.eventCount == WAIT_FOR_DELETE_TIME){ this.tessellator.activateTesses(); } } display(){ this.bg.setLayer(0) .draw("background", [0]); this.bg.display(); // Tessaたちの描画準備 _node.useRenderSystem('customLight') .setDirectionalLight(_RGB(1), 0, 0, -1) .setAmbientLight(_RGB(0.25)) .setTexture("uTex", this.tex.glTex, 0); // Tessaたちを描画 this.tessellator.display(); // 後始末 _node.flush().clear(); } shift(){ // テッセレータがからっぽになったら初期化する感じで if(this.tessellator.isEmpty()){ this.initialize(); // この中でstateとかeventCount0を初期化 return; } // タイムライン管理 this.eventCount++; if(this.state == CREATE_FIGURE && this.eventCount == CREATE_FIGURE_TIME){ this.state = SLICE_FIGURE; this.eventCount = 0; return; } if(this.state == SLICE_FIGURE){ if(this.eventCount % SLICE_TIME == 0){ this.sliceLineIndex++; } if(this.eventCount == SLICE_COUNT * SLICE_TIME){ this.state = DELETE_FIGURE; this.eventCount = 0; } return; } } } // ------------------------------------------------------------------ // // contoursの取得関数 function getSquareContours(r){ let c = []; c.push([r, r, 0, -r, r, 0, -r, -r, 0, r, -r, 0]); return c; } function getCircleContours(r, detail = 100){ let c = []; let c0 = []; for(let i = 0; i < detail; i++){ const t = TAU * i / detail - PI/2; c0.push(r * cos(t), r * sin(t), 0); } c.push(c0); return c; } // wolframAlphaよりハート曲線 // source:https://mathworld.wolfram.com/HeartCurve.html function getHeartContours(){ let c = []; let c0 = []; for(let i = 0; i < 200; i++){ const t = TAU * i / 200; const x = 16 * 16 * pow(sin(t), 3); const y = 16 * (13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t)); c0.push(x, -y, 0); } c.push(c0); return c; } function getMoonContours(){ let c = []; let c0 = []; const t1 = PI/8; const a = 112; let t, x, y; for(let i = 0; i <= 200; i++){ t = t1 + (TAU-2*t1) * i/200; x = 240*cos(t); y = 240*sin(t); c0.push(x, y, 0); } const t2 = atan2(240*sin(t1), 240*cos(t1)-a); const l = mag(240*cos(t1)-a, 240*sin(t1)); for(let i = 0; i <= 100; i++){ t = TAU - t2 - (TAU-2*t2)*i/100; x = a+l*cos(t); y = l*sin(t); c0.push(x, y, 0); } c.push(c0); return c; } function getStarContours(){ const radius = 280; let c = []; let c0 = []; for(let i = 0; i < 5; i++){ const t0 = TAU*i/5-PI/2; const t1 = t0+TAU/10; const t2 = t1+TAU/10; const r1 = radius; const r2 = radius*sin(PI/10)/cos(PI/5); c0.push(r1*cos(t0), r1*sin(t0), 0, r2*cos(t1), r2*sin(t1), 0); } c.push(c0); return c; } function getTextContours(){ const _text = "亀"; const c = getContoursFromText(_font, _text, 360, 5, CENTER, CENTER); return c; } function getPikachuContours(){ const {data} = pikachu; let c = []; c.push(data); return c; } function getRingContours(r0, r1, detail = 100){ let c = []; let c0 = []; for(let i = 0; i < detail; i++){ const t = TAU * i / detail - PI/2; c0.push(r0 * cos(t), r0 * sin(t), 0); } c.push(c0); let c1 = []; for(let i = 0; i < detail; i++){ const t = TAU * i / detail - PI/2; c1.push(r1 * cos(t), r1 * sin(t), 0); } c.push(c1); return c; } // ------------------------------------------------------------ // // getContoursFromText. // CENTER,CENTERだけで・・いいわけないか。 // たとえばLEFT,TOPってやると0,0がLEFTでTOPになります。 // CENTER,CENTERってやると0,0が中央に来るわけ。 function getContoursFromText(ft, txt, size, detail, h_align, v_align){ const bounds = ft.textBounds(txt, 0, 0, size); let x, y; switch(h_align){ case LEFT: x = -bounds.x; break; case CENTER: x = -bounds.x - bounds.w * 0.5; break; case RIGHT: x = -bounds.x - bounds.w; break; } switch(v_align){ case TOP: y = -bounds.y; break; case CENTER: y = -bounds.y - bounds.h * 0.5; break; case BOTTOM: y = -bounds.y - bounds.h; break; } let contours = []; let contour = []; let currentPos = createVector(); const data = ft.font.getPath(txt, x, y, size).commands; for(let i = 0; i < data.length; i++){ const cmd = data[i]; switch(cmd.type){ case "M": contour = []; currentPos.set(cmd.x, cmd.y); contour.push(currentPos.copy()); break; case "L": if(currentPos.x == cmd.x && currentPos.y == cmd.y) continue; // ここの処理オリジナルでは無いけどなんで用意したのか currentPos.set(cmd.x, cmd.y); contour.push(currentPos.copy()); break; case "C": for(let k = 0; k < detail; k++){ contour.push(new p5.Vector(bezierPoint(currentPos.x, cmd.x1, cmd.x2, cmd.x, k / detail), bezierPoint(currentPos.y, cmd.y1, cmd.y2, cmd.y, k / detail))); } currentPos.set(cmd.x, cmd.y); contour.push(currentPos.copy()); break; case "Q": for(let k = 0; k < detail; k++){ contour.push(new p5.Vector(bezierPoint(currentPos.x, cmd.x1, cmd.x1, cmd.x, k / detail), bezierPoint(currentPos.y, cmd.y1, cmd.y1, cmd.y, k / detail))); } currentPos.set(cmd.x, cmd.y); contour.push(currentPos.copy()); break; case "Z": contour.pop(); // vec2では困るので配列に変換します contours.push(vec2ToArray(contour)); } } return contours; } // vec2の配列を0挿入で長さ1.5倍の配列に変換する function vec2ToArray(seq){ let result = []; for(let p of seq){ result.push(p.x, p.y, 0); } return result; }

slice_ver1.0