Pages

▼

Friday, November 1, 2013

Bouncing a Ball with Canvas Arc - Revisited (Game Programming)

In a recent post (Bouncing a Ball with Canvas Arc) I wrote about ... duh ... bouncing a ball using Canvas and drawing the ball with the arc method.

First of all, here are better links (thanks, Robert Helmer) for the Canvas arc method:
  1. Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#arc%28 (note that this hangs off of CanvasRenderingContext2D, not Canvas).
  2. Guide: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Arcs (note this is part of a larger topic on drawing shapes with Canvas).
  3. From now on, I'll try to reference Mozilla Developer Network. I'm guilty of quick look ups on W3 Schools, but MDN really is the authority on Firefox!
Secondly, the post on Canvas and the arc method assumed that it is okay to erase the screen every time you move the ball. This works with some things well and the phone screen is small enough that there isn't a lot of delay. But I then thought, what about these two conditions:
  1. You have other stuff on the screen you don't erase?
  2. What if you have to do a lot of calculations to redraw something that doesn't need to be done?
 So I remembered a technique I learned from programming 8-bit games (Apple II, Commodore 64, etc.). There it was simply:
  1. Draw something.
  2. Calculate the move.
  3. Erase the thing you want to move.
  4. Draw the thing in its new position.
 Easy to do, right? Draw the ball in Fuchsia, calculate new position, erase the ball by drawing it with White, and then draw it again in its new position with Fuchsia. What could be simpler? (Well, it seemed simple at the time.)

So here's the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      Canvas Bounce Draw Circle and Erase
    </title>

    <script>
   
    // Global variables
    var canvas;
    var ctx;

    var boardWidth = 320;
    var boardHeight = 460;

    var ballHor = boardWidth / 2;
    var ballVer = boardHeight /2;
   
    var oldHor;
    var oldVer;

    var changeHor = 10;
    var changeVer = 10;

    // Listen to that page load!
    window.addEventListener("load", getLoaded, false);

    // Run this when the page loads.
    function getLoaded(){

      // Make sure we are loaded.
      console.log("Page loaded!");
 
      // Load the image and the canvas.
      loadMyImage();

      // Start the game loop.     
      gameLoop = setInterval(doMainLoop,16);
    }

    // This will run every 16 milliseconds.
    function doMainLoop(){
 
      // Move the ball.
      ballMove();
    }

    function ballMove() {
     
      // Changes are calculated but do not
      // take effect until next time through loop.

      // Get the old ball coordinates.    
      oldHor = ballHor;  
      oldVer = ballVer;

      // Erase the ball where it is now.
      // Color is White.
      ctx.lineWidth = 0;
      ctx.beginPath();
      ctx.arc(oldHor, oldVer, 10, 0, Math.PI * 2, true);
      ctx.closePath(); 
        ctx.fillStyle = "White";
      ctx.fill();
              
      // Calculate new vertical component.
      ballVer = ballVer + changeVer;

      // If top is hit, change direction.
      if (ballVer + changeVer < -10)
        changeVer = -changeVer;
       
      // If bottom is hit, reverse direction.
      if (ballVer + changeVer > boardHeight - 10)
        changeVer = -changeVer;

      // Calculate new horizontal component.
      ballHor = ballHor + changeHor;

      // If left edge hit, reverse direction.
      if (ballHor + changeHor < -10)
        changeHor = -changeHor;
       
      // If right edge is hit, do something.
      if (ballHor + changeHor > boardWidth - 10)
        changeHor = -changeHor;     
   
      // Draw a ball using canvas arc function.
      // Color is Fuchsia.
      // Make the radius one pixel smaller.
      ctx.beginPath();
      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "Fuchsia";
      ctx.fill();    
    }

    // Load the image and the canvas.
    function loadMyImage() {

      // Get the canvas element.
      canvas = document.getElementById("myCanvas");

      // Make sure you got it.
      if (canvas.getContext) {

        // Specify 2d canvas type.
        ctx = canvas.getContext("2d");
      }
    }

</script>

</head>
<body bgcolor="White">

  <canvas id="myCanvas" width="320" height="460">
  </canvas>

</body>
</html>

This is nearly the same code as last time, with these few small changes:
  1. I added temporary variables to track the previous positions of the ball.
  2. In the ballMove section, I added erasing the ball.
  3. The main loop (doMainLoop) no longer clears the screen every time.
Erasing the Ball

This code erases the ball:

      // Get the old ball coordinates.    
      oldHor = ballHor;  
      oldVer = ballVer;

      // Erase the ball where it is now.
      // Color is White.
      ctx.lineWidth = 0;
      ctx.beginPath();
      ctx.arc(oldHor, oldVer, 10, 0, Math.PI * 2, true);
      ctx.closePath(); 
      ctx.fillStyle = "White";
      ctx.fill();

It is nearly the same as drawing the ball, but the fillStyle is White. The old ball position is created and used to erase where the ball was drawn.

But Wait! Something is wrong!

When I ran this code, it looked like this in the Simulator:

 

And it looked like this when I pushed it to my ZTE Open phone:

 

I'm hoping that the picture is clear enough to show that the bouncing ball is leaving a trail of ghost shapes behind it. Well, it was Halloween, but I'm not sure that would account for the behavior today.

The ball bounces all right, but its not cleaning up after itself. I did some research and it turns out that when you draw on Canvas, the pixels get scattered a little too far and you get artifacts that can cause problems. This is called aliasing, and is often a problem with drawing shapes onto a screen. And this is why many people recommend clearing the canvas every time you move an object.

There are two solutions I have found:
  1. You can erase part of a screen by using context.clearRect ( x , y , w , h ); You can do this to clear a specific rectangle at x,y with a width and height.
  2. You can overlap the drawing a little to get rid of the spilled pixels.
I like the second because it is more precise. I want to erase just the part I want. So the solution is simple. When you draw the ball, use 9 instead of 10 in this line:

      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);

so it reads:

      ctx.arc(ballHor, ballVer, 9, 0, Math.PI * 2, true);

The ball is slightly smaller, but all of it gets erased. I'm not happy with this, but I looked and saw that this isn't a bug, it is a feature of not only Firefox, but Chrome and IE. Throwing pixels around is a bit imprecise, and that's one of the reasons I'm not 100% happy with Canvas. But it works with lots of stuff. I'm still more happy CSS. See my Bouncing a Ball in CSS topic. I'll come back to CSS later, but there's still a few more things to look at with Canvas.

Programming Tip

When you install an app to the ZTE Open, there is a delay of a few seconds before you get a message telling you the app is installed. And you'll have to reboot the ZTE Open before you can see your app's icon.

Also, screenshots are still tricky. You have to hit two buttons at nearly the same time. But I'm learning how to do this. I was sending the screenshots to myself from the gallery with my email, but I figured out I could use the cable to download the screenshots from a folder named screenshots. There's a short delay before the screenshot appears in the gallery. However, if you want to take a screenshot, you must unplug the cable first. A little annoying, but liveable. This is a version 1 of an new product that never lived before, so the baby steps can be amusing and appealing.

at

No comments:

Post a Comment