<!DOCTYPE html>
<html>
<head>
<script src="/content/b6a50f5ba932b0ea7f652d9d28e59eced47bc6f8376c25e02d8b3457bb60ac8fi0"></script>
<meta charset="utf-8" />
<style>
body {
margin: 0;
}
main {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
height: 100vh;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 1px solid #000000;
border-top-color: rgb(255, 255, 255);
animation: spinner 1s linear infinite;
}
</style>
</head>
<body>
<div id="p5_loading" class="loadingclass">
<div class="spinner"></div>
</div>
<script>
let mag, text, emb, canvasWidth, canvasHeight, checkToReset;
let embQuadrants = [];
let pulseRates = [];
let pulsingStates = [false, false, false, false];
let resetFlags = [false, false, false, false];
let isMobile = false;
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
isMobile = true;
}
function preload() {
mag = loadImage(
"/content/f65f9d8d629b8656309f5e433ec545a4eae402a4146f4e6cf4fae692484a5450i0"
);
text = loadImage(
"/content/95e65af10bb160960c472b2b30d2c239a8e3e364286efec04a24a200c6843cd2i1"
);
emb = loadImage(
"/content/95e65af10bb160960c472b2b30d2c239a8e3e364286efec04a24a200c6843cd2i2"
);
}
function setup() {
sizeCalc();
createCanvas(canvasWidth, canvasHeight);
image(mag, 0, 0, canvasWidth, canvasHeight);
image(text, 0, 0, canvasWidth, canvasHeight);
image(emb, 0, 0, canvasWidth, canvasHeight);
document.body.style.backgroundImage =
"url('/content/95e65af10bb160960c472b2b30d2c239a8e3e364286efec04a24a200c6843cd2i0')";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundPosition = "center";
let embWidth = emb.width;
let embHeight = emb.height;
embQuadrants = [
emb.get(0, 0, embWidth / 2, embHeight / 2), // top left
emb.get(embWidth / 2, 0, embWidth / 2, embHeight / 2), // top right
emb.get(0, embHeight / 2, embWidth / 2, embHeight / 2), // bottom left
emb.get(embWidth / 2, embHeight / 2, embWidth / 2, embHeight / 2), // bottom right
];
for (let i = 0; i < 4; i++) {
pulseRates.push(random(0.02, 0.1)); // random rates
}
checkToReset = floor(random(60, 120));
frameRate(30);
shufflePulsingStates();
if (isMobile) {
noLoop();
}
}
function draw() {
if (!isMobile) {
clear();
noTint();
image(mag, 0, 0, canvasWidth, canvasHeight);
image(text, 0, 0, canvasWidth, canvasHeight);
image(emb, 0, 0, canvasWidth, canvasHeight);
for (let i = 0; i < embQuadrants.length; i++) {
let sinValue = sin(frameCount * pulseRates[i]);
let glowAlpha;
if (i < 3) {
glowAlpha = map(sinValue, -1, 1, 10, 255);
} else {
glowAlpha = map(sinValue, -1, 1, 70, 255);
}
if (pulsingStates[i]) {
tint(255, glowAlpha);
} else {
noTint();
}
if (i == 0) {
for (let j = 0; j < 10; j++) {
image(embQuadrants[i], 0, 0, canvasWidth / 2, canvasHeight / 2);
}
} else if (i == 1) {
for (let j = 0; j < 10; j++) {
image(
embQuadrants[i],
canvasWidth / 2,
0,
canvasWidth / 2,
canvasHeight / 2
);
}
} else if (i == 2) {
for (let j = 0; j < 10; j++) {
image(
embQuadrants[i],
0,
canvasHeight / 2,
canvasWidth / 2,
canvasHeight / 2
);
}
} else {
for (let j = 0; j < 2; j++) {
image(
embQuadrants[i],
canvasWidth / 2,
canvasHeight / 2,
canvasWidth / 2,
canvasHeight / 2
);
}
}
if (abs(sinValue) < 0.01) {
if (!resetFlags[i]) {
pulseRates[i] = random(0.02, 0.1);
resetFlags[i] = true;
if (frameCount > checkToReset) {
checkToReset = checkToReset + floor(random(60, 120));
let numIndicesToInvert = floor(random(1, 4));
let whichIndicesToInvert = [];
for (let j = 0; j < numIndicesToInvert; j++) {
let indiceToInvert = floor(random(0, 4));
while (whichIndicesToInvert.includes(indiceToInvert)) {
indiceToInvert = floor(random(0, 4));
}
whichIndicesToInvert.push(indiceToInvert);
}
for (let j = 0; j < whichIndicesToInvert.length; j++) {
pulsingStates[whichIndicesToInvert[j]] = !pulsingStates[whichIndicesToInvert[j]];
}
}
}
} else {
resetFlags[i] = false;
}
}
}
}
function shufflePulsingStates() {
pulsingStates.fill(false);
let indices = [0, 1, 2, 3];
shuffle(indices, true);
let numberToActivate = floor(random(2, 4));
for (let i = 0; i < numberToActivate; i++) {
pulsingStates[indices[i]] = true;
}
}
function sizeCalc() {
let originalWidth = 4800;
let originalHeight = 2700;
let aspectRatio = originalWidth / originalHeight;
let maxCanvasWidth = windowWidth;
let maxCanvasHeight = windowHeight;
canvasWidth = maxCanvasWidth;
canvasHeight = canvasWidth / aspectRatio;
if (canvasHeight > maxCanvasHeight) {
canvasHeight = maxCanvasHeight;
canvasWidth = canvasHeight * aspectRatio;
}
}
function windowResized() {
setup();
}
</script>
</body>
</html>