tauk

Circle animation

Apr 21st, 2021
628
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.     <body>
  3.            
  4.         <h1>Q3 Animation - SET 3</h1>
  5.        
  6.        
  7.         <h3>Q1. Write the code using Canvas API for circles and <i>RequestAnimationFrame</i> to create the following animation.
  8.         [10 marks]<h3>
  9.         <p align="center">Note that red and black balls start from center at the bottom and move towards the opposite corners.
  10.         When they reach the corner they fall back again towards their starting position at the bottom center and then the animation
  11.         continues as before. Note that the animation is continuous.</p>
  12.        
  13.         <div align="center">
  14.             <img src = "set3q3.gif">
  15.         </div>
  16.        
  17.         <hr />
  18.        
  19.         <p></p>
  20.        
  21.         <div align="center">
  22.             <canvas id="canvas1" width="400" height="200" tabindex="0" style=";border:1px solid #000000;">
  23.             </canvas>
  24.         </div>
  25.            
  26.          <script>
  27.             var canvas = document.getElementById("canvas1");
  28.             var ctx = canvas.getContext("2d");
  29.                
  30.             //get the animation frame depending on the browser engine
  31.             var requestAnimationFrame = window.requestAnimationFrame ||
  32.                                         window.mozRequestAnimationFrame ||
  33.                                         window.webkitRequestAnimationFrame ||
  34.                                         window.msRequestAnimationFrame;
  35.  
  36.             //set intial start x and y coordinates
  37.             var redX = canvas.width / 2;
  38.             var redY = canvas.height;
  39.             var redBallGoingUp = true;
  40.            
  41.             var radius = 10;
  42.  
  43.             var delayBetweenFrames = 20; //the delay time is in milliseconds  
  44.  
  45.             //declare the animate() function
  46.             function animate() {                
  47.                 //use the setTimeout to do the animation between frame using the delayBetweenFrames
  48.                 setTimeout(function() {
  49.  
  50.                     //animation code goes into this anonymous function handler
  51.                     requestAnimationFrame(animate);
  52.  
  53.                     //clear the whole canvas area  
  54.                     ctx.clearRect(0, 0, canvas.width, canvas.height);
  55.  
  56.                     if (redBallGoingUp) {
  57.                         redX = redX - 5;
  58.                         redY = redY - 5;
  59.                     }
  60.  
  61.                     if (!redBallGoingUp) {
  62.                         redX = redX + 5;
  63.                         redY = redY + 5;
  64.                     }
  65.  
  66.                     drawCircle(redX, redY, 10, "red");
  67.  
  68.                     if (redY == 0) {
  69.                         redBallGoingUp = false;
  70.                     }
  71.  
  72.                    if (!redBallGoingUp && redY == canvas.height) {
  73.                        redBallGoingUp = true;
  74.                     }
  75.  
  76.                 }, delayBetweenFrames);
  77.             }
  78.  
  79.             function drawCircle(x, y, radius, color) {
  80.                 //draw a circle
  81.                 ctx.beginPath();
  82.                 ctx.arc(x, y, radius, 0, 2 * Math.PI);
  83.                
  84.                 //fill the circle with green color
  85.                 ctx.fillStyle = color;
  86.                 ctx.fill();
  87.             }
  88.  
  89.             //call the animate() function
  90.             animate();
  91.         </script>
  92.     </body>
  93. </html>
  94.        
  95.        
  96.        
  97.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×