IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts...
-
Upload
russell-park -
Category
Documents
-
view
213 -
download
0
Transcript of IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts...
![Page 1: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/1.jpg)
IAT 355
Lecture 4 Computer Graphics: Rocket
![Page 2: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/2.jpg)
May 9, 2014 IAT 355 2
Outline
g Programming concepts– Programming Computer Graphics– Transformations– Methods– Classes
![Page 3: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/3.jpg)
May 9, 2014 IAT 355 3
Drawing a rocket
background(0);fill(255);triangle(10, 0, 0, 20, 20, 20);rectMode(CORNERS);rect(5, 20, 8, 23);rect(12, 20, 15, 23);
![Page 4: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/4.jpg)
May 9, 2014 IAT 355 4
Now I want to draw several rockets
g Want several rockets in different locations on the screen
g I could copy and paste the code– Need to adjust all the numbers for the
new location
g Or… define a method
![Page 5: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/5.jpg)
May 9, 2014 IAT 355 5
First method for drawing a rocket
void drawRocket() { fill(255); triangle(10, 0, 0, 20, 20, 20); rectMode(CORNERS); rect(5, 20, 8, 23); rect(12, 20, 15, 23);}
Gotcha! Once you start using methods, all code must be in methods (can’t just directly call
drawRocket() at the top of the file)
![Page 6: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/6.jpg)
May 9, 2014 IAT 355 6
Didn’t seem to help much…
g Still just draws a rocket at one fixed location
g Need arguments that allow me to tell the program where I want the rocket!– Must figure out the relationship between the
position and the location of the rest of the parts
g Argument variables are available within the method, but not outside (method scope)
![Page 7: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/7.jpg)
May 9, 2014 IAT 355 7
DrawRocket() with arguments
void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 10; triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth,
halfHeight); rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8,
halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5,
halfHeight + 3);}
We’re purposely ignoring the arguments for now
![Page 8: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/8.jpg)
May 9, 2014 IAT 355 8
Now I’d like to specify rotation g Currently I specify the nose position and it draws a
rocket that faces straight up
g To rotate the rocket, I’d need to figure out the new position of the vertices– Too hard!
g Instead of rotating the rocket, rotate the paper– As long as I’m rotating the paper, I may as well slide it around
as well
g To prepare for translating and rotating, first draw the rocket centered around the origin (0,0)
![Page 9: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/9.jpg)
May 9, 2014 IAT 355 9
Add translation and rotation
void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 10;
translate(x, y); rotate(rot);
triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight);
rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3);}
Let’s try drawing several rockets
![Page 10: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/10.jpg)
May 9, 2014 IAT 355 10
Works fine for one call…
g But when we call it twice, it doesn’t seem to work– Looks like first call messes up subsequent calls
g What happening is that, when you move the paper (translate, rotate) the paper stays moved
g Subsequent paper moves (additional translates and rotates) build on top of the previous ones
g What we want is to move the paper, draw, and move it back
g We need pushMatrix() and popMatrix()– pushMatrix() remembers the previous paper position (previous
transformation matrix)– popMatrix() restores the paper to the remembered position (restores the
transformation matrix)
![Page 11: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/11.jpg)
May 9, 2014 IAT 355 11
Using pushMatrix() and popMatrix()
void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 10;
pushMatrix();
translate(x, y); rotate(rot);
triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight);
rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight +
3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3);
popMatrix();}
![Page 12: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/12.jpg)
May 9, 2014 IAT 355 12
Classes
![Page 13: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/13.jpg)
May 9, 2014 IAT 355 13
Classes
g Java (Processing) is an object-oriented language
g This means that parts of your program that you treat as conceptual things, become things (objects) in the program code
g Objects are built from classes– Classes are the blueprint, objects are built from the blueprint– Objects are called instances of classes
g Our rocket sure seems like a thing – let’s turn it into a class
![Page 14: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/14.jpg)
May 9, 2014 IAT 355 14
Parts of a class
g Classes define fields, constructors and methods
g Fields are the variables that will appear inside every instance of the class– Each instance has its own values
g Constructors are special methods that define how to build instances (generally, how to set the initial values of fields)
g Methods are how you do things to instances
![Page 15: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/15.jpg)
May 9, 2014 IAT 355 15
Defining the rocket class
class Rocket {
// fieldsfloat rotation = 0;
float xPos; float yPos; final int halfWidth = 10; final int halfHeight= 10;
// constructorRocket( int initialX, int initialY, float initialRot ) {
xPos = initialX; yPos = initialY;rotation = initialRot;
}}
![Page 16: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/16.jpg)
May 9, 2014 IAT 355 16
Using the class to create instances
g Classes define a typeg You can now declare variables of this type and initialize
them using the constructorg Like arrays, the keyword new is used to tell Java to create a
new object (hmm, so arrays must be objects…)
Rocket r1, r2 ;void setup() {
r1 = new Rocket(75, 10, 0);r2 = new Rocket(50, 50, PI/2);
}
g Nice, but my rockets don’t do anything (need methods!)
![Page 17: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/17.jpg)
May 9, 2014 IAT 355 17
Adding a draw routine to our Rocket
void draw() {pushMatrix();translate(xPos, yPos);rotate(rotation);
triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight);
rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8,
halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5,
halfHeight + 3);popMatrix();
}
Don’t need arguments because we use the fieldsBut we could define additional arguments if we wanted to
No Arguments!
![Page 18: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/18.jpg)
May 9, 2014 IAT 355 18
Calling methods on objects
g You call methods on instances
g Think of the method as something your asking the object to do
g For example, we can now ask the rockets to draw themselvesr1.draw();
g In general, to call a method, take the name of the variable holding the object + “.” + the method namemyObjectInstance.myMethod();
![Page 19: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/19.jpg)
May 9, 2014 IAT 355 19
What else do we want to do to the Rocket?
g We may want to change the rotationrotateClockwise();rotateCounterclockwise();
g We may want to give the rocket a boostfireThrusters();
![Page 20: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/20.jpg)
Review
g Graphics:triangle() draw a trianglepushMatrix() copy the top of the matrix
stacktranslate() change XYZ locationrotate() rotate about origin… draw in translated & rotated coordinates
popMatrix() recover the previous matrix May 9, 2014 IAT 355 20
![Page 21: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/21.jpg)
Review
g Object Oriented Programming– Class -- a type you define– Instance -- one variable of a class– Fields -- variables within a class– Methods -- functions that act within a
class– Constructor -- create an instance of a
class
May 9, 2014 IAT 355 21
![Page 22: IAT 355 Lecture 4 Computer Graphics: Rocket. May 9, 2014IAT 3552 Outline Programming concepts –Programming Computer Graphics –Transformations –Methods.](https://reader030.fdocuments.in/reader030/viewer/2022032801/56649dde5503460f94ad7d25/html5/thumbnails/22.jpg)
Review
g Graphics/ OO Example– Rocket
• Translated & rotated to its new location• Data of location stored within its class• Each rocket has its own location
– And its own data!
May 9, 2014 IAT 355 22