Ball Animation

In this example below you will see how to do a Ball Animation with some HTML / CSS and Javascript

This awesome code was written by nfig, you can see more from this user in the personal repository.
You can find the original code on
Copyright nfig ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Ball Animation</title>


  <body onLoad="setup();">
  <canvas id="myCanvas" width="250px" height="250px" style="float:left; border:1px solid #000; margin-right:10px;" >
    <p>Are you ready to learn web programming? Follow the steps below to find out!</p>    
    <ol style="overflow:hidden;">
      <li>Let's make a copy of this code for you to edit. Click the "Fork" button at the top of this page (it will ask you to create an account - please do so). I will be able to see your code online, keep in mind that anyone with the URL will also be able to see your copy.</li>
      <li>Notice the three boxes above labeled HTML, CSS, and JS. We will only use the JS box for this experiment, so feel free to minimize the other two.</li>
    <p> This ball is being animated by the JavaScript code in the JS box above. Scroll through the code and see how much you can figure out! Programming takes a very experimental mindset and willingness to break things, so don't be afraid of messing up. If you get stuck, you can just refresh your browser to reset the code. Now, see if you can figure out how to:</p>
    <ol style="overflow:hidden;">
      <li>Change the color of the ball.</li>
      <li>Change the size of the ball.</li>
      <li>Make the ball move faster. Bonus: make it bounce side-to-side.</li>      
    <p>Any changes you make should take effect after a second or two. When you're done tinkering, click "Save" at the top of the page and send me an email with your thoughts. Do you enjoy this type of challenge? Did you find it easy or hard? Did you try anything that didn't work, or make any surprising discoveries?</p>

    <script  src="js/index.js"></script>



/*Downloaded from */
// First, let's set up some variables
// These variables hold the ball's x,y coordinates
var x = 100, y = 200;
// These variables hold the ball's speed in frames-per-second
var xSpeed = 3, ySpeed = 3;
// These variables hold the coordinates that the ball can't go past
var xBoundary = 250, yBoundary = 250;
// This pencil variable will hold the methods for drawing on the canvas
var pencil;
// Okay, variable set up is done

// The setup function is run once at the beginning to set up the animation
function setup() 
  // This gives pencil the methods for drawing on our canvas
  pencil = myCanvas.getContext('2d');
  // Can you guess what this does?
  pencil.fillStyle = "#0000ff";
  // This tells the browser to run the "draw" function every 10 miliseconds
  setInterval(draw, 10);
} // end of the setup function

// This function will draw each frame, it is run once every 10 miliseconds
function draw() 
  // Clear the canvas. See what happens when this line is removed!
  pencil.clearRect(0, 0, xBoundary, yBoundary);
  // Draws a circle of radius 20 at coordinates x,y
  pencil.arc(x, y, 20, 0, Math.PI * 2, true);
  // Adds a border
  // Can you guess what happens if you remove this line?
  // Reverse direction when ball hits boundary
  if (x < 0 || x > xBoundary) 
    xSpeed = -xSpeed;
  if (y < 0 || y > yBoundary) 
    ySpeed = -ySpeed;
  // Assign new x,y coordinates to move the ball
  x = x + xSpeed;
  y = y + ySpeed; 
} // end of the draw function