instagram
Lessons

    Standards in this Lesson

    Common Core Math Standards
    7.RP.A.1

    Compute unit rates associated with ratios of fractions, including ratios of lengths, areas and other quantities measured in like or different units.

    8.G.A.1

    Verify experimentally the properties of rotations, reflections, and translations.

    CSTA Standards
    1B-AP-12

    Modify, remix, or incorporate portions of an existing program into one’s own work, to develop something new or add more advanced features.

    1B-AP-14

    Observe intellectual property rights and give appropriate attribution when creating or remixing programs.

    1B-IC-21

    Use public domain or creative commons media, and refrain from copying or using material created by others without permission.

    2-AP-16

    Incorporate existing code, media, and libraries into original programs, and give attribution.

    3A-AP-18

    Create artifacts by using procedures within a program, combinations of data and procedures, or independent but interrelated programs.

    3A-AP-20

    Evaluate licenses that limit or restrict use of computational artifacts when using resources such as libraries

    Oklahoma Standards
    OK.3.AP.M.02

    With grade appropriate complexity, modify, remix, or incorporate portions of an existing program into one’s own work, to develop something new or add more advanced features.

    OK.3.AP.PD.02

    Observe intellectual property rights and give appropriate credit when creating or remixing programs.

    OK.4.AP.M.02

    With grade appropriate complexity, modify, remix, or incorporate portions of an existing program into one’s own work, to develop something new or add more advanced features.

    OK.4.AP.PD.02

    Observe intellectual property rights and give appropriate credit when creating or remixing programs.

    OK.5.AP.M.02

    With grade appropriate complexity, modify, remix, or incorporate portions of an existing program into one’s own work, to develop something new or add more advanced features.

    OK.5.AP.PD.02

    Observe intellectual property rights and give appropriate credit when creating or remixing programs.

    OK.6.AP.PD.01

    Seek and incorporate feedback from team members to refine a solution to a problem.

    OK.6.AP.PD.02

    Incorporate existing code, media, and libraries into original programs and give attribution.

    OK.7.AP.PD.01

    Seek and incorporate feedback from team members and users to refine a solution to a problem.

    OK.7.AP.PD.02

    Incorporate existing code, media, and libraries into original programs of increasing complexity and give attribution.

    OK.7.GM.4.1

    Describe the properties of similarity, compare geometric figures for similarity, and determine scale factors resulting from dilations.

    OK.7.GM.4.2

    Apply proportions, ratios, and scale factors to solve problems involving scale drawings and determine side lengths and areas of similar triangles and rectangles.

    OK.8.AP.A.01

    Design algorithms in natural language, flow and control diagrams, comments within code, and/or pseudocode to solve complex problems.

    Textbook Alignment

    IM 6 Math™
    IM.6.5.5

    Decimal Points in Products

    IM 7 Math™
    IM.7.1.5

    The Size of the Scale Factor

    IM.7.1.1

    What are Scaled Copies?

    IM 8 Math™
    IM.8.2.1

    Projecting and Scaling

    IM.8.1.3

    Grid Moves

    IM.8.1.2

    Naming the moves

    IM.8.1.1

    Moving in the Plane

    IM Algebra 1
    IM.Alg1.4.2

    Function Notation

    Practices in this Lesson

    Math
    MP.6

    Attend to precision

    Math Lang. Routines
    MLR.8

    Discussion Supports

    (Also available in WeScheme)

    Students choose, import, scale and orient images for their game, practicing reading comments to make sense of and begin to edit a large body of code.

    Lesson Goals

    Students will be able to:

    • Apply previous knowledge of functions to new situations

    • Use reasoning skills to select appropriate functions and combine their effects

    Student-Facing Lesson Goals

    • I can use different functions to transform images.

    • I can write definitions for my transformed images.

    Materials

    Preparation

    Students should have their completed “Game Design” work.

    Key Points for the Facilitator

    • Discuss copyright and fair use guidelines with your students.

    • Instructional time may vary based on students’ experience with using Google Image Search.

    • Check beforehand for any issues the school Internet security blocker might cause with searching for images.

    • There are two ways of importing images: linking directly to the image on the web or downloading the image to Google Drive and then using the "Insert" button. See the "Linking Images Guide" below for more information on linking directly.

    • Encourage students to focus on finding and scaling each image as needed before moving on to the next one.
    Glossary
    define

    to associate a descriptive name with a value

    function

    a relation from a set of inputs to a set of possible outputs, where each input is related to exactly one output

    image

    a type of data for pictures

    scale

    resize an image to be larger or smaller while maintaining ratios and proportions

    string

    a data type for any sequence of characters between quotation marks (examples: "hello", "42", "this is a string!")

    🔗The Game Starter File 15 minutes

    Overview

    This activity is primarily about review and reading comprehension, in which students open a large and unfamiliar file and must make sense of it using what they’ve seen before.

    Launch

    By now you’ve learned about defining values, composing functions, and reading contracts. Taken together, that’s a lot of code you’re now able to understand! It’s time to flex your reading skills, and look at the file you’ll be working with to build your video game.

    This file has code you haven’t seen before! And that’s ok! For now, see what parts you recognize, and make sure you understand them.

    Investigate

    Synthesize

    • What familiar things did you see in the Game Starter File file?

    • What were some unfamiliar things? Any idea what they might do?

      • Answers vary: new functions, comments, images

    • What data type is GAME-TITLE? What data type is BACKGROUND?

      • GAME-TITLE is a String, BACKGROUND is an Image

    • What does SCREENSHOT return in the Interactions Area?

      • An image of the BACKGROUND, PLAYER, TARGET, and DANGER all together

    • Did anyone try pressing "Run"? What happens when you press "Run"?

      • Allow students to discuss what they see and what connections they see with the code

    • What do you think image-url does?

      • Answers vary: It consumes a String, which is a URL (an image location on the Internet) and produces the Image inside our program

    What is SCREENSHOT?

    The Game Starter File defines several image values, such as BACKGROUND, PLAYER, etc. These definitions are using the running game, which appears when you click "Run". SCREENSHOT is defined as a fixed composition of the game images, placing each of them on top of the background at various (x,y) coordinates. It is used to give students a chance to see their characters onscreen before they’ve gotten them moving, and to give teachers an opportunity to review coordinates. Other than the scaling, it is not in any way connected to the running game, so changes made to SCREENSHOT will not impact the game that appears when clicking "Run" and the location of the characters on the background in the screenshot is random and irrelevant.

    🔗Finding Your Game Images flexible

    Overview

    This activity is all about finding the right images for students' games. Since the internet never has exactly the right image, students' need to get their games just right motivates them to confront the need for dilation, rotation, and reflection of the images they find. This, in turn feeds back into their understanding of Contracts and Function Composition.

    Launch

    Guide the students through finding an image, saving it to their Drive, importing it into their program, and defining the image value as PLAYER. Students will change this image later on their own, this is just for teaching purposes.

    • In your favorite search engine (we recommend DuckDuckGo), search for an image and then click "Images".

    • Click "All Types" and select "Transparent". If you’re using Google Image Search, select "Color -> Transparent". This will filter and display images that have a transparent background, appearing as a light white/grey checkerboard pattern behind the character.

    Finding Images on\nGIS, Source: Google Image Search, images.google.com🖼Show image

    • Once an image has been selected, click it to expand and save the image to Google Drive. For file management, students may want to create a folder to store their game images.

      • If using a Chromebook, this is done by right-clicking and selecting "Google Drive" on the left for the save location.

      • On a PC or Mac, follow this Quick Guide to Saving Images to Drive.

    Once the image is saved to Google Drive, it can be brought into the program by using the "Insert" button. This will automatically bring in the image using the image-url function, and students can run the code to see the image.

    Investigate

    What happens if the image we find needs to be made bigger or smaller? What if it needs to be rotated, or flipped?

    Students can define the image as a value and make changes to it with the image manipulation functions scale, rotate, flip-horizontal, and flip-vertical.

    Strategies for English Language Learners

    MLR 8 - Discussion Supports: As students discuss, rephrase responses as questions and encourage precision in the words being used to reinforce the meanings behind some of the functions, such as scale and flip-horizontal.

    With your partner, search the Internet for images to use in your game. You will need 4 images, one for each visual element of their game: BACKGROUND, PLAYER, DANGER, TARGET

    Copyright and Fair Use

    Fair Use Diagram, Source:\nwww.resourcesforlife.com/docs/item6247🖼Show image The students will be using images from the Internet for their game, and while this falls entirely under the "Educational Use" umbrella of Fair Use Guidelines, it is still important to make sure students of all ages understand the purpose of copyright law and the differences between educational and commercial purposes.

    When adding an image to their game, students must include a comment which gives attribution to the source of the image.

    Students should:

    • Save the chosen images to their Drive

    • Bring them into the programming environment

    • Include a comment which gives attribution to the source of the image

    • Define the images as values

    • Plan out how to resize and reorient them in their game

    • Make sure the final version of each image is defined as either BACKGROUND, TARGET, DANGER, or PLAYER

    When finished, students should be able to type SCREENSHOT in the interactions window and see all four of their images appropriately sized and oriented.

    Synthesize

    • What functions were most useful in helping you customize your images to make your game look and feel how you want it?

    • How did you make use of function composition in customizing your images?

    These materials were developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, and 1738598). 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.