Quick Links to Materials Expedition 2
Do
Teacher-facing slide. Use before class to open any lesson materials you will need. This slide can be skipped when presenting to students.
Notes
This slide includes quick links to today’s lesson materials.
Coding to Create · Lesson 3
Coding Abstraction
Students apply computational thinking — abstraction, debugging, pattern recognition — to a deck of coding challenges in the Algorithmic Art tool, tracking progress in their Coder Handbook.
45 minutes 
Open lesson slides
Students explore how algorithms and abstraction help artists and programmers create visual art. After exploring what computational thinking is and how artists and programmers use it, students select a series of coding challenges from a deck. Each card provides a sample digital artwork and code blocks to re-create, debug, or modify to create simple digital artwork with basic geometric shapes. Students track their progress and learning for the day in their Coder Handbook.
Learning targets
- Explain how algorithms and abstraction are used to create art.
- Use a block-based programming tool to modify or create algorithmic artwork.
- Apply computational thinking strategies such as abstraction, debugging, and pattern recognition to solve coding challenges.
Standards at a glance
Full Expedition standards, by grade and lesson
- Grade 6
- 6.CR.1.1, 6.CN.2.2, 6.RE.1.1
- Grade 7
- 7.CR.1.1, 7.CN.2.2, 7.RE.1.2
- Grade 8
- 8.CR.1.1, 8.CN.2.2, 8.RE.1.1
Steps in the lesson
-
Warm up
5 minutes · Slides 2–4
- Invite students to think about which computational thinking skills feel most natural to them as artists, then have them write the term and create a quick sketch that represents its meaning. It is OK if the ideas are new — there is no right or wrong answer.
- Wrap up by explaining that artists and computer scientists use these same ways of thinking to solve problems and create new ideas, and that today's lesson will explore how these practices connect.
-
Whole class instruction
10–15 minutes · Slides 5–6
- Introduce examples of artwork by Josef Albers, Roy Lichtenstein, and pixel artists, and ask students what the images have in common.
- Facilitate a short discussion about how artists can create complex images using simple geometric shapes, patterns, and colors. Model how to break a picture into basic geometric shapes such as circles, squares, rectangles, triangles, and important lines.
- Compare a realistic image with Roy Lichtenstein's abstracted Bull Head and ask students which version would be easier to recreate and why. Introduce abstraction by explaining that artists and programmers simplify complex ideas into their most important parts.
- Have students practice identifying and sketching the key shapes they see in an example image before transitioning to the coding activity.
-
Activity: coding challenge cards
25 minutes · Slides 7–11
- Introduce the coding challenge station activity and explain that students will use the Fractal Algorithmic Art tool to recreate digital artwork using block-based code, similar to their work yesterday.
- Review the activity expectations, including selecting a challenge card, completing at least three challenges, recording their progress, or switching to a different challenge if needed.
- Model how to read a challenge card by examining the target artwork, interpreting the code blocks, and identifying what needs to be added, changed, or debugged.
- Circulate throughout the room to ask probing questions, provide feedback, and support students who need assistance. Encourage students who are stuck to use the Answer Deck to compare, reflect, and revise their code rather than simply copying the solution.
-
Closing
5 minutes · Slides 12–14
- Remind students to complete their sentence frames at the bottom of the Coder Handbook.
- Facilitate a brief share-out by inviting students to demonstrate different approaches to solving the same challenge and discussing how multiple algorithms can produce similar artistic results.
Slide-by-slide guide
The lesson deck with its speaker notes — what to say and what to do on each slide, with suggested timing. Slide numbers match the deck in Google Slides.
Expedition 2: Coding to Create
1 min
Say
Today we’re going to build on the coding you started last time. Instead of everyone completing the same task, you’ll choose from a series of coding challenges that ask you to create, change, complete, or debug digital artwork. As you work, pay attention to the different kinds of thinking you use to solve each challenge.
Do
Teacher-facing divider slide to help gauge lesson pacing and highlight the main parts of the lesson: Warm Up (5 min), Whole Group Instruction (10–15 min), Coding Challenges (25 min), and Closing (5 min). This slide can be skipped when presenting to students.
Warm Up: Think and Draw
5 minutes
Say
Over the last few lessons, you’ve actually been practicing several kinds of computational thinking. Look at these four skills: abstraction, algorithmic thinking, pattern recognition, and debugging. Think about yourself as an artist or creator. Which one of these feels easiest or most familiar to you right now? Choose one. Write the word, and then make a quick sketch or example that shows what you think that skill means. There isn’t one correct answer. The goal is to connect these ideas to things you have already been doing.
Do
Give students about 2 minutes to select and sketch, followed by a brief partner share. Invite 1-2 students to share or share a way in which you use computational thinking in the lesson. Examples might include following a series of steps to layer square paper on top of each other (algorithmic thinking). We layered our paper in a way to match Josef Alber’s example by paying attention to the patterns of color and shape. Then yesterday, we used the Fractal block-coding tool to create artwork inspired by Kandinsky or Josef Albers and sometimes the code didn’t work. We had to test, experiment and fix our code, that is an example of Debugging. To simplify the design, we focus on the most important part of the work, the layered squares, that is an example of abstraction.
Agenda
1 minutes
Say
We are going to work a little more with these skills today by talking a little more about how artists and coding share similar practices and skills. Then we will put that work to the test in a series of coding challenges.
What do these images have in common?
3 min
Say
Look at these three very different artworks: Josef Albers’ squares, Roy Lichtenstein’s abstracted bull, and a piece of pixel art. What do they have in common? They may look very different, but each artist builds an image from simpler visual parts—things like shapes, colors, lines, patterns, and placement. That same idea helps us when we code. Instead of looking at a complicated artwork all at once, we can ask: What are the most important parts? What simple shapes could I use to represent them?
Do
Invite 2–3 observations before summarizing. Listen for: simple geometric shapes blocks of color repeated forms simplified details breaking a complex image into smaller parts Big idea: identifying and most important elements is a critical step in abstraction.
Which image would be easier to draw?
4 min
Say
Look at these two versions of the bull. Which one do you think would be easier to recreate using only simple shapes and lines? Why? The second image has been simplified. Many realistic details are gone, but some important features and relationships remain. That is abstraction: focusing on the parts that matter most and leaving out details we don’t need. For a programmer, that simplification is useful because we can start describing the artwork as instructions: draw a rectangle here, add a circle there, place a line in this direction. The simpler we can describe the important parts, the easier it becomes to turn an image into code.
Do
Ask students to identify 3–5 basic shapes or lines they see in the more abstract version. As students name them, connect each visual feature to a possible coding instruction such as shape, size, color, or location.
Activity
1 min
Say
Now you’re going to put all four computational thinking skills to work through a set of coding challenges. Some challenges will ask you to recreate an image. Some will give you unfinished code. Some will ask you to find and fix errors. Others will ask you to recognize and extend a pattern. The different challenges will help you explore different types of algorithmic art and computational thinning at the same time.
Do
Prepare one Challenge Card deck per group of 3–4 students, 2–3 Answer keys for the class, and one Coder Handbook per student.
Slide 8
2 min
Say
There are several different challenges to choose from, and they don’t all work the same way.Some give you a lot of the code and ask you to debug or finish it. Others give you a pattern and ask you to build on it. Some require you to figure out more of the algorithm yourself. You do not need to complete them in numerical order. Choose a challenge that feels like a good place to start, and then try something different for your next one.
Do
Briefly point out the variety in the challenge deck without explaining every card. The deck intentionally varies the amount of scaffolding and complexity so students can select different entry points.
Challenge # 1 Directions
2 min
Say
Before you start, let’s look at how the challenge cards work. On one side, you’ll see the target output. This tells you what you are trying to make. Start by studying that image. Ask yourself: What shapes do I see? What colors? Where are they located? What seems to repeat? Your final artwork does not always need to be pixel-for-pixel identical. The important thing is to understand the challenge and create the intended structure or pattern.
Do
Use Challenge 1 as the model. Point to the Creeper-style target image and ask students to identify: background black rectangles placement symmetry or pattern
Challenge # 1 Directions
3 min
Say
The other side gives you information about the algorithm. Depending on the challenge, you might see all of the code, part of the code, or code that contains a mistake. Your first move should usually be: look, predict, then run. Look at the code blocks. Predict what you think they will create. Run the code and compare the output with the example artwork. Then ask: What needs to change? Maybe the color is wrong. Maybe the brush moved to the wrong location. Maybe a block is missing. Maybe a repeated pattern needs another step. That process of testing, finding a problem, and changing something is debugging.
Do
Model one example from Challenge 1 or another accessible challenge. Do not solve the entire card for students. Demonstrate the process: Inspect the target. Inspect the code. Make a prediction. Run. Compare. Revise.
Activity: 25 minutes
25 minutes
Say
Your goal is to complete three or more challenges today. Track each challenge you attempt in your Coder Handbook. If you get stuck, don’t immediately assume you did something wrong. Getting stuck is part of coding. If you’ve been stuck for about five minutes, you have three options: ask someone nearby for help, check the Answer Key to get a clue, or move to a different challenge and come back later.
Do
Have students work individually or collaboratively according to classroom setup. Circulate and ask questions such as: What do you notice about the target image? Which part of this challenge repeats? Which blocks seem to control that pattern? What did you expect the code to do? What actually happened? Which instruction might be causing the difference? What could you change without changing the whole algorithm? What information can you ignore? Is there another way to make the same output? Remind students to mark progress in the Coder Handbook as they complete or attempt challenges. Give a 5-minute warning before closing.
Painting the Bigger Picture
3 min
Say
Think about the work you just did. Do art and coding have anything in common? Why or why not? And think back to our square activity from the last lesson: Is it possible to create the same artwork or output using different methods or different algorithms? Turn to someone near you and choose one of those questions to discuss.
Do
Give students about 1 minute to turn and talk. Invite 2–3 responses.
What’s the big idea?
3 min
Say
Let’s connect the four computational thinking skills from our warm-up to what you actually did today. When you broke a complicated image into simple shapes, you used abstraction. When you organized code blocks into steps, you used algorithmic thinking. When you noticed repeated shapes or repeated code, you used pattern recognition. And when you ran your code, found something unexpected, and changed it, you were debugging. Takeaway: Artists and computer scientists use these kinds of thinking to turn ideas into things they can create, test, change, and improve. Coding is one tool that lets us turn those ideas and instructions into digital art.
Do
Ask students to identify which of the four skills they used the most during the activity. Optionally revisit their choice from the warm-up: Did anyone choose a different skill now than they would have at the beginning of class?
Thank You!
No speaker notes for this slide.
Slide 1 of 14
Materials & preparation
Print or share digitally
- Coding Challenge Cards deck 1 deck per group of 3–4 students.
- Challenge Cards Answer Key 2–3 copies per class.
- Coder Handbook 1 printed or digital copy per student.
Learner variability
Students can access the coding challenges in multiple ways to match their readiness and interests. The challenge deck contains activities with varying levels of complexity, allowing students to select appropriate entry points and switch challenges as needed.
Students may collaborate with a partner, use the Answer Key as a scaffold to compare and revise their thinking, and record their learning in the Coder Handbook using sentence starters and reflection prompts. These supports provide multiple pathways for students to engage with computational thinking while working toward the same learning goals.
Background for the teacher
- Abstraction
- Identifying the most important features of a problem, object, or idea while intentionally ignoring unnecessary details — simplifying a complex image into basic geometric shapes, or creating a representation that captures the key idea without every detail.
- Algorithmic thinking
- Developing a logical, organized sequence of steps to solve a problem or complete a task — writing step-by-step directions, following a sequence of instructions to create artwork, or organizing a design process so it can be repeated consistently.
- Debugging
- Identifying, analyzing, and correcting errors or unexpected outcomes in a design, algorithm, or program — revising a design when shapes do not fit, spotting instructions that are unclear or out of order, and testing and improving a project after finding mistakes.
- Pattern recognition
- Identifying similarities, repetitions, or regularities within information, objects, or processes — recognizing repeating shapes in artwork or repeated sequences in code, and using repetition to solve new problems.
How these ideas connect
- Artists and programmers both simplify complex ideas into basic shapes or steps to create something new.
- Students use abstraction to break artwork into simple geometric shapes that can be recreated with code.
- Coding uses algorithms to generate digital art, just as artists use design principles to create visual compositions.
Artists referenced in this lesson
| Artist | Artwork referenced | Computational thinking connection |
|---|---|---|
| Josef Albers | Homage to the Square | Abstraction, geometric simplification, repeated shapes. |
| Roy Lichtenstein | Bull Head III | Abstraction, decomposition, pattern recognition, geometric analysis. |
| Wassily Kandinsky | Concentric circle compositions (inspired activity) | Repeat blocks and loops, repetition, algorithms, pattern recognition. |
| Wikimedia pixel art | Wikipe-tan (example, not artist) | Pixel representation, digital abstraction. |