Lesson 17: Binary Images with Artist
Overview
This series of online lessons will have students learning to make images using on and off.
Purpose
This will help reinforce the fact that computers can do a multitude of things with 0s and 1s.
Agenda
Warm Up (15)
Main Activity (30)
Wrap Up (15)
View on Code Studio
Objectives
Students will be able to:
- Create pictures using unique combinations of on and off
- Identify repeated sequences and break long codes up into smaller chunks that can be looped
- Utilize loops and binary code to recreate provided images
Preparation
- Play through the puzzles to find any potential problem areas for your class.
- Make sure every student has a journal.
Vocabulary
- Binary - A way of representing information using only two options.
Support
Report a Bug
Teaching Guide
Warm Up (15)
To begin, it can be helpful to review the previous lesson, specifically different ways of using binary to indicate how to create an image on a grid. This stage will translate the unplugged activity into a simple, independent online lesson.
Main Activity (30)
Online Puzzles
Not all of these images are intuitive. Encourage students to click "Run" to see what happens, even if their code isn't "finished" yet.
Wrap Up (15)
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 did you feel during today’s lesson?
- Did you like drawing on the 8x8 grid or the 16x16 grid better? Why?
- Computers also store sounds using binary. Use your imagination to write down a possible way for that to work.
Student Instructions
Draw with Binary
Binary is a way of representing information using only two options. In this case, off and on.
Here, we're going to use the number 0 as code for "off" and the number 1 as code for "on".
 |  |
| 0 | 1 |
In this stage, we've provided you with a grid of "pixels" that you can walk through and make designs by turning on certain squares!
Student Instructions
We've provided you with a grid of "pixels" that you can walk through and make designs by turning on only certain squares.
Use the blocks below to have the artist draw "01010101" in binary in the first row.
Student Instructions
Here's a function that takes a binary string of 1's and 0's and instructs the artist to follow them from left to right, top to bottom.
The artist will fill-in the squares when it sees a 1 and ignore the square when it sees a 0.
Run this code to see how the artist uses binary to draw this pattern.
Student Instructions
Student Instructions
Student Instructions
Student Instructions
Student Instructions
Student Instructions
- Prediction
- 10
Student Instructions
A)  |
B)  |
C)  |
D)  |
Take a close look at the code below. Which image will it create after you click "Run"?
A
B
C
D
- Free Play
- 11
Student Instructions
Student Instructions
You can only use each binary value (0 or 1) once each in this puzzle. Try using nested loops to complete this drawing.
Student Instructions
There are 256 bits represented on this grid - that means it's easy for a small change to cause big problems. Are you persistent enough to restore this logo back to normal?
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 1B-AP-11 - Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.
- 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-15 - Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.