Lesson 18: Functions with Artist

Overview

Students will be introduced to using functions on Code.org. Magnificent images will be created and modified with functions in Artist. For more complicated patterns, students will learn about nesting functions by calling one function from inside another.

Purpose

One of the most important components to this lesson is providing students with a space to create something they are proud of. These puzzles progress to more and more complex images, but each new puzzle only builds off the previous puzzle. At the end of this lesson, students will feel confident with themselves and proud of their hard work.

Agenda

Warm Up (15 min)

Main Activity (30 min)

Wrap Up (15 min)

Extended Learning

View on Code Studio

Objectives

Students will be able to:

  • Categorize and generalize code into useful functions.
  • Recognize when a function could help to simplify a program.

Preparation

  • Play through puzzles in the lesson to find any potential problem areas for your class.
  • Make sure every student has a journal.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Students

Vocabulary

  • Function - A piece of code that you can easily call over and over again.

Support

Report a Bug

Teaching Guide

Warm Up (15 min)

Introduction

\Tell the class that there are two main components to using functions.

  1. The Declaration: Function declarations are what create a function. In a function declaration, you fill in the function with code and you give the function a name. You must declare a function before you can use it.

  2. The Call: Function calls are what makes the program run the code in the function. To call a function, you place the name of the function in your program. Make sure your function is properly defined before calling it in your program.

Continue the conversation until students have a basic understanding of functions being declared and called. If students don't get to this point, make sure to do one of the bridging activities before moving into the Code.org puzzles.

Main Activity (30 min)

Online Puzzles

Students may benefit from writing code without functions then creating functions from the repeated code. If students don't enjoy doing this in the Code.org workspace, we recommend providing paper and pencils for students to write (or draw) out their ideas.

Wrap Up (15 min)

Journaling

Having students write about what they learned, why it’s useful, and how they feel about it can help solidify any knowledge they obtained today and build a review sheet for them to look to in the future.

Journal Prompts:

  • What was today’s lesson about?
  • How do you feel about today’s lesson?
  • What are some differences between functions and loops?
  • Sketch out a drawing you made today. Can you write the code needed to create this?
  • Draw a picture you would like to create with code. Try writing or drafting the code that would make that drawing.

Extended Learning

Draw by Functions

Break the class into groups of 2-3 students. Have each group write a function that draws some kind of shape and a program that uses that function. Depending on the creativity or focus the groups, students might need to be assigned a shape to create. Once every group is done, have the groups switch programs. On a separate piece of paper, each group should draw what the program creates. The groups should then return the programs and drawings to the original group.

Did every group get the drawing they expected? If not, what went wrong? Have the class go through the debugging process and try again.

View on Code Studio

Student Instructions

What will happen when you press "Run"?

Nothing. The function is not called in the program.

The artist will draw a single square.

The artist will draw two squares that overlap.

The artist will draw two squares with a small gap in between.

View on Code Studio

Student Instructions

Here is a function called draw a square. Use it to complete this drawing.


The squares are 75 pixels apart.

View on Code Studio

Student Instructions

Build a function that will create this star.


  • Each arm of the star is 25 pixels long
  • You need to turn 45 degrees to get 8 arms
  • It is okay to go forward and backward over the same arm
View on Code Studio

Student Instructions

When is drawing three stars harder than drawing four? When you also have to jump over the moon!

Draw only those three stars to finish this puzzle.


  • The jump between the first and second star is 200 pixels
  • The jump between the second and third is 100 pixels
View on Code Studio

Student Instructions

Drawing all of these windows individually would be a pain!

Try solving this puzzle by creating draw a window and calling it five times. Watch out for the door!


  • Each window is made up of four 25 pixel squares.
  • The top windows are a 100 pixel jump away from each other.
  • The bottom windows are a 150 pixel jump below the top set.
View on Code Studio

Student Instructions

"Functions easy!"

We are going to build up to something fancy! Start by creating a function for this square.

View on Code Studio

Student Instructions

"Zombie get dizzy."

Call the draw a square function from inside your draw a line of squares function to make this even easier!


  • The squares are 50 pixels apart.
View on Code Studio

Student Instructions

Add one more function that creates this stack of staggered squares using the draw a line of squares function.

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

Challenge: Create this image using the limited blocks provided.

  • Each triangle has sides of 50 pixels
  • To draw a diamond, you will need to alternate between turning 60 degrees and 120 degrees.
View on Code Studio

Student Instructions

This time, use lines of 8 hexagons with 25 pixel sides.

  • To make each hexagon, repeat the side 6 times, turning 60 degrees.
  • Jump 25 pixels between each hexagon.
  • To draw a diamond, you will need to alternate between turning 60 degrees and 120 degrees.
View on Code Studio

Student Instructions

What will happen when you press the "Run" button?

The artist will solve the puzzle correctly.

The artist will draw four squares in a window pattern.

The artist will draw only one line of squares.

The artist will draw four squares on top of one another.

View on Code Studio

Student Instructions

Inspiration: Use what you've learned to make whatever you want!

Can you make something like this pinwheel?

View on Code Studio

Student Instructions

Once you define a function, you can call it over and over again - whenever and wherever you want! Try this code to see how it works, then change it to make your own impressive design!

View on Code Studio

Student Instructions

Not only can you jump to some pre-set locations, like the corners of the canvas, you can also use a jump to command to get to absolutely any spot you like! Try this code to see how it works, then make the program your own!

??? ???

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 1B-AP-08 - Compare and refine multiple algorithms for the same task and determine which is the most appropriate.
  • 1B-AP-11 - Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.