Chapter 14

Image Warping

Why do image warping?

• Looks cool!• Can correct for optical distortion (i.e.

keystoning).• Remote Sensing (matching together

multiple images).• Entertainment value (morphing)• Special Effect• Looking for lost people.

Homogenious

• All the same.• Homogenious point processing means that

all the points are processed the same.• Homogenious coordinate transforms means

that all coordinates are transformed the same way.

HCT’s

• homogenous transforms include scaling, translation, rotation and shear which, collectively are special cases of affine transforms.

Translation

11001001

1''

yx

tt

yx

y

x

x' x tx

y' y ty

setting a translation matrix

• given:

222120

121110

020100

aaaaaaaaa

A

setting up xlation

• public void setTranslation(double tx, double ty) {

• a[0][0] = 1;• a[1][1] = 1;• a[2][2] = 1;• a[0][2] = tx;• a[1][2] = ty;• }

scaling

• setting up to scale:

11000000

1''

yx

ss

yx

y

x

x' sx xy'syy

Simple Imlementation

• public void setScaling(double sx, double sy) {

• a[0][0] = sx;• a[1][1] = sy;• a[2][2] = 1;• }

To Scale about any point

x 'y '1

1 0 tx

0 1 ty

0 0 1

sx 0 00 sy 00 0 1

1 0 tx

0 1 ty

0 0 1

xy1

How does this simplify?

x 'y '1

sx 0 tx sxtx

0 sy ty syty

0 0 1

xy1

after working it out…

x 'sx x tx sxtx sx(x tx) tx

y 'sy y ty syty sy(y ty) ty

Concating the matrix• public static void main(String args[]) {• Mat3 tr1 = new Mat3();• Mat3 tr2 = new Mat3();• Mat3 sc = new Mat3();• Mat3 at ;• tr1.setTranslation(1,1);• sc.setScale(2,2);• tr2.setTranslation(-1,-1);• at = tr1.multiply(sc);• at = at.multiply(tr2);• at.print();• }

Rotation

x 'y '1

cos sin 0sin cos 0

0 0 1

xy1

Euler’s identity

e i cos i sin

)21(12 iii eee

Where does rotation come from?

• Multiply a complex number, times another complex number…what do you get?

• Use

Euler’s identity

Power Law of Exponents

a b a be e e

How do we get Euler?

cos sinire r ri

cosr X

Y

r sinr

SOHCAHTOA

Euler Rotation

2sin112cos2sin12cos1

'

2sin2cos22)2112(2121'

)22)(11('

)21(12

xyyx

p

iiyxyxyxiyyxxp

iyxiyxpeee iii

Derivation of Rotation

1 2 1 2( )1 1 2 2

1 2 1 2 1 2 1 2

1 2 1 2 1 2 1 2

2 2 1

2 2 1

cos sin

( )(cos sin )cos sin cos sincos sin ( sin cos )

' cos sin 0' sin cos 0

1 0 0 1 1

i

i i i

e i x iy

e e e x iy ix x i iy iy ix y i x y

x xy y

2 2

2 2

' cos sin' sin cos

x x yy x y

matrix form.

x 'y '1

cos sin 0sin cos 0

0 0 1

xy1

2x2*2x1

1 2 1 21 2

1 2 2 1

2 2 1

2 2 1

cos sinsin cos

cos sinsin cos

x yp p

x y

xy

Without Euler

1 1 1

2 2 2

1 2 1 21 2 1 1 2 2

1 2 2 1

2 2 2 2

1 2 1 21 2

1 2 2 1

(cos ,sin ) ( , )cos sinsin cos

p x iyp x iy

x x y yp p x iy x iy

x y x yby

x yx y

p px y

implementation of rotation in mat3

• public void setRotation(double theta) {• theta = theta * Math.PI/180;• double cas = Math.cos(theta);• double sas = Math.sin(theta);• a[0][0] = cas;• a[1][1] = cas;• a[0][1] = -sas;• a[1][0] = sas;• }

Using Java2d

• AffineTransform atr = new AffineTransform();

• atr.setToTranslation(x1, y1);• atr.scale(sx, sy);• atr.translate(-x1, -y1);• Shape transformedShape =

atr.createTransformedShape(gp);

Using mat3 to scale and rotate• Mat3 tr1 = new Mat3();• Mat3 tr2 = new Mat3();• Mat3 rt = new Mat3();• Mat3 sc = new Mat3();

• tr1.setTranslation(getCentroidX(), getCentroidY());• sc.setScale(1, 1);• rt.setRotation(0);• tr2.setTranslation(-getCentroidX(), -getCentroidY());• at = tr1.multiply(rt);• at = at.multiply(sc);• at = at.multiply(tr2);

J2d, lets rotation occur about any point

• public void drawRotateGraphics(Graphics g) {• final int xc = getCentroidX();• final int yc = getCentroidY();• Graphics2D g2d = (Graphics2D) g;• AffineTransform saveAt = g2d.getTransform();• for (float theta = 0; theta <= 360; theta += 10f) {• g2d.setTransform(AffineTransform.getRotateInstance(• theta * PI_ON_180,• xc, yc));• g2d.draw(p);• }• g2d.setTransform(saveAt);• // This leaves the g2d back on 0 degrees of rotation• }

Rotate with a new shape• public void drawTransformedShape(Graphics g) {• final int xc = getCentroidX();• final int yc = getCentroidY();• Graphics2D g2d = (Graphics2D) g;• for (float theta = 0; theta <= 360; theta += 10f) {• final AffineTransform at =

AffineTransform.getRotateInstance(theta *• PI_ON_180,• xc, yc);• g2d.draw(at.createTransformedShape(p));• }

Or use Mat3 to Draw• public void drawMat3(Graphics g) {• final int xc = getCentroidX();• final int yc = getCentroidY();• tr1.setTranslation(xc, yc);• tr2.setTranslation(-xc, -getCentroidY());• for (float theta = 0; theta < 360; theta += 10f) {

• rt.setRotation(theta);• at = tr1.multiply(rt);• at = at.multiply(tr2);• drawPolygon(g, at.transform(p));• }• }

We can thankEuler’s identity!

e i cos i sin

)21(12 iii eee

Who was Euler?

• Leonhard Euler (April 15, 1707 - September 18, 1783) (pronounced "oiler"). Lived to be 76.

• first to use the term "function" (defined by Leibniz - 1694) to describe an expression involving various arguments; ie: y = F(x).

• A mathematical child prodigy. • professor of mathematics in Saint Petersburg, and Berlin, • Most prolific mathematician of all time, 75 volumes. • blind for the last seventeen years of his life, during which

time he produced almost half of his total output.

shear

x 'y '1

1 shx 0shy 1 00 0 1

xy1

setShear

• public void setShear(double shx, double shy) {• a[0][0] = 1;• a[1][1] = 1;• a[2][2] = 1;• a[0][1] = shx;• a[1][0] = shy;• }

The AffineFrame

rotation

scaling

shear

destination scanning• transform = transform.invert();• for (int x = 0; x < w; x++)• for (int y=0; y < h; y++) {• p=transform.multiply(x,y);• xp = (int) p[0];• yp = (int) p[1];• if ((xp < w) && (yp < h) && (xp >= 0) && (yp >= 0)) {• rn[x][y] = r[xp][yp];• gn[x][y] = g[xp][yp];• bn[x][y] = b[xp][yp];• }• }

rotation

scale

shear in x

Create the combinations

– Image scaleAbout(image, tx, ty,sx,sy);– Image rotateAbout(image, tx, ty, theta);– Image shearAbout(image, tx, ty, shx, shy);– Image rotateShearScale(image, theta, shx,shy,

sx, sy);Image rotateShearScaleAbout(image, tx,ty,

theta, shx,shy, sx, sy);

UseMatrix concatenation

• Use matrix concatenation for everything.• Only a single 3x3 matrix will result when

we are done.• Use the AffineTransform Class, as

described on pp. 135 of the handout.

GUI

• Main Menu>AffineTransformMenu• RunMenuItems:

– Translate…– Rotate…, Scale…, Shear…– RotateAbout…, ScaleAbout…, ShearAbout…– RotateScaleShearAbout…– Use OK and Cancel RunButtons

fsdfsdsfd