// Interstellar Triplet/インターステラーの三つ子 // 2023.1.1７ // // 5 // Three Hyperspace travelling cubes using glsl textures in p5js. Light and effect studies using GLSL textures. // // GLSL. Camera Control Off. S to save screen at window resolution. Infinite hyperspace jumps, reset for new view. let hash,backgroundColor,theShader,s,v,pos,a,brake,backgroundColor2,blobPos,fsColor,backgroundShader=[],x=0,y=0,z=0,energyLoops=200,loopCount=0,maxLoops=250,minLoops=-500,direction=1,backgroundShaderTexture=[],blob=!1,blobProbability=1,DEBUG=!1,DEBUG2=!1;var canv;let textScreen,fileName,c_cube,planeZ,orthoZ,fov,cameraZ,uPosition,animation=!0,c_cubes=[],currentUniverse=0,universeCounter=0,maxSecondaries=3,minSpeed=1,fs2=[],uniPlanes=[],vs="\n\n attribute vec3 aPosition;\n\n attribute vec2 aTexCoord;\n\n varying vec2 vTexCoord;\n\n void main() {\n\n\n vTexCoord = aTexCoord;\n\n vec4 positionVec4 = vec4(aPosition, 1.0);\n positionVec4.xy = positionVec4.xy * 2.0 - 1.0;\n\n gl_Position = positionVec4;\n }\n\n",fs="\n#ifdef GL_ES\nprecision mediump float;\n#endif\n#extension GL_OES_standard_derivatives : enable\n\nuniform float time;\nuniform vec2 resolution;\n\nvoid main( void ) {\n\n\tvec2 texcoord = ( gl_FragCoord.xy / resolution.xy );\n vec3 color = vec3(clamp(cos(time),.7,1.), sin(time + 5.0), tan(clamp(time + 4.0,0.0,radians(180.)/4.01)));\n\n gl_FragColor = vec4(color * (texcoord.y + texcoord.x)*.5, 1.0);\n}\n\n",fs2Start="\n\n\nprecision mediump float;\nuniform float time;\nuniform vec2 resolution;\n\nvec2 translate(vec2 pos, vec2 translate) {\n\treturn pos + vec2(-translate.x, -translate.y);\n}\n\nmat2 rotate2d(float angle){\n\treturn mat2(cos(angle), -sin(angle), sin(angle), cos(angle));\n}\n\n\n\nvoid main(void){\n\n",fs2TranslateLine=[],fs2main="\n\n highp vec2 size = vec2(resolution.x, resolution.y);\n vec2 uv = (2.0 * gl_FragCoord.xy - size) / size.x;\n\tvec2 p = (gl_FragCoord.xy * 2.1 - resolution) / min(resolution.x, resolution.y);\n\n\tuv = translate(p, vec2(pos.x,pos.y));\n\tuv *= rotate2d(0.5*time);\n\tp = translate(p, vec2(pos.x,pos.y));\n\tp *= rotate2d(time/100.);\n\n",fs2ColorLine=[];fs2ColorLine[0]="\n float t = .15 / abs(0.5*(sin(p.x)+cos(1.8*p.x))-length(p));\n vec3 color = vec3(clamp(p.x,0.94,1.),clamp(sin(p.y*time),.55,.65),clamp(abs(sin(time)),0.,.07)) ;\n gl_FragColor = vec4(vec3(t) * color,1.0);\n",fs2ColorLine[1]="\nvec2 rPos = ( gl_FragCoord.xy / resolution.xy );\n\nfloat color = sin(rPos.x*sin(time/10.))+sin(rPos.y*sin(time/2.)*3.0);\ncolor *= sin( time / 3.0 );\ngl_FragColor = vec4( vec3( clamp(cos(color*3.+time/2.),0.8,1.0), clamp(sin(color*8.5+3.),0.1,0.2), cos( color*8. + time / 2. )), 1.0 );\n\n",fs2ColorLine[2]="\n float t = .7 / abs(0.5*(sin(p.x)+cos(p.x))-length(p));\n vec3 color = vec3(clamp(sin(p.y*time),0.18,.25),clamp(sin(p.y*time),.2,.4),clamp(abs(sin(time)),0.8,1.)) ;\n gl_FragColor = vec4(vec3(t) * color,1.0);\n",fs2ColorLine[3]="\nvec2 rPos = ( gl_FragCoord.xy / resolution.xy );\n\nfloat color = sin(rPos.x*sin(time/10.))+sin(rPos.y*sin(time/2.)*3.0);\ncolor *= sin( time / 3.0 );\ngl_FragColor = vec4( vec3( tan(clamp(color,0.0,radians(180.)/4.01)), clamp(sin(color*8.5+3.),0.0,0.1), clamp(sin( color*8. + time / 5. ), .2, .3)), 1.0 );\n",fs2ColorLine[4]="\n float t = .15 / abs(0.5*(tan(clamp(p.x,0.0,radians(180.)/4.01))+tan(clamp(p.y,0.0,radians(180.)/4.01)))-length(p));\n vec3 color = vec3(clamp(p.x,0.97,1.),clamp(sin(p.y*time),.89,.95),clamp(abs(sin(time)),.9,.99)) ;\n gl_FragColor = vec4(vec3(t) * color,1.0);\n";let fs2Close="}";function normalizeRadians(t){return(t%(2*Math.PI)+2*Math.PI)%(2*Math.PI)}function preload(){}function setup(){let t,e;WIDTH=max(windowWidth,800),HEIGHT=max(windowHeight,800),planeZ=max(-150,-WIDTH/80),orthoZ=planeZ-10,cameraZ=min(500,WIDTH/2),s=min([WIDTH,HEIGHT,cameraZ-planeZ>>0])/2,canv=createCanvas(WIDTH,HEIGHT,WEBGL),DEBUG2&&(textScreen=createGraphics(WIDTH,HEIGHT)),shaderTexture=createGraphics(s/2>>0,s/2>>0,WEBGL),shaderTexture.noStroke(),theShader=shaderTexture.createShader(vs,fs),hash=randomHash(),fileName="Interstellar_"+getSeed(),console.log(getSeed()),backgroundColor=color(15*random()>>0,10*random()>>0,40*random()>>0),backgroundColor2=color(110+15*random()>>0,110+20*random()>>0,110+55*random()>>0),pos=createVector(0,0,0),v=createVector(random(-10,10),random(-10,10),random(-10,10)),a=createVector(0,0,random(.5,1)).mult(random([-1,1])),j=createVector(0,0,random(.5,1)).mult(random([-1,1])),brake=random(.8,1.2),blobPos=createVector(0,0,0),blobPos.z=3*-WIDTH>>0;let o,i,r,n,h,c,l,d,p=min([WIDTH,HEIGHT,cameraZ-planeZ>>0])/5,m=random(.8,1.2),u=shaderTexture,x=shaderTexture,b=backgroundColor,H=theShader,T=theShader,g=color("#401240"),I=2*p,C=color("#131050"),f=3*p,y=color("#882088"),D=5*p;for(let s=0;s>0,t=createVector(random(-WIDTH,WIDTH)>>0,random(-HEIGHT,HEIGHT)>>0,random(-WIDTH/2*s,-WIDTH*s)>>0),o=createVector(random(-10,10),random(-10,10),random(-10,10)),i=createVector(random(.5,1),random(.5,1),random(.5,1)).mult(random([-1,1])),r=createVector(random(.5,1),random(.5,1),random(.5,1)).mult(random([-1,1])),n=createVector(random(-.01,.01),random(-.01,.01),random(-.01,.01)),e=t.copy(),c_cubes[s]=new C_Cube_1(t,e,p,o,i,r,m,u,x,b,H,T,n,h,-500,250,200,g,I,C,f,y,D,255,c,true,s);fs2TranslateLine[0]="vec2 pos = vec2(0.,0.);",fs2TranslateLine[1]="vec2 pos = vec2("+random(.2,.8)+","+random(.2,.8)+");",fs2TranslateLine[2]="vec2 pos = vec2("+random(.2,.8)+","+random(.2,.8)+");",fs2TranslateLine[3]="vec2 pos = vec2("+random(.2,.8)+","+random(.2,.8)+");",fs2TranslateLine[4]="vec2 pos = vec2("+random(.2,.8)+","+random(.2,.8)+");",uPosition=createVector(0,0,planeZ);for(let t=1;t<5;t++)l=random(fs2ColorLine.length)>>0,d=random(fs2TranslateLine.length)>>0,fs2[t]=fs2Start+fs2TranslateLine[d]+fs2main+fs2ColorLine[l]+fs2Close,backgroundShaderTexture[t]=createGraphics(WIDTH,HEIGHT,WEBGL),backgroundShaderTexture[t].noStroke(),DEBUG2&&console.log("FS2 String: "+fs2[t]),backgroundShader[t]=backgroundShaderTexture[t].createShader(vs,fs2[t]),uniPlanes[t]=new UniPlane(uPosition,backgroundShaderTexture[t],backgroundShader[t],WIDTH,HEIGHT,t);camera(0,0,cameraZ,0,0,0),randomSeed(getSeed())}function draw(){if(animation){background(backgroundColor),c_cubes[0].universe>0&&uniPlanes[c_cubes[0].universe].draw(p5);for(let t=0;t>0,s/2>>0);for(let t=0;t>0])/5,c_cubes[t].texture1.resizeCanvas(c_cubes[t].s/2,c_cubes[t].s/2),c_cubes[t].texture2.resizeCanvas(c_cubes[t].s/2,c_cubes[t].s/2),c_cubes[t].sphere1=2*c_cubes[t].s,c_cubes[t].sphere2=3*c_cubes[t].s,c_cubes[t].taurus3=5*c_cubes[t].s;for(let t=1;t<5;t++)backgroundShaderTexture[t].resizeCanvas(WIDTH,HEIGHT),uniPlanes[t].width=WIDTH,uniPlanes[t].height=HEIGHT,uniPlanes[t].pos.z=uPosition.z,uniPlanes[t].rescaledWidth=WIDTH*max(abs(uniPlanes[t].pos.z/cameraZ),1),uniPlanes[t].rescaledHeight=HEIGHT*max(abs(uniPlanes[t].pos.z/cameraZ),1);camera(0,0,cameraZ,0,0,0)}}function keyPressed(){"s"==key&&(canv.get().save(fileName,"png"),noLoop())}class C_Cube_1{constructor(t,e,s,o,i,r,n,a,h,c,l,d,p,m,u,x,v,b,H,T,g,I,C,f,y,D,S){this.loopCount=m,this.universe=0,this.direction=1,this.pos=t,this.center=e,this.s=s,this.v=o,this.a=i,this.j=r,this.brake=n,this.texture1=a,this.texture2=h,this.shader1=l,this.shader2=d,this.rotationV=p,this.maxLoops=x,this.minLoops=u,this.energyLoops=v,this.colorStart1=b,this.sphere1=H,this.colorStart2=T,this.sphere2=g,this.colorStart3=I,this.taurus3=C,this.hColor=f,this.backgroundColor=c,this.type=y,this.index=S,this.universeCounter=0,this.lastUpdate=0,this.collision=[!1,null],this.debugText=[],this.smoothMode=D}getTrueCenter(){return p5.Vector.add(this.pos,createVector(this.s/2>>0,this.s/2>>0,this.s/2>>0))}getCollVector(t){let e=p5.Vector.sub(c_cubes[t].getTrueCenter(),this.getTrueCenter());DEBUG&&console.log("Get DifV: "+e);let s=e.normalize().mult(-1);return DEBUG&&console.log("Normalized V: "+s),s}checkCollision(t){for(let e=0;e.5?e[t]=1:e[t]=-1;if(this.rotationV.x+=abs(.01*sin(this.loopCount+loopCount*(1+this.index)))*e[0],this.rotationV.y+=abs(.01*cos(this.loopCount+loopCount*(1+this.index)))*e[1],this.rotationV.x=this.rotationV.x%(8*PI),this.rotationV.y=this.rotationV.y%(8*PI),-1==this.direction?"main"==this.type?(this.center.x<=-WIDTH/3&&(this.v.x=Math.abs(this.v.x)),this.center.y<=-WIDTH/3&&(this.v.y=Math.abs(this.v.y)),this.center.z<=.05*cameraZ&&(this.v.z=Math.abs(this.v.z)),this.center.x>=WIDTH/3&&(this.v.x=-Math.abs(this.v.x)),this.center.y>=WIDTH/3&&(this.v.y=-Math.abs(this.v.y)),this.center.z>=.9*cameraZ&&(this.v.z=-Math.abs(this.v.z))):(this.center.x<=-WIDTH/3&&(this.v.x=Math.abs(this.v.x)),this.center.y<=-WIDTH/3&&(this.v.y=Math.abs(this.v.y)),this.center.z<=.8*planeZ&&(this.v.z=Math.abs(this.v.z)),this.center.x>=WIDTH/3&&(this.v.x=-Math.abs(this.v.x)),this.center.y>=WIDTH/3&&(this.v.y=-Math.abs(this.v.y)),this.center.z>=.9*cameraZ&&(this.v.z=-Math.abs(this.v.z))):"main"==this.type?(this.pos.x<=-WIDTH&&(this.v.x=Math.abs(this.v.x)),this.pos.y<=-WIDTH&&(this.v.y=Math.abs(this.v.y)),this.pos.z<=.8*planeZ&&(this.v.z=max(Math.abs(this.v.z),4)),this.pos.x>=WIDTH&&(this.v.x=-Math.abs(this.v.x)),this.pos.y>=WIDTH&&(this.v.y=-Math.abs(this.v.y)),this.pos.z>=.9*cameraZ&&(this.v.z=-Math.abs(this.v.z))):(this.pos.x<=this.center.x-WIDTH/5&&(this.v.x=Math.abs(this.v.x)),this.pos.y<=this.center.y-WIDTH/5&&(this.v.y=Math.abs(this.v.y)),this.pos.z<=this.center.z+1.2*planeZ&&(this.v.z=Math.abs(this.v.z)),this.pos.x>=this.center.x+WIDTH/5&&(this.v.x=-Math.abs(this.v.x)),this.pos.y>=this.center.y+WIDTH/5&&(this.v.y=-Math.abs(this.v.y)),this.pos.z>=this.center.z+2*cameraZ&&(this.v.z=-Math.abs(this.v.z))),this.loopCount+=this.direction,this.loopCount3?this.pos.add(this.v.mult(this.brake*lerp(1,0,(this.maxLoops-this.loopCount)/this.maxLoops))):(this.v=createVector(minSpeed*random(-1,1),minSpeed*random(-1,1),minSpeed*random(-1,1)),this.pos.add(this.v)),p5.Vector.mag(this.a)>2&&(a=createVector(random(-1,1),random(-1,1),random(-1,1))),p5.Vector.mag(this.j)>2&&(j=createVector(random(-1,1),random(-1,1),random(-1,1)));if(this.loopCount>=this.energyLoops&&0!=this.universe&&1==this.direction&&(this.universe=0),this.loopCount>this.maxLoops&&(this.direction=-1,Math.abs(this.rotationV.x)<3&&(this.rotationV.x=random(1,1.5)*random([-3,3])),this.center.x=random(-WIDTH/2,WIDTH/2)>>0,this.center.y=random(-HEIGHT/2,HEIGHT/2)>>0,this.pos.x=this.center.x,this.pos.y=this.center.y,0==this.universe&&(this.universeCounter++,this.universeCounter=this.universeCounter%5,0==this.universeCounter&&this.universeCounter++,this.universe=this.universeCounter)),this.loopCountWIDTH||Math.abs(this.pos.y)>HEIGHT||this.pos.z>cameraZ/3||this.pos.z>0,WIDTH/5>>0),this.pos.y=random(-HEIGHT/5>>0,HEIGHT/5>>0),this.pos.z=random(.5*planeZ>>0,.75*cameraZ>>0),this.checkCollision(c_cubes);let t=0,e=10;for(;t>0,WIDTH/5>>0),this.pos.y=random(-HEIGHT/5>>0,HEIGHT/5>>0),this.pos.z=random(.5*planeZ>>0,.75*cameraZ>>0),this.checkCollision(c_cubes),t++}}else{-1==this.direction&&(Math.abs(this.pos.x-this.center.x)>WIDTH||Math.abs(this.pos.y-this.center.y)>HEIGHT||this.pos.z>cameraZ/2||this.pos.z>0,WIDTH/3>>0),this.pos.y=random(-HEIGHT/3>>0,HEIGHT/3>>0),this.pos.z=random(.5*planeZ>>0,.75*cameraZ>>0)),this.checkCollision(c_cubes);let t=0,e=10;for(;t>0,WIDTH/3>>0),this.pos.y=random(-HEIGHT/3>>0,HEIGHT/3>>0),this.pos.z=random(.5*planeZ>>0,.75*cameraZ>>0),this.checkCollision(c_cubes),t++}}draw(t,e){let s;if(this.loopCount>0,this.pos.y>>0,this.pos.z>>0),rotateX(this.rotationV.x),rotateY(this.rotationV.y),rotateZ(this.rotationV.z),noStroke(),-1==this.direction&&this.loopCount>-200?(box(this.s,this.s,this.s/2>>0),push(),translate(0,0,this.s/2>>0),rotateZ(8*this.rotationV.x+10*this.a.x),texture(this.texture2),rotateZ(.2*this.rotationV.x+5*this.a.x),box(this.s,this.s,this.s/2>>0),pop()):1==this.direction||this.loopCount<-200&&Math.abs(s)>0),push(),translate(0,0,this.s/2>>0),rotateZ(8*this.rotationV.x+10*this.a.x),texture(this.texture2),push(),rotateZ(.2*this.rotationV.x+5*this.a.x),box(this.s,this.s,this.s/2>>0),pop(),pop()),pop()),this.loopCount>=this.energyLoops&&(t==this.universe||t==this.universe-1)){let t=this.loopCount/this.maxLoops;push(),translate(this.pos.x>>0,this.pos.y>>0,this.pos.z>>0),rotateY(PI/2),noStroke(),"main"==this.type&&background(this.hColor),ambientLight(0),emissiveMaterial(lerp(red(this.colorStart1),this.maxLoops,t),lerp(green(this.colorStart1),this.maxLoops,t),lerp(blue(this.colorStart1),this.maxLoops,t)),sphere(this.sphere1),emissiveMaterial(lerp(red(this.colorStart2),this.maxLoops,t),lerp(green(this.colorStart2),this.maxLoops,t),lerp(blue(this.colorStart2),this.maxLoops,t)),sphere(this.sphere2),emissiveMaterial(lerp(red(this.colorStart3),maxLoops,t),lerp(green(this.colorStart3),maxLoops,t),lerp(blue(this.colorStart3),maxLoops,t)),torus(this.taurus3),pop(),this.loopCount==this.maxLoops&&("main"==this.type&&(backgroundColor=color(random(255)>>0,random(255)>>0,random(255)>>0),DEBUG2&&console.log("updated background index/type/color: "+this.index+"/"+this.type+" "+red(backgroundColor)+":"+green(backgroundColor)+":"+blue(backgroundColor)),background(backgroundColor),this.universe>0&&uniPlanes[this.universe].draw(e)),this.center=createVector(random(-WIDTH,WIDTH)>>0,random(-HEIGHT,HEIGHT)>>0,random(-12*this.index,-25*this.index)>>0),this.pos.x=random(this.center.x-WIDTH/20>>0,this.center.x+WIDTH/20>>0),this.pos.y=random(this.center.y-HEIGHT/20>>0,this.center.y+HEIGHT/20>>0),this.pos.z=random(this.center.z-WIDTH/30>>0,this.center.z+WIDTH/30>>0))}}}class UniPlane{constructor(t,e,s,o,i,r){this.pos=t,this.texture=e,this.shader=s,this.width=o,this.height=i,this.index=r,this.rescaledWidth=this.width*max(abs(this.pos.z/499),1),this.rescaledHeight=this.height*max(abs(this.pos.z/499),1)}draw(t){orbitControl(),this.texture.shader(this.shader),this.shader.setUniform("resolution",[this.width,this.height]),this.shader.setUniform("time",millis()/1e3),this.texture.rect(0,0,this.rescaledWidth,this.rescaledHeight),texture(this.texture),noStroke(),push(),translate(this.pos.x,this.pos.y,this.pos.z>>0),plane(this.rescaledWidth,this.rescaledHeight),pop()}}function randomHash(){let t="0x";for(var e=0;e<64;e++)t+=Math.floor(16*Math.random()).toString(16);return t}function getSeed(){return parseInt(hash.slice(0,16),16)}