From 5c19fcc7abca061e478613969ce3b81ba39de4f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hegyi=20=C3=81ron=20Ferenc?= <36823200+Rettend@users.noreply.github.com> Date: Tue, 23 Jul 2024 18:32:28 +0200 Subject: [PATCH] wip: test --- web/bg.js | 70 +++++++++++++++++++++++++- web/script.js | 132 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 200 insertions(+), 2 deletions(-) diff --git a/web/bg.js b/web/bg.js index 3671f86..3d0385f 100644 --- a/web/bg.js +++ b/web/bg.js @@ -1 +1,69 @@ -(()=>{var s="#dce0e8",l="#45475a",R=1*devicePixelRatio,i=document.getElementById("bg"),n=i.getContext("2d"),r=0,h=0,a="#dce0e8";function w(e,t){let o=window.devicePixelRatio||1;i.style.width=`${e}px`,i.style.height=`${t}px`,i.width=e*o,i.height=t*o}function f(){n.clearRect(0,0,i.width,i.height)}function m(e,t){let o=Math.sqrt((e-r)**2+(t-h)**2),d=100,v=R+2*devicePixelRatio*((d-Math.min(o,d))/d);n.beginPath(),n.arc(e,t,v,0,2*Math.PI,!1),n.fillStyle=a,n.fill()}function c(){f();for(let e=0;e{w(window.innerWidth,window.innerHeight),c()});window.addEventListener("mousemove",e=>{r=e.clientX*devicePixelRatio,h=e.clientY*devicePixelRatio,c()});if(window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)");a=e.matches?l:s,e.addEventListener("change",t=>{a=t.matches?l:s,c()})}w(window.innerWidth,window.innerHeight);c();})(); +const DOT_COLOR_LIGHT_MODE = "#dce0e8"; +const DOT_COLOR_DARK_MODE = "#45475a"; +const DOT_RADIUS = 1 * devicePixelRatio; + +const canvas = document.getElementById("bg"); +const ctx = canvas.getContext("2d"); + +let mouseX = 0; +let mouseY = 0; +let dotColor = "#dce0e8"; + +function resizeCanvas(width, height) { + const devicePixelRatio = window.devicePixelRatio || 1; + canvas.style.width = `${width}px`; + canvas.style.height = `${height}px`; + canvas.width = width * devicePixelRatio; + canvas.height = height * devicePixelRatio; +} + +function clearCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); +} + +function drawDot(x, y) { + const distance = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2); + const effectRadius = 100; + const radius = + DOT_RADIUS + + 2 * + devicePixelRatio * + ((effectRadius - Math.min(distance, effectRadius)) / effectRadius); + ctx.beginPath(); + ctx.arc(x, y, radius, 0, 2 * Math.PI, false); + ctx.fillStyle = dotColor; + ctx.fill(); +} + +function drawPattern() { + clearCanvas(); + for (let x = 0; x < canvas.width; x += 10 * devicePixelRatio) { + for (let y = 0; y < canvas.height; y += 10 * devicePixelRatio) { + drawDot(x, y); + } + } +} + +window.addEventListener("resize", () => { + resizeCanvas(window.innerWidth, window.innerHeight); + drawPattern(); +}); + +window.addEventListener("mousemove", (event) => { + mouseX = event.clientX * devicePixelRatio; + mouseY = event.clientY * devicePixelRatio; + drawPattern(); +}); + +if (window.matchMedia) { + const query = window.matchMedia("(prefers-color-scheme: dark)"); + dotColor = query.matches ? DOT_COLOR_DARK_MODE : DOT_COLOR_LIGHT_MODE; + + query.addEventListener("change", (event) => { + dotColor = event.matches ? DOT_COLOR_DARK_MODE : DOT_COLOR_LIGHT_MODE; + drawPattern(); + }); +} + +resizeCanvas(window.innerWidth, window.innerHeight); +drawPattern(); diff --git a/web/script.js b/web/script.js index 6ae68a9..76a91cc 100644 --- a/web/script.js +++ b/web/script.js @@ -1 +1,131 @@ -(()=>{var u=document.getElementById("play-btn"),r=document.getElementsByClassName("cat")[0],s=document.getElementById("volume-slider"),v=document.getElementById("current-volume-label"),p=new Audio("./audio/click.wav"),f=new Audio("./audio/click-release.wav"),m=5e3,a=20,A=6e4,i=!1,o=!1,e,l=100,t=0;function d(){e=new Audio(`./current.mp3?t=${Date.now()}`),e.onplay=()=>{i=!0,u.innerText="pause"},e.onpause=()=>{i=!1,t=0,u.innerText="play"},e.onended=()=>{t=0,d()},e.volume=0,e.play(),y(),setTimeout(()=>{S()},A-m)}function I(){e.pause(),e.volume=0,t=0}function y(){o=!0;let n=l/(m/a),c=setInterval(()=>{t+=n,t>=l?(clearInterval(c),t=l,o=!1):e.volume=t/100},a)}function S(){o=!0;let n=l/(m/a),c=setInterval(()=>{t-=n,t<=0?(clearInterval(c),t=0,o=!1):e.volume=t/100},a)}function g(){let n=0;setInterval(()=>{n===3?n=0:n+=1,r.src=`./images/cat-${n}.png`},500)}u.onmousedown=()=>{p.play(),document.addEventListener("mouseup",()=>{f.play()},{once:!0})};u.onclick=()=>{i?I():d()};s.oninput=()=>{l=s.value,v.textContent=`${l}%`,!o&&e&&(e.volume=l/100,t=l)};s.value=100;g();})(); +const playBtn = document.getElementById("play-btn"); +const catImg = document.getElementsByClassName("cat")[0]; +const volumeSlider = document.getElementById("volume-slider"); +const currentVolumeLabel = document.getElementById("current-volume-label"); +// const clickAudio = new Audio("./audio/click.wav"); +// const clickReleaseAudio = new Audio("./audio/click-release.wav"); +const clickAudio = new Audio(); +const clickReleaseAudio = new Audio(); + +const CROSSFADE_DURATION_MS = 5000; +const CROSSFADE_INTERVAL_MS = 20; +const AUDIO_DURATION_MS = 60000; + +let isPlaying = false; +let isFading = false; +let currentAudio; +let maxVolume = 100; +let currentVolume = 0; + +function playAudio() { + // add a random query parameter at the end to prevent browser caching + currentAudio = new Audio(`./current.mp3?t=${Date.now()}`); + currentAudio.onplay = () => { + isPlaying = true; + playBtn.innerText = "pause"; + }; + currentAudio.onpause = () => { + isPlaying = false; + currentVolume = 0; + playBtn.innerText = "play"; + }; + currentAudio.onended = () => { + currentVolume = 0; + playAudio(); + }; + currentAudio.volume = 0; + + currentAudio.play(); + + fadeIn(); + setTimeout(() => { + fadeOut(); + }, AUDIO_DURATION_MS - CROSSFADE_DURATION_MS); +} + +function pauseAudio() { + currentAudio.pause(); + currentAudio.volume = 0; + currentVolume = 0; +} + +function fadeIn() { + isFading = true; + + // volume ranges from 0 to 100, this determines by how much the volume number + // should be incremented at every step of the fade in + const volumeStep = + maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS); + const handle = setInterval(() => { + currentVolume += volumeStep; + if (currentVolume >= maxVolume) { + clearInterval(handle); + currentVolume = maxVolume; + isFading = false; + } else { + currentAudio.volume = currentVolume / 100; + } + }, CROSSFADE_INTERVAL_MS); +} + +function fadeOut() { + isFading = true; + + // volume ranges from 0 to 100, this determines by how much the volume number + // should be decremented at every step of the fade out + const volumeStep = + maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS); + const handle = setInterval(() => { + currentVolume -= volumeStep; + if (currentVolume <= 0) { + clearInterval(handle); + currentVolume = 0; + isFading = false; + } else { + currentAudio.volume = currentVolume / 100; + } + }, CROSSFADE_INTERVAL_MS); +} + +function animateCat() { + let current = 0; + setInterval(() => { + if (current === 3) { + current = 0; + } else { + current += 1; + } + catImg.src = `./images/cat-${current}.png`; + }, 500); +} + +playBtn.onmousedown = () => { + clickAudio.play(); + document.addEventListener( + "mouseup", + () => { + clickReleaseAudio.play(); + }, + { once: true }, + ); +}; + +playBtn.onclick = () => { + if (isPlaying) { + pauseAudio(); + } else { + playAudio(); + } +}; + +volumeSlider.oninput = () => { + maxVolume = volumeSlider.value; + currentVolumeLabel.textContent = `${maxVolume}%`; + if (!isFading && currentAudio) { + currentAudio.volume = maxVolume / 100; + currentVolume = maxVolume; + } +}; + +volumeSlider.value = 100; +animateCat();