<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
overflow-y:scroll;
height:100%;
}
#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}
::-webkit-scrollbar{
width:0px;
}
#span1{
font-size:14px;
}
</style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">
number of squares: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()" onkeyup="count1()">
size: <input type="number" id="nb2" min="1" max="100" value="10" onmouseup="count1()" onkeyup="count1()">
refresh: <input type="checkbox" id="cle1" name="cle1">
</div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var nb2=document.getElementById("nb2");
var cle1=document.getElementById("cle1");
var i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var col1=[];
var sp1=1;
var results1=[];
var nb=nb1.value;
var act1=0;
var side=3;
var trio=0;
var mx=Math.round(ww/side)*side;
var my=Math.round(wh/side)*side;
function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
div1.height=wh;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
col1=[];
results1=[];
nb=nb1.value;
va2=nb2.value;
side=va2;
for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
col1.push("rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)");
results1.push(rectx[i]+" "+recty[i]+" "+col1[i]);
}
can1.width=ww;
can1.height=wh;
function cloud(){
results1=[];
for(var h=0;h<nb;h++){
results1.push(rectx[h]+" "+recty[h]+" "+col1[h]);
div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my+"<br><span id=\"span1\">"+results1.join("<br>")+"</span>";
}
if(cle1.checked){ctx.clearRect(0,0,ww,wh);}
trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
//ctx.arc(rectx[i],recty[i],Math.random()*side/2,0,2*Math.PI);
////ctx.arc(rectx[i],recty[i],side/2,0,2*Math.PI);
ctx.fillStyle=col1[i];
ctx.fillRect(rectx[i],recty[i],side,side);
/*ctx.lineWidth=2;
ctx.strokeStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
ctx.stroke();*/
//ctx.fillStyle="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*100)/100+")";
////ctx.fill();
if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/sp1;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/sp1;}
if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/sp1;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/sp1;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}
if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}
count1();
function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}
function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}
}
</script>
</body>
</html>
