Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height]...

27
fifteen high-level operations on pictures
  • date post

    20-Dec-2015
  • Category

    Documents

  • view

    215
  • download

    1

Transcript of Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height]...

Page 1: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

fifteen

high-level operations on pictures

Page 2: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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

Page 3: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

New: vector graphics accessors 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

objects in picture

bounding box

Page 4: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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]]]]

Page 5: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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]]]]

Page 6: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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 [??? → ???]]

Page 7: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

New feature:Procedures with variable numbers of arguments

[name … → exp] The “…” after the argument name means the procedure can accept a

variable number of arguments All of the arguments get packaged as a list and named name. If the procedure is called with no arguments, then name is a list with 0

elements.

[name1 name2 … → exp] This means the procedure requires at least 1 argument, which is named

name1. Any other arguments are packaged as a list named name2.

[name1 name2 name3 … → exp] Same, but the first two arguments are named name1, name2. Can have any number of extra names But only the last name can have the “…” on it.

Page 8: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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 … → ???]]

Page 9: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Recap: lists

[map proc list] Runs proc on each element of list and returns a new list of the results

[fold proc list][fold proc start-value list]

Runs proc on successive elements of list to reduce it to a single value (e.g. [fold + list] returns the sum of all elements of the list.

[apply proc list] Runs proc with the elements of list as its arguments.

[list item1 item2 … itemn] Makes a new list with items.

Page 10: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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 pictures]]]

Page 11: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Esoteric point:Handling empty argument lists

The two-argument version of fold breaks when we call it with a list with no arguments. So stack will break if we just say [stack]

What if we say this instead:

[define stack [pictures … →

[fold stack-top [group] «an empty group» pictures]]]

Page 12: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Stacking horizontally

[define stack-right [base right → [group base [translate [point [− [right-edge base] [left-edge right]]

0] right]]]]

[define splay [pictures … →

[fold stack-right [group] pictures]]]

Page 13: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Fixing the position of an object

Stack-top, etc. all leave base in its original position … … and stack everything else off the end of it

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]]]

Page 14: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Prairie School stained glass patterns

Frank Lloyd Wright Designs emphasized

strong horizontals and verticals

Common motifs Deformed grids Symmetry (vertical

and horizontal) Repeated patterns

Page 15: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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

Page 16: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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

Page 17: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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]]]

Page 18: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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]]]]

Page 19: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Making the leading

[stack [row 10]

[row 15]

[row 190]

[row 15]

[row 10]]

Page 20: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

What’s wrong with this?

[stack [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

Page 21: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Making the heights be a parameter

How do we change: [stack [row 10]

[row 15]

[row 190]

[row 15]

[row 10]]

into just: [leading [list 10 15 190 15 10]] ?

Page 22: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Making the heights be a parameter

[define leading

[heights →

[stack [map row heights]]]]

Well, almost: Generates ArgumentTypeException

What’s wrong? Splay wants to take several pictures as

arguments … … not a (single) list of pictures

Page 23: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Fixing the bug

How do we fix it? [define leading

[heights →

[apply stack

[map row heights]]]]

Page 24: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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?

Page 25: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

Making the widths be a parameter

Now the widths need to be anargument to row

[define leading

[widths heights →

[apply stack

[map [height →

[row widths height]]

heights]]]]

Page 26: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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]]]]

Page 27: Fifteen high-level operations on pictures. Recap: vector graphics constructors [box width height] Creates a picture with a box [group pictures …] Makes.

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?