diff --git a/public/LDR_LLL1_0.png b/public/LDR_LLL1_0.png new file mode 100644 index 0000000..d1920c6 Binary files /dev/null and b/public/LDR_LLL1_0.png differ diff --git a/public/fluid-init.js b/public/fluid-init.js new file mode 100644 index 0000000..cd4cd1b --- /dev/null +++ b/public/fluid-init.js @@ -0,0 +1,1229 @@ +/* +MIT License + +Copyright (c) 2017 Pavel Dobryakov + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +let mycanvas = document.getElementsByClassName('fluid-canvas')[0]; +resizeCanvas(); + +let config = { + SIM_RESOLUTION: 256, + DYE_RESOLUTION: 1024, + CAPTURE_RESOLUTION: 512, + DENSITY_DISSIPATION: 0, // 1 for gradual dissipation, 0 for no dissipation + VELOCITY_DISSIPATION: 0.2, + PRESSURE: 0.2, + PRESSURE_ITERATIONS: 20, + CURL: 10, + SPLAT_RADIUS: 0.25, + SPLAT_FORCE: 4000, + SHADING: false, + COLORFUL: true, + COLOR_UPDATE_SPEED: 30, + PAUSED: false, + BACK_COLOR: { r: 0, g: 0, b: 0 }, + TRANSPARENT: false, + BLOOM: false, + BLOOM_ITERATIONS: 8, + BLOOM_RESOLUTION: 256, + BLOOM_INTENSITY: 0.8, + BLOOM_THRESHOLD: 0.6, + BLOOM_SOFT_KNEE: 0.7, + SUNRAYS: false, + SUNRAYS_RESOLUTION: 196, + SUNRAYS_WEIGHT: 1.0, +}; + +function pointerPrototype() { + this.id = -1; + this.texcoordX = 0; + this.texcoordY = 0; + this.prevTexcoordX = 0; + this.prevTexcoordY = 0; + this.deltaX = 0; + this.deltaY = 0; + this.down = false; + this.moved = false; + this.color = [30, 0, 300]; +} + +let pointers = []; +let splatStack = []; +pointers.push(new pointerPrototype()); + +let ref = getWebGLContext(mycanvas); +let gl = ref.gl; +let ext = ref.ext; + +if (isMobile()) { + config.DYE_RESOLUTION = 512; +} +if (!ext.supportLinearFiltering) { + config.DYE_RESOLUTION = 512; + config.SHADING = false; + config.BLOOM = false; + config.SUNRAYS = false; +} + +function getWebGLContext(canvas) { + let params = { alpha: true, depth: false, stencil: false, antialias: false, preserveDrawingBuffer: false }; + + let gl = canvas.getContext('webgl2', params); + let isWebGL2 = !!gl; + if (!isWebGL2) { + gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params); + } + + let halfFloat; + let supportLinearFiltering; + if (isWebGL2) { + gl.getExtension('EXT_color_buffer_float'); + supportLinearFiltering = gl.getExtension('OES_texture_float_linear'); + } else { + halfFloat = gl.getExtension('OES_texture_half_float'); + supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear'); + } + + gl.clearColor(0.0, 0.0, 0.0, 1.0); + + let halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES; + let formatRGBA; + let formatRG; + let formatR; + + if (isWebGL2) { + formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType); + formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType); + formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType); + } else { + formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType); + formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType); + formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType); + } + + //ga('send', 'event', isWebGL2 ? 'webgl2' : 'webgl', formatRGBA == null ? 'not supported' : 'supported'); + + return { + gl: gl, + ext: { + formatRGBA: formatRGBA, + formatRG: formatRG, + formatR: formatR, + halfFloatTexType: halfFloatTexType, + supportLinearFiltering: supportLinearFiltering, + }, + }; +} + +function getSupportedFormat(gl, internalFormat, format, type) { + if (!supportRenderTextureFormat(gl, internalFormat, format, type)) { + switch (internalFormat) { + case gl.R16F: + return getSupportedFormat(gl, gl.RG16F, gl.RG, type); + case gl.RG16F: + return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type); + default: + return null; + } + } + + return { + internalFormat: internalFormat, + format: format, + }; +} + +function supportRenderTextureFormat(gl, internalFormat, format, type) { + let texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null); + + let fbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); + + let status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); + return status == gl.FRAMEBUFFER_COMPLETE; +} + +function isMobile() { + return /Mobi|Android/i.test(navigator.userAgent); +} + +function captureScreenshot() { + let res = getResolution(config.CAPTURE_RESOLUTION); + let target = createFBO( + res.width, + res.height, + ext.formatRGBA.internalFormat, + ext.formatRGBA.format, + ext.halfFloatTexType, + gl.NEAREST, + ); + render(target); + + let texture = framebufferToTexture(target); + texture = normalizeTexture(texture, target.width, target.height); + + let captureCanvas = textureToCanvas(texture, target.width, target.height); + let datauri = captureCanvas.toDataURL(); + downloadURI('fluid.png', datauri); + URL.revokeObjectURL(datauri); +} + +function framebufferToTexture(target) { + gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo); + let length = target.width * target.height * 4; + let texture = new Float32Array(length); + gl.readPixels(0, 0, target.width, target.height, gl.RGBA, gl.FLOAT, texture); + return texture; +} + +function normalizeTexture(texture, width, height) { + let result = new Uint8Array(texture.length); + let id = 0; + for (let i = height - 1; i >= 0; i--) { + for (let j = 0; j < width; j++) { + let nid = i * width * 4 + j * 4; + result[nid + 0] = clamp01(texture[id + 0]) * 255; + result[nid + 1] = clamp01(texture[id + 1]) * 255; + result[nid + 2] = clamp01(texture[id + 2]) * 255; + result[nid + 3] = clamp01(texture[id + 3]) * 255; + id += 4; + } + } + return result; +} + +function clamp01(input) { + return Math.min(Math.max(input, 0), 1); +} + +function textureToCanvas(texture, width, height) { + let captureCanvas = document.createElement('canvas'); + let ctx = captureCanvas.getContext('2d'); + captureCanvas.width = width; + captureCanvas.height = height; + + let imageData = ctx.createImageData(width, height); + imageData.data.set(texture); + ctx.putImageData(imageData, 0, 0); + + return captureCanvas; +} + +function downloadURI(filename, uri) { + let link = document.createElement('a'); + link.download = filename; + link.href = uri; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + +let Material = function Material(vertexShader, fragmentShaderSource) { + this.vertexShader = vertexShader; + this.fragmentShaderSource = fragmentShaderSource; + this.programs = []; + this.activeProgram = null; + this.uniforms = []; +}; + +Material.prototype.setKeywords = function setKeywords(keywords) { + let hash = 0; + for (let i = 0; i < keywords.length; i++) { + hash += hashCode(keywords[i]); + } + + let program = this.programs[hash]; + if (program == null) { + let fragmentShader = compileShader(gl.FRAGMENT_SHADER, this.fragmentShaderSource, keywords); + program = createProgram(this.vertexShader, fragmentShader); + this.programs[hash] = program; + } + + if (program == this.activeProgram) { + return; + } + + this.uniforms = getUniforms(program); + this.activeProgram = program; +}; + +Material.prototype.bind = function bind() { + gl.useProgram(this.activeProgram); +}; + +let Program = function Program(vertexShader, fragmentShader) { + this.uniforms = {}; + this.program = createProgram(vertexShader, fragmentShader); + this.uniforms = getUniforms(this.program); +}; + +Program.prototype.bind = function bind() { + gl.useProgram(this.program); +}; + +function createProgram(vertexShader, fragmentShader) { + let program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + throw gl.getProgramInfoLog(program); + } + + return program; +} + +function getUniforms(program) { + let uniforms = []; + let uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); + for (let i = 0; i < uniformCount; i++) { + let uniformName = gl.getActiveUniform(program, i).name; + uniforms[uniformName] = gl.getUniformLocation(program, uniformName); + } + return uniforms; +} + +function compileShader(type, source, keywords) { + source = addKeywords(source, keywords); + + let shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + throw gl.getShaderInfoLog(shader); + } + + return shader; +} + +function addKeywords(source, keywords) { + if (keywords == null) { + return source; + } + let keywordsString = ''; + keywords.forEach(function (keyword) { + keywordsString += '#define ' + keyword + '\n'; + }); + return keywordsString + source; +} + +let baseVertexShader = compileShader( + gl.VERTEX_SHADER, + '\n precision highp float;\n\n attribute vec2 aPosition;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform vec2 texelSize;\n\n void main () {\n vUv = aPosition * 0.5 + 0.5;\n vL = vUv - vec2(texelSize.x, 0.0);\n vR = vUv + vec2(texelSize.x, 0.0);\n vT = vUv + vec2(0.0, texelSize.y);\n vB = vUv - vec2(0.0, texelSize.y);\n gl_Position = vec4(aPosition, 0.0, 1.0);\n }\n', +); + +let blurVertexShader = compileShader( + gl.VERTEX_SHADER, + '\n precision highp float;\n\n attribute vec2 aPosition;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n uniform vec2 texelSize;\n\n void main () {\n vUv = aPosition * 0.5 + 0.5;\n float offset = 1.33333333;\n vL = vUv - texelSize * offset;\n vR = vUv + texelSize * offset;\n gl_Position = vec4(aPosition, 0.0, 1.0);\n }\n', +); + +let blurShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n uniform sampler2D uTexture;\n\n void main () {\n vec4 sum = texture2D(uTexture, vUv) * 0.29411764;\n sum += texture2D(uTexture, vL) * 0.35294117;\n sum += texture2D(uTexture, vR) * 0.35294117;\n gl_FragColor = sum;\n }\n', +); + +let copyShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying highp vec2 vUv;\n uniform sampler2D uTexture;\n\n void main () {\n gl_FragColor = texture2D(uTexture, vUv);\n }\n', +); + +let clearShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying highp vec2 vUv;\n uniform sampler2D uTexture;\n uniform float value;\n\n void main () {\n gl_FragColor = value * texture2D(uTexture, vUv);\n }\n', +); + +let colorShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n\n uniform vec4 color;\n\n void main () {\n gl_FragColor = color;\n }\n', +); + +let checkerboardShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTexture;\n uniform float aspectRatio;\n\n #define SCALE 25.0\n\n void main () {\n vec2 uv = floor(vUv * SCALE * vec2(aspectRatio, 1.0));\n float v = mod(uv.x + uv.y, 2.0);\n v = v * 0.1 + 0.8;\n gl_FragColor = vec4(vec3(v), 1.0);\n }\n', +); + +let displayShaderSource = + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uTexture;\n uniform sampler2D uBloom;\n uniform sampler2D uSunrays;\n uniform sampler2D uDithering;\n uniform vec2 ditherScale;\n uniform vec2 texelSize;\n\n vec3 linearToGamma (vec3 color) {\n color = max(color, vec3(0));\n return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0));\n }\n\n void main () {\n vec3 c = texture2D(uTexture, vUv).rgb;\n\n #ifdef SHADING\n vec3 lc = texture2D(uTexture, vL).rgb;\n vec3 rc = texture2D(uTexture, vR).rgb;\n vec3 tc = texture2D(uTexture, vT).rgb;\n vec3 bc = texture2D(uTexture, vB).rgb;\n\n float dx = length(rc) - length(lc);\n float dy = length(tc) - length(bc);\n\n vec3 n = normalize(vec3(dx, dy, length(texelSize)));\n vec3 l = vec3(0.0, 0.0, 1.0);\n\n float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);\n c *= diffuse;\n #endif\n\n #ifdef BLOOM\n vec3 bloom = texture2D(uBloom, vUv).rgb;\n #endif\n\n #ifdef SUNRAYS\n float sunrays = texture2D(uSunrays, vUv).r;\n c *= sunrays;\n #ifdef BLOOM\n bloom *= sunrays;\n #endif\n #endif\n\n #ifdef BLOOM\n float noise = texture2D(uDithering, vUv * ditherScale).r;\n noise = noise * 2.0 - 1.0;\n bloom += noise / 255.0;\n bloom = linearToGamma(bloom);\n c += bloom;\n #endif\n\n float a = max(c.r, max(c.g, c.b));\n gl_FragColor = vec4(c, a);\n }\n'; + +let bloomPrefilterShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTexture;\n uniform vec3 curve;\n uniform float threshold;\n\n void main () {\n vec3 c = texture2D(uTexture, vUv).rgb;\n float br = max(c.r, max(c.g, c.b));\n float rq = clamp(br - curve.x, 0.0, curve.y);\n rq = curve.z * rq * rq;\n c *= max(rq, br - threshold) / max(br, 0.0001);\n gl_FragColor = vec4(c, 0.0);\n }\n', +); + +let bloomBlurShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uTexture;\n\n void main () {\n vec4 sum = vec4(0.0);\n sum += texture2D(uTexture, vL);\n sum += texture2D(uTexture, vR);\n sum += texture2D(uTexture, vT);\n sum += texture2D(uTexture, vB);\n sum *= 0.25;\n gl_FragColor = sum;\n }\n', +); + +let bloomFinalShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uTexture;\n uniform float intensity;\n\n void main () {\n vec4 sum = vec4(0.0);\n sum += texture2D(uTexture, vL);\n sum += texture2D(uTexture, vR);\n sum += texture2D(uTexture, vT);\n sum += texture2D(uTexture, vB);\n sum *= 0.25;\n gl_FragColor = sum * intensity;\n }\n', +); + +let sunraysMaskShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTexture;\n\n void main () {\n vec4 c = texture2D(uTexture, vUv);\n float br = max(c.r, max(c.g, c.b));\n c.a = 1.0 - min(max(br * 20.0, 0.0), 0.8);\n gl_FragColor = c;\n }\n', +); + +let sunraysShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTexture;\n uniform float weight;\n\n #define ITERATIONS 16\n\n void main () {\n float Density = 0.3;\n float Decay = 0.95;\n float Exposure = 0.7;\n\n vec2 coord = vUv;\n vec2 dir = vUv - 0.5;\n\n dir *= 1.0 / float(ITERATIONS) * Density;\n float illuminationDecay = 1.0;\n\n float color = texture2D(uTexture, vUv).a;\n\n for (int i = 0; i < ITERATIONS; i++)\n {\n coord -= dir;\n float col = texture2D(uTexture, coord).a;\n color += col * illuminationDecay * weight;\n illuminationDecay *= Decay;\n }\n\n gl_FragColor = vec4(color * Exposure, 0.0, 0.0, 1.0);\n }\n', +); + +let splatShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTarget;\n uniform float aspectRatio;\n uniform vec3 color;\n uniform vec2 point;\n uniform float radius;\n\n void main () {\n vec2 p = vUv - point.xy;\n p.x *= aspectRatio;\n vec3 splat = exp(-dot(p, p) / radius) * color;\n vec3 base = texture2D(uTarget, vUv).xyz;\n gl_FragColor = vec4(base + splat, 1.0);\n }\n', +); + +let advectionShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uVelocity;\n uniform sampler2D uSource;\n uniform vec2 texelSize;\n uniform vec2 dyeTexelSize;\n uniform float dt;\n uniform float dissipation;\n\n vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {\n vec2 st = uv / tsize - 0.5;\n\n vec2 iuv = floor(st);\n vec2 fuv = fract(st);\n\n vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);\n vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);\n vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);\n vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);\n\n return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);\n }\n\n void main () {\n #ifdef MANUAL_FILTERING\n vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;\n vec4 result = bilerp(uSource, coord, dyeTexelSize);\n #else\n vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;\n vec4 result = texture2D(uSource, coord);\n #endif\n float decay = 1.0 + dissipation * dt;\n gl_FragColor = result / decay;\n }', + ext.supportLinearFiltering ? null : ['MANUAL_FILTERING'], +); + +let divergenceShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying highp vec2 vUv;\n varying highp vec2 vL;\n varying highp vec2 vR;\n varying highp vec2 vT;\n varying highp vec2 vB;\n uniform sampler2D uVelocity;\n\n void main () {\n float L = texture2D(uVelocity, vL).x;\n float R = texture2D(uVelocity, vR).x;\n float T = texture2D(uVelocity, vT).y;\n float B = texture2D(uVelocity, vB).y;\n\n vec2 C = texture2D(uVelocity, vUv).xy;\n if (vL.x < 0.0) { L = -C.x; }\n if (vR.x > 1.0) { R = -C.x; }\n if (vT.y > 1.0) { T = -C.y; }\n if (vB.y < 0.0) { B = -C.y; }\n\n float div = 0.5 * (R - L + T - B);\n gl_FragColor = vec4(div, 0.0, 0.0, 1.0);\n }\n', +); + +let curlShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying highp vec2 vUv;\n varying highp vec2 vL;\n varying highp vec2 vR;\n varying highp vec2 vT;\n varying highp vec2 vB;\n uniform sampler2D uVelocity;\n\n void main () {\n float L = texture2D(uVelocity, vL).y;\n float R = texture2D(uVelocity, vR).y;\n float T = texture2D(uVelocity, vT).x;\n float B = texture2D(uVelocity, vB).x;\n float vorticity = R - L - T + B;\n gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);\n }\n', +); + +let vorticityShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision highp float;\n precision highp sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n uniform sampler2D uCurl;\n uniform float curl;\n uniform float dt;\n\n void main () {\n float L = texture2D(uCurl, vL).x;\n float R = texture2D(uCurl, vR).x;\n float T = texture2D(uCurl, vT).x;\n float B = texture2D(uCurl, vB).x;\n float C = texture2D(uCurl, vUv).x;\n\n vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));\n force /= length(force) + 0.0001;\n force *= curl * C;\n force.y *= -1.0;\n\n vec2 vel = texture2D(uVelocity, vUv).xy;\n gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);\n }\n', +); + +let pressureShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying highp vec2 vUv;\n varying highp vec2 vL;\n varying highp vec2 vR;\n varying highp vec2 vT;\n varying highp vec2 vB;\n uniform sampler2D uPressure;\n uniform sampler2D uDivergence;\n\n void main () {\n float L = texture2D(uPressure, vL).x;\n float R = texture2D(uPressure, vR).x;\n float T = texture2D(uPressure, vT).x;\n float B = texture2D(uPressure, vB).x;\n float C = texture2D(uPressure, vUv).x;\n float divergence = texture2D(uDivergence, vUv).x;\n float pressure = (L + R + B + T - divergence) * 0.25;\n gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);\n }\n', +); + +let gradientSubtractShader = compileShader( + gl.FRAGMENT_SHADER, + '\n precision mediump float;\n precision mediump sampler2D;\n\n varying highp vec2 vUv;\n varying highp vec2 vL;\n varying highp vec2 vR;\n varying highp vec2 vT;\n varying highp vec2 vB;\n uniform sampler2D uPressure;\n uniform sampler2D uVelocity;\n\n void main () {\n float L = texture2D(uPressure, vL).x;\n float R = texture2D(uPressure, vR).x;\n float T = texture2D(uPressure, vT).x;\n float B = texture2D(uPressure, vB).x;\n vec2 velocity = texture2D(uVelocity, vUv).xy;\n velocity.xy -= vec2(R - L, T - B);\n gl_FragColor = vec4(velocity, 0.0, 1.0);\n }\n', +); + +let blit = (function () { + gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW); + gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(0); + + return function (destination) { + gl.bindFramebuffer(gl.FRAMEBUFFER, destination); + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); + }; +})(); + +let dye; +let velocity; +let divergence; +let curl; +let pressure; +let bloom; +let bloomFramebuffers = []; +let sunrays; +let sunraysTemp; + +let ditheringTexture = createTextureAsync('./LDR_LLL1_0.png'); + +let blurProgram = new Program(blurVertexShader, blurShader); +let copyProgram = new Program(baseVertexShader, copyShader); +let clearProgram = new Program(baseVertexShader, clearShader); +let colorProgram = new Program(baseVertexShader, colorShader); +let checkerboardProgram = new Program(baseVertexShader, checkerboardShader); +let bloomPrefilterProgram = new Program(baseVertexShader, bloomPrefilterShader); +let bloomBlurProgram = new Program(baseVertexShader, bloomBlurShader); +let bloomFinalProgram = new Program(baseVertexShader, bloomFinalShader); +let sunraysMaskProgram = new Program(baseVertexShader, sunraysMaskShader); +let sunraysProgram = new Program(baseVertexShader, sunraysShader); +let splatProgram = new Program(baseVertexShader, splatShader); +let advectionProgram = new Program(baseVertexShader, advectionShader); +let divergenceProgram = new Program(baseVertexShader, divergenceShader); +let curlProgram = new Program(baseVertexShader, curlShader); +let vorticityProgram = new Program(baseVertexShader, vorticityShader); +let pressureProgram = new Program(baseVertexShader, pressureShader); +let gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader); + +let displayMaterial = new Material(baseVertexShader, displayShaderSource); + +function initFramebuffers() { + let simRes = getResolution(config.SIM_RESOLUTION); + let dyeRes = getResolution(config.DYE_RESOLUTION); + + let texType = ext.halfFloatTexType; + let rgba = ext.formatRGBA; + let rg = ext.formatRG; + let r = ext.formatR; + let filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; + + if (dye == null) { + dye = createDoubleFBO(dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering); + } else { + dye = resizeDoubleFBO(dye, dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering); + } + + if (velocity == null) { + velocity = createDoubleFBO(simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering); + } else { + velocity = resizeDoubleFBO( + velocity, + simRes.width, + simRes.height, + rg.internalFormat, + rg.format, + texType, + filtering, + ); + } + + divergence = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST); + curl = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST); + pressure = createDoubleFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST); + + initBloomFramebuffers(); + initSunraysFramebuffers(); +} + +function initBloomFramebuffers() { + let res = getResolution(config.BLOOM_RESOLUTION); + + let texType = ext.halfFloatTexType; + let rgba = ext.formatRGBA; + let filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; + + bloom = createFBO(res.width, res.height, rgba.internalFormat, rgba.format, texType, filtering); + + bloomFramebuffers.length = 0; + for (let i = 0; i < config.BLOOM_ITERATIONS; i++) { + let width = res.width >> (i + 1); + let height = res.height >> (i + 1); + + if (width < 2 || height < 2) { + break; + } + + let fbo = createFBO(width, height, rgba.internalFormat, rgba.format, texType, filtering); + bloomFramebuffers.push(fbo); + } +} + +function initSunraysFramebuffers() { + let res = getResolution(config.SUNRAYS_RESOLUTION); + + let texType = ext.halfFloatTexType; + let r = ext.formatR; + let filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST; + + sunrays = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering); + sunraysTemp = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering); +} + +function createFBO(w, h, internalFormat, format, type, param) { + gl.activeTexture(gl.TEXTURE0); + let texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null); + + let fbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); + gl.viewport(0, 0, w, h); + gl.clear(gl.COLOR_BUFFER_BIT); + + let texelSizeX = 1.0 / w; + let texelSizeY = 1.0 / h; + + return { + texture: texture, + fbo: fbo, + width: w, + height: h, + texelSizeX: texelSizeX, + texelSizeY: texelSizeY, + attach: function attach(id) { + gl.activeTexture(gl.TEXTURE0 + id); + gl.bindTexture(gl.TEXTURE_2D, texture); + return id; + }, + }; +} + +function createDoubleFBO(w, h, internalFormat, format, type, param) { + let fbo1 = createFBO(w, h, internalFormat, format, type, param); + let fbo2 = createFBO(w, h, internalFormat, format, type, param); + + return { + width: w, + height: h, + texelSizeX: fbo1.texelSizeX, + texelSizeY: fbo1.texelSizeY, + get read() { + return fbo1; + }, + set read(value) { + fbo1 = value; + }, + get write() { + return fbo2; + }, + set write(value) { + fbo2 = value; + }, + swap: function swap() { + let temp = fbo1; + fbo1 = fbo2; + fbo2 = temp; + }, + }; +} + +function resizeFBO(target, w, h, internalFormat, format, type, param) { + let newFBO = createFBO(w, h, internalFormat, format, type, param); + copyProgram.bind(); + gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0)); + blit(newFBO.fbo); + return newFBO; +} + +function resizeDoubleFBO(target, w, h, internalFormat, format, type, param) { + if (target.width == w && target.height == h) { + return target; + } + target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param); + target.write = createFBO(w, h, internalFormat, format, type, param); + target.width = w; + target.height = h; + target.texelSizeX = 1.0 / w; + target.texelSizeY = 1.0 / h; + return target; +} + +function createTextureAsync(url) { + let texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255])); + + let obj = { + texture: texture, + width: 1, + height: 1, + attach: function attach(id) { + gl.activeTexture(gl.TEXTURE0 + id); + gl.bindTexture(gl.TEXTURE_2D, texture); + return id; + }, + }; + + let image = new Image(); + image.onload = function () { + obj.width = image.width; + obj.height = image.height; + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); + }; + image.src = url; + + return obj; +} + +function updateKeywords() { + let displayKeywords = []; + if (config.SHADING) { + displayKeywords.push('SHADING'); + } + if (config.BLOOM) { + displayKeywords.push('BLOOM'); + } + if (config.SUNRAYS) { + displayKeywords.push('SUNRAYS'); + } + displayMaterial.setKeywords(displayKeywords); +} + +updateKeywords(); +initFramebuffers(); +multipleSplats(parseInt(Math.random() * 20) + 5); + +let lastUpdateTime = Date.now(); +let colorUpdateTimer = 0.0; +update(); + +function update() { + let dt = calcDeltaTime(); + if (resizeCanvas()) { + initFramebuffers(); + } + updateColors(dt); + applyInputs(); + if (!config.PAUSED) { + step(dt); + } + render(null); + requestAnimationFrame(update); +} + +function calcDeltaTime() { + let now = Date.now(); + let dt = (now - lastUpdateTime) / 1000; + dt = Math.min(dt, 0.016666); + lastUpdateTime = now; + return dt; +} + +function resizeCanvas() { + let width = scaleByPixelRatio(mycanvas.clientWidth); + let height = scaleByPixelRatio(mycanvas.clientHeight); + if (mycanvas.width != width || mycanvas.height != height) { + mycanvas.width = width; + mycanvas.height = height; + return true; + } + return false; +} + +function updateColors(dt) { + if (!config.COLORFUL) { + return; + } + + colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED; + if (colorUpdateTimer >= 1) { + colorUpdateTimer = wrap(colorUpdateTimer, 0, 1); + pointers.forEach(function (p) { + p.color = generateColor(); + }); + } +} + +function applyInputs() { + if (splatStack.length > 0) { + multipleSplats(splatStack.pop()); + } + + pointers.forEach(function (p) { + if (p.moved) { + p.moved = false; + splatPointer(p); + } + }); +} + +function step(dt) { + gl.disable(gl.BLEND); + gl.viewport(0, 0, velocity.width, velocity.height); + + curlProgram.bind(); + gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); + gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0)); + blit(curl.fbo); + + vorticityProgram.bind(); + gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); + gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0)); + gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1)); + gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL); + gl.uniform1f(vorticityProgram.uniforms.dt, dt); + blit(velocity.write.fbo); + velocity.swap(); + + divergenceProgram.bind(); + gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); + gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0)); + blit(divergence.fbo); + + clearProgram.bind(); + gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0)); + gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE); + blit(pressure.write.fbo); + pressure.swap(); + + pressureProgram.bind(); + gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); + gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0)); + for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) { + gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1)); + blit(pressure.write.fbo); + pressure.swap(); + } + + gradienSubtractProgram.bind(); + gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); + gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0)); + gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1)); + blit(velocity.write.fbo); + velocity.swap(); + + advectionProgram.bind(); + gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY); + if (!ext.supportLinearFiltering) { + gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, velocity.texelSizeX, velocity.texelSizeY); + } + let velocityId = velocity.read.attach(0); + gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId); + gl.uniform1i(advectionProgram.uniforms.uSource, velocityId); + gl.uniform1f(advectionProgram.uniforms.dt, dt); + gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION); + blit(velocity.write.fbo); + velocity.swap(); + + gl.viewport(0, 0, dye.width, dye.height); + + if (!ext.supportLinearFiltering) { + gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY); + } + gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0)); + gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1)); + gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION); + blit(dye.write.fbo); + dye.swap(); +} + +function render(target) { + if (config.BLOOM) { + applyBloom(dye.read, bloom); + } + if (config.SUNRAYS) { + applySunrays(dye.read, dye.write, sunrays); + blur(sunrays, sunraysTemp, 1); + } + + if (target == null || !config.TRANSPARENT) { + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + gl.enable(gl.BLEND); + } else { + gl.disable(gl.BLEND); + } + + let width = target == null ? gl.drawingBufferWidth : target.width; + let height = target == null ? gl.drawingBufferHeight : target.height; + gl.viewport(0, 0, width, height); + + let fbo = target == null ? null : target.fbo; + if (!config.TRANSPARENT) { + drawColor(fbo, normalizeColor(config.BACK_COLOR)); + } + if (target == null && config.TRANSPARENT) { + drawCheckerboard(fbo); + } + drawDisplay(fbo, width, height); +} + +function drawColor(fbo, color) { + colorProgram.bind(); + gl.uniform4f(colorProgram.uniforms.color, color.r, color.g, color.b, 1); + blit(fbo); +} + +function drawCheckerboard(fbo) { + checkerboardProgram.bind(); + gl.uniform1f(checkerboardProgram.uniforms.aspectRatio, mycanvas.width / mycanvas.height); + blit(fbo); +} + +function drawDisplay(fbo, width, height) { + displayMaterial.bind(); + if (config.SHADING) { + gl.uniform2f(displayMaterial.uniforms.texelSize, 1.0 / width, 1.0 / height); + } + gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0)); + if (config.BLOOM) { + gl.uniform1i(displayMaterial.uniforms.uBloom, bloom.attach(1)); + gl.uniform1i(displayMaterial.uniforms.uDithering, ditheringTexture.attach(2)); + let scale = getTextureScale(ditheringTexture, width, height); + gl.uniform2f(displayMaterial.uniforms.ditherScale, scale.x, scale.y); + } + if (config.SUNRAYS) { + gl.uniform1i(displayMaterial.uniforms.uSunrays, sunrays.attach(3)); + } + blit(fbo); +} + +function applyBloom(source, destination) { + if (bloomFramebuffers.length < 2) { + return; + } + + let last = destination; + + gl.disable(gl.BLEND); + bloomPrefilterProgram.bind(); + let knee = config.BLOOM_THRESHOLD * config.BLOOM_SOFT_KNEE + 0.0001; + let curve0 = config.BLOOM_THRESHOLD - knee; + let curve1 = knee * 2; + let curve2 = 0.25 / knee; + gl.uniform3f(bloomPrefilterProgram.uniforms.curve, curve0, curve1, curve2); + gl.uniform1f(bloomPrefilterProgram.uniforms.threshold, config.BLOOM_THRESHOLD); + gl.uniform1i(bloomPrefilterProgram.uniforms.uTexture, source.attach(0)); + gl.viewport(0, 0, last.width, last.height); + blit(last.fbo); + + bloomBlurProgram.bind(); + for (let i = 0; i < bloomFramebuffers.length; i++) { + let dest = bloomFramebuffers[i]; + gl.uniform2f(bloomBlurProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY); + gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0)); + gl.viewport(0, 0, dest.width, dest.height); + blit(dest.fbo); + last = dest; + } + + gl.blendFunc(gl.ONE, gl.ONE); + gl.enable(gl.BLEND); + + for (let i$1 = bloomFramebuffers.length - 2; i$1 >= 0; i$1--) { + let baseTex = bloomFramebuffers[i$1]; + gl.uniform2f(bloomBlurProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY); + gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0)); + gl.viewport(0, 0, baseTex.width, baseTex.height); + blit(baseTex.fbo); + last = baseTex; + } + + gl.disable(gl.BLEND); + bloomFinalProgram.bind(); + gl.uniform2f(bloomFinalProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY); + gl.uniform1i(bloomFinalProgram.uniforms.uTexture, last.attach(0)); + gl.uniform1f(bloomFinalProgram.uniforms.intensity, config.BLOOM_INTENSITY); + gl.viewport(0, 0, destination.width, destination.height); + blit(destination.fbo); +} + +function applySunrays(source, mask, destination) { + gl.disable(gl.BLEND); + sunraysMaskProgram.bind(); + gl.uniform1i(sunraysMaskProgram.uniforms.uTexture, source.attach(0)); + gl.viewport(0, 0, mask.width, mask.height); + blit(mask.fbo); + + sunraysProgram.bind(); + gl.uniform1f(sunraysProgram.uniforms.weight, config.SUNRAYS_WEIGHT); + gl.uniform1i(sunraysProgram.uniforms.uTexture, mask.attach(0)); + gl.viewport(0, 0, destination.width, destination.height); + blit(destination.fbo); +} + +function blur(target, temp, iterations) { + blurProgram.bind(); + for (let i = 0; i < iterations; i++) { + gl.uniform2f(blurProgram.uniforms.texelSize, target.texelSizeX, 0.0); + gl.uniform1i(blurProgram.uniforms.uTexture, target.attach(0)); + blit(temp.fbo); + + gl.uniform2f(blurProgram.uniforms.texelSize, 0.0, target.texelSizeY); + gl.uniform1i(blurProgram.uniforms.uTexture, temp.attach(0)); + blit(target.fbo); + } +} + +function splatPointer(pointer) { + let dx = pointer.deltaX * config.SPLAT_FORCE; + let dy = pointer.deltaY * config.SPLAT_FORCE; + splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color); +} + +function multipleSplats(amount) { + for (let i = 0; i < amount; i++) { + let color = generateColor(); + color.r *= 10.0; + color.g *= 10.0; + color.b *= 10.0; + let x = Math.random(); + let y = Math.random(); + let dx = 1000 * (Math.random() - 0.5); + let dy = 1000 * (Math.random() - 0.5); + splat(x, y, dx, dy, color); + } +} + +function splat(x, y, dx, dy, color) { + gl.viewport(0, 0, velocity.width, velocity.height); + splatProgram.bind(); + gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0)); + gl.uniform1f(splatProgram.uniforms.aspectRatio, mycanvas.width / mycanvas.height); + gl.uniform2f(splatProgram.uniforms.point, x, y); + gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0.0); + gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100.0)); + blit(velocity.write.fbo); + velocity.swap(); + + gl.viewport(0, 0, dye.width, dye.height); + gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0)); + gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b); + blit(dye.write.fbo); + dye.swap(); +} + +function correctRadius(radius) { + let aspectRatio = mycanvas.width / mycanvas.height; + if (aspectRatio > 1) { + radius *= aspectRatio; + } + return radius; +} + +mycanvas.addEventListener('mousedown', function (e) { + let posX = scaleByPixelRatio(e.offsetX); + let posY = scaleByPixelRatio(e.offsetY); + let pointer = pointers.find(function (p) { + return p.id == -1; + }); + if (pointer == null) { + pointer = new pointerPrototype(); + } + updatePointerDownData(pointer, -1, posX, posY); +}); + +mycanvas.addEventListener('mousemove', function (e) { + let pointer = pointers[0]; + if (pointer.down) { + return; + } + let posX = scaleByPixelRatio(e.offsetX); + let posY = scaleByPixelRatio(e.offsetY); + updatePointerMoveData(pointer, posX, posY); +}); + +window.addEventListener('mouseup', function () { + updatePointerUpData(pointers[0]); +}); + +mycanvas.addEventListener('touchstart', function (e) { + e.preventDefault(); + let touches = e.targetTouches; + while (touches.length >= pointers.length) { + pointers.push(new pointerPrototype()); + } + for (let i = 0; i < touches.length; i++) { + let posX = scaleByPixelRatio(touches[i].pageX); + let posY = scaleByPixelRatio(touches[i].pageY); + updatePointerDownData(pointers[i + 1], touches[i].identifier, posX, posY); + } +}); + +mycanvas.addEventListener( + 'touchmove', + function (e) { + e.preventDefault(); + let touches = e.targetTouches; + for (let i = 0; i < touches.length; i++) { + let pointer = pointers[i + 1]; + if (!pointer.down) { + continue; + } + let posX = scaleByPixelRatio(touches[i].pageX); + let posY = scaleByPixelRatio(touches[i].pageY); + updatePointerMoveData(pointer, posX, posY); + } + }, + false, +); + +window.addEventListener('touchend', function (e) { + let touches = e.changedTouches; + let loop = function (i) { + let pointer = pointers.find(function (p) { + return p.id == touches[i].identifier; + }); + if (pointer == null) { + return; + } + updatePointerUpData(pointer); + }; + + for (let i = 0; i < touches.length; i++) loop(i); +}); + +window.addEventListener('keydown', function (e) { + if (e.code === 'KeyP') { + config.PAUSED = !config.PAUSED; + } + if (e.key === ' ') { + splatStack.push(parseInt(Math.random() * 20) + 5); + } +}); + +function updatePointerDownData(pointer, id, posX, posY) { + pointer.id = id; + pointer.down = true; + pointer.moved = false; + pointer.texcoordX = posX / mycanvas.width; + pointer.texcoordY = 1.0 - posY / mycanvas.height; + pointer.prevTexcoordX = pointer.texcoordX; + pointer.prevTexcoordY = pointer.texcoordY; + pointer.deltaX = 0; + pointer.deltaY = 0; + pointer.color = generateColor(); +} + +function updatePointerMoveData(pointer, posX, posY) { + pointer.prevTexcoordX = pointer.texcoordX; + pointer.prevTexcoordY = pointer.texcoordY; + pointer.texcoordX = posX / mycanvas.width; + pointer.texcoordY = 1.0 - posY / mycanvas.height; + pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX); + pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY); + pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0; +} + +function updatePointerUpData(pointer) { + pointer.down = false; +} + +function correctDeltaX(delta) { + let aspectRatio = mycanvas.width / mycanvas.height; + if (aspectRatio < 1) { + delta *= aspectRatio; + } + return delta; +} + +function correctDeltaY(delta) { + let aspectRatio = mycanvas.width / mycanvas.height; + if (aspectRatio > 1) { + delta /= aspectRatio; + } + return delta; +} + +function generateColor() { + let c = HSVtoRGB(Math.random(), 1.0, 1.0); + c.r *= 0.15; + c.g *= 0.15; + c.b *= 0.15; + return c; +} + +function HSVtoRGB(h, s, v) { + let r, g, b, i, f, p, q, t; + i = Math.floor(h * 6); + f = h * 6 - i; + p = v * (1 - s); + q = v * (1 - f * s); + t = v * (1 - (1 - f) * s); + + switch (i % 6) { + case 0: + (r = v), (g = t), (b = p); + break; + case 1: + (r = q), (g = v), (b = p); + break; + case 2: + (r = p), (g = v), (b = t); + break; + case 3: + (r = p), (g = q), (b = v); + break; + case 4: + (r = t), (g = p), (b = v); + break; + case 5: + (r = v), (g = p), (b = q); + break; + } + + return { + r: r, + g: g, + b: b, + }; +} + +function normalizeColor(input) { + let output = { + r: input.r / 255, + g: input.g / 255, + b: input.b / 255, + }; + return output; +} + +function wrap(value, min, max) { + let range = max - min; + if (range == 0) { + return min; + } + return ((value - min) % range) + min; +} + +function getResolution(resolution) { + let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight; + if (aspectRatio < 1) { + aspectRatio = 1.0 / aspectRatio; + } + + let min = Math.round(resolution); + let max = Math.round(resolution * aspectRatio); + + if (gl.drawingBufferWidth > gl.drawingBufferHeight) { + return { width: max, height: min }; + } else { + return { width: min, height: max }; + } +} + +function getTextureScale(texture, width, height) { + return { + x: width / texture.width, + y: height / texture.height, + }; +} + +function scaleByPixelRatio(input) { + let pixelRatio = window.devicePixelRatio || 1; + return Math.floor(input * pixelRatio); +} + +function hashCode(s) { + if (s.length == 0) { + return 0; + } + let hash = 0; + for (let i = 0; i < s.length; i++) { + hash = (hash << 5) - hash + s.charCodeAt(i); + hash |= 0; // Convert to 32bit integer + } + return hash; +} diff --git a/src/App.css b/src/App.css index a8867d4..91ed200 100644 --- a/src/App.css +++ b/src/App.css @@ -76,4 +76,11 @@ body { canvas { user-select: none; +} + +.fluid-canvas-container { + position: fixed; + height: 100%; + width: 100%; + opacity: 0.1; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index d331a8b..670453d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import { qualities, experiences, skills } from './data'; import Skill from './Components/Skill/Skill'; import Image from './Components/HoverImage/Image'; import HelloText from './Components/HelloText/HelloText'; +import Fluid from './Components/Fluid/Fluid'; const themes = ['red', 'yellow', 'green', 'blue', 'purple', 'indigo', 'pink']; @@ -145,6 +146,9 @@ function App(): JSX.Element { return ( <>
+
+ +
{header}

diff --git a/src/Components/Fluid/Fluid.jsx b/src/Components/Fluid/Fluid.jsx new file mode 100644 index 0000000..915370a --- /dev/null +++ b/src/Components/Fluid/Fluid.jsx @@ -0,0 +1,34 @@ +import React from 'react'; + +export default class Fluid extends React.Component { + constructor(props) { + super(props); + this.state = { + style: { + color: 'white', + height: '100%', // Canvas is will respond to size changes without resetting fluid! + width: '100%', + margin: 0, + }, + }; + } + + // Basically when the component mounts it adds a