slide_16.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="./images/favicon.ico" rel="shortcut icon">
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="javaScript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="javaScript/main.js"></script>
</head>
<body>
    <header>
        <h1>Let's add the math to our animation</h1>
    </header>
    <div style="height:8px;" class="blackLine"></div>
        <section class="code">
        <pre>    
var canvasContext;
var angle = 0;
<span class="highlight">var xVal = 0;
var yVal = 0;
var xCenter = 300;
var yCenter = 150;
var angleVelocity = 0.07;
var radius = 100;</span>
        
function animationExampleInit(e){
    canvasContext = $("#myCanvas")[0].getContext("2d");
    drawBall();
    startBall();
}

function drawBall(){
    clearCanvas(canvasContext);
    canvasContext.beginPath();
    <span class="highlight">canvasContext.arc(xVal, yVal, 20, 0, Math.PI*2, false);</span>
    canvasContext.closePath();
    canvasContext.fill();
    setTimeout(animateBall, 33);
}

function startBall(){
    setTimeout(animateBall, 33);
}

function animateBall(e){
   <span class="highlight"> angle += angleVelocity;
    xVal = xCenter + Math.cos(angle) * radius;
    yVal = yCenter + Math.sin(angle) * radius;</span>
    drawBall();
}
        
...
        </pre>
    </section>
    <nav>
        <a id="left_btn" href="slide_15.html">Previous</a>
        <a id="right_btn" href="slide_17.html">Next</a>
    </nav>
</body>