const basicSize = 75;
const tableSize = basicSize + 5;

const canvas = document.createElement("canvas");
canvas.width = canvas.height = basicSize;
const canvas2D = canvas.getContext("2d", { alpha: false, willReadFrequently: true });
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const cosTable = new Float32Array(tableSize);
const sinTable = new Float32Array(tableSize);

const pixelSpacing = 10;
const presentationTilt = 2;

canvas2D.imageSmoothingEnabled = false;
canvas2D.fillStyle = "#00000020";
canvas2D.strokeStyle = "#ffffff03";

let wavePower, rippleStrength, locationFromCenter, frequency, rippleDuration, waveHeight, waveStyles;
let halfCanvasWidth, halfCanvasHeight;
let isIsoPixelsInitialized = false;

// Color mapping
const namedColors = {
    baseColor: "#0000FF",
    lighter1: "#3333FF",
    lighter2: "#6666FF",
    lighter3: "#9999FF",
    lighter4: "#CCCCCC",
    white: "#FFFFFF"
};

randomizeValues();

canvas2D.lineWidth = wavePower;

const tau = Math.PI * rippleStrength;
halfCanvasWidth = canvasWidth / locationFromCenter, halfCanvasHeight = canvasHeight / locationFromCenter;
const isoPixels = new Array(canvasWidth * canvasHeight);
const isos = document.getElementById("isos");
const fragment = document.createDocumentFragment();

function computeCanvasCenters() {
    halfCanvasWidth = canvasWidth / locationFromCenter;
    halfCanvasHeight = canvasHeight / locationFromCenter;
}
function updateIsoPixelPosition() {
    for (let x = 0; x < canvasWidth; x++) {
        for (let y = 0; y < canvasHeight; y++) {
            const isoPixel = isoPixels[canvasWidth * y + x];
            const xx = x * pixelSpacing;
            const yy = y * pixelSpacing;
            isoPixel.setAttribute("y", (isoPixel.oy = (xx + yy) / presentationTilt));
        }
    }
}
function randomizeValues() {
    // Tuned values for desired animation effects
    wavePower = getRandomInt(3, 5);
    rippleStrength = getRandomInt(1, 2);
    locationFromCenter = getRandomInt(2, 3);
    frequency = [30, 40, 50][getRandomInt(0, 3)];
    rippleDuration = [0.75, 1, 1.25][getRandomInt(0, 3)];
    waveStyles = getRandomInt(2, 3);

    computeCanvasCenters();
    waveHeight = -1.25

    const base = getRandomColor();
    namedColors.baseColor = rgbToHex(base.r, base.g, base.b);
    const contrastColor = getContrastColor(namedColors.baseColor, 0.7);

    const increment = 50;
    const lighter1Offset = increment; // 50
    const lighter2Offset = lighter1Offset + increment; // 100
    const lighter3Offset = lighter2Offset + increment; // 150
    const lighter4Offset = lighter3Offset + increment; // 200

    namedColors.lighter1 = rgbToHex(lightenColor(base, lighter1Offset).r, lightenColor(base, lighter1Offset).g, lightenColor(base, lighter1Offset).b);
    namedColors.lighter2 = rgbToHex(lightenColor(base, lighter2Offset).r, lightenColor(base, lighter2Offset).g, lightenColor(base, lighter2Offset).b);
    namedColors.lighter3 = rgbToHex(lightenColor(base, lighter3Offset).r, lightenColor(base, lighter3Offset).g, lightenColor(base, lighter3Offset).b);
    namedColors.lighter4 = rgbToHex(lightenColor(base, lighter4Offset).r, lightenColor(base, lighter4Offset).g, lightenColor(base, lighter4Offset).b);

    console.log(`wavePower: ${wavePower}, pixelSpacing: ${pixelSpacing}, rippleStrength: ${rippleStrength}, locationFromCenter: ${locationFromCenter}, presentationTilt: ${presentationTilt}, frequency: ${frequency}, rippleDuration: ${rippleDuration}, waveHeight: ${waveHeight}, waveStyles: ${waveStyles}`);

    document.body.style.backgroundColor = contrastColor;
}
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

// creates the pixels inside the animation area
for (let x = 0; x < canvasWidth; x++) {
    for (let y = 0; y < canvasHeight; y++) {
        const isoPixel = document.createElementNS("http://www.w3.org/2000/svg", "use");
        isoPixel.setAttribute('visibility', 'hidden');
        const xx = x * pixelSpacing;
        const yy = y * pixelSpacing;
        isoPixel.setAttribute("href", "#isobar");
        isoPixel.setAttribute("x", xx - yy);
        isoPixel.setAttribute("y", (isoPixel.oy = (xx + yy) / presentationTilt));
        fragment.appendChild(isoPixel);
        isoPixels[canvasWidth * y + x] = isoPixel;
    }
}
isos.appendChild(fragment);
isIsoPixelsInitialized = true;

// animation area
for (let i = 0; i < tableSize; i++) {
    const angle = i * tau / frequency;
    cosTable[i] = Math.cos(angle);
    sinTable[i] = Math.sin(angle);
}
let aIndex = 0;

function update() {
    canvas2D.fillRect(0, 0, canvasWidth, canvasHeight);

    let radius = 0;
    canvas2D.beginPath();
    canvas2D.moveTo(halfCanvasWidth, halfCanvasHeight);
    for (let i = 0; i < tableSize; i++) {
        radius += rippleDuration;
        const angleIndex = (aIndex + i) % tableSize;
        canvas2D.lineTo(
            halfCanvasWidth + radius * cosTable[angleIndex],
            halfCanvasHeight + radius * sinTable[angleIndex]
        );
    }
    canvas2D.stroke();
}

let a = 0;
for (let i = 0; i < 30; i++) {
    update();
    aIndex = (aIndex - 1 + tableSize) % tableSize;
}

// Colors
function getRandomColor() {
    return {
        r: getRandomInt(0, 255),
        g: getRandomInt(0, 255),
        b: getRandomInt(0, 255)
    };
}
function lightenColor(color, factor) {
    return {
        r: Math.min(color.r + factor, 255),
        g: Math.min(color.g + factor, 255),
        b: Math.min(color.b + factor, 255)
    };
}
function rgbToHex(r, g, b) {
    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}
function getContrastColor(hex, darken) {
    hex = hex.replace('#', '');

    let r = parseInt(hex.substring(0, 2), 16);
    let g = parseInt(hex.substring(2, 4), 16);
    let b = parseInt(hex.substring(4, 6), 16);

    r = Math.floor(r * darken);
    g = Math.floor(g * darken);
    b = Math.floor(b * darken);

    return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase();
}
function generateColorMap(colors) {
    const yLimit = 14;
    const yRange = yLimit;
    const valuesPerColor = Math.ceil(yRange / colors.length);
    const generatedMap = {};

    let yStart = 0;
    colors.forEach(color => {
        const yValuesForColor = [];
        for (let i = 0; i < valuesPerColor && yStart <= yLimit; i++) {
            yValuesForColor.push(yStart);
            yStart++;
        }
        generatedMap[color] = yValuesForColor;
    });

    return generatedMap;
}
function getColorByPosition(y, CH) {
    if (y < CH * 0.2) return namedColors.baseColor;
    if (y < CH * 0.4) return namedColors.lighter1;
    if (y < CH * 0.6) return namedColors.lighter2;
    if (y < CH * 0.8) return namedColors.lighter3;
    return namedColors.lighter4; // fallback color
}

// Animation
const transformations = [];
function render(isAnimated = true, baseColor) {
    update();
    aIndex = (aIndex - 1 + tableSize) % tableSize;

    const imgdata = canvas2D.getImageData(0, 0, canvasWidth, canvasHeight).data;
    const len = imgdata.length / 4;
    const transformations = [];
    const heightValues = new Set(); // to record unique height values

    if (isAnimated) {
		for (let i = 0; i < len; i++) {
			const height = imgdata[i * waveStyles];
			heightValues.add(height);
	
			const staticDotHeight = 255; // identified value for static dot max height
			const heightThreshold = 2; // change this value based on your needs
			if (height >= staticDotHeight - heightThreshold && height <= staticDotHeight + heightThreshold) {
				const isoPixel = isoPixels[i];
				if (isoPixel.getAttribute('visibility') === 'hidden') {
					isoPixel.setAttribute('visibility', 'visible');
					setTimeout(() => {
						isoPixel.setAttribute('visibility', 'hidden');
					}, 5000);  // makes the isopixel hidden again after 5 seconds
				}
				continue;
			}
	
			isoPixels[i].setAttribute('visibility', 'visible');
			const ny = Math.round(height * waveHeight);
	
			if (ny !== isoPixels[i].py) {
				transformations.push({ elem: isoPixels[i], y: ny });
			}
		}

        transformations.forEach(({ elem, y }) => {
            elem.style.transform = `translateY(${y}px)`;
            
            const color = baseColor || getColorByPosition(-y, canvasHeight);
            elem.setAttribute("color", color);
            elem.py = y;
        });
    } else if (baseColor) {
        for (let i = 0; i < len; i++) {
            isoPixels[i].style.fill = baseColor;
        }
        return false;
    }

    requestAnimationFrame(init);
}
function init() {
    render(true);
}

setInterval(function() { randomizeValues(); }, 10000);

init();