Skip to main content

Day 2 - Strings & Images

Skills: None​

Pre-reading: 3.1.5 to 3.1.7​

Intro (20 mins)​

Goal Get started with github.dev, vscode; learn about algebra on strings & images.

  • Review: Ask someone for an example arithmetic expression (type exactly what they say: if they don't include parentheses, do not add them yourself, see what error Pyret gives).
  • Confirm understanding of spacing, parentheses, expression vs. value.

Create scratch repository on Github for in-class work​

NOTE: Maybe we should just have them fork a repo? Then can have autoprompt for extension...

  • Go to github.com, log in.
  • Create new repository, call it "cs2000-scratch". You can all name them the same thing, since the full "name" of your repository will be "github.com/yourusername/cs2000-scratch". Make sure to set it to Private. Check "Add a README file".
  • Now, when viewing the repository, type the "." key. This should redirect you to "github.dev/yourusername/cs2000-scratch" (note .dev rather than .com), and after a little while, open up an editor called "VSCode".
  • Click the icon on the left with cubes and type Pyret in the search field. Click install on the first one.
  • Now click the top icon on the left, which gets you back to your files, and click the little icon to make a new file. Type "2.arr" as the file name. This will be your file for today, which is the second class.
  • Notice that there is a blue "Run" button at the top; what is visible by default is just the definitions window. When you hit run, you then can see both the definitions and interactions windows.
  • Add an expression to the definitions window, like "1 + 1".
  • To save your work, Github requires us to "commit" -- essentially, make a checkpoint with a message describing what we did since the last one. The icon on the left that has circles and lines (and now a blue circle with a 1 in it) gets you to the interface to do so. First, type the message, like "added class 2 file". Now click somewhere below the message, and it lists the "changes". You have to add each change you want to be included in the commit, by clicking the + next to the file. This moves the files to the "Staged Changes" section -- these are what will be included in the commit. Once you've added everything, click the checkmark at the top to make the commit.
  • It's good practice to commit often -- at the very least, every time you do some work that you would rather not lose. If you are working on an assignment for several hours, you should commit many times during that period.

Data for text​

  • Last time we showed how to use numbers in Pyret -- today we are going to introduce two new types of data, and operations on them.
  • The first is text -- i.e., words, sentances, paragraphs, etc. These are called "strings", and are written as either "hello cs2000!" (i.e., double quotes around characters), or if you want the string to be able to cross multiple lines, you can write it as:
```
Hello
There!

```

  • Like numbers, there are operators on strings. + takes two strings and creates a new string with the second one put after the first, which is sort of a string version of "adding", but there are also operations that don't have analogs to numbers. e.g., string-length(s) returns the number of characters in the string, and string-repeat(s, n), assuming s is a string and n is a non-negative number, returns a new string that contains the string s repeated n times.

Data for Images​

  • Just like numbers and strings, we also have images in Pyret.
  • We can create basic shapes with functions like circle, rectangle, triangle, e.g., 
    circle(30, "solid", "blue")
    rectangle(40, 20, "solid", "green")
    triangle(50, "outline", "black")
  • Like with numbers and strings, there are operations on images -- e.g., overlay(i1,i2) creates a new image that has the second image on top of the first (so if it is larger, you will not see the first image at all), vs above(i1,i2) composes the images by creating a new image that includes the two inputs adjacent, one above the other, and beside(i1,i2) creates a new image that has the two images provided side by side.

Class Exercise (30 mins)​

  • Look through https://pyret.org/docs/latest/strings.html and find how to turn a string to all uppercase, and apply it to the string "hello cs2000!".
  • Create a blue circle and a yellow rectangle, then overlay them so the circle appears on top.
  • Stack a green rectangle above a purple rectangle using above.
  • Look through https://pyret.org/docs/latest/image.html, and find how to rotate an image; use that to produce a red rectangle that is 100 wide by 20 tall in two different ways.
  • Create a Stop sign (look up an image for reference). text, regular-polygon, and other functions you've already seen may be helpful.
  • Create another image of your choice!

Wrap-up (10 mins)​

Goal Talk about function contracts and why some inputs cause errors.

  • Did anyone get errors while they were working on these exercises? (Get someone to share -- likely is a type error, either arity mismatch or passing wrong input type to one of the functions).
  • In Pyret, all values have types -- what we've seen so far are: Number, String, Image.
  • Further, operations have types that they take in, and types that they produce. These are usually written down in the documentation as contracts, with ::, e.g.: 
    * :: (Number, Number) -> Number
    circle :: (Number, String, String) -> Image
  • This captures both the number of arguments (two for *, three for circle), but also the type of the arguments, so if you make a mistake in either, Pyret can report that.
  • Next time: named definitions, difference between expressions and definitions.