---
title: Homework 1
tags: Homeworks-S24
---

# Homework 1: Flags and Cool Images

#### **Due:** Tuesday, January 30th, 2024 at 11:59PM ET.
*If you joined the class late, you can have up until Tuesday, February 6th, 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.*

:::warning
**Note:** We will cover the Pyret concepts you need for this homework on Friday's lecture (1/26). 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](https://hackmd.io/@cs111/cpo-guide) reviews how to use the [Pyret programming environment (CPO)](https://code.pyret.org) in case you have questions beyond the demo in class.

The [Pyret Documentation](https://www.pyret.org/docs/latest/) is accessible from the Pirate button in the top left corner of code.pyret.org.

For this assignment, you will find the [image documentation](https://www.pyret.org/docs/latest/image.html) 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](https://edstem.org/us/courses/54800).

### Staff Assistance
Your friendly Professor and TAs are here to help with this assignment! You can find our schedule for office hours [here](https://brown-csci0111.github.io/pages/calendar).

<img src="https://i.ebayimg.com/images/g/GhcAAOSwnQFj1wUM/s-l1200.webp" alt="frog models with computers" width="40%">

<img src="https://i.imgur.com/SzQY2nn.png" alt="drawing of a frog at a computer" width="50%">

### 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](https://www.pyret.org/docs/latest/color.html).
- 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.)

:::info
Learning Goals:
- Navigate Pyret documentation
- Work with Pyret image operators to compose expressions
- Practice program planning
:::

## The Assignment

Kermit the Frog is looking for a new flag design to mount on his lily pad. In this assignment, you will learn how to design some flags in order to help him.

<img src="https://ae01.alicdn.com/kf/S506100221a6a46038665b74de7a1fa2ar/Funny-Frog-Flag-Have-A-Drink-Home-Indoor-Party-Club-Outdoor-Decoration-Flags-Polyester-with-Brass.jpg" alt="kermit the frog sipping tea on a flag" width="40%">
<img src="https://i.imgur.com/IXTIANz.png" alt="sketch of a frog saying 'ribbet, flags'" width="40%">

## Part One: Generating Flags
In this section, you will be creating four different flags: Madagascar, Turkey, Saint Lucia, and Greenland.

:::warning
**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.

<img src="https://cs.brown.edu/courses/csci0111/spring2020/data/madagascar.png" alt="Madagascar Flag" style="border:1px solid #123;" width=70%>

&NewLine;
:::spoiler Having trouble identifying colors in image?
:::info
Left rectangle is white.
Top right rectangle is red.
Bottom right rectangle is green.
:::

&NewLine;

**Task 2:** Generate the flag of Turkey.

<img src="https://cs.brown.edu/courses/csci0111/spring2020/data/turkey.png" alt="Turkey Flag" style="border:1px solid #123;" width=70%>

&NewLine;
:::spoiler Having trouble identifying colors in image?
:::info
Crescent and star are white.
Background is red.
:::
&NewLine;

**Task 3:** Generate the flag of Saint Lucia.

<img src="https://i.imgur.com/fbE8YvE.png" alt="Saint Lucia Flag" style="border:1px solid #123;" width=70%>

&NewLine;
:::spoiler Having trouble identifying colors in image?
:::info
Foreground triangle is yellow.
Middle triangle is black.
Back triangle (border) is white.
Flag background is light blue.
:::
&NewLine;

**Task 4:** Generate the flag of Greenland.

<img src="https://cs.brown.edu/courses/csci0111/spring2020/data/greenland.png" alt="Greenland Flag" style="border:1px solid #123;" width=70%>

&NewLine;
:::spoiler Having trouble identifying colors in image?
:::info
Bottom rectangle and upper half-circle are red.
Top rectangle and bottom half-circle are white.
:::
&NewLine;

:::info
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 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.


:::warning
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.
:::

## Part Three: SRC

**Task 6:** This course emphasizes socially responsible computing, and the professors associated with the course ( (Professors Zizyte and Fisler) are often studying how to teach this content more effectively. This SRC assignment is designed to test a new format of SRC assignment. This assignment is mandatory as part of HW1, but your response data might be included in a research study analysis. We’ll be looking at your responses to see what sort of issues and observations get raised. Some of you might be invited to a subsequent interview portion of the study, and receive a $15 Amazon gift card as compensation for participating in the interview.

1. Click on [this Canvas link](https://canvas.brown.edu/courses/1094536/quizzes/1557170) and click "begin survey," which will give you a link that takes you to a Google Docs file (there are no questions in the survey; we just need to use Canvas to help you get your special link).
2. Make your own copy (you can do this by clicking the button File -> Make a copy).
3. Share your document with Yanyan at [e-mail]. (Yanyan is the PhD student conducting the study)
4. Carefully read and follow the instructions in the doc to complete the tasks.

:::warning
**More information on how your data will be used**

Your participation will have no bearing on any course grades (professors won’t know who agreed to participate). In any sort of paper we write on this work, only anonymized direct quotes and aggregated data will be included; no identifying information will be disclosed.

For more details about the study and how your data may be used, please review [this FAQ](https://docs.google.com/document/d/1BrXaQ1lET3Z9H5WEg9iin1zFm09t8bplC6FZNvp39Wg/edit?usp=sharing)

If you’d like to opt out of the data analysis part, please fill out this [Google form](https://forms.gle/Ud1LAJXb5aF4XNDh7)

Yanyan is the PhD student conducting this study, and please feel free to contact her at [e-mail] or her faculty advisor Kathi at [e-mail] if you have any questions.
:::

## 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.
- Make sure your doc from part Three is shared with Yanyan (do not submit your doc to Gradescope)
- Hand in your work on [Gradescope](https://www.gradescope.com/courses/718380).
- 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](https://edstem.org/us/courses/54800). 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...

> <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1O3azM1vjgjBp7MHAZYbHB?utm_source=generator&theme=0" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

------
> Brown University CSCI 0111 (Spring 2024)

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc0gyQHM9YTw8gqqghjr2tU_TbXDCztvfFLmMY4ul5vyJD3jg/viewform?embedded=true" width="640" height="958" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>