added random rectangles, does not work correctly yet

2018-11-22 12:02:02 +01:00
parent a5532aecb7
commit 294e686b4f
10 changed files with 166 additions and 0 deletions
--- a/js/random-rect.js
+++ b/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;
+}