120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
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;
|
|
}
|