instagram
Lessons

    Aligns to:

    (Also available in WeScheme)

    Students recreate a flag of their choice by transforming and composing image functions and applying their knowledge of ratios and coordinates to scale and position the shapes precisely. This project supports the learning goals of Transforming and Composing Images.

    Lesson Goals

    Students will be able to…​

    • express a piece of their identity by creating a flag of personal importance or interest

    • create a coded image of a flag by applying their knowledge of ratios, the coordinate plane, and function composition

    Student-facing Lesson Goals

    • Let’s program the computer to generate flags from around the world!

    Materials

    Preparation

    • Decide whether you will engage your students in the tactile experience of creating flags by layering pieces of construction paper before working with hands on keys. If you opt to include this activity, you will need construction paper, scissors, and glue for your students.

    • Teachers are welcome and encouraged to edit and adapt the student-facing Rubric: Making Flags for their unique classroom context and distribute it to help students understand the scope of the project - and your expectations - at the outset.

    Key Points for the Facilitator

    • Before launching this project, ensure that students are comfortable using image-producing functions, put-image, and function composition. Student knowledge of ratios and the coordinate plane is also necessary.

    • The put-image function treats the second image as the first quadrant of a Cartesian plane. Having students sketch their flag on a sheet of graph paper drives this point home, and makes the programming easier.

    • This is an excellent opportunity to introduce students to indenting code. The readability difference between poorly-indented flag code and well-indented flag code is dramatic.

    • This project is designed to span multiple days.

    🔗A Flag of Your Choosing! optional

    Overview

    Students select a flag that they will recreate via code. They learn about decomposing flags before writing the code that will produce an image of their chosen flag in Pyret.

    Launch

    The first step is to determine which flag you are going to create.

    • Take a moment to brainstorm: What are some different flags that you connect with in some way?
      Think about:

      • places you’ve visited

      • a country you’re interested in or connected to

      • a group you identify with

    • Turn to first the section of Choosing My Flag and write down some of your ideas. Don’t worry - you don’t need to commit to any particular flag yet.

    You will find that students are highly motivated by the opportunity to focus on a flag of their choosing.

    Coding flags presents a rare opportunity to share a piece of our identities in math class.

    But, be mindful of the fact that not every student will know their family’s geographical history, and that immigration can be a sensitive topic for some students. For this reason, it is important that students have the option to choose a flag based on interest instead of just family history.

    Note that students might choose flags representing groups other than countries.

    • Indigenous students might choose a flag that represents their indigenous nation or the American Indian Movement.

    • Students might also choose to focus on the pride flag (representing solidarity amongst members of the LGBTQ+ community) or an ethnic flag (representing solidarity amongst members of different ethnic groups, such as the Hispanic flag).

    • There are also some flags that represent political or activist groups. It is important for the teacher to be open to different beliefs and ideologies, but it is also up to the teacher’s discretion as to whether or not a flag is appropriate for use in this project.

    • Flags associated with hate groups, or any institution that denies the dignity of other students, are obviously not appropriate.

    • Share your ideas with your partner or table group.

    • Then conduct an internet search to locate images of the flags you listed.

    • Reflect on each flag (its design, colors, shapes, etc) and respond to the remaining questions on the page.

    • When you are done, choose one flag that you will focus on.

    Not all flags are equally challenging from a coding perspective. You may introduce parameters if necessary, such as “The flag you make needs to utilize at least 5 shapes. If you’d like to make a simpler flag, because it’s important to you, personally, you can make that in addition to a more complex flag.""

    Investigate

    Now that you’ve selected your flags, it is time to start decomposing them.

    Referring to an image of your chosen flag, complete Decomposing My Flag.

    Here are some tips for scaffolding this process:

    • Have students build the flag with construction paper. The act of physically building the flag from layers of paper makes the layering of the coded images visible and helps students to remember that white space is not just "blank".

    • Identifying coordinates is much easier when students have graph paper handy! To streamline this process and improve accuracy, encourage students to use fractions for widths and heights.

    • Confirm that all students have accurately decomposed the flag before inviting students to work in Pyret.

    Two Methods for Composing Functions to Build Images

    • Functional Programming defines composition all at once.

    • Imperative Programming defines composition one step at a time.

    In our Transforming and Composing Images lesson we modeled defining images of flags all at once.

    If you work with students in the earlier grades and / or you are not concerned with teaching function composition, then you might want to model breaking a composition down using the Composing 1 Step at a Time Starter File.

    If you want to engage your students with considering both methods, have them take a few minutes to complete Two Methods for Composing Images.

    You know what is best for your students!

    • Open and save a new Pyret file to work in.

    • Define source-flag as a link to the target image so you have something to compare the image your code generates to.

      • To insert a link: choose INSERT from the menu.

    • Define values for each of the shapes you identified on Decomposing My Flag.

      • Be sure your value names don’t have any spaces in them.

    • Then think through how to compose the flag image using those values.

    Some suggestions for elegant and accurate code:

    • Don’t cram everything into one line! If you break code up into new lines (for example, hitting "Return" before the x-coordinate and after the y-coordinate), you’ll notice that the code forms a "staircase" pattern.

    • Be sure to compare the image you get with the target image!

    ★ Have students define the WIDTH and HEIGHT of their flags as values - and then replace the numbers in each flag with expressions relative to width and height. For example, if the dot in the Japanese flag is at (150, 100), those numbers would be replaced with WIDTH / 2 and HEIGHT / 2.

    Synthesize

    • Encourage students to self-assess and revise their work. Peer review is a powerful tool if time allows! The rubric is a useful resource for facilitating both self and peer review.

    • Finally, celebrate students' work! In many instances, students will want to share their project, given how much time they have invested. Class or public presentations can instill a sense of pride. Consider hosting a tour of flags of the world in your classroom.

    These materials were developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, 1738598, 2031479, and 1501927). CCbadge Bootstrap by the Bootstrap Community is licensed under a Creative Commons 4.0 Unported License. This license does not grant permission to run training or professional development. Offering training or professional development with materials substantially derived from Bootstrap must be approved in writing by a Bootstrap Director. Permissions beyond the scope of this license, such as to run training, may be available by contacting contact@BootstrapWorld.org.