phundrak
/
univ.phundrak.fr
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added random rectangles, does not work correctly yet

This commit is contained in:
Phuntsok Drak-pa 2018-11-22 12:02:02 +01:00
parent a5532aecb7
commit 294e686b4f
No known key found for this signature in database
GPG Key ID: 9CB34B6827C66D22
10 changed files with 166 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
animation/index.html
View File

@ -20,6 +20,7 @@
<li><a href="../button/">Button</a></li>
<li><a class="active" href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div id="container">
<div class="content">

1
button/index.html
View File

@ -21,6 +21,7 @@
<li><a class="active" href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div id="container" class="content">
</div>

1
canvas/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div id="container">
<img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />

8
css/random-rectangles.css Normal file
View File

@ -0,0 +1,8 @@
#container {
position: relative;
}
.carre {
position: absolute;
background-color: #f67280;
}

1
edit-image/index.html
View File

@ -22,6 +22,7 @@
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a class="active" href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div id="container">
<div class="content">

1
faker/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div class="container">
<div class="content">

1
index.html
View File

@ -19,6 +19,7 @@
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div class="container">
<div class="content">

119
js/random-rect.js Normal file
View File

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

32
random-rectangles/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Random Rectangles - Lucien Cartier-Tilet</title>
<meta name="author" content="Lucien Cartier-Tilet" />
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" href="../css/random-rectangles.css" type="text/css" />
<script src="../js/random-rect.js"></script>
</head>
<body>
<ul class="navbar" id="navbar">
<li><a href="../">Home</a></li>
<li><a href="../square/">Square</a></li>
<li><a href="../faker/">Faker</a></li>
<li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a class="active" href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div id="container">
</div>
</body>
</html>

1
square/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
<li><a href="../random-rectangles/" >Rectangles aléatoires</a></li>
</ul>
<div id="container">
<div class="content">