aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--hg.css9
-rw-r--r--index.html1
-rw-r--r--player.js71
3 files changed, 79 insertions, 2 deletions
diff --git a/hg.css b/hg.css
index 578d6a4..78ebd24 100644
--- a/hg.css
+++ b/hg.css
@@ -335,3 +335,12 @@ canvas {
left: 0;
margin-left: 5px;
}
+
+#warning {
+ text-align: center;
+ font-size: 20px;
+ color: red;
+ font-weight: bold;
+ border: 2px solid red;
+ margin-top: 10px;
+}
diff --git a/index.html b/index.html
index 353acc5..98bc7ef 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,7 @@
clicking the history link on the player)
</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>
</div>
</div>
diff --git a/player.js b/player.js
index 30e7f1d..e9724ad 100644
--- a/player.js
+++ b/player.js
@@ -10,7 +10,9 @@
let ovr = document.querySelector(".OVR");
let fullScreenBtn = document.querySelector(".fullscreen");
let errorEl = document.querySelector(".ERRORS");
+ let currentEffectIndex = 0;
const modalEl = document.getElementById("intro-modal");
+
// const uploadInfoEl = document.getElementById("upload-info");
const fileUploadEl = document.getElementById("file-upload");
let volume = 1;
@@ -137,6 +139,10 @@
break;
case "x":
toggleEverything();
+ break;
+ case "e":
+ rotateHydraEffect();
+ break;
}
});
@@ -379,8 +385,48 @@ https://retrowave.ru/${musicData.streamUrl}
// requestAnimationFrame(renderCodeFx);
// }
- function initHydra() {
- try {
+ const oscRotate = () => {
+ 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)
.modulateScale(osc(8).rotate(Math.sin(time)), 0.5)
.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)
.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) {
console.error("Hydra initialization failed:", error);
showErrors(