diff --git a/css/random-rectangles.css b/css/random-rectangles.css
new file mode 100644
index 0000000..0353b20
--- /dev/null
+++ b/css/random-rectangles.css
@@ -0,0 +1,8 @@
+#container {
+ position: relative;
+}
+
+.carre {
+ position: absolute;
+ background-color: #f67280;
+}
diff --git a/edit-image/index.html b/edit-image/index.html
index 90eaf87..dcade41 100644
--- a/edit-image/index.html
+++ b/edit-image/index.html
@@ -22,6 +22,7 @@
Button
Animation
Édition d’Image
+ Rectangles aléatoires
diff --git a/faker/index.html b/faker/index.html
index ac49020..10b373f 100644
--- a/faker/index.html
+++ b/faker/index.html
@@ -21,6 +21,7 @@
Button
Animation
Édition d’Image
+ Rectangles aléatoires
diff --git a/index.html b/index.html
index 5ca5631..2ee41c4 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
Button
Animation
Édition d’Image
+ Rectangles aléatoires
diff --git a/js/random-rect.js b/js/random-rect.js
new file mode 100644
index 0000000..6bd45a7
--- /dev/null
+++ 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;
+}
diff --git a/random-rectangles/index.html b/random-rectangles/index.html
new file mode 100644
index 0000000..6eda26d
--- /dev/null
+++ b/random-rectangles/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+ Random Rectangles - Lucien Cartier-Tilet
+
+
+
+
+
+
+
+
+
+
+
+
+ Button
Animation
Édition d’Image
+ Rectangles aléatoires
+
+
+
+
+
diff --git a/square/index.html b/square/index.html
index e00b661..ac0bf7f 100644
--- a/square/index.html
+++ b/square/index.html
@@ -21,6 +21,7 @@