Lecture 2

A Simple 2D Graphics Language

Our Goal

• Last time, we wrote our first short text program.
• For instance, we calculated (+ 2 3) and found the answer was 5!
• Next, we'll try a slightly longer program. Converting a DFD to Text.
• Then, we want to do something more fun. Rather than use arithmetic functions like +, we're going to use a series of pre-made graphics functions.
• Remember, ALL functions work the same way–as long as we give them the correct inputs, they'll give us whatever output they promised
• We don't (yet) need to know HOW they do what they do…just that they do it.
• Objectives:
• Learn what functions exist for us to use.
• Understand what (order of) inputs they need to create their promised outputs.
• Practice chaining these functions together into larger programs.

2D Graphics

1. Learn what functions we have available
2. Practice using them

One extra bit of magic…

#lang 2htdp/isl+

(require 2htdp/image)

• None of the graphics functions are defined by default
• To access the library of graphics functions, you have to add a require declaration at the beginning of your file Pass it the argument the name of the library
• In this case, 2htdp/image
• 2htdp means the code for the second edition of How to Design Programs
• image means the image library for 2htdp
• Put it at the top of your file (after our language chooser)
• This loads in these functions into our DrRacket…which means as long as we know inputs they take, we can use them to create sweet images!

Rectangles and Squares

(rectangle width height� mode color)

(square width mode color)

Creates a rectangle where…

• the width is width
• the height is height
• mode must be either the string "solid" or the string "outline"
• color is either the name of a color (e.g. "red", "blue", etc.) or a color object

Official Documentation Link

Circles and Ellipses

(ellipse width height� mode color)

(circle radius mode color)

Creates curved objects where…

• the width is width (or radius)
• the height is height
• If they're the same than the ellipse IS a circle!
• mode must be either the string "solid" or the string "outline"
• color is either the name of a color (e.g. "red", "blue", etc.) or a color object

Official Documentation Link

Compositing images

(overlay image image …)

(underlay image image …)

Make a compound image from multiple image objects where…

• the images are drawn on top of one another
• With earlier ones being on top of later ones (overlay)
• Or below later ones (underlay)
• image objects can be simple shapes or other composites!

Official Documentation Link (overlay)

Official Documentation Link (underlay)

Placing images next to one another

(above images …)

(beside images …)

Both make an image by laying out the specified images vertically (above) or horizontally (beside).

• These functions are what's called variadic – they accept as many inputs as you give them.
• You might also hear of them as having indefinite arity.

Official Documentation Link

Shifting images relative to one another

(overlay/offset top-image

right down

bottom-image)

Composites the two images according to some rules:

• The bottom-image is shifted the specified number of pixels right and down relative to the top image
• You can also think of it as moving the top image left and up relative to the bottom image

overlay/xy works similarly

​

Official Documentation Link

Rotate

(rotate angle image)

Rotates image counter-clockwise angle degrees about its center

Official Documentation Link

Wedges

(wedge radius angle mode color)

Creates a wedge of a circle with…

• The main circle with size radius
• A cutout angle measured in degrees (between 0 and 360)
• A mode of drawing ("outline" or "solid")
• A color to draw the wedge in

Official Documentation Link

Scaling

(scale scale-factor image)

Scale an inputted image by some scale-factor

Ex. 10 means 10 times as large

Official Documentation Link

A note on Colors

• Colors can be specified by name using strings
• Racket understands the names for the standard primaries and secondaries
• "red", "green", "blue", "cyan", "magenta", "yellow"
• As well as the standard Web colors and X11 color names
• Full list of recognized color names is available here in the Racket documentation

Color objects

(make-color r g b)

(make-color r g b a)

(color r g b)

Alternatively, you can also specify a color using a color object

• Specifies the amount of red, green, and blue light in the color, on a 0-255 scale
• Note: when Racket prints a color object, it prints it in a text format, not as the color itself. To test a color, you must draw with it!

Official Documentation Link

Using define to "remember" data

• In Exercise 0, we used define to have Racket remember our NetIDs.
• We'll talk more about what exactly define is next time…but it's important to note that you can save ANY data object using define. For example, you could save the following:

(define a-green-square (square 10 "solid" "green"))

• Then, whenever you use a-green-square later on in your programs, Racket will know what you mean!
• This is important for Exercise 1!

Debugging Example

Dataflow debugging example

• Suppose we want to make something like this:

​

​

​

• So we write the code:

​

(overlay (circle 30 "solid" "green" square 100 "solid" "orange")))

Checking the data flow

• Remember the indentation shows you what the system thinks are the inputs to a function.
• We need to indent this code! So we highlight it and hit control-I or command-I
• So now you can check it visually to make sure it’s what you expect
• If you don’t know what should be an input to what
• Then you don’t understand your code
• Don’t try to edit it!
• Instead, think through what the data flow should be
• If you don’t know, come to office hours
• Only fix your code once you understand what it’s supposed to do.

​

​

Dataflow debugging example

• We get the following error:

circle: expects only 3 arguments, but found 7

• Which is saying that the call to circle has 7 inputs but should only have three
• radius/size, mode, and color
• DrRacket highlights the code like this:

(overlay (circle 30 "solid" "green" square 100 "solid" "orange")))

• So we know that the highlighted function call is what it’s complaining about

Dataflow debugging example

(overlay (circle 30 "solid" "green" square 100 "solid" "orange"))

• Sure enough! The call to square is written inside the call to circle as extra inputs, so DrRacket is reading the code this way:

​

(overlay (circle 30� "solid"� "green"

square� 100

"solid" � "orange")))

Dataflow debugging example

• In Racket, we have a separate set of parens for each call
• So the call to square needs to be grouped with its own set:

(overlay (circle 30� "solid"� "green"

(square 100

"solid" � "orange")))

Dataflow debugging example

• But in Racket, the nesting of expressions indicates the chaining of calls
• And we make it visual by indenting
• So this code says the call to square is an input to the call to circle:

(overlay (circle 30� "solid"� "green"

(square 100

"solid" � "orange")))

Dataflow debugging example

• That’s not what we want; we want them both to be inputs to overlay
• So we remove the call to square from inside the call to circle:

(overlay (circle 30� "solid"� "green"))

• And paste it in as a second argument to overlay:

(overlay (circle 30� "solid"� "green")

(square 100

"solid" � "orange"))

• And now it works!