157 lines
3.4 KiB
HTML
157 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
|
|
<style>
|
|
body{
|
|
background-color: #1f1e27;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#myCanvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#valuesForm {
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 300px;
|
|
text-align: center;
|
|
}
|
|
|
|
#valuesForm input, #valuesForm button {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 50px;
|
|
width: 50%;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: #71627a;
|
|
text-align: center;
|
|
outline: #71627a 2px solid;
|
|
border-radius: 2px;
|
|
padding: 5px;
|
|
font-size: 1.5em;
|
|
overflow: hidden;
|
|
transition: outline-offset 0.5s;
|
|
border: none;
|
|
font-family: monospace;
|
|
}
|
|
|
|
#valuesForm button:focus, #valuesForm button:hover, #valuesForm input:focus, #valuesForm input:hover {
|
|
transition: outline-offset 0.5s;
|
|
outline-offset: 10px;
|
|
}
|
|
|
|
#valuesForm h1 {
|
|
color: #71627a;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<form id="valuesForm">
|
|
<h1>STARS</h1>
|
|
<input type="text" id="amtInput" placeholder="Amount">
|
|
<input type="text" id="maxSizeInput" placeholder="Max Size">
|
|
<button type="submit">Redraw</button>
|
|
</form>
|
|
|
|
<canvas id="myCanvas"></canvas>
|
|
|
|
|
|
<script>
|
|
|
|
const form = document.getElementById("valuesForm");
|
|
form.addEventListener("submit", function(event)
|
|
{
|
|
event.preventDefault();
|
|
|
|
amount = document.getElementById("amtInput").value;
|
|
maxSize = document.getElementById("maxSizeInput").value;
|
|
|
|
Draw();
|
|
});
|
|
|
|
const c = document.getElementById("myCanvas");
|
|
const ctx = c.getContext("2d");
|
|
|
|
var amount = 2000;
|
|
var maxSize = 5;
|
|
var boundsX;
|
|
var boundsY;
|
|
|
|
function Setup()
|
|
{
|
|
c.width = window.innerWidth;
|
|
c.height = window.innerHeight;
|
|
boundsX = c.width;
|
|
boundsY = c.height;
|
|
}
|
|
|
|
function Draw()
|
|
{
|
|
Setup();
|
|
for (i=0; i<amount; i++)
|
|
{
|
|
size = rand(maxSize);
|
|
MakeRect(rand(boundsX), rand(boundsY), size, size);
|
|
}
|
|
}
|
|
|
|
function MakeRect(posX, posY, sizeX, sizeY)
|
|
{
|
|
ctx.beginPath();
|
|
ctx.fillStyle = "#71627a";
|
|
ctx.fillRect(posX, posY, sizeX, sizeY);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function rand(max)
|
|
{
|
|
return Math.floor(Math.random() * max);
|
|
}
|
|
|
|
function resize()
|
|
{
|
|
var canvas = document.getElementById('myCanvas');
|
|
var canvasRatio = canvas.height / canvas.width;
|
|
var windowRatio = window.innerHeight / window.innerWidth;
|
|
var width;
|
|
var height;
|
|
|
|
if (windowRatio < canvasRatio) {
|
|
height = window.innerHeight;
|
|
width = height / canvasRatio;
|
|
} else {
|
|
width = window.innerWidth;
|
|
height = width * canvasRatio;
|
|
}
|
|
|
|
canvas.style.width = width + 'px';
|
|
canvas.style.height = height + 'px';
|
|
|
|
Draw();
|
|
}
|
|
|
|
window.addEventListener('resize', resize, false);
|
|
|
|
Draw();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|