Transforming Geometry

Groundhog Day

Drawing Quads

In a 300 by 200 window, draw two quads of different colors.

Don’t show the grey grid.

Adding a face

Add eyes, nose, and mouth.

The picture below is the top of the groundhog.

The grid units are 100/12.

Multiple groundhogs

• To repeat at a different location– Use variables for X and Y points

quad(ghX+150, ghY,

ghX+100, ghY+200, ….)

• To repeat at a different size– Use variable for scale

float scale = size/200 ;

quad(int(150*scale), 0,

int(100*scale), int(200*scale), ….)

Multiple groundhogs

• To repeat at a different location and size– Use variables for X, Y, and scale

float scale = size/200 ;

quad(ghx+int(150*scale), ghY,

ghx+int(100*scale), ghy+int(200*scale),

….)

• To repeat at a 45 angle– Take out a good geometry book!

Better yet

• Use transformation matrices– Without really understanding the math

• Linear transformations

• Affine transformations

• Linear algebra

• Matrices

• Euclidean geometry

• Cartesian coordinates

• You’ll be able to– Draw slanted ellipses– Draw big slanted groundhogs– Draw tiny groundhogs looking in mirrors– Make Toy Story 4

The translate function

size(400, 400) ;

ellipse(100, 100, 80, 40) ;

translate(10, 10) ;

ellipse(100, 100, 80, 40) ;

Why not three!

size(400, 400) ;

ellipse(100, 100, 80, 40) ;

translate(10, 10) ;

ellipse(100, 100, 80, 40) ;

translate(20, 20) ;

ellipse(100, 100, 80, 40) ;

Perhaps not what you expected

Are these the same?

int x = 200 ;int y = 200 ; ellipse(x+100, y+100, 80, 40) ;

int x = 200 ;int y = 200 ;translate(x, y) ; ellipse(100, 100, 80, 40) ;

for (int x=0; x<=200; x+=100) { for (int y=0; y<=200; y+=100) { ellipse(x+100, y+100, 80, 40) ; }}

for (int x=0; x<=200; x+=100) { for (int y=0; y<=200; y+=100) { translate(x, y) ; ellipse(100, 100, 80, 40) ; }}

Controlling transformations

• To discard current “transformation matrix” and return to the old matrixpopMatrix() ;

• To start a new current matrix and save a copy of the current matrixpushMatrix() ;

• To add transforms to the current matrixtranslate()– And a few more to come

One translation at a time

size(400, 400) ;

for (int x=0; x<=200; x+=100) {

for (int y=0; y<=200; y+=100) {

pushMatrix() ;

translate(x, y) ;

ellipse(100, 100, 80, 40) ;

popMatrix() ;

}

}

Too clever a translation

size(400, 400) ;

for (int i=0; i<3; i++) {

pushMatrix() ;

for (int j=0; j<3; j++) {

ellipse(100, 100, 80, 40) ;

translate(0, 100) ;

}

popMatrix() ;

translate(100, 0) ;

}

A different slant

size(400, 400) ;

rotate(radians(30)) ;

fill(255,0,0) ;

ellipse(300, 100, 100, 50) ;

rotate(PI/6) ;

fill(0, 255, 0) ;

ellipse(100, 0, 100, 50) ;

May I supersize that?

size(400, 400) ;

ellipse(50, 50, 10, 10) ;

scale(6) ;

ellipse(50, 50, 10, 10) ;

Translate and Rotatesize(600, 600) ;

ellipse(100, 100, 10, 10) ;

pushMatrix() ;

fill(0,255,0) ;

translate(100, 100) ;

rotate(PI/6) ;

ellipse(300, 300, 200, 100) ;

popMatrix() ;

pushMatrix() ;

fill(0,127,0) ;

rotate(PI/6) ;

translate(100, 100) ;

ellipse(300, 300, 200, 100) ;

popMatrix() ;

Translate and Scalesize(600, 600) ;

ellipse(100, 100, 10, 10) ;

pushMatrix() ;

fill(255,0,0) ; // red

translate(100, 100) ;

scale(0.5) ;

ellipse(300, 300, 200, 100) ;

popMatrix() ;

pushMatrix() ;

fill(127,0,0) ;

scale(0.5) ;

translate(100, 100) ;

ellipse(400, 400, 200, 100) ;

popMatrix() ;

Scale and rotate

• It’s the same in either order

size(600, 600) ;

ellipse(100, 100, 10, 10) ;

pushMatrix() ;

fill(0,0,255) ;

rotate(PI/6) ;

scale(0.5) ;

ellipse(400, 400, 200, 100) ;

popMatrix() ;

In-Class Exercise: Draw six groundhogs

• Make the window 600 by 600

• Draw a 2 by 3 collection of groundhogsfor (int i=0; i<2; i++) {

for (int j=0; j<3; j++) {

• Consider the following– Vary the groundhog position– Change the groundhog size– Rotating the groundhog

Assignment 3 - Due Feb 10

• Write a program that repeats a pattern of groundhogs in several places throughout the screen. Try to put a little variation in the pattern.

• Use a screen size of 400x400.• You must use translate(),

rotate(), and scale().• Remember to comment your

code and to submit only your source code.