diff options
Diffstat (limited to 'player.js')
-rw-r--r-- | player.js | 27 |
1 files changed, 27 insertions, 0 deletions
@@ -10,6 +10,11 @@ // const uploadInfoEl = document.getElementById("upload-info"); const fileUploadEl = document.getElementById("file-upload"); let volume = 1; + let effectCanvas; + let starField; + let line3D; + const synthwaveColor = 0xff2975; + openDialog(); getMusic(); listenUploadFileChange(); @@ -49,6 +54,7 @@ document.getElementById("initButton")?.addEventListener("click", () => { modalEl.classList.remove("open"); playMusic(); + initCodef(); }); document.getElementById("history").addEventListener("click", () => { @@ -223,4 +229,25 @@ 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 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); + } })(); |