aboutsummaryrefslogtreecommitdiff
path: root/player.js
diff options
context:
space:
mode:
Diffstat (limited to 'player.js')
-rw-r--r--player.js27
1 files changed, 27 insertions, 0 deletions
diff --git a/player.js b/player.js
index 47c2084..4659c38 100644
--- a/player.js
+++ b/player.js
@@ -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);
+ }
})();