indrajith/retrowave-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove Codef

Browse Source 
Adds Hydra Vis
Expose Howler
This commit is contained in:
Indrajith K L
2024-04-06 04:31:08 +05:30
parent bd01be7001
commit 1f931bfb1f
2 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retrowave Player</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script src="https://unpkg.com/hydra-synth"></script>
<link rel="stylesheet" href="hg.css">
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
@@ -48,9 +49,9 @@
</div>
<div id="codef-canvas"></div>
<input id="file-upload" type="file" accept="application/json" />
<script src="libs/codef_core.js"></script>
<!-- <script src="libs/codef_core.js"></script>
<script src="libs/codef_starfield.js"></script>
<script src="libs/codef_3d.js"></script>
<script src="libs/codef_3d.js"></script> -->
<script src="player.js"></script>
</body>

60
player.js
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();
@@ -210,7 +213,7 @@
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()
}
})();