Randomize fullscreen gradient motion
This commit is contained in:
1 parent
3001267393
commit
ffdb159d57
1 file changed
+14
-6
@@ -37,6 +37,9 @@ function loadArtwork() {
|
||||
|
||||
function setPalette(next: AlbumPalette) {
|
||||
palette.value = next
|
||||
}
|
||||
|
||||
function randomizeMotion() {
|
||||
random = Array.from({ length: 2 }, () => Math.random() * Math.PI * 2)
|
||||
angleJitter = (Math.random() - 0.5) * 0.3
|
||||
flowParams = [
|
||||
@@ -47,6 +50,14 @@ function setPalette(next: AlbumPalette) {
|
||||
]
|
||||
}
|
||||
|
||||
function startAnimation() {
|
||||
cancelAnimationFrame(frame)
|
||||
startedAt = 0
|
||||
lastFrameAt = 0
|
||||
randomizeMotion()
|
||||
frame = requestAnimationFrame(draw)
|
||||
}
|
||||
|
||||
function gradientHash(x: number, y: number): [number, number] {
|
||||
const hash = (a: number, b: number, xScale: number, yScale: number) => {
|
||||
const value = Math.sin(a * xScale + b * yScale) * 43758.5453
|
||||
@@ -155,11 +166,8 @@ watch(() => props.src, loadArtwork)
|
||||
watch(
|
||||
() => props.active,
|
||||
(active) => {
|
||||
if (active) {
|
||||
startedAt = 0
|
||||
lastFrameAt = 0
|
||||
frame = requestAnimationFrame(draw)
|
||||
} else {
|
||||
if (active) startAnimation()
|
||||
else {
|
||||
cancelAnimationFrame(frame)
|
||||
}
|
||||
},
|
||||
@@ -167,7 +175,7 @@ watch(
|
||||
|
||||
onMounted(() => {
|
||||
loadArtwork()
|
||||
if (props.active) frame = requestAnimationFrame(draw)
|
||||
if (props.active) startAnimation()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
Reference in new issue
Block a user