•Drawing An Emoji
Drawing An Emoji

imageDrawing An Emoji
Unit Overview

Beginning with a working program, students refactor the code to be more readable, and practice using drawing functions in Pyret

English

add translation

Product Outcomes:

  • Students refactor existing code to make an emoji image

Standards and Evidence Statements:

Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.

  • BS-DR.4: The student can solve word problems that involve data structures

    • BS-IDE: The student is familiar with using a REPL, entering expressions properly, and interpreting error messages

      • BS-M: The student models a problem in context and determines the data needed to describe the problem

        • BS-PL.1: The student is familiar with declaring values and applying built-in functions using the programming language

          • BS-PL.4: The student is familiar with the syntax for conditionals

            • BS-R: The student is able to write interactive programs using the ’Reactor’ construct

              Length: 40 Minutes
              Glossary:

              • refactoring: The process of changing the style or structure of a program’s code, without changing the program’s behavior

              Materials:
                Preparation:

                Types

                Functions

                Values

                Number

                + - * / sqr sqrt expt

                1 ,4 ,44.6

                String

                string-append string-length

                "hello"

                Image

                rectangle circle triangle ellipse star scale rotate put-image

                (circle 25 "solid" "red")



                Refactoring Code to Draw an Emoji

                Overview

                Students practice reading and using functions which produce images, and learn about refactoring code to change the format, but not the result

                Learning Objectives

                  Evidence Statementes

                    Product Outcomes

                    • Students refactor existing code to make an emoji image

                    Materials

                    Preparation

                    Refactoring Code to Draw an Emoji (Time 40 minutes)

                    • Refactoring Code to Draw an EmojiOne of the most common tasks software developers find themselves performing is refactoring code. This means taking code that is already working and complete, and cleaning it up: adding comments, removing unnecessary expressions, and generally making their code more readable and useable by others. Refactoring does not change the behavior of the program, only the appearance of the code. For instance, a messy expression like:   could be refactored into:   Both expressions return the same value, but the second is much more readable. Refactoring can involve using existing functions (such as num-sqr in the example above) or writing new functions to perform small tasks.

                    • Open the Robot Emoji file and press ’Run’. In this file, there are two versions of the same program written by different students.

                      Take a look at the definitions in this file, and, with your partner, discuss what you notice. Which student’s code is easiest to read and understand? Which formatting do you like better? If you were collaborating on a project with another programmer, which version of this code would you rather to receive, and why?

                      Discus with students the differences in documentation, formatting, and organization of the two versions of the emoji code.

                    • Next, we’re going to practice refactoring an existing program that draws an image.

                      Open the Emoji Refactoring file and click "Run".

                      This code draws an image of a simple face emoji. Without changing the final image produced, can you see any opportunities to edit the code to make it more readable?

                      Refactor the code provided. This could include adding comments, more space betwen expressions, or simplifying the existing expressions. Once finished, write one more expression to create a smaller (emoji-sized) version of the original image.

                      This activity can be done individually or as a class, with students giving suggestions for refactoring code projected at the front of the room. Once the refactoring is completed, students can practice using image functions to create an emoji of their own.