const scrollRevealOption = {
    distance: "50px",
    origin: "bottom",
    duration: 1000,
};

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


function omg(start, end, v) {
    return v/(end-start);
}

ScrollReveal().reveal(".links", {
    duration: 1000,
    delay: 2000,
});

ScrollReveal().reveal(".bg", {
    duration: 1000,
    delay: 1000,
});

ScrollReveal().reveal(".name", {
    duration: 1000,
    delay: 2000,
});
ScrollReveal().reveal(".art", {
    duration: 500,
    delay: 2000,
});


let col = "#a58cac"

ctx.fillStyle = col;

let step = 70

let mouseposx = 0, mouseposy = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // console.log(omg(0, canvas.width ,mouseposx));
    for (let y = 0; y < canvas.height+20; y+=step) {
        for (let x = 0; x < canvas.width+20; x+=step) {
            ctx.fillRect(x-(omg(0, canvas.width ,mouseposx)*20), y-(omg(0, canvas.height ,mouseposy)*20), 1, 19);
        }
        for (let x = 0; x < canvas.width; x+=step) {
            ctx.fillRect(x-(omg(0, canvas.width ,mouseposx)*20), y+step-(omg(0, canvas.height ,mouseposy)*20), 19, 1);
        }
    }
}

window.addEventListener("mousemove", function (ev) {
    window.requestAnimationFrame(animate)
    mouseposx = ev.x
    mouseposy = ev.y
})

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
  

document.querySelectorAll(".l").forEach(el => {
    el.addEventListener("mouseover", () => {
        let col = getRandomColor();
        el.style.color = col;
        el.style.textShadow = `0 0 12px ${col}`
        // setTimeout(() => {
        //     el.style.color = "#a58cac"
        //     el.style.textShadow = ``
        // }, 1000)
    })
    el.addEventListener("mouseout", () => {
        setTimeout(() => {
            el.style.color = "#a58cac"
            el.style.textShadow = ``
        }, 1000)
    })
})

window.requestAnimationFrame(animate)