1 / 22

twenty

twenty. high-level operations on pictures. Recap: vector graphics constructors. [box width height ] Creates a picture with a box [group pictures … ] Makes a compound picture from existing pictures [translate point pictures … ] A new picture with all pictures shifted by point

libitha
Download Presentation

twenty

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. twenty high-level operations on pictures

  2. Recap: vector graphics constructors • [box width height]Creates a picture with a box • [group pictures …]Makes a compound picture from existing pictures • [translate point pictures …]A new picture with all pictures shifted by point • [scale size-or-point pictures …]A new picture with all pictures grown/shrunk/stretched • If size-or-point is an integer, picture is uniformly grown/shrunk • If size-or-point is a point, the pictures are stretched horizontally by the point’s X coordinate, and vertically by its Y coordinate • [paint color pictures …]Renders pictures filled with color • [ink brush pictures …]Renders pictures outlined with brush

  3. New: vector graphics accessors objects in picture • The bounding box of a picture is the smallest (unrotated) box that completely encloses the picture • [left-edge picture][right-edge picture][top-edge picture][bottom-edge picture] • Returns the X coordinate of the left/right edge of picture’s bounding box • Returns the Y coordinate of the top/bottom edge of picture’s bounding box • [width picture][height picture] • The width/height in pixels of picture’s bounding box • [center picture] • The center point of picture’s bounding box bounding box

  4. Stacking boxes • How do we write a procedure tostack one picture on top of another?[stack-top [box 40 40] [box 100 100] • [define stack-top [top base → [group base [translate [point 0 [− [top-edge base] [bottom-edge top]]] top]]]]

  5. Stacking boxes • How do we do the reverse[stack-bottom [box 40 40] [box 100 100] • [define stack-bottom [bottom base → [group base [translate [point 0 [− [bottom-edge base] [top-edge bottom]]] top]]]]

  6. Handling variable numbers of objects • How do we make it handle more than two arguments?[stack [box 10 10] [box 20 20] [box 30 30]] • [define stack [pictures … → [fold stack-top [group] «an empty group» pictures]]]

  7. Stacking horizontally • [define stack-right [base right → [group base [translate [point [− [right-edge base] [left-edge right]]] right]]]] • [define splay [pictures … → [fold stack-right [group] pictures]]]

  8. Fixing the position of an object • Stack-top, etc. all leave the object in the coordinate system of the base • So unlike box, they don’t return a picture centered around the origin • How do we recenter an existing picture around the origin? • [define recenter [picture → [translate [− [center picture]] picture]]]

  9. Prairie School stained glass patterns • Frank Lloyd Wright • Designs emphasized strong horizontals and verticals • Common motifs • Deformed grids • Symmetry (vertical and horizontal) • Repeated patterns

  10. Making deformed grids • We’d like to be able to express this picture simply and clearly • Without having to write 35 calls to box • We’ll start by just trying to get the leading (the black lines) right, without worrying about color

  11. Making the leading • The design consists of almost identical rows of boxes • Each row is a fixed design • But the height varies from row to row • Start by writing code to make one row

  12. Making the top row of boxes • [define top-row [splay [box 10 10] [box 10 10] [box 15 10] [box 60 10] [box 15 10] [box 10 10] [box 10 10]]]

  13. Making an arbitrary row • [define row [height→ [splay [box 10 height] [box 10 height] [box 15 height] [box 60 height] [box 15 height] [box 10 height] [box 10 height]]]]

  14. Making the leading • [stack [row 10] [row 15] [row 190] [row 15] [row 10]]

  15. What’s wrong with this? • [splay [row 10] [row 15] [row 190] [row 15] [row 10]] • If we want to change the design we have to redefine row • We’d like to have a procedure that • Takes the widths and heights of the rows and columns as arguments • And makes the picture

  16. Making the heights be a parameter How do we change: • [splay [row 10] [row 15] [row 190] [row 15] [row 10]] into just: • [leading [list 10 15 190 15 10]] ?

  17. Making the heights be a parameter • [define leading [heights → [splay [map row heights]]]] • Well, almost: • Generates ArgumentTypeException • What’s wrong? • Splay wants to take several pictures as arguments • Now one list of pictures

  18. Fixing the bug • How do we fix it? • [define leading [heights → [apply splay [map row heights]]]]

  19. Making the heights be a parameter • Okay, what should we change next? • We still need to redefine row any time we want to change the design • How do we change it so we can just say: [leading [list 10 10 15 60 15 10 10] [list 10 15 190 15 10]]i.e. so we can pass it both the widths and the heights as arguments?

  20. Making the widths be a parameter • Now the width need to be anargument to row • [define leading [widths heights → [apply splay [map [height → [row widths height]] heights]]]]

  21. Fixing the row procedure • This time, row will take as arguments • A list of widths • A single height • It needs to make a box for each width • And splay all the boxen together • [define row [widths height → [apply splay [map [width → [box width height]] widths]]]]

  22. Live hacking exercise • Okay, now we have the leading • But no color • How do we specify the colors for each of the boxes? • Big list of colors • Procedure to compute color for each box • But what are the arguments to the procedure? • Width and height? • But what if we have identically sized boxes with different colors? • Position? • In x, y coordinates? • Or in grid position? • A new procedure will be useful • [up-to n proc] returns (as a list) the values of proc when called on the numbers [0 1 2 … n-1]

More Related