// Hyperspace Disco/宇宙のディスコ // 2023.1.12 // // 3 // Hyperspace travelling cube using glsl textures in p5js. Light and effect studies using GLSL textures. // // GLSL. Camera Control Off. S to save screen at window resolution. //credit: cube texture, Sierpinski carpet by LarsH found in the public domain on Stack Overflow //https://stackoverflow.com/questions/3972902/is-it-possible-to-perform-floating-point-operations-on-gpu-when-using-opengl/3973433#3973433 let hash; let backgroundColor let theShader let backgroundShader let x =0 let y =0 let v let pos let a let energyLoops = 200 let loopCount = 0 let maxLoops = 250 let minLoops = -500 let direction = 1 let brake let backgroundColor2 let backgroundShaderTexture let blob = false let blobProbability = 1 let blobPos let fsColor let DEBUG = false var canv let fileName let animation = true let vs = ` attribute vec3 aPosition; attribute vec2 aTexCoord; varying vec2 vTexCoord; void main() { vTexCoord = aTexCoord; vec4 positionVec4 = vec4(aPosition, 1.0); positionVec4.xy = positionVec4.xy * 2.0 - 1.0; gl_Position = positionVec4; } `; let fs = ` #ifdef GL_ES precision highp float; #endif uniform vec2 resolution; uniform float time; uniform sampler2D tex0; // Sierpinski carpet void main(void) { ivec2 sectors; vec2 coordOrig = gl_FragCoord.xy / resolution.xy; const int lim = 10; /* If you want it to spin, just to prove that it is redrawing the carpet every frame: */ vec2 center = vec2(0.5, 0.5); mat2 rotation = mat2( vec2( 1.,0), vec2(0,1.) ); vec2 coordRot = rotation * (coordOrig - center) + center; vec2 coordIter = coordRot; for (int i=0; i < lim; i++) { sectors = ivec2(floor(coordIter.xy * 3.0)); if (sectors.x == 1 && sectors.y == 1 || // rotation can put us out of bounds sectors.x < 0 || sectors.x > 2 || sectors.y < 0 || sectors.y > 2) { // make a hole gl_FragColor = vec4(max(texture2D(tex0, coordOrig).x, sin(time+coordIter.x)*.4),max(texture2D(tex0, coordOrig).y, sin(time+coordIter.y)*.3), max(texture2D(tex0, coordOrig).z, sin(time+coordIter.y)*.2), 1.0); return; } else { // map current sector to whole carpet coordIter.xy = coordIter.xy * 3.0 - vec2(sectors.xy); } } gl_FragColor = vec4(max(coordRot.x,0.4*sin(coordRot.x*coordRot.x)), 0.5, max(coordRot.y,sin(coordRot.y)*.4), 1.0); } `; let fs2Start = ` precision highp float; uniform float time; uniform vec2 resolution; void main( void ) { vec2 pos = ( gl_FragCoord.xy / resolution.xy ); float color = 0.0; color += sin(pos.x*sin(time/10.))+sin(pos.y*sin(time/2.)*3.0); color *= sin( time / 3.0 ); `; let fs2ColorLine = [] fs2ColorLine[0] = 'gl_FragColor = vec4( vec3( cos(color+time/2.), cos(color*8.5+3.), cos( color*8. + time / 2. )), 1.0 );' fs2ColorLine[1] = 'gl_FragColor = vec4( vec3( cos(color*8.+time/2.), sin(color*8.5+3.), cos( color*8. + time / 2. )), 1.0 );' let fs2Close = '}' let fs2 function preload() { } function setup() { WIDTH = windowWidth HEIGHT = windowHeight canv = createCanvas(windowWidth, windowHeight, WEBGL); shaderTexture = createGraphics(windowWidth, windowHeight, WEBGL); shaderTexture.noStroke(); // backgroundShaderTexture = createGraphics(windowWidth, windowHeight, WEBGL); // backgroundShaderTexture.noStroke(); theShader = shaderTexture.createShader(vs, fs); hash = randomHash(); fileName = "Hyperspace Disco_"+getSeed() console.log(getSeed()); backgroundColor = color(random() * 15>>0, random() * 10>>0, random() * 50>>0) backgroundColor2 = color(110+random() * 15>>0, 110+random() * 20>>0, 110+random() * 55>>0) pos = createVector(0,0,0) v = createVector(random(-3,3),random(-3,3),random(-3,3)) a = createVector(0,0,random(0.5,1)).mult(random([-1,1])) j = createVector(0,0,random(0.5,1)).mult(random([-1,1])) brake = random(.8,1.2) blobPos = createVector(0,0,0) blobPos.z = -WIDTH*3>>0 }; function draw() { if (animation){ shaderTexture.shader(theShader); // 乱数のシード値を固定（random()関数が返す値が一定になる（※続けて呼ぶ場合は異なる値として固定される）） randomSeed(getSeed()); background(backgroundColor); if (blob){ backgroundShaderTexture.shader(backgroundShader) backgroundShader.setUniform("resolution", [width, height]); backgroundShader.setUniform("time", millis() / 1000.0); backgroundShaderTexture.rect(0,0,width,height); texture(backgroundShaderTexture); noStroke() push() translate(blobPos.x>>0,blobPos.y>>0,blobPos.z>>0) plane(WIDTH*10,HEIGHT*10) pop() } shaderTexture.rect(0,0,width,height); theShader.setUniform("resolution", [width, height]); theShader.setUniform("time", millis() / 1000.0); const s = min(width, height) / 2; x += random(-.01,.01); y += random(-.01,.01); x = x%(2*PI) y = y%(2*PI) if (loopCount-200){ box(s,s,s/2>>0,50,50) push() translate(0,0,s/2>>0) rotateZ(x*8.+v.x*10.) box(s,s,s/2>>0,50,50) pop() } else if (direction==1||loopCount<-200&&Math.abs(x*8+v.x*10)>0,50,50) push() translate(0,0,s/2>>0) box(s,s,s/2>>0,50,50) pop() } else if (direction==-1&&loopCount<-200&&Math.abs(x*8+v.x*10)>PI/100.){ box(s,s,s/2>>0,50,50) push() translate(0,0,s/2>>0) rotateZ(x*8.+v.x*10.) box(s,s,s/2>>0,50,50) pop() }else { box(s,s,s/2>>0,50,50) push() translate(0,0,s/2>>0) rotateZ(x*8.+v.x*10.) box(s,s,s/2>>0,50,50) pop() } pop() if (direction==1){ pos.add(v) v.add(a) a.add(j) } else { pos.add(v.mult(brake*lerp(1,.01,(maxLoops-loopCount)/maxLoops))) if (p5.Vector.mag(a)>2) a = createVector(0,0,random(-1,1)) if (p5.Vector.mag(j)>2) j = createVector(0,0,random(-1,1)) } } if (pos.x <= -WIDTH/2) v.x = Math.abs(v.x) if (pos.y <= -WIDTH/2) v.y = Math.abs(v.y) if (pos.z <= -100) v.z = Math.abs(v.z) if (pos.x >= WIDTH/2) v.x = -Math.abs(v.x) if (pos.y >= WIDTH/2) v.y = -Math.abs(v.y) if (pos.z >= 100) v.z = -Math.abs(v.z) loopCount+=direction if (loopCount>=energyLoops) { push() translate(pos.x,pos.y,pos.z) rotateY(PI/2) noStroke(); background(backgroundColor2) ambientLight(0); emissiveMaterial(lerp(20,maxLoops,loopCount/maxLoops), lerp(70,maxLoops,loopCount/maxLoops), lerp(100,maxLoops,loopCount/maxLoops)); sphere(1000) emissiveMaterial(lerp(0,maxLoops,loopCount/maxLoops), lerp(200,maxLoops,loopCount/maxLoops), lerp(200,maxLoops,loopCount/maxLoops)); sphere(2000) emissiveMaterial(lerp(200,maxLoops,loopCount/maxLoops), lerp(200,maxLoops,loopCount/maxLoops), lerp(0,maxLoops,loopCount/maxLoops)); torus(2500) pop() if(loopCount>maxLoops) {direction = -1 if (Math.abs(x)<3) x=random(1,1.5)*random([-3,3]) background(backgroundColor) if (blob==false&&random()>0 if (backgroundShader==null&&backgroundShaderTexture==null){ DEBUG&&console.log("W, H: " + WIDTH + "/" + HEIGHT) DEBUG&&console.log("POS Blob: " + blobPos) fsColor = random(2)>>0 DEBUG&&console.log("fsColor: " + fsColor) fs2 = fs2Start+fs2ColorLine[fsColor] + fs2Close backgroundShaderTexture = createGraphics(windowWidth, windowHeight, WEBGL); backgroundShaderTexture.noStroke(); backgroundShader = backgroundShaderTexture.createShader(vs, fs2) } } } if (blob&&direction==1) {blob = false } } if(loopCountWIDTH*1.8||Math.abs(pos.y)>HEIGHT*1.8||pos.z>150||pos.z<-1000)) { pos.x = random(-WIDTH/20>>0,WIDTH/20>>0); pos.y = random(-HEIGHT/20>>0,HEIGHT/20>>0); pos.z = random(-WIDTH/30>>0, WIDTH/30>>0); } } }; function windowResized() { if(animation) resizeCanvas(windowWidth, windowHeight); } function keyPressed(){ if (key=='s') {canv.get().save(fileName, "png"); noLoop() } } // ハッシュ値を返す function randomHash() { let result = '0x'; for (var i = 0; i < 64; i++) { result += Math.floor(Math.random() * 16).toString(16); } return result; } // ハッシュ値を数値として返す function getSeed() { return parseInt(hash.slice(0, 16), 16); }

Techno Hyperspace Engine / テクノハイパースペースエンジン