New Features
* Retrowave Styles (Partially AI generated)
This commit is contained in:
208
player.js
208
player.js
@@ -207,7 +207,7 @@
|
||||
showErrors(
|
||||
"Failed to fetch music. Please check your internet connection or try again later."
|
||||
);
|
||||
throw error; // rethrow the error to be caught in the catch block below
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -416,10 +416,34 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
// }
|
||||
|
||||
const oscRotate = () => {
|
||||
solid(0, 0).out();
|
||||
setTimeout(() => {
|
||||
osc(10).rotate(0.5).diff(osc(200)).out();
|
||||
});
|
||||
osc(15, 0.02, 0.8)
|
||||
.color(1.0, 0.16, 0.46) // Neon pink
|
||||
.rotate(0.3)
|
||||
.add(
|
||||
osc(30, 0.01, 0.6)
|
||||
.color(0.0, 1.0, 1.0) // Cyan
|
||||
.rotate(-0.2)
|
||||
.modulateRotate(osc(2), 0.5),
|
||||
0.4
|
||||
)
|
||||
.diff(
|
||||
osc(100, 0.005, 0.3)
|
||||
.color(0.8, 0.2, 1.0) // Purple
|
||||
.rotate(Math.PI / 3)
|
||||
)
|
||||
.modulateScale(osc(1, 0.1), 0.2)
|
||||
.add(
|
||||
shape(6, 0.8, 0.01)
|
||||
.color(0.0, 1.0, 1.0) // Cyan grid
|
||||
.rotate(() => time * 0.1)
|
||||
.scale(0.3),
|
||||
0.1
|
||||
)
|
||||
.contrast(1.8)
|
||||
.brightness(0.1)
|
||||
.out();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const rainbowWebcam = () => {
|
||||
@@ -433,49 +457,142 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
};
|
||||
|
||||
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
|
||||
osc(40, -0.01, 0.4)
|
||||
.color(1.0, 0.16, 0.46) // Neon pink
|
||||
.diff(
|
||||
osc(40, 0.05)
|
||||
.color(0.0, 1.0, 1.0) // Cyan
|
||||
.rotate(Math.PI / 2)
|
||||
)
|
||||
.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)
|
||||
.modulateScale(
|
||||
noise(2.5, 0.3).modulateScale(
|
||||
osc(10).rotate(() => Math.sin(time / 3))
|
||||
),
|
||||
0.4
|
||||
)
|
||||
.add(
|
||||
osc(80, 0.02, 0.1)
|
||||
.color(0.5, 0.0, 1.0) // Purple
|
||||
.rotate(Math.PI / 4),
|
||||
0.2
|
||||
)
|
||||
.contrast(2.0)
|
||||
.add(src(o0).modulate(o0, 0.03), 0.7)
|
||||
.modulateHue(osc(0.5, 0.1), 0.3)
|
||||
.brightness(0.15)
|
||||
.contrast(1.6)
|
||||
.modulateScale(osc(1.5), -0.15)
|
||||
.out();
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const vernoi = () => {
|
||||
setTimeout(() => {
|
||||
solid(0, 0).out();
|
||||
voronoi(350, 0.15)
|
||||
.modulateScale(osc(8).rotate(Math.sin(time)), 0.5)
|
||||
.thresh(0.8)
|
||||
.modulateRotate(osc(7), 0.4)
|
||||
.thresh(0.7)
|
||||
.diff(src(o0).scale(1.8))
|
||||
.modulateScale(osc(2).modulateRotate(o0, 0.74))
|
||||
.diff(
|
||||
src(o0)
|
||||
.rotate([-0.012, 0.01, -0.002, 0])
|
||||
.scrollY(0, [-1 / 199800, 0].fast(0.7))
|
||||
voronoi(25, 0.15)
|
||||
.color(1.0, 0.16, 0.46) // Neon pink
|
||||
.add(
|
||||
voronoi(15, 0.2)
|
||||
.color(0.0, 1.0, 1.0) // Cyan
|
||||
.modulateScale(osc(4), 0.2),
|
||||
0.6
|
||||
)
|
||||
.brightness([-0.02, -0.17].smooth().fast(0.5)) //.modulate(o0, () => a.fft[1] * .2)
|
||||
.add(
|
||||
voronoi(35, 0.1)
|
||||
.color(0.8, 0.2, 1.0) // Purple
|
||||
.modulateRotate(osc(1), 0.3),
|
||||
0.4
|
||||
)
|
||||
.modulateScale(osc(8), 0.3)
|
||||
.contrast(1.8)
|
||||
.brightness(0.15)
|
||||
.out();
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
|
||||
|
||||
const hydraEffects = [vernoi, waveyzz, oscRotate];
|
||||
const retroSun = () => {
|
||||
setTimeout(() => {
|
||||
shape(16, 0.6, 0.02)
|
||||
.color(1.0, 0.5, 0.0) // Orange/yellow sun
|
||||
.scale(0.8)
|
||||
.add(
|
||||
shape(8, 0.4, 0.05)
|
||||
.color(1.0, 0.16, 0.46) // Pink inner glow
|
||||
.scale(0.6),
|
||||
0.6
|
||||
)
|
||||
.add(
|
||||
osc(20, 0.01, 0.2)
|
||||
.color(0.0, 1.0, 1.0) // Cyan horizontal lines
|
||||
.rotate(Math.PI / 2),
|
||||
0.3
|
||||
)
|
||||
.modulateScale(
|
||||
osc(2, 0.1),
|
||||
0.1
|
||||
)
|
||||
.add(
|
||||
gradient(1.0)
|
||||
.color(0.2, 0.0, 0.4) // Dark purple gradient
|
||||
.rotate(Math.PI)
|
||||
.scale(2.0),
|
||||
0.4
|
||||
)
|
||||
.contrast(1.8)
|
||||
.brightness(0.15)
|
||||
.out();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const synthWave = () => {
|
||||
setTimeout(() => {
|
||||
// Animated synthwave with moving grid lines and pulsing elements
|
||||
osc(30, 0, 1)
|
||||
.thresh(0.9)
|
||||
.color(0.0, 1.0, 1.0) // Cyan horizontal lines
|
||||
.scrollY(() => time * 0.5) // Moving grid lines
|
||||
.add(
|
||||
gradient(0.5)
|
||||
.color(1.0, 0.16, 0.46) // Pink to black gradient
|
||||
.rotate(Math.PI)
|
||||
.scale(1.5)
|
||||
.modulateHue(osc(0.3, 0.1), 0.2), // Subtle hue shift
|
||||
0.7
|
||||
)
|
||||
.add(
|
||||
shape(3, 0.8, 0.1)
|
||||
.color(1.0, 0.5, 0.0) // Orange triangle/sun shape
|
||||
.scale(() => 0.3 + Math.sin(time * 2) * 0.05) // Pulsing size
|
||||
.repeatY(3, 0.3)
|
||||
.mult(
|
||||
osc(5, 0.1, 0.8)
|
||||
.color(0.8, 0.2, 1.0) // Purple modulation
|
||||
.rotate(() => time * 0.1) // Slow rotation
|
||||
),
|
||||
0.4
|
||||
)
|
||||
.add(
|
||||
osc(8, 0.01, 0.2)
|
||||
.color(0.0, 1.0, 1.0) // More cyan lines
|
||||
.thresh(0.8)
|
||||
.scrollY(() => -time * 0.3) // Counter-moving lines
|
||||
.mult(
|
||||
gradient(1.0)
|
||||
.color(0.2, 0.0, 0.4) // Dark purple fade
|
||||
.scale(2.0)
|
||||
.modulateScale(osc(1, 0.1), 0.1), // Breathing effect
|
||||
),
|
||||
0.3
|
||||
)
|
||||
.modulateHue(osc(0.1), 0.1) // Overall subtle color shift
|
||||
.contrast(2.2)
|
||||
.brightness(0.1)
|
||||
.out();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const hydraEffects = [vernoi, waveyzz, oscRotate, retroSun, synthWave];
|
||||
|
||||
function rotateHydraEffect() {
|
||||
try {
|
||||
@@ -515,7 +632,7 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
const line = document.createElement("div");
|
||||
line.className = "terminal-line";
|
||||
if (isCommand) {
|
||||
line.innerHTML = `<span style="color: #000000; font-weight: normal;">indrajith@retrowave:$ ${text}</span>`;
|
||||
line.innerHTML = `<span style="color: #ff2975; font-weight: bold; text-shadow: 0 0 5px rgba(255, 41, 117, 0.8);">indrajith@retrowave:$ ${text}</span>`;
|
||||
} else {
|
||||
line.textContent = text;
|
||||
}
|
||||
@@ -534,6 +651,7 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
switch (cmd) {
|
||||
case 'help':
|
||||
addTerminalLine('Available commands:');
|
||||
addTerminalLine('');
|
||||
addTerminalLine(' help - Show this help message');
|
||||
addTerminalLine(' play - Start/resume playback');
|
||||
addTerminalLine(' pause - Pause playback');
|
||||
@@ -541,8 +659,8 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
addTerminalLine(' volume [0-10] - Set volume (0-10)');
|
||||
addTerminalLine(' status - Show current track info');
|
||||
addTerminalLine(' history - Download playlist history');
|
||||
addTerminalLine(' effect [list|name] - Change/list visual effects');
|
||||
addTerminalLine(' fullscreen - Toggle fullscreen mode');
|
||||
addTerminalLine(' effect [list|name]- Change/list visual effects');
|
||||
addTerminalLine(' fullscreen - Toggle fullscreen (Desktop only)');
|
||||
addTerminalLine(' clear - Clear terminal');
|
||||
addTerminalLine(' exit - Close terminal');
|
||||
break;
|
||||
@@ -611,9 +729,11 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
if (args[1]) {
|
||||
if (args[1] === 'list') {
|
||||
addTerminalLine('Available effects:');
|
||||
addTerminalLine(' vernoi - Voronoi pattern effect');
|
||||
addTerminalLine(' waveyzz - Wave synthesis effect');
|
||||
addTerminalLine(' oscrotate - Oscillating rotation effect');
|
||||
addTerminalLine(' vernoi - Synthwave Voronoi patterns');
|
||||
addTerminalLine(' waveyzz - Neon wave synthesis');
|
||||
addTerminalLine(' oscrotate - Oscillating neon shapes');
|
||||
addTerminalLine(' retrosun - Retro sunset with grid');
|
||||
addTerminalLine(' synthwave - Basic synthwave pattern');
|
||||
addTerminalLine('Usage: effect <effect_name> or effect list');
|
||||
} else {
|
||||
const effectName = args[1].toLowerCase();
|
||||
@@ -629,6 +749,12 @@ https://retrowave.ru/${musicData.streamUrl}
|
||||
case 'oscrotate':
|
||||
effectIndex = 2;
|
||||
break;
|
||||
case 'retrosun':
|
||||
effectIndex = 3;
|
||||
break;
|
||||
case 'synthwave':
|
||||
effectIndex = 4;
|
||||
break;
|
||||
default:
|
||||
addTerminalLine(`Unknown effect: ${effectName}`);
|
||||
addTerminalLine('Type "effect list" to see available effects.');
|
||||
|
||||
Reference in New Issue
Block a user