Homework 1: Flags and Cool Images

Due: Tuesday, September 12, at 11:59 PM

If you joined the class late, you can have up until 9/19 (the hwk2 deadline) to submit this, but to avoid falling behind you should submit this as soon as you can after you join. Everyone needs to submit homework 2 on time.

Note: We will cover the Pyret concepts you need for this homework on Friday's lecture (9/8). Feel free to explore Pyret or think about how you might render a flag, in the meantime!

Setup

• Go to code.pyret.org; this requires logging in with any Google account.
• Make a new file in code.pyret.org called hw1-code.arr.
• Do not put your name anywhere in the file.

Resources

Collaboration Policy

For this assignment, you are welcome to work as much as you want with other students. The whole point of this assignment is to make sure everyone is able to use Pyret, write simple programs, and submit assignments. That said, we expect everyone to actually work on the assignment (not just hand in what someone else wrote) to avoid trouble with later assignments.

Documentation

This guide reviews how to use the Pyret programming environment (CPO) in case you have questions beyond the demo in class.

The Pyret Documentation is accessible from the Pirate button in the top left corner of code.pyret.org on any file.

For this assignment, you will find the image documentation useful. When doing the problems, if you wish you had an operation on images that we did not cover in class, look in the documentation to see if you find something that does what you want (look at the operation names and their descriptions). If you run into problems using something you've found on documentation, post on Edstem.

Staff Assistance

Your friendly Professor and TAs are here to help with this assignment! Hours will begin next Monday by when our schedule for office hours will be displayed here.

What we will look for when grading

• We want accuracy in the shapes that are present, their general locations, sizes, and orientations.
• We do not care about exact positioning, size ratios, borders, or angles.
• We do not care about specific color shades. For example, you can use "green" even though it produces a much brighter green than on some of these flags. If you want to be accurate, a comprehensive list of color names can be found here.
• We will not be grading for style on this assignment. (In fact, most of the style guide won't even make sense until the middle of next week.)

Learning Goals:

• Navigate Pyret documentation
• Work with Pyret image operators to compose expressions
• Practice program planning

The Assignment

Welcome to your travel-abroad journey! Are you ready to explore the world? In order to prepare yourself for this adventure, you are going to develop the skills to design and identify country flags from all over the globe (after all, you don't want to get lost!) In order to do this, you will first learn how to design some flags.

Part One: Generating Flags

In this section, you will be creating four different flags: Madagascar, Turkey, Saint Lucia, and Greenland.

Note: Set up your code so that the four flags are output on the right hand side when we press the run button. Make sure nothing else is output (no sub-images, numbers, strings, or otherwise).

Task 1: Generate the flag of Madagascar.

Description of the colors in the image

Left rectangle is white.
Top right rectangle is red.
Bottom right rectangle is green.

Task 2: Generate the flag of Turkey.

Description of the colors in the image

Crescent and star are white.
Background is red.

Task 3: Generate the flag of Saint Lucia.

Description of the colors in the image

Foreground triangle is yellow.
Middle triangle is black.
Back triangle (border) is white.
Flag background is light blue.

Task 4: Generate the flag of Greenland.

Description of the colors in the image

Bottom rectangle and upper half-circle are red.
Top rectangle and bottom half-circle are white.

Make sure to use the solid color white to fill shapes where appropriate. Do not depend on the Pyret website's background to fill in white areas of your image.

Part Two: Practicing Program Planning

Most of the time, producing successful code requires thorough outlining and planning. Program planning is a skill that can help you deconstruct a problem in a way that allows you to avoid potential bugs. We now want to practice the process of planning.

Task 5: Pick one of the images below and write instructions so that someone could draw the image on paper using only your instructions. Remember to be specific - they have no idea what you're looking at, so they'll need every last detail or they might make an incorrect assumption about where something goes!

Write your instructions in a word processor or text editor of your choice (Word, Google Docs, etc), then save/export the file as a PDF (we're practicing this workflow now since we will need to do this multiple times this semester). Remember you're writing these steps in prose, not code.

There is no lower or upper limit to how many steps you need to write. Try to make your instructions clear enough so that someone could replicate your image without having seen it.

Handin

• Download your Pyret file (File > Download) and make sure it is called hw1-code.arr for Part One.
• Create a file titled program-steps.pdf that only contains your written action items from part Two.
• Hand in your work on Gradescope.
• You may submit as many times as you want before the deadline. Only your latest submission will be graded. Make sure that each submission contains both files, otherwise we won't be able to see both files to grade them. You can check this by using the "code" button on your submission and making sure that both files are there.
  
• If you have any questions, please post on Edstem. Don't post any code unless requested by TAs, though.

Welcome to the 111 Playlist!

Please enjoy this playlist that CS111 staff has made for you :) We hope it will be a part of many good coding memories…

---

Brown University CSCI 0111 (Fall 2023)