univ.phundrak.fr/js/random-rect.js

window.onload = main;

"use strict";

var minSize = 50,
    maxSize = 200,
    clientHeight = 0,
    posWidthMax = 0,
    posHeightMax = 0,
    navbarHeight = 0,
    rectangles = new Array();

function main() {
    var container = document.getElementById('container');
    posWidthMax = container.offsetWidth;
    clientHeight = document.documentElement.clientHeight;
    heightNavbar = document.getElementById('navbar').clientHeight;
    posHeightMax = clientHeight - navbarHeight;

    var generatedRect = 0,
        maxRect = 15;

    console.log("Max rect: " + maxRect);
    console.log("Min size: " + minSize);
    console.log("Max size: " + maxSize);
    console.log("Width position max: " + posWidthMax);
    console.log("Heigh position max: " + posHeightMax);
    console.log("Client height: " + clientHeight);

    while (generatedRect < maxRect) {
        let rect;
        do {
            rect = Rectangle.newRandomRectangle();
        } while(!rect.valid(rectangles));
        rectangles.push(rect);
        generatedRect += 1;
    }
    console.log("=== All rects generated! ===");

    for(var idx in rectangles) {
        let rect = rectangles[idx];
        console.log(rect);
        let rectDiv = document.createElement("div");
        rectDiv.style.marginTop = rect.posY + "px";
        rectDiv.style.marginLeft = rect.posX + "px";
        rectDiv.style.paddingTop = rect.height + "px";
        rectDiv.style.paddingLeft = rect.width + "px";
        rectDiv.style.backgroundColor = getRandomColor();
        rectDiv.className = "carre";
        container.appendChild(rectDiv);
    }
}

class Rectangle {
    constructor(posX, posY, width, height) {
        this.posX = posX;
        this.posY = posY;
        this.width = width;
        this.height = height + navbarHeight;
    }

    static newRandomRectangle() {
        return new Rectangle(generateRandomNumber(0, posWidthMax),
            generateRandomNumber(0, posHeightMax),
            generateRandomNumber(minSize, maxSize),
            generateRandomNumber(minSize, maxSize));
    }

    static pointInRectangle(posX, posY, rectangle) {
        console.log("posX: " + posX + "\tposY: " + posY);
        console.log(rectangle);
        return (posX >= rectangle.posX && posX <= rectangle.posX + rectangle.width &&
            posY >= rectangle.posY && posY <= rectangle.posY + rectangle.height);
    }

    overlaps(otherRectangle) {
        return Rectangle.pointInRectangle(this.posX,
                this.posY,
                otherRectangle) &&
            Rectangle.pointInRectangle(this.posX + this.width,
                this.posY,
                otherRectangle) &&
            Rectangle.pointInRectangle(this.posX,
                this.posY + this.height,
                otherRectangle) &&
            Rectangle.pointInRectangle(this.posX + this.width,
                this.posY + this.height,
                otherRectangle);
    }

    valid(otherRectangles) {
        if (this.posX + this.width > posWidthMax || this.posY + this.height > clientHeight) {
            return false;
        }
        for (let idx in otherRectangles) {
            console.log("Testing rectangle " + idx);
            if (this.overlaps(otherRectangles[idx])) {
                return false;
            }
        }
        return true;
    }
}

// function from https://medium.com/mindorks/creating-a-random-number-generator-in-javascript-5dfc6f7a3bee
function generateRandomNumber(min, max) {
    let random_number = Math.random() * (max - min) + min;
    return Math.floor(random_number);
}

// function from https://stackoverflow.com/questions/1484506/random-color-generator
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}