Tweak DM fountain

Fix simulation radius Adjust hints
raceconditionrunning · Feb 12, 2024 · 603eb7f · 603eb7f
1 parent 1aae9b7
commit 603eb7f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/js/fountain/fountainToy.js b/js/fountain/fountainToy.js
@@ -1,4 +1,4 @@
-class Sprite {
+class AudioSprite {
     constructor(settingsObj) {
         this.src = settingsObj.src;
         this.samples = settingsObj.sprite;
@@ -47,6 +47,7 @@ export let FountainToy = rootUrl => p => {
     let glintShader
     let baseWaterShader
     let simRes = 1024
+    let radiusPercentage = .4775
     let jetsTexture
     let sounds
     let startStamp
@@ -60,7 +61,7 @@ export let FountainToy = rootUrl => p => {
         glintShader = p.loadShader(`${rootUrl}/js/fountain/ripple.vert`, `${rootUrl}/js/fountain/glint.frag`);
         //baseWaterShader = p.loadShader(`${rootUrl}/js/fountain/ripple.vert`, `${rootUrl}/js/fountain/flowNoise.frag`);
 
-        sounds = new Sprite({
+        sounds = new AudioSprite({
             src: [`${rootUrl}/img/dm24/la-fille-aux-cheveux-de-lin.mp3`],
             sprite: {
                 note1: [0, 2400],
@@ -99,7 +100,7 @@ export let FountainToy = rootUrl => p => {
             return
         }
         // Only allow mouse presses inside the circle
-        if ((p.mouseX - .5 * width) ** 2 + (p.mouseY - .5 * height) ** 2 > (.5 * width) ** 2) {
+        if ((p.mouseX - radiusPercentage * width) ** 2 + (p.mouseY - radiusPercentage * height) ** 2 > (radiusPercentage * width) ** 2) {
             return;
         }
         if (currentNote === 5) {
@@ -131,13 +132,25 @@ export let FountainToy = rootUrl => p => {
                     currentNote = 0
                 })
             } else {
-                document.getAnimations().forEach((anim) => {
-                    if (!anim.effect.target.classList.contains('orbit')) {
-                        return
+                const delays = [0, 1800, 2000, 2200]
+                for (let pulsing of document.getElementsByClassName("pulse")) {
+                    if (pulsing.getAnimations().length > 0) {
+                        continue
                     }
-                    anim.cancel();
-                    anim.play();
-                });
+                    // Get index in the parent of this element
+                    const index = parseInt(pulsing.attributes.getNamedItem("data-n").value)
+                    const startTarget = (delays[index] + 200) / 3500.
+                    pulsing.animate([
+                        {opacity: 1, offset: startTarget - 200 / 3500.},
+                        {opacity: .1, offset: startTarget},
+                        {opacity: .1, offset: .90},
+                        {opacity: 1, offset: 1}
+                    ], {
+                        duration: 3000,
+                        iterations: 1
+                    })
+                }
+
                 currentNote = 0
             }
             deltaBuffer = []
@@ -170,6 +183,7 @@ export let FountainToy = rootUrl => p => {
         rippleShader.setUniform("time", Date.now() / 1000.0 - startStamp);
         rippleShader.setUniform("dampening", dampening);
         rippleShader.setUniform("resolution", [simRes, simRes]);
+        rippleShader.setUniform("radius", simRes * radiusPercentage);
         rippleShader.setUniform("mouse", [p.mouseX / width, 1.0 - (p.mouseY / height), p.mouseIsPressed && p.mouseButton === p.LEFT])
         p.rect(0, 0, simRes, -simRes);
         activeBuffer.end()
@@ -180,6 +194,7 @@ export let FountainToy = rootUrl => p => {
         p.shader(glintShader)
         glintShader.setUniform("data", activeBuffer);
         glintShader.setUniform("resolution", [simRes, simRes]);
+        glintShader.setUniform("radius", simRes * radiusPercentage)
         p.rect(0, 0, simRes, -simRes)
         outBuffer.end()
 

diff --git a/js/fountain/glint.frag b/js/fountain/glint.frag
@@ -3,7 +3,7 @@
 precision highp float;
 uniform sampler2D data;
 uniform vec2 resolution;
-
+uniform float radius; //pixels
 out vec4 outColor;
 
 void main() {
@@ -15,7 +15,7 @@ void main() {
     outColor = vec4(1) * pow(max(0.0, dot(normal, normalize(vec3(-3, 20, 3)))), 1.0);
     outColor = 1.0 - outColor;
     // Circular fountain boundary
-    if (length(uv - vec2(0.5,0.5)) > 0.485) {
+    if (length(uv - vec2(0.5,0.5)) > radius / resolution.x) {
         //outColor = vec4(uv, 0.0,0.0);
         outColor = vec4(0.0);
         return;

diff --git a/js/fountain/ripple.frag b/js/fountain/ripple.frag
@@ -3,6 +3,7 @@
 precision highp float;
 uniform sampler2D previous;
 uniform sampler2D jets;
+uniform float radius;
 uniform float dampening;
 uniform vec2 resolution;
 uniform vec3 mouse;
@@ -173,7 +174,7 @@ void main() {
     float right = texture(previous, uv + vec2(1.0 / resolution.x, 0)).r;
 
     // Circular fountain boundary
-    if (length(uv - vec2(0.5,0.5)) > 0.49) {
+    if (length(uv - vec2(0.5,0.5)) > radius / resolution.x) {
         //outColor = vec4(uv, 0.0,0.0);
         outColor = vec4(0.0);
         return;

diff --git a/pages/drumheller-marathon-24.html b/pages/drumheller-marathon-24.html
@@ -296,20 +296,23 @@
     .orbit {
         opacity: 0;
         animation: fade-in 1s ease forwards, orbit 60s linear infinite;
-        animation-delay: 0.5s;
         transform-style: preserve-3d;
     }
 
+    .orbit.one {
+        animation-delay: .5s, 0s;
+    }
+
     .orbit.two {
-        animation-delay: 2.3s;
+        animation-delay: 2.3s, 0s;
     }
 
     .orbit.three {
-        animation-delay: 2.5s;
+        animation-delay: 2.5s, 0s;
     }
 
     .orbit.four {
-        animation-delay: 2.7s;
+        animation-delay: 2.7s, 0s;
     }
 
     .rotation-offset {
@@ -530,10 +533,10 @@
         <img src="{{ site.baseurl }}/img/dm24/basin.svg" alt="" class="toy-overlay">
         <div class="interactive toy-overlay clickable-circle"></div>
         <div class="ring">
-            <div class="dot one orbit"><div class="rotation-offset"><span></span></div></div>
-            <div class="dot two orbit"><div class="rotation-offset"><span></span></div></div>
-            <div class="dot three orbit"><div class="rotation-offset"><span></span></div></div>
-            <div class="dot four orbit"><div class="rotation-offset"><span></span></div></div>
+            <div class="dot one orbit"><div class="rotation-offset"><span class="pulse" data-n="0"></span></div></div>
+            <div class="dot two orbit"><div class="rotation-offset"><span class="pulse" data-n="1"></span></div></div>
+            <div class="dot three orbit"><div class="rotation-offset"><span class="pulse" data-n="2"></span></div></div>
+            <div class="dot four orbit"><div class="rotation-offset"><span class="pulse" data-n="3"></span></div></div>
         </div>
         <div id="underlay-gradient"></div>
     </div>