Skip to content

Commit

Permalink
Disable dots for users with reduced motion
Browse files Browse the repository at this point in the history
  • Loading branch information
@RiskoZoSlovenska
RiskoZoSlovenska committed Apr 18, 2024
1 parent 5b5d82d commit 3502b31
Showing 1 changed file with 70 additions and 62 deletions.
132 changes: 70 additions & 62 deletions files/assets/scripts/dots.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,99 +243,107 @@ function newRandomPoint() {
]
}

let mouseX = 0, mouseY = 0
document.addEventListener("mousemove", event => {
mouseX = event.clientX
mouseY = event.clientY
})

function startLoop() {
let mouseX = 0, mouseY = 0
document.addEventListener("mousemove", event => {
mouseX = event.clientX
mouseY = event.clientY
})


// == Rendering Loop == //
// == Rendering Loop == //

let cameraRotZ = deg(Math.atan2(ROT_HEIGHT, ROT_DIST))
let lookCamera = invertCFrame(orientationToCFrame(0, 0, -cameraRotZ, [0, 0, 0]))
let cameraRotZ = deg(Math.atan2(ROT_HEIGHT, ROT_DIST))
let lookCamera = invertCFrame(orientationToCFrame(0, 0, -cameraRotZ, [0, 0, 0]))

let curLookY = 0
let curLookZ = 0
let curLookY = 0
let curLookZ = 0

setInterval(() => {
if (Document.hidden) { return }
setInterval(() => {
if (Document.hidden) { return }

let angle = (performance.now() / 1000 * ROT_SPEED) % 360
let angle = (performance.now() / 1000 * ROT_SPEED) % 360

let cameraPosX = -Math.cos(rad(angle)) * ROT_DIST
let cameraPosY = ROT_HEIGHT
let cameraPosZ = -Math.sin(rad(angle)) * ROT_DIST
let cameraPosX = -Math.cos(rad(angle)) * ROT_DIST
let cameraPosY = ROT_HEIGHT
let cameraPosZ = -Math.sin(rad(angle)) * ROT_DIST

let cameraRotY = angle - 90
let camera = invertCFrame(orientationToCFrame(0, cameraRotY, 0, [cameraPosX, cameraPosY, cameraPosZ]))
let cameraRotY = angle - 90
let camera = invertCFrame(orientationToCFrame(0, cameraRotY, 0, [cameraPosX, cameraPosY, cameraPosZ]))

let screenWidth = document.documentElement.clientWidth
let screenHeight = document.documentElement.clientHeight
let screenWidth = document.documentElement.clientWidth
let screenHeight = document.documentElement.clientHeight

let newLookY = (1 - mouseX / screenWidth * 2) * LOOK_Y_RANGE
let newLookZ = (1 - mouseY / screenHeight * 2) * LOOK_Z_RANGE
let newLookY = (1 - mouseX / screenWidth * 2) * LOOK_Y_RANGE
let newLookZ = (1 - mouseY / screenHeight * 2) * LOOK_Z_RANGE

curLookY = lerp(curLookY, newLookY, LOOK_LERP_ALPHA)
curLookZ = lerp(curLookZ, newLookZ, LOOK_LERP_ALPHA)
curLookY = lerp(curLookY, newLookY, LOOK_LERP_ALPHA)
curLookZ = lerp(curLookZ, newLookZ, LOOK_LERP_ALPHA)

let lookOffset = invertCFrame(orientationToCFrame(0, curLookY, curLookZ, [0, 0, 0]))
let lookOffset = invertCFrame(orientationToCFrame(0, curLookY, curLookZ, [0, 0, 0]))

cameras = [camera, lookCamera, lookOffset]
cameras = [camera, lookCamera, lookOffset]

renderPoints()
}, 1/FPS * 1000)
renderPoints()
}, 1/FPS * 1000)


// == Point Animation Loop == //
// == Point Animation Loop == //

let fadingIn = []
let fadingOut = []
let fadingIn = []
let fadingOut = []

if (FADE_TIME >= MIN_LIFE_TIME) {
throw "fade time must be smaller than life time"
}
if (FADE_TIME >= MIN_LIFE_TIME) {
throw "fade time must be smaller than life time"
}

// Creation loop
setInterval(() => {
if (points.length >= MAX_POINTS) { return }
// Creation loop
setInterval(() => {
if (points.length >= MAX_POINTS) { return }

let point = newRandomPoint()
points.push(point)
fadingIn.push(point)
let point = newRandomPoint()
points.push(point)
fadingIn.push(point)

setTimeout(() => {
fadingOut.push(point)
}, randomInRange(MIN_LIFE_TIME, MAX_LIFE_TIME) * 1000);
setTimeout(() => {
fadingOut.push(point)
}, randomInRange(MIN_LIFE_TIME, MAX_LIFE_TIME) * 1000);

}, 1/POINT_RATE * 1000)
}, 1/POINT_RATE * 1000)

// Fading loop
let fadeStep = 1 / FADE_STEPS
setInterval(() => {
for (let i = fadingIn.length - 1; i >= 0; i--) {
let point = fadingIn[i]
// Fading loop
let fadeStep = 1 / FADE_STEPS
setInterval(() => {
for (let i = fadingIn.length - 1; i >= 0; i--) {
let point = fadingIn[i]

point[3] += fadeStep
point[3] += fadeStep

if (point[3] >= 1) { // Point is faded in
fadingIn.splice(i, 1)
if (point[3] >= 1) { // Point is faded in
fadingIn.splice(i, 1)
}
}
}

for (let i = fadingOut.length - 1; i >= 0; i--) {
let point = fadingOut[i]
for (let i = fadingOut.length - 1; i >= 0; i--) {
let point = fadingOut[i]

point[3] -= fadeStep * 1.01 // Fade out slightly faster to avoid getting stuck if fading both in and out (rare)
point[3] -= fadeStep * 1.01 // Fade out slightly faster to avoid getting stuck if fading both in and out (rare)

if (point[3] <= 0) { // Point has been faded out
fadingOut.splice(i, 1)
points.splice(points.indexOf(point), 1)
if (point[3] <= 0) { // Point has been faded out
fadingOut.splice(i, 1)
points.splice(points.indexOf(point), 1)
}
}
}
}, FADE_TIME / FADE_STEPS * 1000)
}, FADE_TIME / FADE_STEPS * 1000)

console.log("Dots initialized")
}

if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
console.log("Dots skipped")
} else {
startLoop()
}

console.log("Dots initialized")
}

0 comments on commit 3502b31

Please sign in to comment.