Homework 1: Flags and Cool Images

Due: Tuesday, January 28th, 2025 at 11:59PM ET.

If you joined the class late, you can have up until Tuesday, February 4th, 2024 at 11:59PM ET (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 (1/24). 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.

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! You can find our schedule for office hours 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

Carol C. Cowley is looking for a new flag design to mount in her field! In this assignment, you will learn how to design some flags in order to help her.

vecteezy.com

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.

Having trouble identifying colors in image?

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

Task 2: Generate the flag of Turkey.

Having trouble identifying colors in image?

Crescent and star are white.
Background is red.

Task 3: Generate the flag of Saint Lucia.

Having trouble identifying colors in 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.

Having trouble identifying colors in 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.

Reminder: 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).

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 outlining code prior to coding.

Task 5: Pick one of the two images below. Without coding it, write a list of steps and action items that describe, in words, how to recreate your image (imagine that you were trying to get a child to draw the image from your steps) starting from basic shapes. Use any terms you want to describe the steps: you don't have to stick to names of operations that exist in Pyret or concepts that we've covered in class.

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.
• If you have any questions, please post on Edstem. Don't post any code unless requested by TAs, though. You can also consult the frequently asked questions for this assignment on Ed.

Welcome to 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 (Spring 2025)