1LCC 6310The Computer as an Expressive MediumLecture 5OverviewProgramming conceptsMethodsClassesProcessing, pp.301-318Drawing a rocketbackground(0);fill(255);triangle(10, 0, 0, 20, 20, 20);rectMode(CORNERS);rect(5, 20, 8, 23);rect(12, 20, 15, 23);Let's try this in Processing…Now I want to draw several rocketsI want several rockets in different locations on the screenI could copy and paste the codeBut I would need to adjust all the numbers for the new locationsOr… I can just define a method…2First method for drawing a rocketvoid drawRocket() {fill(255);triangle(10, 0, 0, 20, 20, 20);rectMode(CORNERS);rect(5, 20, 8, 23);rect(12, 20, 15, 23);}Now how do we use this code? Can we just call the method at the top of the file? Let's try it…Note: we can call the method whatever we want, but it's conventional to give methods names that begin with a lower case letterE.g. drawRocket rather than DrawRocketFirst method for drawing a rocketvoid drawRocket() {fill(255);triangle(10, 0, 0, 20, 20, 20);rectMode(CORNERS);rect(5, 20, 8, 23);rect(12, 20, 15, 23);}Now how do we use this code? Can we just call the method at the top of the file? Let's try it… causes an error!! You can’t just directly call drawRocket() at the top of the fileOnce you start using methods, all code must be in methods…Calling drawRocket()void setup() {drawRocket(); }void drawRocket() {fill(255);triangle(10, 0, 0, 20, 20, 20);rectMode(CORNERS);rect(5, 20, 8, 23);rect(12, 20, 15, 23);}This didn’t seem to help much…Our method still just draws a rocket at one fixed locationWe need arguments that allow us to tell the program where we want the rocket!This means we need to figure out the relationship between the position of the rocket and the location of the rest of its partsNote: Argument variables are available within the method, but not outside (method scope)3drawRocket() with argumentsvoid drawRocket(int noseX, int noseY) { // draw a rocket with respect to its nose// other parts of the rocket with respect to its noseint bottomOfRocket = noseY + 20;int leftOfRocket = noseX - 10;int rightOfRocket = noseX + 10;fill(255);// draw the rocket bodytriangle(noseX, noseY, leftOfRocket, bottomOfRocket, rightOfRocket, bottomOfRocket);// draw the rocket feetrectMode(CORNERS);rect(leftOfRocket + 5, bottomOfRocket, leftOfRocket + 8, bottomOfRocket + 3);rect(rightOfRocket - 8, bottomOfRocket, rightOfRocket - 5, bottomOfRocket + 3);}Now to specify rotationCurrently we specify the nose position and it draws a rocket that faces straight upTo rotate the rocket, we would need to figure out the new position of the verticesThat's hard!Instead of rotating the rocket, let's rotate the paperAs long as we're rotating the paper, might as well slide it around as wellTo prepare for translating and rotating, first let's draw the rocket centered around the origin (0,0)Centering the rocket around the originCurrently the rocket draws with respect to its noseYou can see this by calling drawRocket(0,0)Now we want to draw the rocket around the originWe know the rocket dimensions are:int bottomOfRocket = noseY + 20;int leftOfRocket = noseX - 10;int rightOfRocket = noseX + 10;From this, we know our rocket has a width and height of 20 pixels, so we can define some constants:final int halfHeight = 10;final int halfWidth = 10;Now let's use these to draw the rocket…Body and feet around the originDrawing the rocket body used to look like:triangle(noseX, noseY, leftOfRocket, bottomOfRocket, rightOfRocket, bottomOfRocket);Now instead we start at the origin and use halfHeight and halfWidth:triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight); Drawing the rocket feet used to look like:rect(leftOfRocket + 5, bottomOfRocket, leftOfRocket + 8, bottomOfRocket + 3);rect(rightOfRocket - 8, bottomOfRocket, rightOfRocket - 5, bottomOfRocket + 3);Now instead we center around the origin:rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight + 3);rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3);4Putting it togethervoid 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);}Note: we’re purposely ignoring the arguments for now!Now add translation and rotationvoid 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…drawRocket(50,50,HALF_PI);drawRocket(25,25,HALF_PI);Works fine for one call…But when we call it twice, it doesn’t seem to workLooks like first call messes up subsequent callsWhat is happening?!When you move the paper (translate, rotate) the paper stays movedSubsequent paper moves (additional translates and rotates) build on top of the previous onesSo what we want is to move the paper, draw, and then move it back We need pushMatrix() and popMatrix()pushMatrix() remembers the previous paper position (i.e. the previous transformation matrix)popMatrix() restores the paper to the remembered position (i.e. restores the transformation matrix)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();}Let’s try drawing several rockets now…drawRocket(50,50,HALF_PI);drawRocket(25,25,HALF_PI);5ClassesJava (Processing) is an object-oriented languageThis means that parts of your program that you treat as conceptual things, become things (objects) in the program code Objects are built from classesClasses are the blueprint, objects are built from the blueprintObjects are called instances of classesOur rocket sure seems like a thing – let's turn it into a classParts of a classClasses define fields, constructors and methodsFields are the variables that appear inside every instance of the class, you can think of them as
View Full Document
Unlocking...