Interesting webpage background animation idea.

Kristjan Robam <[email protected]> Mon, 21 Dec 2020 10:58:21 -0800 (PST)

Newsgroups	alt.comp.lang.javascript
Message-ID	<[email protected]>

<html>
<body style="background-color:black;">
<canvas id="canvas" width="600" height="600"></canvas>

<script>
function precise(x) {
  return Number.parseFloat(x).toPrecision(2);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();

img.src = "pict.jpeg"; 

var i=0;
var ii=precise(Math.random()*360);    
var count=0;
function draw() {
    if(count>10) {
       count=0;
       i=-360+2*precise(Math.random()*360);    
       ii-360+2*precise(Math.random()*360);      
    }
    count++;
    var move=0;
    if(i>360) i=0;
    if(ii>360) ii=0;
    if(i<-361) i=0;
    if(ii<-361) ii=0;
    
    if(ii-i<23) {
       i=i+1-Math.round(Math.random()*2);
       move=1;
    } else if(ii-i>23) {
       i=i+1-Math.round(Math.random()*2);
       move=1;
    } else {
       i=-360+2*precise(Math.random()*360);    
       ii-360+2*precise(Math.random()*360);      
    }
    if(move==1) {
      ctx.clearRect(0, 0, canvas.width*1.5, canvas.height*1.5);   
      ctx.save();
      ctx.translate(canvas.width/2,canvas.height/2);
      ctx.rotate(i*Math.PI/180);
      ctx.drawImage(img,-img.width/2,-img.width/2);
      ctx.restore();
    }
}

img.onload = function(){

   setInterval(function(){ draw(); }, 1);

}
</script>

</body>
</html>


Kristjan Robam