torusknot morphing

const patternData = [

  {p:2,q:1}, {p:2,q:3}, {p:2,q:5}, {p:2,q:7},

  {p:3,q:8}, {p:4,q:7}, {p:2,q:9}, {p:9,q:4}

];

const morphTypeIds = [0,1];

const patternIds = [0,0];

let eventIndex = 0;

let easeType = "easeInOutCirc";

const MyEasing = new p5wgex.Easing();

let pfc;

let infoText = "";

​

const MORPH_DURATION = 4500;

​

// 0～1

// 1～0に切り替え

// 1～0

// ptnIds[1]を1つ増やす(mod8)

// 0～0に切り替え

// 0～0

// ptnIds[0]を1つ増やす(mod8)

// 0～1に切り替え

​

let matcap0;

​

function preload(){

  matcap0 = loadImage(`https://inaridarkfox4231.github.io/assets/sphereMaps/matcap${0}.jpg`);

}

​

let _node;

const _timer = new p5wgex.Timer();

​

function setup() {

  createCanvas(window.innerWidth*0.95, window.innerHeight*0.95, WEBGL);

  pixelDensity(2);

​

  _node = new p5wgex.RenderNode(this._renderer.GL);

​

  const objectIndices = new Array(20);

  for(let k=0; k<20; k++){ objectIndices[k]=k; }

​

  const mu = p5wgex.meshUtil;

  const tube = createModifiableTube({

    tubeDetail:200, bandDetail:16

  });

  mu.regist(_node, tube, "tubes", {otherAttrs:[

    {size:1, name:"aIndex", data:objectIndices, divisor:1}

  ]});

​

  const cam = new p5wgex.PerspectiveCamera({

    w:width, h:height, eye:[4,0,2], top:[0,0,1] // sets initial view

  });

  const CC = new p5wgex.CameraController(this.canvas, {dblclick:true});

  CC.setParam({rotationMode:"free"});

  CC.registCamera("cam", cam);

​

  LS = new p5wgex.StandardLightingSystem(_node);

​

  LS.initialize();

  LS.addAttr("float", "aIndex");

  LS.addUniform("float", "uRatio", "vs");

  LS.addUniform("ivec2", "uMorphTypeId", "vs");

  LS.addUniform("vec2", "uPrevPattern", "vs");

  LS.addUniform("vec2", "uNextPattern", "vs");

  LS.addStruct("axisSystem", {

    n:"vec3", b:"vec3", t:"vec3"

  }, "vs");

  LS.addStruct("geometry", {

    p:"vec3", n:"vec3"

  }, "vs");

  LS.addConstant("float", "PI", 3.14159, "vs");

  LS.addConstant("float", "TAU", 6.28318, "vs");

  LS.addCode(`

    vec3 torusKnot(in float t, in vec4 data){

      // tは0～1. 1.0, 0.4, p, q. ディテールは4000でいこうね

      return vec3(

        (data.x + data.y*cos(t*TAU*data.w)) * cos(t*TAU*data.z),

        (data.x + data.y*cos(t*TAU*data.w)) * sin(t*TAU*data.z),

        data.y * sin(t*TAU*data.w)

      );

    }

    void setAxisSystem(inout axisSystem sys, in float t, in vec2 ptn){

      vec3 v = torusKnot(t, vec4(1.0, 0.4, ptn));

      vec3 vPrev = torusKnot(t-1.0/4000.0, vec4(1.0, 0.4, ptn));

      vec3 vNext = torusKnot(t+1.0/4000.0, vec4(1.0, 0.4, ptn));

      vec3 tang = normalize(vNext-v);

      vec3 preTang = normalize(v-vPrev);

      vec3 nVec = normalize(tang - preTang);

      sys.t = tang;

      sys.n = nVec;

      sys.b = cross(sys.t, sys.n);

    }

    geometry getTorusKnotGeometry(in geometry g, in float index, in vec2 ptn){

​

      float t = (index + g.p.z)*0.05;

      axisSystem sys;

      setAxisSystem(sys, t, ptn);

      vec3 center = torusKnot(t, vec4(1.0, 0.4, ptn));

​

      geometry geom;

      geom.n = g.n.x * sys.n + g.n.y * sys.b + g.n.z * sys.t;

      geom.p = center + 0.1 * geom.n;

      return geom;

    }

    geometry getRingGeometry(in geometry g, in float index, in vec2 ptn){

      vec3 torusCenter = torusKnot(index*0.05 + 0.025, vec4(1.0, 0.4, ptn));

      float torusAngle = (g.p.z-0.5)*3.14159*2.0;

      float torusRadius = 0.02;

      axisSystem sys;

      setAxisSystem(sys, index*0.05 + 0.025, ptn);

​

      vec3 centerNormal = g.n.x * sys.n + g.n.y * sys.b;

​

      geometry geom;

      geom.n = cos(torusAngle)*centerNormal + sin(torusAngle)*sys.t;

      geom.p = torusCenter + 0.1*centerNormal + torusRadius * geom.n;

      return geom;

    }

    // 0か1

    geometry getGeometry(in geometry g, in float index, in vec2 ptn, in int id){

      if(id==1) return getTorusKnotGeometry(g, index, ptn);

      return getRingGeometry(g, index, ptn);

    }

  `, "routines", "vs");

  LS.addCode(`

    geometry g;

    g.p = position;

    g.n = normal;

    // aIndexとposition.zでフェッチ

​

    // トーラスノットケース

    geometry geom0 = getGeometry(g, aIndex, uPrevPattern,  uMorphTypeId.x);

​

    // リングケース

    // 真ん中を取ってそこでの値を元にしてトーラス上の場所を決める 

    geometry geom1 = getGeometry(g, aIndex, uNextPattern, uMorphTypeId.y);

​

    // 補間

    position = mix(geom0.p, geom1.p, uRatio);

    normal = normalize(mix(geom0.n, geom1.n, uRatio));

​

  `, "preProcess", "vs");

  LS.addUniform("sampler2D", "uMatcap", "fs");

  LS.addCode(`

    if(uMaterialFlag == 1){

      // matcapに使うのはvViewNormalです。

      vec3 n = vViewNormal*0.99;

      vec2 suv = 0.5*n.xy + 0.5;

      color = texture(uMatcap, suv);

    }

  `, "preProcess", "fs");

  LS.registPainter("tubes");

​

  LS.setController(CC);

​

  // matcapそのまま使うよりは加工した方がいいよねって話

  _node.registTexture("matcap", {src:matcap0});

  _node.registFBO("matcapGold", {w:matcap0.width, h:matcap0.height});

  _node.pushFBO();

  _node.bindFBO("matcapGold");

  _node.renderMixTexture({

    type:"color", target:"skyblue"

  },{

    type:"tex", target:"matcap"

  },{

    mix:"overlay"

  });

  _node.popFBO();

​

  _node.registTexture("info", (function(){

    const gr = createGraphics(width, height);

    gr.textSize(Math.min(width,height)/20);

    gr.textAlign(CENTER,CENTER);

    gr.textStyle(ITALIC);

    gr.noStroke();

    gr.fill(255);

    gr.translate(width*0.5, height*0.1);

    return gr;

  })());

​

  const execute = () => {

    switch(eventIndex){

      case 0:

        morphTypeIds[0] = 1;

        morphTypeIds[1] = 0;

        const _p = patternData[patternIds[0]].p;

        const _q = patternData[patternIds[0]].q;

        infoText = `type (${_p}, ${_q})`;

        break;

      case 1:

        morphTypeIds[0] = 0;

        patternIds[1] = (patternIds[1] + 1) % patternData.length;

        easeType = "easeInOutSine";

        break;

      case 2:

        morphTypeIds[1] = 1;

        patternIds[0] = (patternIds[0] + 1) % patternData.length;

        easeType = "easeInOutCirc";

        infoText = "";

        break;

    }

    eventIndex = (eventIndex + 1) % 3;

  }

​

  // completeFunctionは事前に設定します。durationをセットすると

  // そのミリ秒で間隔を置いて実行してくれます。わぁい。

  _timer.initialize("morph", {duration:MORPH_DURATION, completeFunction:execute});

  _timer.initialize("transform");

  //pfc = new p5wgex.PerformanceChecker(this.canvas); // To check performance

}

​

function draw() {

​

  _timer.check("morph"); // こんだけ。

  LS.update();

  _node.renderGradation({

    from:{x:0,y:0}, to:{x:1,y:1}, stops:[0,0.497,0.503,1],

    //colors:["black","navy","white","navy","black"]

    colors:["black","navy","navy","black"]

  });

  _node.updateTexture("info", (gr)=>{

    gr.clear();

    gr.text(infoText, 0, 0);

  });

  _node.renderTexture("tex", "info", {blend:"blend"});

​

  const ease = MyEasing.get(easeType);

  let ratio = _timer.getProgress("morph");

  ratio = ease(Math.min(Math.max(ratio*1.2-0.1,0),1));

​

  _node.use("tubes", "tubes");

  _node.setFBOtexture2D("uMatcap", "matcapGold");

  _node.setUniform("uRatio", ratio);

  _node.setUniform("uMorphTypeId", morphTypeIds);

  const ptn0 = patternData[patternIds[0]];

  const ptn1 = patternData[patternIds[1]];

  _node.setUniform("uPrevPattern", [ptn0.p, ptn0.q]);

  _node.setUniform("uNextPattern", [ptn1.p, ptn1.q]);

​

  LS.setFlag(1);

​

  LS.setLight({

    useSpecular:true

  });

  LS.setDirectionalLight({

    count:1,

    direction:[0,0,-1]

  });

​

  const t = _timer.getElapsed("transform");

  LS.setLightingUniforms({cameraBase:true});

  LS.setTransform([{rz:t*0.5}]).setMatrixUniforms();

​

  _node.bindIBO("tubesIBO");

  _node.drawElementsInstanced("triangles", {instanceCount:20});

  _node.unbind();

​

  _node.flush();

  //pfc.update(); // shows frames

}

​

// ------------------------------------------------

​

// modifiableTube

// 円柱なんだけど頭と底が半球

// ただし頂点のz成分はclampされている

// 法線はそのように設定する

// tubeDetail: 長さ方向。8なら頂点は縦に9つある。

// bandDetail: 周

// sphereDetail: 半球の部分。8なら頂点は最初からてっぺんまでで9つある。

​

// x成分に半径の情報をぶちこんで

// それ使って太さを表現できるようにした

​

// これ一個作っておくだけで相当汎用性高いと思うよ

// まあそうね...難しいわね

​

// capped:falseで通常の円柱

// capped:trueだとカプセル形状

​

function createModifiableTube(params = {}){

  const {

    r = 1, h = 1, tubeDetail = 100, bandDetail = 16, sphereDetail = 8

  } = params;

  // 見ての通りです。

  const d0 = tubeDetail;

  const d1 = bandDetail;

  const d2 = sphereDetail;

​

  let vNum = 0;

​

  // めんどうなのでcreateGeom作りました

  const g = p5wgex.createGeom();

​

  // h～0に降りていく

  for(let i=0; i<=tubeDetail; i++){

    const z = h*(tubeDetail-i)/tubeDetail;

    for(let k=0; k<bandDetail; k++){

      const angle = Math.PI*2*k/bandDetail;

      g.v.push(r,0,z);

      g.n.push(Math.cos(angle), Math.sin(angle), 0);

      vNum++;

    }

  }

  // 上から見ると？x右、y奥、z上。反時計回り。

  // なのでlu,ld,ru,rdとあった場合、[lu,ld,ru]の[ru,ld,rd]かな。

  // 0,1,2,...,d1-1

  // d1,d1+1,d1+2,...,2*d1-1

  // ...

  // d1*d0, d1*d0+1, d1*d0+2, ..., d1*(d0+1)-1.

  for(let i=0; i<tubeDetail; i++){

    const offset = i*bandDetail;

    for(let k=0; k<bandDetail; k++){

      const lu = offset + k;

      const ld = lu + bandDetail;

      const ru = (k < bandDetail - 1 ? offset+k+1 : offset);

      const rd = ru + bandDetail;

      g.f.push(lu, ld, ru, ru, ld, rd);

    }

  }

  return g;

}

​