Lecture14: 2D Animation.

Download.

Click here to download source code of this lecture.

Programming

• A note on round().

  <math.h> also defines a round() function. If you are including this header file,

   columbia :: round() 
  

  should be used to call our version of this function, discussed in earlier lectures.

• Add the following member functions into Canvas class. You can either use ScanLineSegment(), or fill the pixels directly.

        void SolidCircle(int center_x, int center_y, int radius, RGB const& col);
  

• We have the following overloaded [] operator defined in Canvas class,

        RGB* operator[] (int r)                    { assert(r>=0 && r<vReso); return data + r*hReso; }
  

  and use

   obj[row][col] 
  

  to access a pixel with the given row and col number. This function is not safe in the sense that an invalid col value is not detected.

  Add a safe pixel access member function to Canvas class.

        RGB& Pixel(int row, int col);
  

  Pixel() should check both row and col.

  After this done, go to your Canvas.cpp, replace any

   obj[row][col] 
  

  by

   obj(row, col) 
  

• Add a member function

        void Clear(RGB const& color);
  

  to Canvas class, which will fill the whole canvas to the given color. This is usually used to clear the whole canvas to some background color (ex. Black).

• 2D Animation and simple collision detection(circle and axis aligned line).

  Together we go through the steps needed to generate a animation of a moving circle, bouncing back and forth in a rectangle room. Use IrfanView and UnFREEz to generate the gif animation, and use any browser to show the animation.

• More collision detection: ray and circle, ray and axis aligned box.

• Alpha color channel: Blending & Transparent Effect

  So far when we write a pixel with some color, the original color of that pixel is simply overridden by the new color. The other way is to set the pixel with a color which is some kind of interpolation between the new color and the old color. To this end, we can add another data member to RGB class. The data member,

        float rgb[3];
  

  is changed into

        float rgb[3];
        float alpha;
  

  or,

        float rgba[4];
  

  The real color is still red, green, and blue componentz; the new component, called alpha component, is only used to determine (in some way) the interpolation(blending) factor.

2D Rotation.

For those who want to have a try on rotation, here is the necessary math. Under a rotation of angle theta, the original point (x,y) is rotated to new point (new_x, new_y).

    new_x = cos(theta) * x - sin(theta) * y;
    new_y = sin(theta) * x + cos(theta) * y;

.

Homework: 2D Animation.

Generate any 2D animation, send zh2001 AT columbia DOT edu the source code and the gif animation file, cc a copy to xchen AT cs DOT utah DOT edu, before Monday (July 12) 7pm.

---