twenty

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]