1 / 30

Mastering Polygons: Arrays, Transformations & Shapes

Explore arrays for shapes, translation, & rotation. Draw complex polygons with built-in functions. Learn to push, pop, & transform your creations dynamically.

lsage
Download Presentation

Mastering Polygons: Arrays, Transformations & Shapes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IAT 800 Polygons, Transformations, and Arrays IAT 800

  2. Today • Arrays • Building Complex Shapes • Translation and Rotation • Pushing and Popping IAT 800

  3. Arrays • Arrays store lists of values • Access items by index number IAT 800

  4. Building Special Shapes • The beginShape() and endShape() functions allow us to draw irregular shapes from any number of points we define. • Many types of Shape: • POINTS, LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGON • POLYGON will be the most useful. IAT 800 …

  5. Building Polygons • beginShape(); • Tells the program to start the polygon. • vertex(x, y); • Make as many calls to this as you have vertices in your polygon. • endShape( CLOSE ); • Finishes the shape, connecting the last vertex to the first vertex to close the polygon, then colors it with the current fill() color. IAT 800

  6. Building Polygons • beginShape(); • vertex(10, 50); (starts a new polygon, and begins at point (10, 50).) IAT 800

  7. Building Polygons • vertex(20, 10); • vertex(30, 40); • vertex(80, 60); • vertex(40, 80); (adds 4 more points to the polygon, and connects them in the order they are called.) IAT 800

  8. Building Polygons • endShape(CLOSE); (connects the last point to the first point, and fills the polygon.) IAT 800

  9. Let’s Use Arrays • Let’s store the points that we’re drawing. int[] xvals = {10, 20, 30, 80, 40}; int[] yvals = {50, 10, 40, 60, 80}; beginShape(); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i], yvals[i]); } endShape(CLOSE); IAT 800

  10. Let’s Use Arrays • Well, we can also use those arrays to draw the same shape somewhere else. beginShape(); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i] + 10, yvals[i] + 10); } endShape(CLOSE); IAT 800

  11. This is not very general • What if you wanted to move by some other value? • Need a general method of moving polygons of some given shape IAT 800

  12. Translation • Translation gives us another way of drawing in a new location. It in essence, moves the point (0, 0) in our window. (0, 0) beginShape(); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i], yvals[i]); } endShape(CLOSE); IAT 800

  13. Translation • After the call to translate(), any drawing functions called will treat our new orange point as if it were (0, 0). (0, 0) (10, 10) translate(10, 10); IAT 800

  14. Translation • So now, if we write the exact same polygon code as above, the new polygon will be 10 pixels down and 10 pixels to the right. (0, 0) (10, 10) beginShape(); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i], yvals[i]); } endShape(CLOSE); IAT 800

  15. Rotation • Much like Translation, Rotation moves our drawing space, so that we can draw at different angles. • Most of the time, you’ll want to use Rotation in conjunction with Translation, because rotate() rotates the drawing window around the point (0, 0). IAT 800

  16. Rotation • Let’s look at an example without translation: (0, 0) rect(10, 10, 50, 50); IAT 800

  17. Rotation • Make a variable with the value for 45 degrees in Radians. (0, 0) float angle = radians(45); ( radians() takes an int or floatdegree value and returns a float radian value. If you’re confused about the concept of radians, ask me afterward.) IAT 800

  18. Rotation • Rotate our drawing canvas 45 degrees around the origin. (0, 0) rotate(angle); (You can see that one problem now is that much of our drawing canvas is now outside of the window.) IAT 800

  19. Rotation • Draw the same square, now relative to our rotated canvas. (0, 0) rect(10, 10, 50, 50); (We only get to see about half of our square, and it isn’t really rotated in any satisfactory way.) IAT 800

  20. Rotation • Let’s try this from the start, using translation. • Where should we translate to? • The point around which we want to rotate. So let’s try and rotate around the center of the square. • This means moving the origin, and drawing the square around it. IAT 800

  21. Rotation • Let’s start with setting our rotation point: (0, 0) translate(35, 35); (35, 35) IAT 800

  22. Rotation • Now let’s draw a square with this point at its center. (0, 0) rect(-25, -25, 50, 50); (35, 35) IAT 800

  23. Rotation • Then let’s do the same rotate we did last time. (0, 0) float angle = radians(45); rotate(angle); (35, 35) IAT 800

  24. Rotation • Now when we draw the same square as before, it will have the same center point. (0, 0) float angle = radians(45); rotate(angle); (35, 35) IAT 800

  25. Rotation • Try applying rotation to your animations using draw(). What variable will you want to iterate to make a shape rotate over time? • Try making a custom polygon rotate instead of a square. IAT 800

  26. Wait! How do I get back to normal?! • If you plan to do a lot of translations and rotations, it helps to know about the concepts of pushand pop… (0, 0) (35, 35) (60, 15) I just want to go back to where I started before this! IAT 800

  27. Pushing and Popping • Pushing is a way to say: • “Remember this orientation!” • pushMatrix(); • Popping is a way to say: • “Take me back to the way things once were!” • popMatrix(); IAT 800

  28. Push & Pop …IN ACTION! • If we want to remember the original orientation… pushMatrix(); translate(35,35); rotate( radians(45) );rect(-25,-25,50,50); popMatrix(); rect(-25,-25,50,50); (0, 0) (35, 35) You can push and pop as many times as you want. It’s like you’re writing an address for the way things were on a card, and putting it on a stack each time you push… and pop just takes the first card off the top of the stack. IAT 800

  29. How is this useful? • You don’t have to remember the math to reverse all the translations and rotations you’ve done! • You can make spiral shapes, then go back to normal! • You can make drawings with limbs! (You don’t want to have to calculate the angles of every finger, do you?) IAT 800

  30. Review • Arrays • Drawing Polygons • Translation and Rotation • pushMatrix and popMatrix IAT 800

More Related