monkeygg2.github.io/js/loading-hexagon.js

// hexagons will be used as a separate theme later

function changeLoadingTip() {
    const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
    const element = document.getElementsByClassName("loading-tip")[0];

    element.textContent =  "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
}

changeLoadingTip();
$("#everything-else").hide();

let changeTip = setInterval(() => {
    changeLoadingTip();
}, 3000);

$(window).on("load", () => {
    $(".track").attr("stroke", "url(#grad2)");
    $(".worm1").hide();
    $(".worm2").hide();
    clearInterval(changeTip);

    $(".loading").fadeOut({
        duration: 300,
        complete: () => {
            setTimeout(() => {
                $("#everything-else").fadeIn({
                    duration: 500,
                    easing: "swing"
                }, 200);
                hexagonGrid();
            }, 100);
        }
    });
});

// PARTICLES
const cvs = document.getElementsByClassName('particles')[0];
const ctx = cvs.getContext('2d');

cvs.width = window.innerWidth;
cvs.height = window.innerHeight;

let particlesArray;

let mouse = {
    x: null,
    y: null,
    radius: 170
}

window.addEventListener('mousemove', function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
    mouse.radius = 170;
});

document.onmousemove = (function(_) {
    var onmousestop = function() {
        mouse.radius = 0;
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 10);
    };
})();


class Particle {
    constructor(x, y, directionX, directionY, size, color) {
        this.x = x;
        this.y = y;
        this.directionX = directionX;
        this.directionY = directionY;
        this.size = size;
        this.color = color;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
        ctx.fillStyle = '#a3f6fd';
        ctx.fill();
    }

    update() {
        if (this.x > cvs.width || this.x < 0) {
            this.directionX = -this.directionX;
        }

        if (this.y > cvs.height || this.y < 0) {
            this.directionY = -this.directionY;
        }

        let dx = mouse.x - this.x;
        let dy = mouse.y - this.y;
        let distance = Math.sqrt(dx * dx + dy * dy);
        if (distance < mouse.radius + this.size) {
            if (mouse.x < this.x && this.x < cvs.width - this.size * 10) {
                this.x += 10;
            }

            if (mouse.x > this.x && this.x > this.size * 10) {
                this.x -= 10;
            }

            if (mouse.y < this.y && this.y < cvs.height - this.size * 10) {
                this.y += 10;
            }

            if (mouse.y > this.y && this.y > this.size * 10) {
                this.y -= 10;
            }
        }
        this.x += this.directionX;
        this.y += this.directionY;

        this.draw();
    }
}

function init() {
    particlesArray = [];
    let numberOfParticles = (cvs.height * cvs.width) / 9000;
    for (let i = 0; i < numberOfParticles * 0.25; i++) {
        let size = (Math.random() * 35) + 1;
        let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
        let y = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
        let directionX = (Math.random() * 5) - 2.5;
        let directionY = (Math.random() * 5) - 2.5;
        let color = '#a3f6fd';
        particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
    }
}

function connect() {
    let opacityValue = 1;
    for (let i = 0; i < particlesArray.length; i++) {
        for (let j = i; j < particlesArray.length; j++) {
            let distance = ((particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x)) + ((particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y));

            if (distance < (cvs.width/ 7) * (cvs.height / 7)) {
                opacityValue = 1 - (distance / 20000);
                ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
                ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
                ctx.stroke();
            }
        }
    }
}

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, innerWidth, innerHeight);
    for (let i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update();
    }
    connect();
}

window.addEventListener('resize', function() {
    cvs.width = innerWidth;
    cvs.height = this.innerHeight;
    mouse.radius = 170;
    init();
});

window.addEventListener('mouseout', function() {
    mouse.x = undefined;
    mouse.y = undefined;
});

init();
animate();

// HEXAGON GRID
function hexagonGrid() {
  const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
  const CONTAINER = HEXAGON_GRID.parentNode;

  let wall = {
    width: CONTAINER.offsetWidth,
    height: CONTAINER.offsetHeight
  };

  let rowsNumber = Math.ceil(wall.height / 80);
  let columnsNumber = Math.ceil(wall.width / 100) + 1;

  HEXAGON_GRID.innerHTML = "";

  for (let i = 0; i < rowsNumber; i++) {
    let row = document.createElement("div");
    row.className = "row";
    HEXAGON_GRID.appendChild(row);
  }

  let rows = HEXAGON_GRID.querySelectorAll(".row");

  for (let i = 0; i < rows.length; i++) {
    for (let j = 0; j < columnsNumber; j++) {
      let hexagon = document.createElement("div");
      hexagon.className = "hexagon";
      rows[i].appendChild(hexagon);
    }
  }
}

hexagonGrid();

window.addEventListener('resize', function() {
  hexagonGrid();
});

// FPS METER
(function () {
  let previousTime = Date.now();
  let frames = 0;
  let refreshRate = 1000;

  let fpsMeter = document.createElement("div");
  fpsMeter.id = "fpsMeter";
  document.body.appendChild(fpsMeter);

  requestAnimationFrame(function loop() {
    const TIME = Date.now();
    frames++;
    if (TIME > previousTime + refreshRate) {
      let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
      previousTime = TIME;
      frames = 0;
      fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
    }
    requestAnimationFrame(loop);
  });

  fpsMeter.style.position = "fixed";
  fpsMeter.style.top = "25px";
  fpsMeter.style.right = "25px";
  fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
  fpsMeter.style.padding = "10px";
  fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
  fpsMeter.style.fontFamily = "Monospace";
  fpsMeter.style.fontSize = "24px";
  fpsMeter.style.zIndex = "10000";
})();