<!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:consolas;
}
#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:consolas;
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<div id="div2">number of circles: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()"></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 i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var nb=nb1.value;
var act1=0;
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;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
nb=nb1.value;
for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/10)*10);
recty.push(Math.round(Math.random()*wh/10)*10);
rectdx.push(Math.round(Math.random()*ww/10)*10);
rectdy.push(Math.round(Math.random()*wh/10)*10);
}
can1.width=ww;
can1.height=wh;
function cloud(){
div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh;
for(var i=0;i<nb;i++){
ctx.beginPath();
ctx.arc(rectx[i],recty[i],4,0,2*Math.PI);
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]+10;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-10;}
if(rectx[i]==rectdx[i]){rectdx[i]=Math.round(Math.random()*ww/10)*10;}
if(recty[i]<rectdy[i]){recty[i]=recty[i]+10;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-10;}
if(recty[i]==rectdy[i]){rectdy[i]=Math.round(Math.random()*wh/10)*10;}
}}
if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,50);
act1++;
}
count1();
</script>
</body>
</html>
