let canvas = document.getElementById("info");
let ctx = canvas.getContext("2d");

// Give canvas the area
// a = b = c ==> b = c; a = b;
let height = canvas.height = window.innerHeight;
let width = canvas.width = window.innerWidth;

let name = "Your Text Here";

let particles = [];

// Particles config
let config = {
    maxParticleSize: 7,
    minParticleSize: 2,
    particleSpeed: 100,
    // Give specific colors
    colors: ["#004455", "#468966", "#FFF0A5", "#FFB03B", "#006666", "#B64926", "#8E2800", "#FFFFCC"] 
};

const getHexColorVariation = () => {
    // Hex opacity values from 0-100% (with difference of 5)
    // [ "00", "0D", "1A", "26", "33", "40", "4D", "59", "66", "73", "80", "8C", "99", "A6", "B3", "BF", "CC", "D9", "E6", "F2", "FF" ]
    let hexOpacityValue = [ "FF" ];
    let randomOpacity = hexOpacityValue[ Math.floor(Math.random() * hexOpacityValue.length) ]
    return "#" + randomOpacity + "000000".replace(/0/g, function () {return (Math.round(Math.random() * 16)).toString(16);})
}

// Create a particle constructor

// ES5
// A constructor is used to initialize an object ( Hence when called, this constructor defines "this" as an instance of itself )
// Don't use arrow function ( Arrow functions do not have their own "this" )
/**
 
 const Particle = function (x, y) {
     this.target = {
         x: x,
         y: y
        }; // co-ordinates to match the target data
        this.x = Math.random() * width; // X co-ordinate
        this.y = Math.random() * height; // Y co-ordinate
        this.r = Math.random() * config.maxParticleSize; // radius
        this.c = getHexColorVariation(); // color
        // this.c = config.colors[Math.floor(Math.random()*6)];
        this.vx = 0;   // X velocity 
        this.vy = 0; // Y velocity
    }
    
    Particle.prototype.draw = function () {
        // Move the randomly generated particles in the proper direction to form the text
        // Target co-ordinate - current co-ordinate => total distance to move + in which direction
        this.vx = (this.target.x - this.x) / config.particleSpeed; // specify the speed
        this.vy = (this.target.y - this.y) / config.particleSpeed;
        
        this.x += this.vx;
        this.y += this.vy;
        
        ctx.fillStyle = this.c;
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 2 * Math.PI);
        ctx.fill();
    }
    
*/

// ES6 Classes

class Particle {
    constructor(x, y) {
        this.target = {
            x: x,
            y: y
        }; // co-ordinates to match the target data
        this.x = Math.random() * width; // X co-ordinate
        this.y = Math.random() * height; // Y co-ordinate
        this.r = Math.random() * (config.maxParticleSize - config.minParticleSize) + config.minParticleSize; // radius
        // this.c = getHexColorVariation(); // color
        this.c = config.colors[Math.floor(Math.random()*6)];
        this.vx = 0;   // X velocity 
        this.vy = 0; // Y velocity
    }
    draw() {
        // Move the randomly generated particles in the proper direction to form the text
        // Target co-ordinate - current co-ordinate => total distance to move + in which direction
        this.vx = (this.target.x - this.x) / config.particleSpeed; // specify the speed
        this.vy = (this.target.y - this.y) / config.particleSpeed;
        // console.log(this.target.x, this.x, this.r, this.c)

        this.x += this.vx * 2;
        this.y += this.vy * 2;

        ctx.fillStyle = this.c;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        ctx.fill();
    }
}

// Adjust size
/**
 * 
 * @param {String} value 
 * @param {String} fontFamily 
 */
const fitTextOnCanvas = (value, fontFamily) =>
    measureValueBinaryMethod(value, fontFamily, 0, width, width)

/**
 * 
 * @param {String} value // The text value 
 * @param {String} fontFamily // Font-family of the text
 * @param {Integer} min // Minimum text size
 * @param {Integer} max // Maximum text size
 * @param {Integer} desiredWidth // Width to fit the text
 */
const measureValueBinaryMethod = (value, fontFamily, min, max, desiredWidth) => {
    if(max - min < 1) {
        return min;
    }
    let interval = min + ((max - min) / 2); // Find half interval
    let fontSize;
    if(value.length < 4) {
        fontSize = interval / 2
    } else {
        fontSize = interval
    }
    ctx.font = "bold " + fontSize + "px " + fontFamily;
    // Returns a TextMetrics object containing the width of the text, in pixels
    let measuredTextWidth = ctx.measureText(value).width;
    let size;
    if(measuredTextWidth > desiredWidth) {
        size = measureValueBinaryMethod(value, fontFamily, min, interval, desiredWidth)
    } else {
        size = measureValueBinaryMethod(value, fontFamily, interval, max, desiredWidth)
    }
    return size;
}


ctx.textBaseline = "middle";
ctx.textAlign = "center";
fitTextOnCanvas(name, "sans-serif");

const init = () => {


    // This part must be inside the function so that each Particle instance can get ctx info
    ctx.clearRect(0, 0, width, height);

    // Get something to take as a reference to build the particles
    // For image, use ctx.drawImage()
    ctx.fillText(name, width / 2, height / 2, width);
    // fillText(val, x, y, maxWidth) ==> This will squeeze the text to fit the maxWidth

    let imageData = ctx.getImageData(0, 0, width, height);
    // imageData is an object containing width, height of image in pixels and data
    let data = imageData.data// get pixel data

    // particles.push(new Particle(12, 12))
    // console.log(particles[ 0 ])

    // Generate random x and y co-ordinates 
    // TO generate the particles inside the canvas imageData only, we can use imageData.width or imageData.height in the loop condition
    for(let i = 0;i < width;i += Math.round(width / 100)) {
        // using height messes up the amount
        for(let j = 0;j < height;j += Math.round(height / 50)) {

            // The data property returns a 'Uint8ClampedArray' which is accessed to look at the raw pixel data; each pixel is represented by 4 1-byte values (red, green, blue,  alpha i.e. "RGBA" format). 
            // Each component is assigned a consecutive index within the array, with the top left pixel's red component being at index 0 within the array.
            // Pixels then proceed from left to right, then downward, throughout the array.

            // The Uint8ClampedArray contains height × width × 4 bytes of data, with index values ranging from 0 to (height×width×4)-1.

            // Get the pixels from the text/image to draw the particles
            let pix = (j * width + i) * 4  // each pixel = 4 unit of RGBA value, so multiply by 4
            // Note that this pix is for the whole canvas not just the text/image. To get only the pixels for the text, we need to check if the imageData.data[pixel] has no transparent/rgba=0 and other unnecessary noise colors
            if(data[ pix + 3 ] > 0) { // skip the next 3 bytes (4 bytes constitute same pixels)
                // console.log("data", data[ 2888 ], pix, name)

                particles.push(new Particle(i, j))
            }

            // console.log(particles.length)
        }
    }

}
const render = () => {
    requestAnimationFrame(render);
    ctx.clearRect(0, 0, width, height);
    for(var i = 0;i < particles.length;i++) {
        particles[ i ].draw();
    }
};

const replay = () => {
    ctx.clearRect(0, 0, width, height);
    particles = [];
    init();
}

init();
requestAnimationFrame(render);