--- title: Homework 1 tags: Homeworks-F23, 2023 --- # 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.* :::warning **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](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 on any file. 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/45570/discussion/). ### 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](https://brown-csci0111.github.io/pages/calendar). ### 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 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. ![image info](https://www.creativefabrica.com/wp-content/uploads/2021/03/19/1616141144/Pirate-rubber-duck-580x386.jpg) ## 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. ![Madagascar flag](https://cs.brown.edu/courses/csci0111/spring2020/data/madagascar.png) &NewLine; :::spoiler Description of the colors in the image :::info Left rectangle is white. Top right rectangle is red. Bottom right rectangle is green. ::: &NewLine; **Task 2:** Generate the flag of Turkey. ![Turkey Flag](https://cs.brown.edu/courses/csci0111/spring2020/data/turkey.png) &NewLine; :::spoiler Description of the colors in the image :::info Crescent and star are white. Background is red. ::: &NewLine; **Task 3:** Generate the flag of Saint Lucia. ![Saint Lucia](https://i.imgur.com/fbE8YvE.png) &NewLine; :::spoiler Description of the colors in the 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. ![Greenland Flag](https://cs.brown.edu/courses/csci0111/spring2020/data/greenland.png) &NewLine; :::spoiler Description of the colors in the 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 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.** ![](https://i.imgur.com/Lm3i6ZM.png) :::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. ::: <!-- &NewLine; :::spoiler Why are we doing this? :::info 1. Making an outline ahead of time means you don't have to do as much thinking while you're actually coding, making the process faster. 2. By writing out each step you want to take before you write any code, you can catch mistakes and potential issues ahead of time instead of letting them become problems in your code, which saves a lot of time. ::: &NewLine; --> ## 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](https://www.gradescope.com/courses/597995). - 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. ![](https://hackmd.io/_uploads/rJ-wYTVCh.png) - If you have any questions, please post on [Edstem](https://edstem.org/us/courses/45570/). 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... > <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5en23kvDAKXOXpemG5jHwu?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> ------ > Brown University CSCI 0111 (Fall 2023) <iframe src="https://forms.gle/3n8VyP7tF3ANqGAj7" width="640" height="372" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>