diff --git a/js/fountain/fountainToy.js b/js/fountain/fountainToy.js
index f083260..818ebe2 100644
--- 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
index 865dcad..6caa4dc 100644
--- 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
index 3150211..0463f78 100644
--- 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
index 0ec7671..2af2c48 100644
--- 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 @@
