univ.phundrak.fr/js/random-rect.js

120 lines
3.8 KiB
JavaScript
Raw Normal View History

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;
}