Remove Codef

Adds Hydra Vis
Expose Howler
This commit is contained in:
2024-04-06 04:31:08 +05:30
parent bd01be7001
commit 1f931bfb1f
2 changed files with 42 additions and 25 deletions

View File

@@ -52,9 +52,11 @@
}
document.getElementById("initButton")?.addEventListener("click", () => {
var hydra = new Hydra({ detectAudio: false })
modalEl.classList.remove("open");
playMusic();
initCodef();
initHydra();
// initCodef();
});
document.getElementById("history").addEventListener("click", () => {
@@ -149,6 +151,7 @@
});
setVolume();
isPlaying = true;
window.hw = howlerInstance
updateInfo(currentTrack);
@@ -158,14 +161,14 @@
function volumeDown() {
console.log(volume);
if(volume>0.1) {
if (volume > 0.1) {
volume -= 0.1;
}
setVolume();
}
function volumeUp() {
if(volume<1) {
if (volume < 1) {
volume += 0.1;
}
setVolume();
@@ -206,11 +209,11 @@
function downloadHistory() {
const historyArray = getHistory();
let element = document.createElement("a");
let playListData = '#EXTM3U';
let playListData = '#EXTM3U';
historyArray.forEach((musicData) => {
playListData = `${playListData}
#EXTINF:${Math.ceil(musicData.duration/1000)}, ${musicData.title}
#EXTINF:${Math.ceil(musicData.duration / 1000)}, ${musicData.title}
https://retrowave.ru/${musicData.streamUrl}
`;
});
@@ -230,24 +233,37 @@ https://retrowave.ru/${musicData.streamUrl}
document.body.removeChild(element);
}
function initCodef() {
const width = window.innerWidth;
const height = window.innerHeight;
effectCanvas = new canvas(width, height, 'codef-canvas');
starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0);
line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 );
line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
renderCodeFx();
}
// function initCodef() {
// const width = window.innerWidth;
// const height = window.innerHeight;
// effectCanvas = new canvas(width, height, 'codef-canvas');
// starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0);
// line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 );
// line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
// line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
// renderCodeFx();
// }
function renderCodeFx() {
effectCanvas.fill('#000000');
line3D.group.rotation.x+=0.01;
line3D.group.rotation.y+=0.02;
line3D.group.rotation.z+=0.04;
starField.draw();
line3D.draw();
requestAnimationFrame(renderCodeFx);
// function renderCodeFx() {
// effectCanvas.fill('#000000');
// line3D.group.rotation.x+=0.01;
// line3D.group.rotation.y+=0.02;
// line3D.group.rotation.z+=0.04;
// starField.draw();
// line3D.draw();
// requestAnimationFrame(renderCodeFx);
// }
function initHydra() {
// voronoi(350, 0.15)
// .modulateScale(osc(8).rotate(Math.sin(time)), .5)
// .thresh(.8)
// .modulateRotate(osc(7), .4)
// .thresh(.7)
// .diff(src(o0).scale(1.8))
// .modulateScale(osc(2).modulateRotate(o0, .74))
// .diff(src(o0).rotate([-.012, .01, -.002, 0]).scrollY(0, [-1 / 199800, 0].fast(0.7)))
// .brightness([-.02, -.17].smooth().fast(.5)).modulate(o0, () => a.fft[1] * .2)
// .out()
}
})();