137 lines
3.6 KiB
TypeScript
137 lines
3.6 KiB
TypeScript
import backwalkgeorge from "/backwalkgeorge.jpg";
|
|
import georgetoilet from "/georgetoilet.jpg";
|
|
import klinefloor from "/klinefloor.jpg";
|
|
import klinemirror from "/klinemirror.jpg";
|
|
import klineoutside from "/klineoutside.jpg";
|
|
import klinetrain from "/klinetrain.jpg";
|
|
import sashaklineburrito from "/sashaklineburrito.jpg";
|
|
import sashaklinecar from "/sashaklinecar.jpg";
|
|
import sunsetkline from "/sunsetkline.jpg";
|
|
import georgerasp from "/georgerasp.gif";
|
|
import sunsetfourteenth from "/14thstsunrise.gif";
|
|
import solderkitty from "/solderkitty.jpg";
|
|
import ducklings from "/ducklings.gif";
|
|
import fieldnotes from "/fieldnotes.gif";
|
|
import lamp from "/lamp.gif";
|
|
import ohio from "/ohio.jpg";
|
|
import heron from "/heron.jpg";
|
|
import flowers from "/flowers.jpg";
|
|
import mirror from "/mirror.jpg";
|
|
|
|
let background = document.getElementById("background")!;
|
|
|
|
let prefersReducedMotion = window.matchMedia(
|
|
"(prefers-reduced-motion: reduce)",
|
|
);
|
|
|
|
let setImages = () => {
|
|
let images: string[] = [];
|
|
if (prefersReducedMotion.matches) {
|
|
images = [
|
|
backwalkgeorge,
|
|
georgetoilet,
|
|
klinefloor,
|
|
klinemirror,
|
|
klineoutside,
|
|
klinetrain,
|
|
sashaklineburrito,
|
|
sashaklinecar,
|
|
sunsetkline,
|
|
// georgerasp,
|
|
// sunsetfourteenth,
|
|
solderkitty,
|
|
// ducklings,
|
|
fieldnotes,
|
|
// lamp,
|
|
ohio,
|
|
heron,
|
|
flowers,
|
|
mirror,
|
|
];
|
|
} else {
|
|
images = [
|
|
backwalkgeorge,
|
|
georgetoilet,
|
|
klinefloor,
|
|
klinemirror,
|
|
klineoutside,
|
|
klinetrain,
|
|
sashaklineburrito,
|
|
sashaklinecar,
|
|
sunsetkline,
|
|
georgerasp,
|
|
sunsetfourteenth,
|
|
solderkitty,
|
|
ducklings,
|
|
fieldnotes,
|
|
lamp,
|
|
ohio,
|
|
heron,
|
|
flowers,
|
|
mirror,
|
|
];
|
|
}
|
|
const randn_bm = (mean = 0, stdev = 0.4) => {
|
|
const u = 1 - Math.random();
|
|
const v = Math.random();
|
|
const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
|
return z * stdev + mean;
|
|
};
|
|
|
|
const randNums = (count: number, minDistance: number): number[] => {
|
|
const numbers: number[] = [];
|
|
|
|
function isFarEnough(num: number): boolean {
|
|
for (const n of numbers) {
|
|
if (Math.abs(num - n) < minDistance) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
while (numbers.length < count) {
|
|
const newNumber = randn_bm();
|
|
if (isFarEnough(newNumber)) {
|
|
numbers.push(newNumber);
|
|
}
|
|
}
|
|
|
|
return numbers;
|
|
};
|
|
|
|
const lefts = randNums(images.length, 0.05);
|
|
const tops = randNums(images.length, 0.05);
|
|
for (let index in images) {
|
|
let img = document.createElement("img");
|
|
img.setAttribute("src", images[index]);
|
|
// let left = randn_bm();
|
|
// let top = randn_bm();
|
|
let left = lefts[index];
|
|
let top = tops[index];
|
|
let z = (Math.abs(left) + Math.abs(top)) / 2;
|
|
let range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
|
|
img.style.setProperty(
|
|
"left",
|
|
`${left * range.x + window.innerWidth / 2}px`,
|
|
);
|
|
img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`);
|
|
img.style.setProperty("--translate-z", `${z * 3000}px`);
|
|
img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`);
|
|
background.append(img);
|
|
}
|
|
};
|
|
|
|
const root = document.documentElement;
|
|
|
|
const onMove = (ev: MouseEvent) => {
|
|
let rotateY = `${(ev.clientX - window.innerWidth / 2) * 0.001}deg`;
|
|
let rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.001}deg`;
|
|
root.style.setProperty("--rotate-x", rotateX);
|
|
root.style.setProperty("--rotate-y", rotateY);
|
|
};
|
|
|
|
document.addEventListener("mousemove", onMove);
|
|
|
|
setImages();
|