CanvasActivityIntroCS < Main

---+ Introduction to Animation with HTML5 and JavaScript

<a href="https://moodle.kenyon.edu/mod/assign/view.php?id=67620" target="_blank">Moodle Link<img alt="" border="0" height="12" src="%PUBURL%/TWiki/TWikiDocGraphics/external-link.gif" width="13" /></a>

   * HTML5 is the latest language for building web pages.
   * HTML5 has a feature called the &lt;canvas&gt; element that allows graphics and animation.
   * Using a programming language called JavaScript, web developers can create graphics, static and moving.
   * Here is an example of a simple animation using HTML5: <a href="http://cs.mvnu.edu/blast/ball.html" target="_top">Bouncing Ball Example</a>
   * Here is a tutorial on using HTML5 with Canvas: <a href="https://www.w3schools.com/graphics/canvas_intro.asp" target="_blank">Canvas Tutorial<img alt="" border="0" height="12" src="%PUBURL%/TWiki/TWikiDocGraphics/external-link.gif" width="13" /></a>
   * <a href="https://www.w3schools.com/html/html5_canvas.asp" target="_blank">HTML5 Canvas Reference<img alt="" border="0" height="12" src="%PUBURL%/TWiki/TWikiDocGraphics/external-link.gif" width="13" /></a>
---+++ Step 1 - Draw a ball
   * First we need to create a canvas to draw on.
   * The following code creates a area to "draw" on that is 300 pixels wide, and 300 pixels high:
<sticky>
%CODE{"html"}%
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Kenyon Canvas Example</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="300" >
    </canvas>
    <script src="script.js"></script>
  </body>
</html>
%ENDCODE%</sticky>

   * Now we can write code to draw something on this canvas:
<sticky>
%CODE{"c++"}%
<!DOCTYPE html>
init();

var context;
function init()
  {
    context= myCanvas.getContext('2d');
    context.beginPath();
    // fill objects with blue color
    context.fillStyle="#0000ff";
    // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    context.arc(100,100,20,0,Math.PI*2,true); context.closePath();
    context.fill();
  }
%ENDCODE%</sticky>

   * How can we test this out?
   * Let's use repl.it : https://repl.it/@JimSkon/BallBounceStart
---+ <img alt="Screenshot_20181125_200346.png" height="215" src="%ATTACHURL%/Screenshot_20181125_200346.png" width="268" />
---+++ Step 2 - Move the ball
   * Now that we have the circle, let’s try to move it. We’ll replace the hardcoded values of the coordinates in the .arc method (100, 100 — the first two arguments) with variables <code>x</code>and y, which we will then increment by an amount of dx and dy.
   * Also since we need to redraw the circle at the new positions, we’ll move the code into a function called draw() and call it every 10ms using <code>JavaScript’s setInterval()</code>function.
   * Try the code below
<sticky>
%CODE{"c++"}%
var context;
var x=50; 
var y=50; 
var dx=5; 
var dy=5;
init(); 

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}
function draw()
{
  context.beginPath();
  context.fillStyle="#0000ff";
  // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(x,y,20,0,Math.PI*2,true);
  context.closePath();
  context.fill();
  x+=dx;
  y+=dy;
}
%ENDCODE%</sticky>

<img alt="Screenshot_20181125_201215.png" height="443" src="%ATTACHURL%/Screenshot_20181125_201215.png" width="491" />

We have a problem! The circle is actually forming a line! Why? How do we fix this?
---+++ Step 3 - Erase the old circles!
   * The balls merged into a line because each time the draw() function is called, it draws a circle at the new coordinates without removing the old ones.
   * To erase the old circles, we’ll need to call the clearRect method right at the start of our <code>draw()</code>function so that it clears out the previous circle before it draws the new one. Add the line below at the beginning of the draw function:
<pre>context.clearRect(0,0, 300,300);</pre>
   * Try it out!
   * We stil have a problem, what is it?
   * What soluton can we try?
---+++ Step 4 - bounce the ball inside imaginary walls
   * All you need to do is check if the values of x and y are beyond the canvas dimensions, and if so, we need to reverse the direction by setting values of dx and dy to the negative values.
   * Add the following code to bounce the ball:
<pre><i><font color='#B22222'>// Boundary Logic
</font></i>  <b><font color='#A020F0'>if</font></b>( x&lt;0 || x&gt;300) dx=-dx;
  <b><font color='#A020F0'>if</font></b>( y&lt;0 || y&gt;300) dy=-dy;</pre>

   * Notice how the balls goes corner to corner. How can we fix that?
   * Let's give the ball a random start point. Let's start by giving the height and width a name for a better program. Then use it to compute a random location at the beginning of the code:
<pre><b><font color='#A020F0'>var</font></b> height=300, width=300; <b><font color='#A020F0'>var</font></b> x=<b><font color='#DA70D6'>Math</font></b>.random() * 300; <b><font color='#A020F0'>var</font></b> y=<b><font color='#DA70D6'>Math</font></b>.random() * 300;</pre>

   * Let's also now use the height and width in the clearRect function:
<pre>context.clearRect(0,0, height, width);</pre>

   * Next note the ball is going off the edge. How do we fix this? Let's start by making a variable for the radius, and then using that.
<pre><b><font color='#A020F0'>var</font></b> radius=20;</pre>

---+++ Step 5 - Have fun! Add some features!

Can you try to add some more features?
   * Make the box bigger.
   * Change the color of the ball whenever it hits the wall.
   * More than one ball.
   * Simulate the effects of gravity and friction (the ball's height decreases with each bounce, and the side to side motion slows down)
   * Whatever you can think of!
Random color function:
<pre><b><font color='#A020F0'>function</font></b> <b><font color='#0000FF'>getRandomColor</font></b>() {
  <b><font color='#A020F0'>var</font></b> letters = <b><font color='#BC8F8F'>'0123456789ABCDEF'</font></b>;
  <b><font color='#A020F0'>var</font></b> color = <b><font color='#BC8F8F'>'#'</font></b>;
  <b><font color='#A020F0'>for</font></b> (<b><font color='#A020F0'>var</font></b> i = 0; i &lt; 6; i++) {
    color += letters[<b><font color='#DA70D6'>Math</font></b>.floor(<b><font color='#DA70D6'>Math</font></b>.random() * 16)];
  }
  <b><font color='#A020F0'>return</font></b> color;
}</pre>
This topic: Main > WebHome > IntroToCSS2020 > CanvasActivityIntroCS
Topic revision: r5 - 2020-04-28 - JimSkon