added random rectangles, does not work correctly yet

animation/index.html

@@ -20,6 +20,7 @@
         <li><a href="../button/">Button</a></li>
         <li><a class="active" href="../animation/">Animation</a></li>
         <li><a href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div id="container">
         <div class="content">

button/index.html

@@ -21,6 +21,7 @@
         <li><a class="active" href="../button/">Button</a></li>
         <li><a href="../animation/">Animation</a></li>
         <li><a href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div id="container" class="content">
     </div>

canvas/index.html

@@ -21,6 +21,7 @@
         <li><a href="../button/">Button</a></li>
         <li><a href="../animation/">Animation</a></li>
         <li><a href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div id="container">
         <img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />

css/random-rectangles.css

@@ -0,0 +1,8 @@
+#container {
+    position: relative;
+}
+
+.carre {
+    position: absolute;
+    background-color: #f67280;
+}

edit-image/index.html

@@ -22,6 +22,7 @@
         <li><a href="../button/">Button</a></li>
         <li><a href="../animation/">Animation</a></li>
         <li><a class="active" href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div id="container">
         <div class="content">

faker/index.html

@@ -21,6 +21,7 @@
         <li><a href="../button/">Button</a></li>
         <li><a href="../animation/">Animation</a></li>
         <li><a href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div class="container">
         <div class="content">

index.html

@@ -19,6 +19,7 @@
         <li><a href="../button/">Button</a></li>
         <li><a href="../animation/">Animation</a></li>
         <li><a href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div class="container">
         <div class="content">

js/random-rect.js

@@ -0,0 +1,119 @@
+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;
+}

random-rectangles/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+    <head>
+        <title>Random Rectangles - Lucien Cartier-Tilet</title>
+        <meta name="author" content="Lucien Cartier-Tilet" />
+        <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
+        <link rel="stylesheet" type="text/css" href="../css/style.css" />
+        <link rel="stylesheet" href="../css/random-rectangles.css" type="text/css" />
+        <script src="../js/random-rect.js"></script>
+
+    </head>
+
+    <body>
+        <ul class="navbar" id="navbar">
+            <li><a href="../">Home</a></li>
+            <li><a href="../square/">Square</a></li>
+            <li><a href="../faker/">Faker</a></li>
+            <li><a href="../canvas/">Canvas</a></li>
+            <li><a href="../button/">Button</a></li>
+            <li><a href="../animation/">Animation</a></li>
+            <li><a href="../edit-image/">Édition d’Image</a></li>
+            <li><a class="active" href="../random-rectangles/" >Rectangles aléatoires</a></li>
+        </ul>
+        <div id="container">
+
+        </div>
+    </body>
+
+</html>

square/index.html

@@ -21,6 +21,7 @@
         <li><a href="../button/">Button</a></li>
         <li><a href="../animation/">Animation</a></li>
         <li><a href="../edit-image/">Édition d’Image</a></li>
+        <li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
     </ul>
     <div id="container">
         <div class="content">