diff --git a/src/even_tide/scenes/cloud/cloud.frag b/src/even_tide/scenes/cloud/cloud.frag index 2b0c318..7bcfb57 100644 --- a/src/even_tide/scenes/cloud/cloud.frag +++ b/src/even_tide/scenes/cloud/cloud.frag @@ -8,6 +8,7 @@ uniform float iTime; uniform float amp; uniform float speed; uniform float rot; +uniform float zoom; float random (in vec2 st) { return fract(sin(dot(st.xy, @@ -61,7 +62,7 @@ void main() { vec2 st = gl_FragCoord.xy/iResolution.xy; st.x *= iResolution.x/iResolution.y; - st *= 5.; + st *= zoom; // float t = iTime * 10.0; float t = iTime * speed; diff --git a/src/even_tide/scenes/cloud/cloud.js b/src/even_tide/scenes/cloud/cloud.js index 3df228d..3b3df8f 100644 --- a/src/even_tide/scenes/cloud/cloud.js +++ b/src/even_tide/scenes/cloud/cloud.js @@ -11,6 +11,7 @@ const cloud = function(sketch) { let cloud; let fft; let input; + let zoom = 0.5; let ww; let hh; @@ -44,7 +45,7 @@ const cloud = function(sketch) { pg.shader(cloud); - fft = new p5.FFT(0.8, 256); + fft = new p5.FFT(0.5, 256); fft.setInput(input); } @@ -55,14 +56,25 @@ const cloud = function(sketch) { let spectrum = fft.analyze(); let energy = fft.getEnergy(energyRange.low, energyRange.high); let amp = sketch.map(energy, energyRange.low, energyRange.high, 0.4, 0.7, true); - let speed = sketch.map(energy, energyRange.low, energyRange.high, 8, 8.2, true); - let rotation = sketch.map(energy, energyRange.low, energyRange.high, 0.4, 0.85, true); + let speed = sketch.map(energy, energyRange.low, energyRange.high, 8, 8, true); + let rotation = sketch.map(energy, energyRange.low, energyRange.high, 0.4, 0.50, true); + + if(sketch.keyIsDown(sketch.RIGHT_ARROW)) { + if(zoom < 2.5) { + zoom += 0.01; + } + } if(sketch.keyIsDown(sketch.LEFT_ARROW)) { + if(zoom > 0.5) { + zoom -= 0.01; + } + } cloud.setUniform("iResolution", [sketch.width, sketch.height]); //pass some values to the shader cloud.setUniform("iTime", sketch.millis() * 0.001); cloud.setUniform("amp", amp); - cloud.setUniform("speed", speed); + cloud.setUniform("speed", 12.0); cloud.setUniform("rot", rotation); + cloud.setUniform("zoom", zoom); // sketch.text('PIZDA'); @@ -77,15 +89,47 @@ const cloud = function(sketch) { let highMid = fft.getEnergy("highMid"); let treble = fft.getEnergy("treble"); - let colorBass = sketch.map(bass, 20, 255, 0, 255); - let colorLowMid = sketch.map(lowMid, 20, 255, 0, 255); - let colorMid = sketch.map(mid, 20, 255, 0, 255); - let colorHighMid = sketch.map(highMid, 20, 255, 0, 255); - let colorTreble = sketch.map(treble, 20, 255, 0, 255); + let colorBass = sketch.map(bass, 20, 255, 5, 200); + let colorLowMid = sketch.map(lowMid, 20, 255, 5, 200); + let colorMid = sketch.map(mid, 20, 255, 5, 200); + let colorHighMid = sketch.map(highMid, 20, 255, 5, 200); + let colorTreble = sketch.map(treble, 20, 255, 5, 200); sketch.textSize(24); - sketch.text(even_tide_text, textLeft, textTop); sketch.fill(255, 255, 255, colorBass); + sketch.text(even_tide_text, textLeft, textTop); + + sketch.textSize(24); + sketch.fill(255, 255, 255, colorLowMid); + sketch.text(` + | bass | low_mid | mid | high_mid | treble | + |----------|----------|----------|----------|----------| + | ${fixedPoint(bass)} | ${fixedPoint(lowMid)} | ${fixedPoint(mid)} | ${fixedPoint(highMid)} | ${fixedPoint(treble)} | + `, textLeft, textTop + 230); + + sketch.textSize(24); + sketch.fill(255, 255, 255, colorMid); + sketch.text(` + 0x00 0x00 0x00 0x00 0x00 0x54 0x73 0x65 0x74 0x73 0x65 0x6e + + 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x4e 0x78 + + 0x00 0x42 0x6f 0x6f 0x67 0x69 0x65 0x6c 0x65 0x76 0x65 0x6e + + 0x41 0x6d 0x61 0x72 0x74 0x75 0x76 0x73 0x63 0x68 0x69 0x6e + + 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x56 0x6f 0x6e 0x71 0x6f + `, textLeft, textTop + 370); + } + + function fixedPoint(a) { + let tmp = a.toFixed(2); + tmp = String(tmp); + for(let i = tmp.length; i < 8; i ++) { + tmp = "0" + tmp; + } + + return tmp; } // ============================================================== //