From b330a57f1ceaf54f5270162966ffcaca6f8aeeaa Mon Sep 17 00:00:00 2001 From: JeffG05 Date: Thu, 18 Feb 2021 12:02:23 +0000 Subject: [PATCH 1/5] Added more keyboard shortcuts --- script.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/script.js b/script.js index d0db5af6..0f7a8e65 100644 --- a/script.js +++ b/script.js @@ -206,7 +206,7 @@ function supportRenderTextureFormat (gl, internalFormat, format, type) { } function startGUI () { - var gui = new dat.GUI({ width: 300 }); + var gui = new dat.GUI({ width: 350 }); gui.add(config, 'DYE_RESOLUTION', { 'high': 1024, 'medium': 512, 'low': 256, 'very low': 128 }).name('quality').onFinishChange(initFramebuffers); gui.add(config, 'SIM_RESOLUTION', { '32': 32, '64': 64, '128': 128, '256': 256 }).name('sim resolution').onFinishChange(initFramebuffers); gui.add(config, 'DENSITY_DISSIPATION', 0, 4.0).name('density diffusion'); @@ -214,27 +214,27 @@ function startGUI () { gui.add(config, 'PRESSURE', 0.0, 1.0).name('pressure'); gui.add(config, 'CURL', 0, 50).name('vorticity').step(1); gui.add(config, 'SPLAT_RADIUS', 0.01, 1.0).name('splat radius'); - gui.add(config, 'SHADING').name('shading').onFinishChange(updateKeywords); - gui.add(config, 'COLORFUL').name('colorful'); - gui.add(config, 'PAUSED').name('paused').listen(); + gui.add(config, 'SHADING').name('shading [s]').onFinishChange(updateKeywords).listen(); + gui.add(config, 'COLORFUL').name('colorful [c]').listen(); + gui.add(config, 'PAUSED').name('paused [p]').listen(); gui.add({ fun: () => { splatStack.push(parseInt(Math.random() * 20) + 5); - } }, 'fun').name('Random splats'); + } }, 'fun').name('Random splats [Space]'); let bloomFolder = gui.addFolder('Bloom'); - bloomFolder.add(config, 'BLOOM').name('enabled').onFinishChange(updateKeywords); + bloomFolder.add(config, 'BLOOM').name('enabled [b]').onFinishChange(updateKeywords).listen(); bloomFolder.add(config, 'BLOOM_INTENSITY', 0.1, 2.0).name('intensity'); bloomFolder.add(config, 'BLOOM_THRESHOLD', 0.0, 1.0).name('threshold'); let sunraysFolder = gui.addFolder('Sunrays'); - sunraysFolder.add(config, 'SUNRAYS').name('enabled').onFinishChange(updateKeywords); + sunraysFolder.add(config, 'SUNRAYS').name('enabled [r]').onFinishChange(updateKeywords).listen(); sunraysFolder.add(config, 'SUNRAYS_WEIGHT', 0.3, 1.0).name('weight'); let captureFolder = gui.addFolder('Capture'); captureFolder.addColor(config, 'BACK_COLOR').name('background color'); captureFolder.add(config, 'TRANSPARENT').name('transparent'); - captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot'); + captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot [q]'); let github = gui.add({ fun : () => { window.open('https://github.com/PavelDoGreat/WebGL-Fluid-Simulation'); @@ -1519,6 +1519,16 @@ window.addEventListener('touchend', e => { window.addEventListener('keydown', e => { if (e.code === 'KeyP') config.PAUSED = !config.PAUSED; + if (e.code === 'KeyS') + config.SHADING = !config.SHADING; + if (e.code === 'KeyC') + config.COLORFUL = !config.COLORFUL; + if (e.code === 'KeyB') + config.BLOOM = !config.BLOOM; + if (e.code === 'KeyR') + config.SUNRAYS = !config.SUNRAYS; + if (e.code === 'KeyQ') + captureScreenshot() if (e.key === ' ') splatStack.push(parseInt(Math.random() * 20) + 5); }); From fc2dd1338f519743f6b164a1fd8be98f6003cd6a Mon Sep 17 00:00:00 2001 From: JeffG05 Date: Mon, 15 Mar 2021 12:14:27 +0000 Subject: [PATCH 2/5] Reset to original --- script.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/script.js b/script.js index d0db5af6..0f7a8e65 100644 --- a/script.js +++ b/script.js @@ -206,7 +206,7 @@ function supportRenderTextureFormat (gl, internalFormat, format, type) { } function startGUI () { - var gui = new dat.GUI({ width: 300 }); + var gui = new dat.GUI({ width: 350 }); gui.add(config, 'DYE_RESOLUTION', { 'high': 1024, 'medium': 512, 'low': 256, 'very low': 128 }).name('quality').onFinishChange(initFramebuffers); gui.add(config, 'SIM_RESOLUTION', { '32': 32, '64': 64, '128': 128, '256': 256 }).name('sim resolution').onFinishChange(initFramebuffers); gui.add(config, 'DENSITY_DISSIPATION', 0, 4.0).name('density diffusion'); @@ -214,27 +214,27 @@ function startGUI () { gui.add(config, 'PRESSURE', 0.0, 1.0).name('pressure'); gui.add(config, 'CURL', 0, 50).name('vorticity').step(1); gui.add(config, 'SPLAT_RADIUS', 0.01, 1.0).name('splat radius'); - gui.add(config, 'SHADING').name('shading').onFinishChange(updateKeywords); - gui.add(config, 'COLORFUL').name('colorful'); - gui.add(config, 'PAUSED').name('paused').listen(); + gui.add(config, 'SHADING').name('shading [s]').onFinishChange(updateKeywords).listen(); + gui.add(config, 'COLORFUL').name('colorful [c]').listen(); + gui.add(config, 'PAUSED').name('paused [p]').listen(); gui.add({ fun: () => { splatStack.push(parseInt(Math.random() * 20) + 5); - } }, 'fun').name('Random splats'); + } }, 'fun').name('Random splats [Space]'); let bloomFolder = gui.addFolder('Bloom'); - bloomFolder.add(config, 'BLOOM').name('enabled').onFinishChange(updateKeywords); + bloomFolder.add(config, 'BLOOM').name('enabled [b]').onFinishChange(updateKeywords).listen(); bloomFolder.add(config, 'BLOOM_INTENSITY', 0.1, 2.0).name('intensity'); bloomFolder.add(config, 'BLOOM_THRESHOLD', 0.0, 1.0).name('threshold'); let sunraysFolder = gui.addFolder('Sunrays'); - sunraysFolder.add(config, 'SUNRAYS').name('enabled').onFinishChange(updateKeywords); + sunraysFolder.add(config, 'SUNRAYS').name('enabled [r]').onFinishChange(updateKeywords).listen(); sunraysFolder.add(config, 'SUNRAYS_WEIGHT', 0.3, 1.0).name('weight'); let captureFolder = gui.addFolder('Capture'); captureFolder.addColor(config, 'BACK_COLOR').name('background color'); captureFolder.add(config, 'TRANSPARENT').name('transparent'); - captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot'); + captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot [q]'); let github = gui.add({ fun : () => { window.open('https://github.com/PavelDoGreat/WebGL-Fluid-Simulation'); @@ -1519,6 +1519,16 @@ window.addEventListener('touchend', e => { window.addEventListener('keydown', e => { if (e.code === 'KeyP') config.PAUSED = !config.PAUSED; + if (e.code === 'KeyS') + config.SHADING = !config.SHADING; + if (e.code === 'KeyC') + config.COLORFUL = !config.COLORFUL; + if (e.code === 'KeyB') + config.BLOOM = !config.BLOOM; + if (e.code === 'KeyR') + config.SUNRAYS = !config.SUNRAYS; + if (e.code === 'KeyQ') + captureScreenshot() if (e.key === ' ') splatStack.push(parseInt(Math.random() * 20) + 5); }); From 2cb8eda1e28db22b9f1ef8915ec97d607a3430d3 Mon Sep 17 00:00:00 2001 From: JeffG05 Date: Mon, 15 Mar 2021 12:21:48 +0000 Subject: [PATCH 3/5] Revert "Reset to original" This reverts commit fc2dd1338f519743f6b164a1fd8be98f6003cd6a. --- script.js | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/script.js b/script.js index 0f7a8e65..d0db5af6 100644 --- a/script.js +++ b/script.js @@ -206,7 +206,7 @@ function supportRenderTextureFormat (gl, internalFormat, format, type) { } function startGUI () { - var gui = new dat.GUI({ width: 350 }); + var gui = new dat.GUI({ width: 300 }); gui.add(config, 'DYE_RESOLUTION', { 'high': 1024, 'medium': 512, 'low': 256, 'very low': 128 }).name('quality').onFinishChange(initFramebuffers); gui.add(config, 'SIM_RESOLUTION', { '32': 32, '64': 64, '128': 128, '256': 256 }).name('sim resolution').onFinishChange(initFramebuffers); gui.add(config, 'DENSITY_DISSIPATION', 0, 4.0).name('density diffusion'); @@ -214,27 +214,27 @@ function startGUI () { gui.add(config, 'PRESSURE', 0.0, 1.0).name('pressure'); gui.add(config, 'CURL', 0, 50).name('vorticity').step(1); gui.add(config, 'SPLAT_RADIUS', 0.01, 1.0).name('splat radius'); - gui.add(config, 'SHADING').name('shading [s]').onFinishChange(updateKeywords).listen(); - gui.add(config, 'COLORFUL').name('colorful [c]').listen(); - gui.add(config, 'PAUSED').name('paused [p]').listen(); + gui.add(config, 'SHADING').name('shading').onFinishChange(updateKeywords); + gui.add(config, 'COLORFUL').name('colorful'); + gui.add(config, 'PAUSED').name('paused').listen(); gui.add({ fun: () => { splatStack.push(parseInt(Math.random() * 20) + 5); - } }, 'fun').name('Random splats [Space]'); + } }, 'fun').name('Random splats'); let bloomFolder = gui.addFolder('Bloom'); - bloomFolder.add(config, 'BLOOM').name('enabled [b]').onFinishChange(updateKeywords).listen(); + bloomFolder.add(config, 'BLOOM').name('enabled').onFinishChange(updateKeywords); bloomFolder.add(config, 'BLOOM_INTENSITY', 0.1, 2.0).name('intensity'); bloomFolder.add(config, 'BLOOM_THRESHOLD', 0.0, 1.0).name('threshold'); let sunraysFolder = gui.addFolder('Sunrays'); - sunraysFolder.add(config, 'SUNRAYS').name('enabled [r]').onFinishChange(updateKeywords).listen(); + sunraysFolder.add(config, 'SUNRAYS').name('enabled').onFinishChange(updateKeywords); sunraysFolder.add(config, 'SUNRAYS_WEIGHT', 0.3, 1.0).name('weight'); let captureFolder = gui.addFolder('Capture'); captureFolder.addColor(config, 'BACK_COLOR').name('background color'); captureFolder.add(config, 'TRANSPARENT').name('transparent'); - captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot [q]'); + captureFolder.add({ fun: captureScreenshot }, 'fun').name('take screenshot'); let github = gui.add({ fun : () => { window.open('https://github.com/PavelDoGreat/WebGL-Fluid-Simulation'); @@ -1519,16 +1519,6 @@ window.addEventListener('touchend', e => { window.addEventListener('keydown', e => { if (e.code === 'KeyP') config.PAUSED = !config.PAUSED; - if (e.code === 'KeyS') - config.SHADING = !config.SHADING; - if (e.code === 'KeyC') - config.COLORFUL = !config.COLORFUL; - if (e.code === 'KeyB') - config.BLOOM = !config.BLOOM; - if (e.code === 'KeyR') - config.SUNRAYS = !config.SUNRAYS; - if (e.code === 'KeyQ') - captureScreenshot() if (e.key === ' ') splatStack.push(parseInt(Math.random() * 20) + 5); }); From 06a187d22446a362d9707df524b60d8755d83a43 Mon Sep 17 00:00:00 2001 From: JeffG05 Date: Fri, 19 Mar 2021 09:42:35 +0000 Subject: [PATCH 4/5] Stops creating splats when paused --- script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/script.js b/script.js index d0db5af6..ce093375 100644 --- a/script.js +++ b/script.js @@ -1419,6 +1419,7 @@ function blur (target, temp, iterations) { } function splatPointer (pointer) { + if (config.PAUSED) return; let dx = pointer.deltaX * config.SPLAT_FORCE; let dy = pointer.deltaY * config.SPLAT_FORCE; splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color); From 1f51a743cf068a212c5978a7b6d8a9f79b89a4c7 Mon Sep 17 00:00:00 2001 From: JeffG05 Date: Fri, 19 Mar 2021 10:30:13 +0000 Subject: [PATCH 5/5] Added color control for splats --- script.js | 50 +++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 45 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index ce093375..b9098b16 100644 --- a/script.js +++ b/script.js @@ -82,6 +82,9 @@ let config = { SUNRAYS: true, SUNRAYS_RESOLUTION: 196, SUNRAYS_WEIGHT: 1.0, + COLOR_RED: true, + COLOR_GREEN: true, + COLOR_BLUE: true, } function pointerPrototype () { @@ -231,6 +234,11 @@ function startGUI () { sunraysFolder.add(config, 'SUNRAYS').name('enabled').onFinishChange(updateKeywords); sunraysFolder.add(config, 'SUNRAYS_WEIGHT', 0.3, 1.0).name('weight'); + let colorFolder = gui.addFolder('Colors'); + colorFolder.add(config, 'COLOR_RED').name('Reds') + colorFolder.add(config, 'COLOR_GREEN').name('Greens') + colorFolder.add(config, 'COLOR_BLUE').name('Blues') + let captureFolder = gui.addFolder('Capture'); captureFolder.addColor(config, 'BACK_COLOR').name('background color'); captureFolder.add(config, 'TRANSPARENT').name('transparent'); @@ -1564,11 +1572,43 @@ function correctDeltaY (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 chooseRed() { + var hue = (Math.random() * (1/3)) - (1/6) + if (hue >= 0) { + return hue + } else { + return 1 + hue + } + } + + function chooseGreen() { + return (Math.random() * (1/3)) + (1/6) + } + + function chooseBlue() { + return (Math.random() * (1/3)) + (1/2) + } + + let hues = [] + if (config.COLOR_RED) hues.push(chooseRed()) + if (config.COLOR_GREEN) hues.push(chooseGreen()) + if (config.COLOR_BLUE) hues.push(chooseBlue()) + if (hues.length == 0) { + let c = HSVtoRGB(0, 0, 1) + c.r *= 0.1; + c.g *= 0.1; + c.b *= 0.1; + return c; + } else { + let chosenHue = hues[Math.floor(Math.random() * hues.length)] + + let c = HSVtoRGB(chosenHue, 1.0, 1.0); + c.r *= 0.15; + c.g *= 0.15; + c.b *= 0.15; + return c; + } } function HSVtoRGB (h, s, v) {