Computer Science Principles Unit 5 Chapter 2 Lesson 17: Building an App: Canvas Painter

Learning Resource Type

Classroom Resource

Subject Area

Digital Literacy and Computer Science

Grade(s)

9, 10, 11, 12

Overview

Students continue to practice working with arrays and are introduced to a new user interface element, the canvas. The canvas includes commands for drawing simple geometric shapes (circles, rectangles, lines) and also triggers mouse and key events like any other user interface element. Over the course of the lesson, students combine these features to make an app that allows a user to draw an image while recording every dot drawn on the canvas in an array. By processing this array in different ways, the app will allow students to redraw their image in different styles, like random, spray paint, and sketching. Along the way, students use their knowledge of functions with return values to make code which is easy to manage and reuse.

Students will be able to:
- programmatically control the canvas element in response to user interactions.
- maintain a dynamically generated array through the running of a program in order to record and reuse user input.
- use nested loops within a program to repeat a command on the same array index multiple times.
- perform variable arithmetic within an array index to access items in an array by their relative position.

Note: You will need to create a free account on code.org before you can view this resource.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.5
Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using current events.

Knowledge

Students know:

how to design and develop computational artifacts for practical intent.
how to design and develop computational artifacts for personal expression.
how to design and develop computational artifacts to address a societal issue by using current events.

Skills

Students are able to:

design and develop computational artifacts using an iterative design process.
use current events to bring merit to computational artifacts.

Understanding

Students understand that:

design should be an iterative process whereby the designer seeks feedback to improve upon his/her creation.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.6
Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects, with parameters, and which return a result.

Vocabulary

parameters
procedures
modules
objects
control structures

Knowledge

Students know:

removing unessential details can make a process simpler.
control structures can assist in programming decisions.
how to create a program that returns a result.

Skills

Students are able to:

decompose a problem.
create a program that returns a result.
implement control structures.

Understanding

Students understand that:

removing unessential details can make a process simpler.
control structures can assist in programming decisions.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.7
Compare and contrast fundamental data structures and their uses.

Vocabulary

data structures
arrays
stacks
queues
list
strings

Knowledge

Students know:

when to include varying types of data structures into a program to achieve a desired result.

Skills

Students are able to:

compare and contrast fundamental data structures and their uses.
properly use varying types of data structures in a program to achieve a desired result.

Understanding

Students understand that:

data structures organize data for ease of recall.
data structures differ by organization structure and purpose.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.8
Demonstrate code reuse by creating programming solutions using libraries and Application Programming Interfaces.

Vocabulary

code
programming languages
Application Programming Interfaces

Knowledge

Students know:

how to design a programming application that reuses code from programming libraries and code created in previous applications.

Skills

Students are able to:

reuse code from previous applications, code libraries, or APIs to reduce coding workload.

Understanding

Students understand that:

reuse of code can be time
saving.
code may be written and shared in code libraries or may be accessible as an API.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.9
Demonstrate the ability to verify the correctness of a program.

Vocabulary

compile
program
syntax

Knowledge

Students know:

proper syntax and formatting for a coding language.
how to identify coding errors in a programming language.

programs must be tested to verify that the desired task is executed properly.
testing a program requires a scenario where you can easily verify that the result of the program is correct/accurate.

a program can contain one of the following properties, but not be an appropriate program: correctness, efficiency, scalability and readability
it is important to have others review your code.
that to be a quality program, code must be correct, efficient, scalable and readable.

Skills

Students are able to:

analyze code for proper syntax and formatting.

create a test case with verifiable results.
execute a program with the created test case to verify program performance.
locate errors in programming by executing test cases.

work with others to review their code for correctness, efficiency, scalability and readability.

Understanding

Students understand that:

programming languages each have their own required formatting which must be adhered to for a program to run correctly.
errors in programming languages prevent the program from executing its task.
each language has its own syntax and method for identifying potential errors.

code can be formatted correctly and a program can still produce unintended results.
a test case is vital to verifying that a program is executing a task as intended.

to be a quality program, code must be correct, efficient, scalable and readable.
it is important to have others proofread your code.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.10
Resolve or debug errors encountered during testing using iterative design process.

Vocabulary

debug

Knowledge

Students know:

steps of the problem solving process.
how to identify errors in an iterative design process.

Skills

Students are able to:

review a process and identify errors in procedure.
rectify errors found in a process.
test resolution to verify that the process now runs as intended.

Understanding

Students understand that:

errors in a process can prevent a solution.
resolving an error will allow the process to function as intended.

Digital Literacy and Computer Science (2018) Grade(s): 09-12

DLCS18.HS.40
Use an iterative design process, including learning from mistakes, to gain a better understanding of a problem domain.

Knowledge

Students know:

that creating an artifact is an iterative process.
that feedback serves to make products better.
that mistakes are teaching tools that help determine how not to solve a problem.

Skills

Students are able to:

create and publish.
process constructive feedback.
persevere through mistakes.

Understanding

Students understand that:

creating an artifact is an iterative process.
feedback serves to make products better.
mistakes are teaching tools that help determine how not to solve a problem.

CR Resource Type

Lesson/Unit Plan

Resource Provider

Code.org

License Type

Custom

https://curriculum.code.org/csp-18/unit5/17/

Custom License Type (URL)

https://code.org/tos

Approved Date

2019-04-23

Computer Science Principles Unit 5 Chapter 2 Lesson 17: Building an App: Canvas Painter

Learning Resource Type

Subject Area

Grade(s)

Overview

DLCS18.HS.5 Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using current events.

Knowledge

Skills

Understanding

DLCS18.HS.6 Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects, with parameters, and which return a result.

Vocabulary

Knowledge

Skills

Understanding

DLCS18.HS.7 Compare and contrast fundamental data structures and their uses.

Vocabulary

Knowledge

Skills

Understanding

DLCS18.HS.8 Demonstrate code reuse by creating programming solutions using libraries and Application Programming Interfaces.

Vocabulary

Knowledge

Skills

Understanding

DLCS18.HS.9 Demonstrate the ability to verify the correctness of a program.

Vocabulary

Knowledge

Skills

Understanding

DLCS18.HS.10 Resolve or debug errors encountered during testing using iterative design process.

Vocabulary

Knowledge

Skills

Understanding

DLCS18.HS.40 Use an iterative design process, including learning from mistakes, to gain a better understanding of a problem domain.

Knowledge

Skills

Understanding

CR Resource Type

Resource Provider

License Type

URL (web address)

Custom License Type (URL)

Approved Date

DLCS18.HS.5
Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using current events.

DLCS18.HS.6
Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects, with parameters, and which return a result.

DLCS18.HS.7
Compare and contrast fundamental data structures and their uses.

DLCS18.HS.8
Demonstrate code reuse by creating programming solutions using libraries and Application Programming Interfaces.

DLCS18.HS.9
Demonstrate the ability to verify the correctness of a program.

DLCS18.HS.10
Resolve or debug errors encountered during testing using iterative design process.

DLCS18.HS.40
Use an iterative design process, including learning from mistakes, to gain a better understanding of a problem domain.