A Little Math

• Parametric Equations
  • The equation for a circle is not a function
    • (x-x_center)² + (y-y_center)² = r²
    • describes a circle of radius r centered at (x_center, y_center)
    • While this is nice analytically, it is not the most useful for computation.
  • Mathematicians have developed methods for decomposing such a formula into a set of parametric equations.
    • In these equations, the variables x and y are expressed as functions of a parameter.
    • The parameter can be allowed to assume a set of values to produce the values for x and y.
  • A circle can be paramaterized as:
    • x = r cos(t) + x_center
    • y = r sin(t) + y_center
    • 0 < t < 2π
    • In this case t is the parameter.
    • We will see more of why this is true later
  • This is, however, very useful for drawing a circle.
    • Well, sort of, but more of that to come.

      function Circle(p, c, polar ) {
          var phi = polar.theta/180.0*Math.PI;
      
          p.x = c.x + polar.r * Math.cos(phi);
          p.y = c.y + polar.r * Math.sin(phi);
      
          return;
      }
      
      Redisplay: function() {
      
          var polarPoint = {"r":0, "theta":0};
          var point = {"x":0, "y": 0};
          var center = {"x": this.width/2, "y":this.height/2};
          var start = 0, 
              end = 360;
      
          for(polarPoint.theta=start; polarPoint.theta<end; polarPoint.theta++) {
                Circle(point, center, polarPonit);
                this.ctx.fillRect(x,y,1,1);
          }
      },
      

    • Your other choice would be to build a function that returns two points
      • y =+/- sqrt(r² - (x-x_center)²) + y_center
    • The points for the parametric equation are in order.
    • The points for the Cartesian representation are not.
    • The points for the parametric equation will be evenly spaced.
    • The points in the parametric equation are not.

    Plot Type: Parametric Y independent X independent

  • Why does each show up as it does?
  • How could we eliminate gaps in the parametric representation?
  • Do you suspect that some portions of this are "overdrawn"?
  • Code for this is here
    • By the way, I had a problem appending this to the canvas so I have changed things just a little bit.
    • I have created a division with an unique id.

      <div id="canvas1Space">
      

    • This goes in the document where I want the canvas to appear.
    • I have added a parameter to the canvas initialization routine
    • This is the ID of the division where I want the canvas to appear

      var canvas = new parametricCanvas(400,400, "canvas1Space");
      

    • Finally, I have added code in the canvas constructor to add it to the division if it is supplied and exists.

      function parametricCanvas(width, height, locID) {
          // code deleted
          if(locID == undefined) {
              document.body.appendChild(canvas);
          } else {
              div = document.getElementById(locID);
              if (null == div) {
                  document.body.appendChild(canvas);
              } else {
                  div.appendChild(canvas);
              }
          } 
      

• There are other times where we use parametric equations.
  • A transformation from one value to another is the most common.
    • For example, if I want to fade from blue to green.
      • A nice orange red is 255, 69, 0 (OrangeRed #FF4500)
      • A nice Midnight Blue is 25, 25, 112 (MidnightBlue #191970)
    • If I am moving in along a line
      • The first point color should be 255, 60, 9
      • The last point color should be 25, 25, 112
      • The mid point color should be (255+25)/2, (69+25)/2, (0+112)/2
      • And so on.
    • The equations to find color will be
      • t = step_number / total_steps-1 where 0 ≤ step_number < total_steps
      • r_i = START_RED * (1-t) + END_RED * t
      • g_i = START_GREEN * (1-t) + END_GREEN * t
      • b_i = START_BLUE * (1-t) + END_BLUE * t
    • Notice
      • When t = 0, the start point is produced.
      • When t = 1, the end point is produced.
      • In between, it is just a weighted average of the two.
    • This will provide a nice smooth transition from one color to another.
  • The code

    var RED_END = 255,
        RED_START = 25,
        GREEN_END = 69,
        GREEN_START = 25,
        BLUE_END = 0,
        BLUE_START = 112;
    
    // code deleted
    
        Color: function() {
            var red, green, blue
            red = param(RED_START, RED_END, this.percent);
            green = param(GREEN_START, GREEN_END, this.percent);
            blue = param(BLUE_START, BLUE_END, this.percent);
    
            return 'rgb('+ red + ', '+ green + ',' + blue +')';
    
        },
    
    // code deleted
    // Inside each of the movement functions, this.percent is set.
           for(theta = 0; theta < 360; theta++) {
              this.percent = theta/360;
    
           var step = 0;
    
           for(x = this.center.x-this.radius; x <= this.center.x+this.radius; x++) {
              this.percent = step/(2*this.radius);
              step++;
    
    function param(start, end, t) {
        return Math.floor(start * (1-t) + end*t);
    }
    

• In animation, we frequently compute items as a function of time
  • For example, if a planet has an elliptical orbit,
    • Where t is a time value.
    • x = a cos(t)
    • y = b sit(t)
  • By controlling the rate of change of t, we can generate smooth transitions.