CanvasActivityIntroCS < Main

---+ Introduction to Animation with HTML5 and JavaScript
---++++++ Due: April 30

[[https://moodle.kenyon.edu/mod/assign/view.php?id=26947][Moodle Link]]

   * 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: [[https://www.w3schools.com/graphics/canvas_intro.asp][Canvas Tutorial]]
   * [[https://www.w3schools.com/html/html5_canvas.asp][HTML5 Canvas Reference]]
---+++ 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"}%
<body>
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>
%ENDCODE%</sticky>

   * Now we can write code to draw something on this canvas:
<sticky>
%CODE{"javascript"}%
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 jsfiddle : http://jsfiddle.net
   * If you create a login, you can name and save your code like on repl.it
   * Paste the html code into the html box, and the javascript code into the js box.
   * Hit "run"
   * If you run into problems you can get feedbck by usng the developer tools.
<img alt="Screenshot_20181125_200346.png" height="215" src="%ATTACHURLPATH%/Screenshot_20181125_200346.png" style="background-color: transparent;" 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{"javascript"}%
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="%ATTACHURLPATH%/Screenshot_20181125_201215.png" style="background-color: transparent;" 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:
<sticky>
%CODE{"javascript"}%
context.clearRect(0,0, 300,300);
%ENDCODE%</sticky>
   * 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:
<sticky>
%CODE{"javascript"}%
  // Boundary Logic
  if( x<0 || x>300) dx=-dx;
  if( y<0 || y>300) dy=-dy;
%ENDCODE%</sticky>

   * 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:
%CODE{"javascript"}% var height=300, width=300; var x=Math.random() * 300; var y=Math.random() * 300;
%ENDCODE%&lt;/sticky&gt;

   * Let's also now use the height and width in the clearRect function:
%CODE{"javascript"}%
    context.clearRect(0,0, height, width);
%ENDCODE%&lt;/sticky&gt;

   * 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.
%CODE{"javascript"}%
var radius=20;
%ENDCODE%&lt;/sticky&gt;

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

<span style="background-color: transparent;">Can you try to add some more features?</span>
   * 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:
<sticky>
%CODE{"javascript"}%
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
%ENDCODE%</sticky>
Attachments
Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
png	Screenshot_20181125_200346.png	r1	manage	2.3 K	2018-11-26 - 01:04	JimSkon
png	Screenshot_20181125_201215.png	r1	manage	4.5 K	2018-11-26 - 01:12	JimSkon
This topic: Main > WebHome > IntroToCSF2018 > CanvasActivityIntroCS
Topic revision: r4 - 2019-03-18 - JimSkon