// リメイク // https://openprocessing.org/sketch/1339465 // 1.9.0に持ってきました // matcap素材：https://wgld.org/d/webgl/w089.html // h_doxasさんのサイトからお借りしました（感謝します） let myShader; let bg; let bgCam; let patternIndex = 0; let properFrameCount = 1; const DURATION = 30; const ptn = [ {x:1,y:1}, {x:3,y:2}, {x:5,y:2}, {x:7,y:2}, {x:8,y:3}, {x:7,y:4}, {x:9,y:2}, {x:4,y:9} ]; let matcapTexture; let myTexture; function preload(){ matcapTexture = loadImage("https://inaridarkfox4231.github.io/assets/sphereMaps/matcap0.jpg"); } function setup() { createCanvas(640, 640, WEBGL); pixelDensity(1); createMyShader(); createPlaneGeometry(160, 20, "torusKnotSegments"); bg = createGraphics(width, height); bg.textStyle(ITALIC); noStroke(); push(); bgCam = createCamera(); bgCam.camera(0,0,1,0,0,0,0,1,0); bgCam.ortho(-width/2, width/2, -height/2, height/2, 0, 1); pop(); // OVERLAY彩色で加工して使用する myTexture = createGraphics(matcapTexture.width, matcapTexture.height); myTexture.image(matcapTexture, 0, 0); myTexture.blendMode(OVERLAY); myTexture.fill("gold"); myTexture.noStroke(); myTexture.rect(0, 0, myTexture.width, myTexture.height); } function draw() { orbitControl(1,1,1,{freeRotation:true}); clear(); resetShader(); bg.background(255); bg.fill(0); bg.textSize(20); bg.textAlign(LEFT, TOP); bg.text(frameRate().toFixed(3), 5, 5); bg.textSize(24); bg.textAlign(CENTER, CENTER); const f = properFrameCount % (DURATION*6); if(f > DURATION*2 && f < DURATION*3){ bg.text("torus knot (" + ptn[patternIndex].y + ", " + ptn[patternIndex].x + ")", width/2, height/8); } texture(bg); push(); setCamera(bgCam); resetMatrix(); plane(width, height); pop(); shader(myShader); const uRatio = getRatio(); const uParamRatio = getParamRatio(); if(properFrameCount % (DURATION*6) == 0){ setPatternIndex(); } const currentPattern = ptn[patternIndex]; const nextPattern = ptn[(patternIndex + 1) % ptn.length]; myShader.setUniform("uRatio", uRatio); myShader.setUniform("uParamRatio", uParamRatio); myShader.setUniform("uParam", [1.6, 0.4, currentPattern.x, currentPattern.y]); myShader.setUniform("uNextParam", [1.6, 0.4, nextPattern.x, nextPattern.y]); lights(); //fill("gold"); texture(myTexture); specularMaterial(96); rotateX(frameCount * 0.01); rotateZ(frameCount * 0.02); scale(90); this._renderer.drawBuffers("torusKnotSegments"); properFrameCount++; } // 中心は原点 // dmは断面方向のディテール // dnは長さ方向のディテール // 20枚の板の貼り合わせ。 function createPlaneGeometry(dn, dm, gId){ const geom = new p5.Geometry(); let theta, phi, x, y, z, r, id00, id01, id10, id11; let vertNum=0; for(let z=0;z<20;z++){ for(let i=0;i<=dn;i++){ phi = TAU*i/dn; for(let k=0;k<=dm;k++){ theta = TAU*k/dm; x = theta; y = phi; geom.vertices.push(createVector(x, y, z)); geom.vertexNormals.push(createVector(0,0,1)); vertNum++; } } } let polygonNum=0; let offset=0; for(let z=0;z<20;z++){ for(let i=0;i

torusKnotTorus