Lecture 2

A Simple 2D Graphics Language

The week ahead…

• Monday:
• 2D Graphics Language
• Exercise 1 Posted (on Canvas) due Friday at 11:59pm
• Wednesday:
• Tutorial 1 - In-Class - Attendance Required
• You'll be assigned to a group on Tuesday and will sit in those groups in-class on Wednesday
• REMEMBER TO WATCH PRE-RECORDED LECTURE (w/ MQ2) BEFORE COMING TO CLASS
• Friday:
• Aligning Language (no pre-recorded lecture!)
• Mini Quiz 3 (in-class) - Canvas version if you can't attend

Reminders / Announcements

• Office hours schedule will be available on Canvas later this afternoon and will begin tomorrow. More info on Ethics sessions later this week.

A typical week…

Monday - Attend lecture, take a look at tutorial, and homework

Tuesday - Watch the pre-recorded lecture for Wednesday; peruse the tutorial

Wednesday - Come to tutorial session, try your best to iron out all of your questions; see if you can do any of the HW

Thursday - by now, you should have a strong sense of how long it will take you to complete HW Exercise; if you need more time, apply for late penalty waiver

Friday - come to class, participate in activities; finish up HW

Sat/Sun - take the weekend off if possible

Resources available throughout the week: Canvas, Class, Office Hours, and edSTEM

Our Goal for Today

• 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.

Function calls

• To call a function, write the function, followed by its inputs, separates by spaces:

function input₁ … input_n

• Then group them with parentheses:

(function input₁ … input_n)

• Line breaks and other extra whitespace aren't "code" in Racket

Examples:

• (+ 1 2)
• (+ 1 2 3)
• (string-append "1 +" "2")
• (string-append "1" "+" "2")

​

Note: + and string-append can allow variable numbers of inputs in Racket (i.e. they are variadic)

What’s the text for this DFD?

Chained (nested) calls (Composing Functions)

• The basic call format is:

(function input₁ … input_n)

• But any of these can be calls themselves
• This means the output of the inner call is used as the input to the enclosing call
• Calls are chained by nesting (chaining) their expressions

Examples

• (+ 1 (+ 1 2))
• (string-append

"this "� (string-append "is a "

"test"))

• (square 10 "solid" "blue")
• (above (square 10� "solid"

"blue")

(square 10� "solid"

"red"))

Subexpressions and data flow

Subexpressions and data flow

(string-append (string-append (string-append "this " "is a ") "tedious ") (string-append "example of " "chaining"))

Running code�in DrRacket

Using DrRacket

• The top pane is the Definitions Window
• Code here doesn’t run until you choose Run from the Racket menu
• The bottom pane is the Interactions Window
• Aka a REPL (Read/Evaluate/Print Loop)
• You can type expressions here at the “>” prompt
• Racket will run them when you hit enter and print the result

Our Style Rules for this Class

• Don’t write you code as one long line
• Add line breaks between arguments in complex calls
• Always keep your code indented properly
• Press tab to ask Racket to reindent a line based on the surrounding parentheses or Ctrl-I / Command-I to reindent the whole file
• If things that should be inputs to the same function don’t line up, then your parentheses are wrong

What to do when it breaks

• Don’t stress. Broken code is perfectly normal.
• Find the code highlighted in pink. This is the specific expression that generated the error
• Now read the error message carefully; it’s telling you what went wrong when running the pink expression
• If you see code that's highlighted in black (and orange text), that means that code was not run (we probably won't see that until Wednesday)

​

​

Making it legible

(string-append (string-append (string-append "this " "is a " "tedious ") (string-append "example of " "chaining")))

• This is completely illegible
• You can’t read, yet alone understand, code that’s written like this
• Aesthetics have functional consequences!

Making it legible

(string-append (string-append (string-append "this " "is a " "tedious ") (string-append "example of " "chaining")))

• This is completely illegible
• You can’t read, yet alone understand, code that’s written like this
• Aesthetics have functional consequences!

Making it legible

(string-append (string-append (string-append "this "

"is a "

"tedious ")

(string-append "example of "

"chaining")))

​

• To make it legible, we:
• Break it into multiple lines
• Indent it to align inputs to the same call

​

• In other words, we put it in outline form

Making it legible

(string-append (string-append (string-append "this "

"is a ")

"tedious ")

(string-append "example of "

"chaining"))

​

• To make it legible, we:
• Break it into multiple lines
• Indent it to align inputs to the same call

​

• In other words, we put it in outline form

(string-append (string-append (string-append "this "

​

"is a ")

"tedious ")

​

(string-append "example of "

"chaining"))

Indented code is a DFD (just written right to left)

Making it mutually intelligible

• The computer ignores
• Line breaks
• Extra whitespace
• It only looks at the parens
• Humans ignore
• The parens (or at least we stink at reading them)
• We look at the indentation
• Note: this means it’s critical the indentation match the parentheses!

​

Keeping your code indented

• DrRacket will automatically indent lines
• When you hit return/enter (indents the new line)
• When you hit tab (reindents current line)
• When you do Command-I (on a Mac) / Control-I (on Windows)

​

• If you run into a problem, one of the first things to do is to have racket reindent your code
• Make sure that you and Racket have the same idea of what is an input to what
• Course staff will NOT look at your code if you haven't correctly indented / formatted

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 and we'll talk more about why it's so important in the recorded lecture for Wednesday

Debugging Example (if time)

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!