Source Code for Quadcopter Animation

quadcopter_src.js

/* Author: Stewart Charles
/ Assignment 3
/ CS 4600
/ Version: 2/20/2017

-- Utilizes Matrix Stack and Shape/Objects to draw Quadcopter*/

/* Initialize Variables persistent variables. */
var time;
var xSlider, xText, ySlider, yText;
var rotateSlider, angleText, speedSlider, speedText;
var quadcopter;

/* Create an 'empty' Quadcopter that will be used for transformations in the draw function*/
window.onload = function() {
  "use strict";
  document.title = "Assignment 3";
  xSlider = document.getElementById('xSlider');
  ySlider = document.getElementById('ySlider');
  rotateSlider = document.getElementById('rotation');
  speedSlider = document.getElementById('speed');
  xText = document.getElementById('xText');
  xText.value = 511;
  yText = document.getElementById('yText');
  yText.value = 511;
  speedText = document.getElementById('speedText');
  speedText.value = 100;
  angleText = document.getElementById('angleText');
  angleText.value = 0;

  speedSlider.value = speedText.value;
  rotateSlider.value = angleText.value;
  xSlider.value = xText.value;
  ySlider.value = yText.value;

  time = 0;
  window.requestAnimationFrame(draw);
  quadcopter = new Base();
};

/* Baseline Render function used by the prototype draw
   functions. */
function render(ctx,mat,verts,color) {
  ctx.beginPath();
  ctx.fillStyle = color;
  var start = verts[0].transform(mat);
  ctx.moveTo(start.X,start.Y);
  for(var i = 1; i < verts.length; i++) {
    var point = verts[i].transform(mat);
    ctx.lineTo(point.X, point.Y);
  }
  ctx.closePath();
  ctx.fill();
}

/* Type representing a Vertex that connects paths
when drawing shapes. */
function Vert(pointA,pointB) {
  this.X = pointA;
  this.Y = pointB;
}

/* Type function that multiplies 'this' vertex by the argument
transformation matrix and returns a new Vert */
Vert.prototype.transform = function(matrix) {
  var x = (matrix[0][0] * this.X + matrix[0][1] * this.Y + matrix[0][2]);
  var y = (matrix[1][0] * this.X + matrix[1][1] * this.Y + matrix[1][2]);
  return new Vert(x,y);
};

/* Creates the Base of the Quadcopter*/
function Base() {
  this.verts = [
    new Vert( 60,  60),
    new Vert( 60, -60),
    new Vert(-60, -60),
    new Vert(-60,  60)];

    this.spoke = new Spoke();
  }

  /* Draws the base */
  Base.prototype.draw = function(ctx,mat) {
    render(ctx,mat,this.verts,'rgb(48,48,48)');
  };

  /* Creates a spoke of the Quadcopter */
  function Spoke() {
    this.verts = [
      new Vert( 10, 0),
      new Vert( 10, 300),
      new Vert(-10, 300),
      new Vert(-10, 0)];
      this.motor = new Motor();
    }

    /* Calls draw on the Spoke */
    Spoke.prototype.draw = function(ctx,mat) {
      render(ctx,mat,this.verts,'dimgray')
    };

    /* Creates a Motor at position */
    function Motor() {
      this.verts = [new Vert(0,0)];
      this.blade = new Blade();
      }

      /* Draws the motor */
      Motor.prototype.draw = function(ctx,mat) {
        ctx.fillStyle = 'orange';
        ctx.beginPath();
        origin = this.verts[0].transform(mat)
        ctx.arc(origin.X, origin.Y, 30, 0, 2.0 * Math.PI);
        ctx.fill();
      };

      /* Creates a Blade */
      function Blade() {
        this.verts = [
          new Vert(-20, 0),
          new Vert(20, 0),
          new Vert(20, 90)];
        }

        /* Draws the blade */
        Blade.prototype.draw = function(ctx,mat) {
          render(ctx,mat,this.verts,'maroon')
        };

        /* The Main draw function that sets up all of the components, transforms the Quadcopter
        and then calls draw on each component. */
        function draw() {
          "use strict";
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');

          /* Retrieve values from Sliders */
          var speed = speedSlider.value;
          var yPos = ySlider.value;
          var xPos = xSlider.value;
          var rotation_value = rotateSlider.value;

          xText.value = xPos;
          yText.value = yPos;
          speedText.value = speed;
          angleText.value = rotation_value;

          context.fillStyle = "skyblue";
          context.fillRect(0,0,1024,1024);

          //Create the 'Base' Quadcopter, where each object in the hierarchy
          //is set to the origin.
          //var newCopter = new Base();

          //Create matrix Stack and current transformatino matrix variable
          var stack = new Array();
          var ctm = new mat3();
          stack.push(ctm);

          ctm = mult(rotate2D(rotation_value),ctm);
          stack.push(ctm);
          ctm = mult(translate2D(xPos,yPos),ctm);

          // Store variable representing current rotation of current spoke
          // There will be a spoke for 0, 90, 180, 270 respectively
          var spokeRot = 0;
          stack.push(ctm);

          //Draw Base
          quadcopter.draw(context,ctm);

          for(var s = 0; s < 4; s++) {
            ctm = mult(ctm,rotate2D(spokeRot));

            //Draw Spoke
            var spoke = quadcopter.spoke;
            spoke.draw(context,ctm);

            //---Motor Transformation---
            var motor = spoke.motor;
            stack.push(ctm);
            ctm = mult(ctm,translate2D(0,300));

            //---Blade Transformation----

            // Variable representing the current blade being evaluated.
            var bladeRot = 0;
            stack.push(ctm)
            for(var b = 0; b < 4; b++) {
              var blade = motor.blade;

              //Compute the rotation as incremented at a given time interval bounded by 360
              var rotMod = (bladeRot + time) % 360;
              ctm = mult(ctm,rotate2D(rotMod));

              // Draw blade before drawing Motor so that Motor is placed before
              // the blade in the final image
              blade.draw(context,ctm);
              //Increment the bladeRoation for the next blade
              bladeRot += 90;
              ctm = stack.pop();
              stack.push(ctm);
            }
            ctm = stack.pop();
            // Draw the motor
            motor.draw(context,ctm);
            ctm = stack.pop();

            //Increment the spoke rotation for the next spoke
            spokeRot += 90;
            ctm = stack.pop();
            stack.push(ctm);
          }

          var calc_speed = (speed * (1/10));

          time += calc_speed;
          time %= 360;

          window.requestAnimationFrame(draw);
        }