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 matrix popMatrix() ; To start a new current matrix and save a copy of the current matrix pushMatrix() ; To add transforms to the current matrix translate() –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 Rotate size(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 Scale size(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 groundhogs for (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 3Assignment 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.