From 294e686b4f038874fbe2edd63ded01767179a834 Mon Sep 17 00:00:00 2001 From: Phuntsok Drak-pa Date: Thu, 22 Nov 2018 12:02:02 +0100 Subject: [PATCH] added random rectangles, does not work correctly yet --- animation/index.html | 1 + button/index.html | 1 + canvas/index.html | 1 + css/random-rectangles.css | 8 +++ edit-image/index.html | 1 + faker/index.html | 1 + index.html | 1 + js/random-rect.js | 119 +++++++++++++++++++++++++++++++++++ random-rectangles/index.html | 32 ++++++++++ square/index.html | 1 + 10 files changed, 166 insertions(+) create mode 100644 css/random-rectangles.css create mode 100644 js/random-rect.js create mode 100644 random-rectangles/index.html diff --git a/animation/index.html b/animation/index.html index d063e56..75aa7fc 100644 --- a/animation/index.html +++ b/animation/index.html @@ -20,6 +20,7 @@
  • Button
  • Animation
  • Édition d’Image
    • +
  • Rectangles aléatoires
    • diff --git a/button/index.html b/button/index.html index 88eb5ce..62e12ae 100644 --- a/button/index.html +++ b/button/index.html @@ -21,6 +21,7 @@
  • Button
  • Animation
  • Édition d’Image
    • +
  • Rectangles aléatoires
    • diff --git a/canvas/index.html b/canvas/index.html index e82d1fa..39f6c1b 100644 --- a/canvas/index.html +++ b/canvas/index.html @@ -21,6 +21,7 @@
  • Button
  • Animation
  • Édition d’Image
    • +
  • Rectangles aléatoires
    • Vue d’Ardèche 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 + + + + + + + + + + + + +
    + +
    + + + 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 @@
  • Button
  • Animation
  • Édition d’Image
    • +
  • Rectangles aléatoires