Feature Improvement
* Adds sample Hydra Effects * Adds Option to Rotate Hydra Effects * Adds Warning for Strobing lights
This commit is contained in:
9
hg.css
9
hg.css
@@ -335,3 +335,12 @@ canvas {
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#warning {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 2px solid red;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -38,6 +38,7 @@
|
|||||||
clicking the history link on the player)
|
clicking the history link on the player)
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-5">All the music is fetched from retrowave.ru</p>
|
<p class="mt-5">All the music is fetched from retrowave.ru</p>
|
||||||
|
<div id="warning">⚠️ WARNING: This application contains strobing/flashing lights</div>
|
||||||
<button class="modal-close modal-exit" id="initButton">X</button>
|
<button class="modal-close modal-exit" id="initButton">X</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
71
player.js
71
player.js
@@ -10,7 +10,9 @@
|
|||||||
let ovr = document.querySelector(".OVR");
|
let ovr = document.querySelector(".OVR");
|
||||||
let fullScreenBtn = document.querySelector(".fullscreen");
|
let fullScreenBtn = document.querySelector(".fullscreen");
|
||||||
let errorEl = document.querySelector(".ERRORS");
|
let errorEl = document.querySelector(".ERRORS");
|
||||||
|
let currentEffectIndex = 0;
|
||||||
const modalEl = document.getElementById("intro-modal");
|
const modalEl = document.getElementById("intro-modal");
|
||||||
|
|
||||||
// const uploadInfoEl = document.getElementById("upload-info");
|
// const uploadInfoEl = document.getElementById("upload-info");
|
||||||
const fileUploadEl = document.getElementById("file-upload");
|
const fileUploadEl = document.getElementById("file-upload");
|
||||||
let volume = 1;
|
let volume = 1;
|
||||||
@@ -137,6 +139,10 @@
|
|||||||
break;
|
break;
|
||||||
case "x":
|
case "x":
|
||||||
toggleEverything();
|
toggleEverything();
|
||||||
|
break;
|
||||||
|
case "e":
|
||||||
|
rotateHydraEffect();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -379,8 +385,48 @@ https://retrowave.ru/${musicData.streamUrl}
|
|||||||
// requestAnimationFrame(renderCodeFx);
|
// requestAnimationFrame(renderCodeFx);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
function initHydra() {
|
const oscRotate = () => {
|
||||||
try {
|
solid(0, 0).out();
|
||||||
|
setTimeout(() => {
|
||||||
|
osc(10).rotate(0.5).diff(osc(200)).out();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const rainbowWebcam = () => {
|
||||||
|
solid(0, 0).out();
|
||||||
|
setTimeout(() => {
|
||||||
|
s0.initCam();
|
||||||
|
src(s0).out(o0);
|
||||||
|
osc(10, 0.2, 0.8).diff(o0).out(o1);
|
||||||
|
render(o1);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const waveyzz = () => {
|
||||||
|
solid(0, 0).out();
|
||||||
|
setTimeout(() => {
|
||||||
|
osc(60, -0.015, 0.3)
|
||||||
|
.diff(osc(60, 0.08).rotate(Math.PI / 2))
|
||||||
|
.modulateScale(
|
||||||
|
noise(3.5, 0.25).modulateScale(
|
||||||
|
osc(15).rotate(() => Math.sin(time / 2))
|
||||||
|
),
|
||||||
|
0.6
|
||||||
|
)
|
||||||
|
.color(1, 0.5, 0.4)
|
||||||
|
.contrast(1.4)
|
||||||
|
.add(src(o0).modulate(o0, 0.04), 0.6)
|
||||||
|
.invert()
|
||||||
|
.brightness(0.1)
|
||||||
|
.contrast(1.2)
|
||||||
|
.modulateScale(osc(2), -0.2)
|
||||||
|
.out();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const vernoi = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
solid(0, 0).out();
|
||||||
voronoi(350, 0.15)
|
voronoi(350, 0.15)
|
||||||
.modulateScale(osc(8).rotate(Math.sin(time)), 0.5)
|
.modulateScale(osc(8).rotate(Math.sin(time)), 0.5)
|
||||||
.thresh(0.8)
|
.thresh(0.8)
|
||||||
@@ -395,6 +441,27 @@ https://retrowave.ru/${musicData.streamUrl}
|
|||||||
)
|
)
|
||||||
.brightness([-0.02, -0.17].smooth().fast(0.5)) //.modulate(o0, () => a.fft[1] * .2)
|
.brightness([-0.02, -0.17].smooth().fast(0.5)) //.modulate(o0, () => a.fft[1] * .2)
|
||||||
.out();
|
.out();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const hydraEffects = [vernoi, waveyzz, oscRotate];
|
||||||
|
|
||||||
|
function rotateHydraEffect() {
|
||||||
|
try {
|
||||||
|
hydraEffects[currentEffectIndex]();
|
||||||
|
currentEffectIndex = (currentEffectIndex + 1) % hydraEffects.length;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error applying random Hydra effect:", error);
|
||||||
|
showErrors(
|
||||||
|
"Failed to apply random Hydra effect. Please check your browser compatibility or try again later."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initHydra() {
|
||||||
|
try {
|
||||||
|
hydraEffects[0]();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Hydra initialization failed:", error);
|
console.error("Hydra initialization failed:", error);
|
||||||
showErrors(
|
showErrors(
|
||||||
|
|||||||
Reference in New Issue
Block a user