Coding Kandinsky

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.

Say

Today we’re continuing Expedition 2: Coding to Create. Yesterday, we made geometric abstract art with physical materials and paid attention to the order of our steps. Today we’ll explore how an artwork can be broken into a sequence of steps, learn how those steps connect to algorithms and code, and then use Fractal Studio to create geometric abstract art digitally.

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 (about 13 min), Coding Activity (25 min), and Closing (5 min). This slide can be skipped when presenting to students.

Say

Look at the four dots on the screen. Your goal is simple: connect them to make a square. Before you start, think about how you will do it. Which dot will you start with? Which direction will you move? Draw your square, and then write down the steps you used. When you’re finished, compare your process with someone near you. Did you both make the same square? Did you use the same steps?

Do

Give students about 2 minutes to draw and write their steps, followed by a brief partner comparison. Listen for differences in: starting point direction order of sides continuous versus separate lines how students describe their process

Say

Even though we all had the same goal—make a square—there were many possible ways to get there. Some people started at different corners. Some moved clockwise, while others moved counterclockwise. Some drew the whole square continuously, while others drew opposite sides first. The important idea is not the exact number of possibilities. It is that different sequences of steps can lead to the same or a similar result. That idea is important in both art and computer programming. If you count only the order in which the four sides can be drawn, there are 24 possible orders (4!), though many would feel essentially equivalent to students. If they have to draw it as one continuous path without lifting the pencil, there are 8 start/direction combinations (4 starting corners × 2 directions), all producing the same square. The strategy, sequence, and language used to construct it can vary.

Do

Invite 2–3 students to describe different processes. Avoid spending too much time on the 24 possible orders, the broader idea that the same outcome can be reached through different processes.

Say

We’ll review geometric abstract art, introduce algorithms, and then spend most of our time using code to create geometric artwork in Fractal Studio.

Say

Remember that geometric abstract art uses shapes, lines, colors, and arrangements instead of trying to show realistic objects. Here is Kandinsky’s Squares with Concentric Circles. Imagine you had to explain to someone how to make just one section of this artwork. What steps might they need to follow?You might choose a location, choose a color, make a shape, change its size, add another shape, and repeat or revise.Those artistic decisions can be described as a sequence of steps.

Do

Invite students to suggest one or two possible steps. Reinforce that there is more than one reasonable sequence for constructing the artwork.

Say

Kandinsky experimented with shape, line, color, and placement to create artwork that did not have to represent a specific object. Look at this piece. What do you notice about the shapes and where they are placed? Does anything remind you of work we’ve already done with pixels or geometric abstraction? Like pixel art, this artwork can be broken into smaller visual parts—shapes, colors, sizes, and locations.

Do

Invite 2–3 quick observations. Point students toward placement as an important artistic decision because it will become something they control through code.

Say

There is a name for an organized sequence of steps used to accomplish a task or reach a goal: an algorithm. We use algorithms in everyday life even when we don’t call them that. A recipe gives you steps for making food. Directions tell you how to get somewhere. A game has rules and actions that happen in a particular order. Turn to someone near you. Where else do you use a sequence of steps in your everyday life? Close with: Computers also use algorithms, but computers need their instructions to be especially clear about what to do and in what order.

Do

Give students about 30 seconds for an elbow-partner discussion and then invite a few examples. Possible examples include recipes, routines, games, directions, crafts, sports plays, or classroom procedures.

Say

When an artwork is created using a defined set of rules or steps, we can call it algorithmic art. Algorithmic art can be digital, but it doesn’t have to be. A person can follow an algorithm by hand, too. Think back to the Albers-inspired squares you made yesterday. You selected pieces, decided on their size and color, arranged them, and layered them in an order. Was that a sequence of steps? What might have changed if you followed those steps in a different order? This is ane

Do

Invite 1–2 responses connecting back to Lesson 1. Reinforce the link: artistic process → communicating a sequence of steps → algorithm. https://structuresynth.sourceforge.net/https://en.wikipedia.org/wiki/Algorithmic_art#cite_note-Hvidtfeldt-1 Hvidtfeldt Christensen, Mikael. "Hvitfeldts.net". Retrieved 2 October 2015.

Say

Fractal Studio includes several different art-making tools. Today, we will choose Algorithmic Art. This is the tool that lets us use visual code blocks to give the computer instructions for creating shapes and images.

Do

Explain how to use the tool and the task before having students work.

Say

Let’s look at how we can translate part of Kandinsky’s artwork into code. This will also help us learn how to use the tools. First, look at the artwork and identify the important features. We need to think about things like: What shape do we need? What color should it be? How large should it be? Where should it go? What needs to happen first, second, and third? Each code block gives the computer an instruction. When we put those instructions together in an order, the blocks become our algorithm. If we change a block—or move it to a different place in the sequence—we may change the artwork the computer creates.

Do

Demonstrate live in Fractal Studio to make a similar image or use the animated slide. Model or point out in the video how code blocks control: shape, size, color, location/placement, sequence. Run or preview the code after making a small change so students can see the relationship between an instruction and the visual output.

Say

Now we’re going to use the same ideas from yesterday with a computer. For the task you will work in pairs. Pair with one other student. Go to Fractal Studio and enter your assigned username. Once you are logged in, select Algorithmic Art and launch the tool.

Do

Confirm that all pairs have selected the Algorithmic Art tool before moving on. Decide whether it is best for you class to share.

Say

Your goal is to create a digital version of one section of Kandinsky’s circles or Alber’s s squares while keeping its most important features. Start with the challenge that gives you the right amount of support. As you work, run your code often. Compare what the computer creates with what you intended. If something doesn’t match, don’t start over right away. First ask: Which instruction might be causing the difference?

Do

Keep this slide or the challenge cards visible during work time. The challenges intentionally progress in complexity: Challenge 1 — Albers Digital Copy: Most scaffolded. Students receive the full code sequence and focus on block order, shape size, and color. Challenge 2 — Kandinsky Digital Creation: Students receive less support and determine additional blocks needed to recreate concentric circles. Challenge 3 — Kandinsky Crazy: Most independent. Students use movement and placement to add additional circles and make more creative decisions. Circulate and ask: What is your algorithm trying to do? Which block controls the shape? Which block controls size or color? What happens if you move this instruction? What did you expect to happen? Which instruction could you change? Can you create a similar image with a different sequence? Encourage partners to test incrementally rather than assembling a long sequence before running it. Give students a 5-minute warning before closing. https://canva.link/2908twkm24qk4nc Distribute on paper or make have student use a second devices to use the Coding Hints & Challenges.Prompt students to talk through their planned algorithm before or while coding.

Say

Let’s bring together today’s big ideas. An algorithm is a sequence of steps used to accomplish a goal. Artists and programmers both make choices about things like order, shape, color, size, and placement. We also discovered that different algorithms can sometimes produce the same or similar results. And when we change an instruction in our code, we can change what the computer creates. Think about your own work today. Would you rather…

Do

Invite 2–3 students to share an example of how they used a sequence of steps. Use the thumbs-up/thumbs-down choice on the slide or have students turn and talk about whether they prefer following an existing algorithm or creating their own.