Math Fundamentals

2D Transformations

https://talks.obedmr.com/

Translation

To translate a 2D position, we add translation distancies tx and ty to the original coordinates x,y to obtain the new coordinate position (x', y')

auto

Translation distance pair (tx, ty), is called translation vector or shift vector

auto

In matrix form:

auto

Translation in code (processing)

class wcPt2D {
  public:
  GLfloat x, y;
};

void translatePolygon (wcPt2D * verts, GLint nVerts, GLfloat tx, GLfloat ty) {
  GLint k;
  for (k = 0; k < nVerts; k++) {
    verts [k].x = verts [k].x + tx;
    verts [k].y = verts [k].y + ty;
  }
  glBegin (GL_POLYGON);
    for (k = 0; k < nVerts; k++)
      glVertex2f (verts [k].x, verts [k].y);
  glEnd ( );
}

Rotation

We generate a rotation transformation of an object by specifying a rotation axis and a rotation angle.

auto

With column-vector representation:

auto

where rotation matrix is:

auto

Rotation of a point about an arbitrary pivot:

auto

Rotation in code (processing)

void rotatePolygon (wcPt2D * verts, GLint nVerts, wcPt2D pivPt, GLdouble theta) {
  wcPt2D * vertsRot;
  GLint k;
  for (k = 0; k < nVerts; k++) {
    vertsRot [k].x = pivPt.x + (verts [k].x - pivPt.x) * cos (theta)
    - (verts [k].y - pivPt.y) * sin (theta);
    vertsRot [k].y = pivPt.y + (verts [k].x - pivPt.x) * sin (theta)
    + (verts [k].y - pivPt.y) * cos (theta);
  }
  glBegin {GL_POLYGON};
    for (k = 0; k < nVerts; k++)
      glVertex2f (vertsRot [k].x, vertsRot [k].y);
  glEnd ( );
}

Scaling

To alter the size of an object, we apply a scaling transformation.

auto

In matrix form:

auto

We can control the location of a scaled object by choosing a position, called the fixed point, that is to remain unchanged after the scaling transformation.

auto

Scaling in code (processing)

void scalePolygon (wcPt2D * verts, GLint nVerts, wcPt2D fixedPt, GLfloat sx, GLfloat sy)
{
  wcPt2D vertsNew;
  GLint k;
  for (k = 0; k < nVerts; k++) {
    vertsNew [k].x = verts [k].x * sx + fixedPt.x * (1 - sx);
    vertsNew [k].y = verts [k].y * sy + fixedPt.y * (1 - sy);
  }
  glBegin {GL_POLYGON};
    for (k = 0; k < nVerts; k++)
      glVertex2f (vertsNew [k].x, vertsNew [k].y);
  glEnd ( );
}

Challenge: More transformations

  • Implement reflection
  • Implement ShearX and ShearY
  • Change origin to the center of the window for all the transformations
  • Base code: 2Dtransformations.js

What'next?

Curves

Surfaces

Views

Projections

Resources and Credits

This material is genereated thanks to some extracts from following resources:

  • Computer Graphics with OpenGL (Chapter 6) by Donald D. Hearn/M. Pauline Baker, Warren Carithers, 4th Edition

Thanks

  • Obed N Muñoz Reynoso
    • Cloud Software Engineer
    • obed.n.munoz@gmail | tec | intel.com