Difference: CanvasActivityIntroCS (1 vs. 2)

Revision 22018-11-26 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Introduction to Animation with HTML5 and JavaScript

Due: Dev 12
Line: 81 to 81
 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.
Changed:
<
<
  • To erase the old circles, we’ll need to call the clearRect method right at the start of our draw()function so that it clears out the previous circle before it draws the new one.
>
>
  • To erase the old circles, we’ll need to call the clearRect method right at the start of our draw()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:
  %CODE{"javascript"}%
Deleted:
<
<
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.clearRect(0,0, 300,300);
Deleted:
<
<
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%
  • Try it out!
  • We stil have a problem, what is it?
Line: 121 to 99
  if( y<0 || y>300) dy=-dy; %ENDCODE%
Added:
>
>
  • 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:
<-- SyntaxHighlightingPlugin -->
var height=300, width=300;
var x=Math.floor(Math.random() * 300);
var y=Math.floor(Math.random() * 300);
<-- end SyntaxHighlightingPlugin -->

  • Let's also now use the height and width in the clearRect function:
<-- SyntaxHighlightingPlugin -->
context.clearRect(0,0, height, width);
<-- end SyntaxHighlightingPlugin -->

  • 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.
<-- SyntaxHighlightingPlugin -->
var radius=20;
<-- end SyntaxHighlightingPlugin -->
 

Step 5 - Have fun! Add some features!

Can you try to add some more features?

Revision 12018-11-26 - JimSkon

Line: 1 to 1
Added:
>
>
META TOPICPARENT name="IntroToCSF2018"

Introduction to Animation with HTML5 and JavaScript

Due: Dev 12

Moodle Link

  • HTML5 is the latest language for building web pages.
  • HTML5 has a feature called the <canvas> 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: Bouncing Ball Example

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:
<-- SyntaxHighlightingPlugin -->
<body>
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>
<-- end SyntaxHighlightingPlugin -->

  • Now we can write code to draw something on this canvas:
<-- SyntaxHighlightingPlugin -->
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();
  }
<-- end SyntaxHighlightingPlugin -->

  • 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.
Screenshot_20181125_200346.png

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 xand 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 JavaScript’s setInterval()function.
  • Try the code below
<-- SyntaxHighlightingPlugin -->
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;
}
<-- end SyntaxHighlightingPlugin -->

Screenshot_20181125_201215.png

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 draw()function so that it clears out the previous circle before it draws the new one.
<-- SyntaxHighlightingPlugin -->
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.clearRect(0,0, 300,300);
  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;
}
<-- end SyntaxHighlightingPlugin -->
  • 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:
<-- SyntaxHighlightingPlugin -->
// Boundary Logic
  if( x<0 || x>300) dx=-dx;
  if( y<0 || y>300) dy=-dy;
<-- end SyntaxHighlightingPlugin -->

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!

META FILEATTACHMENT attachment="Screenshot_20181125_200346.png" attr="" comment="" date="1543194266" name="Screenshot_20181125_200346.png" path="Screenshot_20181125_200346.png" size="2357" user="JimSkon" version="1"
META FILEATTACHMENT attachment="Screenshot_20181125_201215.png" attr="" comment="" date="1543194747" name="Screenshot_20181125_201215.png" path="Screenshot_20181125_201215.png" size="4602" user="JimSkon" version="1"
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback