const fish = "M 0.938 -0.025 Q 0.700 0.191 0.354 0.216 Q 0.131 0.401 -0.154 0.369 Q -0.014 0.291 0.015 0.145 Q -0.125 0.035 -0.388 0.017 Q -0.519 0.038 -0.623 0.113 Q -0.726 0.189 -0.895 0.182 Q -0.729 0.117 -0.729 0.009 Q -0.729 -0.099 -0.912 -0.180 Q -0.654 -0.145 -0.509 -0.074 Q -0.363 -0.003 -0.172 -0.149 Q -0.054 -0.238 0.029 -0.257 Q 0.028 -0.385 -0.097 -0.476 Q 0.188 -0.450 0.378 -0.294 Q 0.709 -0.216 0.938 -0.025"; const MAX_RADIUS = 400; const units = []; let mirrorShader; let projTexShader; let mirrorGraphic; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); pixelDensity(1); const fishContours = getContoursFromSVG({ svgData:fish, scaleFactor:1, bezierDetail2:8 }); const fishResult = cyclesToCycles(fishContours); const fishPlane = createBoardMeshFromCycles({result:fishResult, thick:1/50}); for(const v of fishPlane.vertices){ const u = v.x+0.5; fishPlane.vertexColors.push(u*0.5, u*0.5+0.5, 1, 1); let tmp = v.z; v.z = -v.y; v.y = tmp; } // 秘密兵器 const n = createVector(1,0); for(let k=-0.9; k<=0.9; k+=0.2){ const c = createVector(k,0); subDivideGeometry(fishPlane, {c:c, n:n}); } for(let k=0; k<120; k++){ const name = "fish" + k.toString(); const geom = new p5.Geometry(); for(let i=0; i this.duration){ this.progressTime -= this.duration; this.resetting(); } } updateFS(){ const distanceDiff = this.velocity/this.sphereRadius; rotateByAxis(this.fs.t, this.fs.n, distanceDiff); rotateByAxis(this.fs.b, this.fs.n, distanceDiff); const angleDiff = this.direction - this.prevDirection; rotateByAxis(this.fs.t, this.fs.b, angleDiff); rotateByAxis(this.fs.n, this.fs.b, angleDiff); } drawUnit(_renderer){ push(); //noLights(); applyMatrix( this.fs.t.x, this.fs.t.y, this.fs.t.z, 0, this.fs.n.x, this.fs.n.y, this.fs.n.z, 0, this.fs.b.x, this.fs.b.y, this.fs.b.z, 0, 0,0,0,1 ); const shapeId = floor(this.currentTime*60/1000)%120; scale(this.scaleFactor); setModelMatrices(); _renderer.drawBuffers("fish" + shapeId); pop(); } resetting(){ // cp0はcp2 // cp1はもとのcp2に対してもとのcp1の対蹠点 // cp2はcp0→cp1に対して角度を一定の範囲で傾ける this.cp0.set(this.cp2); this.cp1.set(2*this.cp2.x - this.cp1.x, 2*this.cp2.y - this.cp1.y); const directionVector = this.cp1.copy().sub(this.cp0).normalize(); const l = this.moveLength * random(0.9,1.1); const angle = random(PI/6, PI*5/6) * random([1,-1]); directionVector.mult(l).rotate(angle); this.cp2.set(directionVector.add(this.cp1)); // 大体100～300 const ql = quadraticCurveLength( this.cp0.x,this.cp0.y,this.cp1.x,this.cp1.y,this.cp2.x,this.cp2.y ); // たとえば速度が4ならduration=ql/4くらいにするとかそういうの //this.duration = floor(ql/this.velocity); this.duration = ql/this.velocity; //this.progressCount = 0; } } // 2次ベジエの長さ // https://openprocessing.org/sketch/1969811 // Zenn:https://zenn.dev/articles/c84067bfbd616d/edit function quadraticCurveLength(a0, b0, a1, b1, a2, b2, t0 = 0, t1 = 1){ return quadraticCurveLengthGeneral(a0, b0, 0, a1, b1, 0, a2, b2, 0, t0, t1); } // 3次元version. function quadraticCurveLengthGeneral(a0, b0, c0, a1, b1, c1, a2, b2, c2, t0 = 0, t1 = 1){ const p0 = new p5.Vector(a0, b0, c0); const p1 = new p5.Vector(a1, b1, c1); const p2 = new p5.Vector(a2, b2, c2); const q0 = p5.Vector.sub(p0, p1); const q1 = p5.Vector.add(p0, p2).sub(p1).sub(p1); const a = q1.magSq(); const b = q1.dot(q0); const c = q0.magSq(); const d = a*c - b*b; const g = x => Math.log(x + Math.sqrt(x*x + 1)) + x*Math.sqrt(x*x + 1); if (a > 0 && d > 0) { return d * (g((a*t1-b)/Math.sqrt(d)) - g((a*t0-b)/Math.sqrt(d))) / (a*Math.sqrt(a)); } if (a > 0) { return ((a*t1-b)*Math.abs(a*t1-b) - (a*t0-b)*Math.abs(a*t0-b)) / (a*Math.sqrt(a)); } return 2*Math.sqrt(c)*(t1-t0); } // 0でないベクトルvからt:v.normalize()であるような系を作るだけ // そんだけ // tがz軸でnとbがxとyですね // 割と便利だと思う。こういう関数も必要ということ。 function getRandomFS(v){ const tang = v.copy().normalize(); const nVec = createVector(); if(Math.abs(tang.x) > 0.01) { nVec.set(-tang.y, tang.x, 0).normalize(); } else { nVec.set(0, -tang.z, tang.y).normalize(); } const bVec = tang.cross(nVec).normalize(); const angle = Math.random()*2*Math.PI; const resultNVec = createVector( Math.cos(angle)*nVec.x + Math.sin(angle)*bVec.x, Math.cos(angle)*nVec.y + Math.sin(angle)*bVec.y, Math.cos(angle)*nVec.z + Math.sin(angle)*bVec.z ); const resultBVec = createVector( -Math.sin(angle)*nVec.x + Math.cos(angle)*bVec.x, -Math.sin(angle)*nVec.y + Math.cos(angle)*bVec.y, -Math.sin(angle)*nVec.z + Math.cos(angle)*bVec.z ); return {t:tang, n:resultNVec, b:resultBVec}; } function createBoardArrowMesh(params = {}){ const {w = 80, h = 40, thick = 10, triangleRatio = 0.5, widthRatio = 0.5, detail = 20, z = 0} = params; const x1 = -w/2; const x2 = -w/2 + w*triangleRatio; const x3 = w/2; const y1 = -h/2; const y2 = -h/2 + h*(1-widthRatio)*0.5; const y3 = 0; const y4 = -h/2 + h*(1+widthRatio)*0.5; const y5 = h/2; const z1 = z+thick/2; const z2 = z-thick/2; const uVecs = [ createVector(x1,y2,z1), createVector(x1,y4,z1), createVector(x2,y4,z1), createVector(x2,y5,z1), createVector(x3,y3,z1), createVector(x2,y1,z1), createVector(x2,y2,z1) ]; const lVecs = [ createVector(x1,y2,z2), createVector(x1,y4,z2), createVector(x2,y4,z2), createVector(x2,y5,z2), createVector(x3,y3,z2), createVector(x2,y1,z2), createVector(x2,y2,z2) ]; const upper = createPlaneArrowMesh({ w:w, h:h, triangleRatio:triangleRatio, widthRatio:widthRatio,detail:detail, z:z+thick/2 }); const lower = createPlaneArrowMesh({ w:w, h:h, triangleRatio:triangleRatio, widthRatio:widthRatio,detail:detail, z:z-thick/2 }); const geom = upper; const indexOffset = geom.vertices.length; for(let i=0; ibが「安全」な場合ベクトルa->b,a->c,a->dを用意しつつ a->bと内積取って大きさの2乗で割る cとdがこのとき共に1より大きいか共に0より小さい場合にdisjoint判定あとはcとdそれぞれについて0<=かつ<=1の場合に上記の値をratioとして点を取る overlapで追加される頂点はa,b,c,dのいずれかであるゆえ、相互の関係にはならないたとえばa---bにcやdを追加する場合、cやdをもつpathにはすでにそれが入っているよって一方的な関係となるたとえばa-----bの間にcもdも挿入される場合c---dには何にも入らないですから... "insert_ab"とか"insert_cd"のようなinsert用のフラグが必要になる abもしくはcdの長さが<1e-9の場合はdisjointとしよう別に問題ないだろうよし共に長さが保証されている場合に上記の処理をab及びcdについて実行して配列の形で出力する "insert_ab"でpでratioって感じでなんなら全部そうするか？ "single"もその形式で書くか？って話 ratioAとかratioCとか不自然だろ "disjoint"は[]にするとか？ */ function getIntersection(a,b,c,d,threshold = 1e-9){ // a,b,c,dは2次元ベクトル // a-b と c-dが交わるかどうか調べる const abc = getDet2(a,b,c); const abd = getDet2(a,b,d); const cda = getDet2(c,d,a); const cdb = getDet2(c,d,b); if (abc<0&&abd<0) return {flag:"disjoint"}; if (abc>0&&abd>0) return {flag:"disjoint"}; if (cda<0&&cdb<0) return {flag:"disjoint"}; if (cda>0&&cdb>0) return {flag:"disjoint"}; const abr = Math.abs(abc) + Math.abs(abd); const cdr = Math.abs(cda) + Math.abs(cdb); // 4点が一直線上にあるとみなせる場合は // abとcdのうち距離が大きい方を取り // それにより4点が同一直線上にあるとみなし // 内積を使って大小判定を実行する if (abr < threshold || cdr < threshold){ // abかcdが0とみなせる場合は処理しない const distAB = a.dist(b); const distCD = c.dist(d); if(distAB < threshold || distCD < threshold) return {flag:"disjoint"}; const intersections = []; const abab = distAB*distAB; const ab_c = ((b.x-a.x)*(c.x-a.x)+(b.y-a.y)*(c.y-a.y))/abab; const ab_d = ((b.x-a.x)*(d.x-a.x)+(b.y-a.y)*(d.y-a.y))/abab; if(ab_c >= 0 && ab_c <= 1) { intersections.push({type:"insert_ab", p:c.copy(), ratio:ab_c}); } if(ab_d >= 0 && ab_d <= 1) { intersections.push({type:"insert_ab", p:d.copy(), ratio:ab_d}); } const cdcd = distCD*distCD; const cd_a = ((d.x-c.x)*(a.x-c.x)+(d.y-c.y)*(a.y-c.y))/cdcd; const cd_b = ((d.x-c.x)*(b.x-c.x)+(d.y-c.y)*(b.y-c.y))/cdcd; if(cd_a >= 0 && cd_a <= 1) { intersections.push({type:"insert_cd", p:a.copy(), ratio:cd_a}); } if(cd_b >= 0 && cd_b <= 1) { intersections.push({type:"insert_cd", p:b.copy(), ratio:cd_b}); } return {flag:"overlap", intersections}; } // a---cp---bの比率 // c---cp---dの比率 const ratioA = Math.abs(cda)/cdr; const ratioC = Math.abs(abc)/abr; const intersection = p5.Vector.lerp(a, b, ratioA); // 共通にする // pには交差点を入れる return { flag:"single", intersections:[ {type:"insert_ab", p:intersection, ratio:ratioA}, {type:"insert_cd", p:intersection, ratio:ratioC} ] } } // 三角形の面積がめちゃ小さい場合にfalse、そういう閾値 function insideTriangle(p0,p1,p2,p, threshold = 1e-9){ // pがp0,p1,p2の三角形の内部にあるかどうか調べるだけ // ベクトルを使った方が分かりやすいけどね。 const a11 = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2); const a12 = (p1.x-p0.x)*(p2.x-p0.x) + (p1.y-p0.y)*(p2.y-p0.y); const a22 = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2); const qDotU = (p1.x-p0.x)*(p.x-p0.x) + (p1.y-p0.y)*(p.y-p0.y); const qDotV = (p2.x-p0.x)*(p.x-p0.x) + (p2.y-p0.y)*(p.y-p0.y); const d = a11*a22-a12*a12; if (abs(d) < threshold) return false; const a = a22*qDotU - a12*qDotV; const b = -a12*qDotU + a11*qDotV; if(a>0 && b>0 && a+b0の場合、p,q,rで時計回り // cp<0の場合、p,r,qで時計回り if(cp>0) return indices.slice(); return [indices[0], indices[2], indices[1]]; // 逆！ } // 凸ケース。いきなり終了できる。 // 0,1,2,3,4,...だとして // orientationが1なら0,1,2,0,2,3,0,3,4,... // -1なら0,2,1,0,3,2,0,4,3,...そんな感じ // vertices要らんわな。indexと向き付けだけでいい。 // 0,1,2じゃないわ！！！indices[0],[1],[2]だわ！！ function earcutConvexPolygon(indices, orientation = 1){ const result = []; for(let i=1; i 0) { result.push(indices[0], indices[i], indices[i+1]); } else { result.push(indices[0], indices[i+1], indices[i]); } } return result; } // verticesのみでindices=[]の場合は // verticesを順繰りに番号付けして使うが // indicesがある場合はそれに従ってverticesから点を取得して議論する // どのみちindexの配列は用意する // これを空っぽにするまで処理を継続する function executeEarcut(vertices, indices = [], threshold = 1e-9){ const cycle = []; if(indices.length === 0){ for(let i=0; i= 3){ if(cycle.length === 3){ // 最後の三角形をぶちこんで終了 result.push(...earcutTriangle(vertices, cycle)); break; } // 4以上の場合は帰納法による // 下準備の過程で点を排除する場合には点の数を減らしてcontinue; // 角度の総和と角度の列を用意 const angleArray = []; let angleSum = 0; let signSum = 0; // 符号の和の絶対値をpoints.lengthと比較する // 角度を計算する // 辺のなす角を記録していく。つぶれてないかどうかのチェックもここでやる。 let crushedTriangleId = -1; for(let i=0; iqをq->rに重ねる際の角度の変化を記録していく const cp = (q.x-p.x) * (r.y-q.y) - (q.y-p.y) * (r.x-q.x); // 三角形がつぶれてる場合は中間点を排除する // 直進あるいは出戻り if (Math.abs(cp) < threshold) { crushedTriangleId = (i+1)%cycle.length; break; } const ip = (q.x-p.x) * (r.x-q.x) + (q.y-p.y) * (r.y-q.y); const angle = Math.atan2(cp, ip); angleArray.push(angle); angleSum += angle; signSum += Math.sign(angle); // 1か-1を加えていく. 凸判定に使う。 } // つぶれてる場合はidを排除してcontinue; if (crushedTriangleId >= 0) { cycle.splice(crushedTriangleId, 1); continue; } // 凸の場合はそのまま答えが出る。判定は符号の和で調べられる。 // つまりこれのためで、つぶれてるようなのがあるとこれの判定ができないんよ // 結果が簡単に出るのでありがたい。第二引数で符号。数字そのままでOK. if(Math.abs(signSum) === cycle.length){ result.push(...earcutConvexPolygon(cycle, signSum)); // 処理を終了する break; } // つぶれなく、凸でもないケース。 // 向き付け。1か-1. // orientationを掛けて正なら第一の条件を満たす const orientation = Math.sign(angleSum); // 確実に存在する。信じなさい。 let cuttingEarId = -1; for(let i=0; i 0) { result.push(cycle[i], cycle[(i+1)%cycle.length], cycle[(i+2)%cycle.length]); } else { result.push(cycle[i], cycle[(i+2)%cycle.length], cycle[(i+1)%cycle.length]); } cuttingEarId = (i+1)%cycle.length; // ひとつでもカット出来たら終了 break; } // もちろんあるが、万が一の場合は抜けてしまおう if(cuttingEarId < 0){ console.log("failure"); break; } cycle.splice(cuttingEarId, 1); } // おわったので出力 return {vertices:vertices, faces:result}; } // ---------------------------------------------------------------------------- // cycles to cycles function cyclesToCycles(cycles){ // 各々のcycleはベクトル列 // 向きはどっちでもいい // すべて単純閉曲線（自己交叉無し） // しかも互いに交わらない（相互交叉無し）とする // とりあえずすべて時計回りに統一しておく（面倒なので） const cycleObjects = []; const allVertices = []; let lastIndex = 0; for(let i=0; i 0) continue; mountains.push([cycleObject]); } // 等高線を山に見立てているのでmountainとなります // で。 // sortする for(const mountain of mountains){ for(const child of mountain[0].children){ mountain.push(cycleObjects[child]); } mountain.sort((c0, c1) => { if(c0.parents.length > c1.parents.length) return -1; if(c0.parents.length < c1.parents.length) return 1; if(c0.xMaxValue < c1.xMaxValue) return -1; if(c0.xMaxValue > c1.xMaxValue) return 1; return 0; }); } // 出来上がったらmountainごとにうしろから2つずつ取って... // もし単独ならば何にもすることが無いのです。 // その場合はmountain[0].indices.slice()を取っておわり。 const resultCycles = []; const subCycleArrays = []; for(const mountain of mountains){ const initialCycle = mountain.pop(); let resultCycle = initialCycle.indices.slice(); // subCycleの配列. clockwiseなども考慮する。側面の構成などに使う。 const subCycleArray = [initialCycle.indices.slice()]; if(mountain.length === 0) { resultCycles.push(resultCycle); // 一つの場合はここで入れないといけないんだ subCycleArrays.push(subCycleArray); continue; } // 事前に一番最初の段階でのxMaxを取っておいてそれを使わないといけないんだ // それがずっと通用しつづける // なぜなら内部だから // これを先に採用しておき、右に線を伸ばす際のガイドとする const outerXMax = getXMax(cycles[initialCycle.cycleIndex]).value; while(mountain.length > 0){ const target = mountain.pop(); const L0 = target.indices.length; const L1 = resultCycle.length; // targetとresultCycleをつなげる // まずtargetのxMaxIndexからx最大点を取得してその点から // resultCycleのxMaxを半分とする対蹠点への線分を作り // 線分交叉で得られるresultCycleの方の線分との交点を取る // single/overlapで得られる交点をかき集める // 一番近いものを取りそれに対応する辺を用意する // 辺の両端との距離が1e-10未満であればそのまま採用する // そうでない場合は時計回りですから // 大きい方を取る // 交点、大きい方、targetの最大点で三角形を作る // 三角形の内部にresultCycleの点がなければ大きい方を採用する // あればそのうちでatan2の絶対値が最小のものを採用する // atan2は最大点から交点に向かうやつとその点に向かうやつで取る // 採用した点がresultCycleの何番目か記録しておく // targetのindicesを用意する // resultCyclesを、採用点から採用点まで時計回りに進み、 // そこで最大点に行き、反時計回りにtargetのindicesを進み、最大点に戻る。 // そういうサイクルとしてnewCycleを作ってそれで置き換える // 次のループに進む。 const {xMaxIndex, xMaxValue} = target; const xMaxPoint = allVertices[target.indices[xMaxIndex]]; const horizon = xMaxPoint.y; // outerXMaxは先に計算しておく const outerPoint = createVector(outerXMax + 100, horizon); // (xMaxPoint, outerPoint)で線分 // これとresultCycleで線分交叉やって交わる辺を探す let crossPoints = []; for(let i=0; i { if(cp0.ratio < cp1.ratio) return -1; if(cp0.ratio > cp1.ratio) return 1; return 0; }); const cp = crossPoints[0]; // ratio最小 const left = allVertices[resultCycle[cp.index]]; const right = allVertices[resultCycle[(cp.index+1)%L1]]; let cutIndex; // leftに近ければleft,rightに近ければright. // どっちも違うならxMaxPoint, cp.p, rightで三角形を作り // 若干面倒な処理をする // rightか、または内部の点のうちxMaxPoint --> cp.pとの成す角が // 最小の点を取る if(cp.p.dist(left) < 1e-10){ cutIndex = cp.index; } else if(cp.p.dist(right) < 1e-10){ cutIndex = (cp.index+1)%resultCycle.length; } else { const candidate = []; for(let k=0; k { if(cd0.angle < cd1.angle) return -1; if(cd0.angle > cd1.angle) return 1; return 0; }); // 0番を取る cutIndex = candidate[0].index; } } // cutIndexが決まったので統合に入る const newCycle = [resultCycle[cutIndex]]; for(let k=1; k<=L1; k++){ newCycle.push(resultCycle[(cutIndex+k) % L1]); } const subCycle = []; //newCycle.push(target.indices[xMaxIndex]); subCycle.push(target.indices[xMaxIndex]); // parentsの数が深さで、これが奇数の場合逆にし、偶数の場合順方向。 const clockwiseAdding = ( target.parents.length % 2 === 1 ? false : true ); // 残りの点を追加 for(let k=1; k<=L0; k++){ if(clockwiseAdding){ //newCycle.push(target.indices[(xMaxIndex+k) % L0]); subCycle.push(target.indices[(xMaxIndex+k) % L0]); } else { //newCycle.push(target.indices[(xMaxIndex-k+L0) % L0]); subCycle.push(target.indices[(xMaxIndex-k+L0) % L0]); } } newCycle.push(...subCycle); resultCycle = newCycle; subCycle.pop(); // 重複排除 subCycleArray.push(subCycle); } // resultCyclesにresultCycleを放り込む resultCycles.push(resultCycle); subCycleArrays.push(subCycleArray); // 次のmountainへ進む... } // allVerticesとresultCyclesを // {vertices:allVertices, cycles:resultCycles} // として出力する return { vertices:allVertices, cycles:resultCycles, subCycleArrays:subCycleArrays }; // この形式のcycleであればearcutが適用でき、テッセレーションが可能。 } function getXMax(contour){ // x座標が最大となるindexを返すだけ。入力は閉路。何でもOK. let xMax = -Infinity; let xMaxIndex = -1; for(let i=0; ibとa-->cのなす角。2次元専用。 // a-->bをa-->cにする向きが正の時、正の値。 // 3次元には使えないのであしからず。 const cv = (b.x-a.x)*(c.y-a.y) - (b.y-a.y)*(c.x-a.x); const dv = (b.x-a.x)*(c.x-a.x) + (b.y-a.y)*(c.y-a.y); return Math.atan2(cv, dv); } function isClockwise(cycle){ // 時計回りの時trueを返す // ベクトルの角度の変化を全部足すだけ // 前提として3点以上...だがまあ問題ないだろ let angleSum = 0; if(cycle.length < 3) return true; for(let i=0; i 0) return true; return false; } function insideCycle(p, cycle){ // pがcycleの内部に含まれているときtrueを返す // cycleはベクトル列を想定 // cycleは単純閉曲線。向きはどっちでもOK // 角度を全部足してPI/2より大きければOK let angleSum = 0; for(let i=0; i 6) return true; return false; } // ---------------------------------------------------------------------------- // svg -> cycles // ここが洗練されてきたのは良い収穫 // まだまだ汚いけど... // data: svgのテキストデータ // bezierDetail2,3: QやCのベジエの補間数 // parseScale: パースする際のスケール. 単純に全体を何倍するか // lineSegmentLength: 直線(L)を分割する際の最小単位をどうするか // ここが洗練されてきたのは良い収穫 // まだまだ汚いけど... // data: svgのテキストデータ // bezierDetail2,3: QやCのベジエの補間数 // parseScale: パースする際のスケール. 単純に全体を何倍するか // lineSegmentLength: 直線(L)を分割する際の最小単位をどうするか function parseData(options = {}){ const {data="M 0 0", bezierDetail2 = 8, bezierDetail3 = 5, parseScale = 1, lineSegmentLength = 1} = options; const cmdData = data.split(" "); const result = []; let subData = []; for(let i=0; i0) result.push(subData.slice()); subData.length = 0; subData.push(createVector(Number(cmdData[i+1]), Number(cmdData[i+2])).mult(parseScale)); i+=2; break; case "L": const p = subData[subData.length-1]; const q = createVector(Number(cmdData[i+1]), Number(cmdData[i+2])).mult(parseScale); const lineLength = q.dist(p); for(let lengthSum=0; lengthSum= 1; i--){ const p = points[i]; const q = points[i-1]; if (p.dist(q) < threshold){ //console.log("merge"); points.splice(i,1); } } if (closed) { // 頭に戻る場合はそれも排除する if (points[0].dist(points[points.length-1]) < threshold) { points.pop(); } } } // closedはすべてに適用される function mergePointsAll(contours, options = {}){ for(let contour of contours) { mergePoints(contour, options); } } // 等間隔化にもclosed optionを導入したいな function evenlySpacing(points, options = {}){ const {minLength = 1, closed = false} = options; // minLengthより長い長さがある場合に、点を挿入する let newPoints = []; newPoints.push(points[0]); for(let i=1; i minLengthかどうか見るとか。<とか。 let localSum = 0; const result = [newPoints[0]]; const lastPoint = createVector(); lastPoint.set(result[0]); for(let i=1; i minLength) { // たとえば2.1と1の場合は3分割するが1.9と1の場合は2分割する const m = floor(distance/minLength) + 1; for(let k=1; k0?1:-1); } // 面の頂点と法線に対して // 法線側にあれば0,逆側にあれば1, // 閾値判定で面上とみなされれば2を返す関数 function pointOnThePlane(p, c, n, threshold = 1e-9){ // やることは簡単で、p-cとnで内積を取って符号を見るだけ。 const verticeValue=(p.x-c.x)*n.x+(p.y-c.y)*n.y+(p.z-c.z)*n.z; if(Math.abs(verticeValue)0?1:-1); } // 面で切断してポリゴンを細分する // もしかしたら線分でもできるかもしれないけどね // autoNormalのデフォルトをtrueにする。trueの場合、最後にcomputeNormalsを // 呼び出して法線計算する。 function subDivideGeometry(geom, params = {}){ const {vertices, faces, vertexNormals = [], vertexColors = [], uvs = [], edges = []} = geom; const {c = createVector(), n = createVector(1,0,0), autoNormal = true} = params; const vertexObjectArray = []; // 補間用フラグ // edgesのも必要かもしれないけどそれはまあいいかとりあえず // 法線は補間した後で正規化する。注意点はほぼ無い。 // 色の補間は難しいことを考えても仕方ないので単純にrgb補間でいいかと // uvも単純にlerpするだけ。それでいいですね。 const useVertexNormals = (vertexNormals.length > 0); const useVertexColors = (vertexColors.length > 0); const useUvs = (uvs.length > 0); const useEdges = (edges.length > 0); const dummyNormal = createVector(); // 必要ならvertexColorsなども反映されるようにする for(let i=0; i { // crossPointの生成過程をメソッド化 let crossPoint; let crossPointIsAlreadyCreated = false; for(const pair of v0.crossPair){ if(pair[0] === v1.index){ crossPoint = vertexObjectArray[pair[1]]; // 長さ2の配列 // targetIndex===0なら0,1の順、1なら逆。 crossPointIsAlreadyCreated = true; } } if(!crossPointIsAlreadyCreated){ const cp = getCrossPointWithPlaneFromTwoPoints(v0.p, v1.p, c, n); const cpIndex = vertexObjectArray.length; // vertexNormalの補間 const lerpedNormal = (useVertexNormals && !autoNormal ? p5.Vector.lerp(v0.vN, v1.vN, cp.ratio).normalize() : dummyNormal); // vertexColorの補間 const lerpedVC = (useVertexColors ? [ (1-cp.ratio)*v0.vC[0] + cp.ratio*v1.vC[0], (1-cp.ratio)*v0.vC[1] + cp.ratio*v1.vC[1], (1-cp.ratio)*v0.vC[2] + cp.ratio*v1.vC[2], (1-cp.ratio)*v0.vC[3] + cp.ratio*v1.vC[3] ] : []); // uvの補間 const lerpedUV = (useUvs ? [ (1-cp.ratio)*v0.vUv[0] + cp.ratio*v1.vUv[0], (1-cp.ratio)*v0.vUv[1] + cp.ratio*v1.vUv[1] ] : []); crossPoint = [ {p:cp.p.copy(), index:cpIndex, vN:lerpedNormal, vC:lerpedVC, vUv:lerpedUV}, {p:cp.p.copy(), index:cpIndex, vN:lerpedNormal, vC:lerpedVC, vUv:lerpedUV} ]; vertexObjectArray.push(crossPoint); v0.crossPair.push([v1.index, cpIndex]); v1.crossPair.push([v0.index, cpIndex]); if(useEdges){ for(const pairIndex of v0.edgePair){ if(pairIndex === v1.index){ // ごめんなさい配列で書いた方がいいですね // edgeArrays[0,1]とか？ですね。可読性は...犠牲になるけど。 if(targetIndex===0){ edgeArray0.push([v0, crossPoint[targetIndex]]); edgeArray1.push([v1, crossPoint[1-targetIndex]]); }else{ edgeArray1.push([v0, crossPoint[targetIndex]]); edgeArray0.push([v1, crossPoint[1-targetIndex]]); } } } } } return crossPoint; } // targetIndexは0か1です。[1,-1,0]ケースなら0, [-1,1,0]ケースなら1 const createSingleCrossPoint = (c, n, targetIndex, v0, v1, v2) => { // まずv0とv1の間に点を取る。取れます。で... // その前にcrossPairを見て、 // それぞれv1またはv0のindexが入ってないか調べる // 入ってないならvertexObjectArrayに新しくそれを作る感じ // 1と-1の両方に入ってるので心配ない // めんどうなのでサブルーチン化 const crossPoint = getCrossPointObject(targetIndex, v0, v1, c, n); const v3 = crossPoint[0]; const v4 = crossPoint[1]; // 1,-1,0ケースは[v0,v3,v2]と[v4,v1,v2]に分ける // -1,1,0ケースは[v1,v2,v3]と[v4,v2,v0]に分ける // ここの辺は重複しているので片方にだけ入れる if(targetIndex===0){ faceArray0.push([v0,v3,v2]); faceArray1.push([v4,v1,v2]); if(useEdges){ edgeArray0.push([v2,v3]); //edgeArray1.push([v4,v2]); } } else { faceArray0.push([v1,v2,v3]); faceArray1.push([v4,v2,v0]); if(useEdges){ edgeArray0.push([v3,v2]); //edgeArray1.push([v2,v4]); } } } // targetIndexは0か1です。[1,-1,1]ケースなら0, [-1,1,-1]ケースなら1 const createDoubleCrossPoints = (c, n, targetIndex, v0, v1, v2) => { // 2つ辺がある。場合によっては両方とも生成済みの可能性がありややこしい。 const crossPoint0 = getCrossPointObject(targetIndex, v0, v1, c, n); const v3 = crossPoint0[0]; const v4 = crossPoint0[1]; const crossPoint1 = getCrossPointObject(1-targetIndex, v1, v2, c, n); const v5 = crossPoint1[0]; const v6 = crossPoint1[1]; // あとは面倒な場合分けをするだけ。 if(targetIndex===0){ // 1,-1,1ケース // [0,3,2],[2,3,5] | [4,1,6] faceArray0.push([v0,v3,v2], [v2,v3,v5]); faceArray1.push([v4,v1,v6]); if(useEdges){ // どっちでもいいんだが、 // おそらくだけど三角形の辺の向きと逆にするとのちのち楽かもしれない edgeArray0.push([v5,v3]); //edgeArray1.push([v4,v6]); } } else { // -1,1,-1ケース // [1,5,3] | [4,6,2],[4,2,0] faceArray0.push([v1,v5,v3]); faceArray1.push([v4,v6,v2],[v4,v2,v0]); if(useEdges){ // どっちでもいいんだが、 // おそらくだけど三角形の辺の向きと逆にするとのちのち楽かもしれない edgeArray0.push([v3,v5]); //edgeArray1.push([v6,v4]); } } } for(let i=0; i0){ // 1 0 0はここ faceArray0.push([v0,v1,v2]); continue; } else if(sum<0){ // -1 0 0はここ faceArray1.push([v0,v1,v2]); continue; } else { // 0 0 0はここ faceArray0.push([v0,v1,v2]); //faceArray1.push([v0,v1,v2]); continue; } } else { // 1と-1が共存するケース // 並び替えで1,-1,0か-1,1,0か1,-1,1か-1,1,-1のケースに帰着させる // absSumは2か3で、それで分ける。 if(absSum===2){ // 0,1,-1 0,-1,1 1,0,-1 -1,0,1 1,-1,0 -1,1,0の6通り if(vv0===0&&vv1===1)createSingleCrossPoint(c,n,0,v1,v2,v0); if(vv0===0&&vv1===-1)createSingleCrossPoint(c,n,1,v1,v2,v0); if(vv1===0&&vv2===1)createSingleCrossPoint(c,n,0,v2,v0,v1); if(vv1===0&&vv2===-1)createSingleCrossPoint(c,n,1,v2,v0,v1); if(vv2===0&&vv0===1)createSingleCrossPoint(c,n,0,v0,v1,v2); if(vv2===0&&vv0===-1)createSingleCrossPoint(c,n,1,v0,v1,v2); }else{ // 1,1,-1 1,-1,1 -1,1,1 -1,-1,1 -1,1,-1 1,-1,-1の6通り if(vv0===1&&vv1===1)createDoubleCrossPoints(c,n,0,v1,v2,v0); if(vv1===1&&vv2===1)createDoubleCrossPoints(c,n,0,v2,v0,v1); if(vv2===1&&vv0===1)createDoubleCrossPoints(c,n,0,v0,v1,v2); if(vv0===-1&&vv1===-1)createDoubleCrossPoints(c,n,1,v1,v2,v0); if(vv1===-1&&vv2===-1)createDoubleCrossPoints(c,n,1,v2,v0,v1); if(vv2===-1&&vv0===-1)createDoubleCrossPoints(c,n,1,v0,v1,v2); } } } // 今回は細分が目的なので // vertexObjectArrayからそのまま出しちゃえばOK geom.vertices.length = 0; if(useVertexNormals && !autoNormal) geom.vertexNormals.length = 0; if(useVertexColors) geom.vertexColors.length = 0; if(useUvs) geom.uvs.length = 0; for(let i=0; i

#WEBGL