HTML Canvas Animation oscillation elliptical motion

Description

HTML Canvas Animation oscillation elliptical motion

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script> 
window.onload = function()//from  w  w  w  .  j av a2 s  .  co  m
{ 
   canvasPlanet  = document.getElementById("canvasPlanet"); 
   contextPlanet = canvasPlanet.getContext("2d");
   canvasBG      = document.getElementById("canvasBackground"); 
   contextBG     = canvasBG.getContext("2d"); 

   // PARAMETERS.
   let change     = .6;    let xPos       = canvasPlanet.width/2;    
   let interval   = 33;    let yPos       = canvasPlanet.height/2;            
   let radius     = 0;     let angle      = 0;  
   let radiusMin  = 100;   let radiusMax  = 175;
   let numStars1  = 2000;  let colorStar1 = "white";   
   let numStars2  = 400;   let colorStar2 = "gray";
   let numStars3  = 30;    let colorStar3 = "darkgray";
   let planetSize = 12;    let sunSize    = 45;
   let imageCount = 0;     let imageQuant = 2;

   contextBG.fillStyle = "black";
   contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);

   // STARS drawing.
      for(let n=0; n<numStars1; n++)
      {
         let xStar = Math.random()*canvasBG.width;
         let yStar = Math.random()*canvasBG.height;
         contextBG.fillStyle = colorStar2; 
         contextBG.fillRect(xStar, yStar, 1, 1);
      }
      for(let n=0; n<numStars2; n++)
      {
         let xStar = Math.random()*canvasBG.width;
         let yStar = Math.random()*canvasBG.height;
         contextBG.fillStyle = colorStar2; 
         contextBG.fillRect(xStar, yStar, 2, 2);
      }
      for(let n=0; n<numStars3; n++)
      {
         let xStar = Math.random()*canvasBG.width;
         let yStar = Math.random()*canvasBG.height;
         contextBG.fillStyle = colorStar3; 
         contextBG.fillRect(xStar, yStar, 3, 3);
      }
   // IMAGE references.
   let planet = new Image();
   planet.src = "image2.png";
   let sun    = new Image();
   sun.src    = "image1.png";

   // SUN image load function.
   sun.onload = function()
   {  
      contextBG.drawImage(sun, 200, 175, sunSize, sunSize);

      imageCount ++;

      // CHECK for all images loaded.
      if(imageCount == imageQuant)

         // ANIMATION start.
         {let intervalID = setInterval(drawPlanet, interval)}
   }
   planet.onload = function()
   { 
      contextPlanet.translate(xPos, yPos); 

      imageCount ++;

      if(imageCount == imageQuant){
         let intervalID = setInterval(drawPlanet, interval);
      }
   }
  function drawPlanet()
   {
      
      contextPlanet.clearRect(-canvasPlanet.width/2, -canvasPlanet.height/2,
                               canvasPlanet.width,   canvasPlanet.height);
      
      // RADIUS calculation
      let angleR = (Math.PI/180)*angle;
      let calcAS = radiusMax * Math.sin(angleR);
      let calcBC = radiusMin * Math.cos(angleR);
      radius     = (radiusMax * radiusMin) / Math.sqrt((calcAS*calcAS)+(calcBC*calcBC));

      // ROTATE image.
      contextPlanet.rotate(((Math.PI)/180)*-change); 
      angle = angle + change;

      // DRAW PLANET.
      contextPlanet.drawImage(planet, radius, 0, planetSize,planetSize);
   } 
}
</script>
</head>
<body>
  <div>
    <!-- CANVAS DEFINITIONS  -->
    <canvas id="canvasPlanet" width="400" height="400"
      style="border: 2px solid black; position: absolute; left: auto; top: auto; z-index: 2">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
    <canvas id="canvasBackground" width="400" height="400"
      style="border: 2px solid black; position: absolute; left: auto; top: auto; z-index: 1">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related