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) {
|
function setPalette(next: AlbumPalette) {
|
||||||
palette.value = next
|
palette.value = next
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomizeMotion() {
|
||||||
random = Array.from({ length: 2 }, () => Math.random() * Math.PI * 2)
|
random = Array.from({ length: 2 }, () => Math.random() * Math.PI * 2)
|
||||||
angleJitter = (Math.random() - 0.5) * 0.3
|
angleJitter = (Math.random() - 0.5) * 0.3
|
||||||
flowParams = [
|
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] {
|
function gradientHash(x: number, y: number): [number, number] {
|
||||||
const hash = (a: number, b: number, xScale: number, yScale: number) => {
|
const hash = (a: number, b: number, xScale: number, yScale: number) => {
|
||||||
const value = Math.sin(a * xScale + b * yScale) * 43758.5453
|
const value = Math.sin(a * xScale + b * yScale) * 43758.5453
|
||||||
@@ -155,11 +166,8 @@ watch(() => props.src, loadArtwork)
|
|||||||
watch(
|
watch(
|
||||||
() => props.active,
|
() => props.active,
|
||||||
(active) => {
|
(active) => {
|
||||||
if (active) {
|
if (active) startAnimation()
|
||||||
startedAt = 0
|
else {
|
||||||
lastFrameAt = 0
|
|
||||||
frame = requestAnimationFrame(draw)
|
|
||||||
} else {
|
|
||||||
cancelAnimationFrame(frame)
|
cancelAnimationFrame(frame)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -167,7 +175,7 @@ watch(
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadArtwork()
|
loadArtwork()
|
||||||
if (props.active) frame = requestAnimationFrame(draw)
|
if (props.active) startAnimation()
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
|||||||
Reference in new issue
Block a user