J. T. Pandelos - COP4813 - Assignment 10 - Animation

by Jason Pandelos

HTML

<script src="http://jtpandelos.com/sdmenu/sdmenu.js"></script>
<link rel="stylesheet" href="http://jtpandelos.com/style.css">
<div id="wrapper">
<div id="top"></div>
<div id="mid">
<div id="header"></div>
<div id="menu">
<div style="float: left" id="my_menu" class="sdmenu">
</div>
</div> <!-- End menu div -->


<div id="content">
<div class="assignmentTitle" style="height: 40px"><strong>COP4813 - Web Systems I - Assignment 10<br />Animation</strong></div>

<div id="inputdiv" style="text-align: center;">
<br />
    <input  type="button" value="Start / Stop Animation" id="startStop" />
<br /><br />
</div>

<div id="mousepos">Mouse: 0,0</div>
<div id="rectpos">Rectangle: 0,0</div>
    
<div id="outputdiv" style="text-align: center; margin: 0 auto">
<canvas id="myCanvas" width="400" height="400" style="border:3px solid #d3ded3;">Your browser does not support the HTML5 canvas</canvas>
</div>
</div> <!-- End content div -->

<div id="footer" style="margin-left: 179px; width: 565px">
<p>COP 4813 - Web Systems I Fall 2014&nbsp;</p>
<br />
<a href="index.html">Home</a> | 
<a href="contact.html">Contact Me</a>
<br /><br />
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</div> <!-- End footer div-->
</div> <!-- End mid div-->

<div id="bottom"></div>

</div> <!-- End wrapper div -->

CSS

.assignmentTitle 
{
  text-align: center;
  font-size: x-large;
}

#myCanvas
{
  background-color: rgb(0, 0, 0)    
}

JavaScript

var myMenu;
myMenu = new SDMenu("my_menu");
myMenu.init();

$('#startStop').click(function () {
startStopAnimation();    
});


$('#myCanvas').click(function(e){
    var offsetX = $('#myCanvas').offset().left;
    var offsetY = $('#myCanvas').offset().top;
    
   mouseClicked(e.pageX - offsetX , e.pageY - offsetY);
});    

// Timer registered to trigger drawing of new animation frame every 30ms
var timer = window.setInterval(draw, 100);

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var started = true;

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var yellowRectangle = {
    x: 0,
    y: 0,
    dir: 75,
    vel: 5,
    width: 20,
    height: 20,
    borderWidth: 1,
    borderColor: 'black',
    currentColor: 'yellow', 
};


var objs = new Array();
objs[0] = yellowRectangle;


function startStopAnimation()
{
    if ( started == true )
    {
        clearInterval(timer);
        started = false;
    }
    else
    {
        timer = window.setInterval(draw, 100);
        started = true;
    }
}


function drawRectangle(r, c) 
{
    c.beginPath();
    c.rect(r.x, r.y, r.width, r.height);
    c.fillStyle = r.currentColor;
    c.fill();
    c.lineWidth = r.borderWidth;
    c.strokeStyle = r.borderColor;
    c.stroke();
    $('#rectpos').html("Rectange: " + r.x + "," + r.y + "  dir = " + r.dir);
}


// Function called whenever the timer expires and a new frame is needed
function draw() 
{
   requestAnimFrame(function () { animate(objs, canvas, context); });
}


function animate(arrayObjects, canvas, context)
{
    // Clear the canvas in preperation  for redraw 
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // Loop through all objects,...