Exploring Motion

These are works by artists Josef Albers, Maya Hayuk, Vassily Kandinsky, Atta Kwami, Kazimir Malevich, Alma Thomas, and Theo van Doesburg. The styles are different, but all of them are based on polygons or circles.

art by Josef Albers art by Maya Hayuk art by Kandinsky art by Atta Kwami art by Malevich Alma Thomas painting art by van Doesburg

Click for art credits.

In this lab, you'll draw polygons so you can create your own art: regular polygons

On this page, you will explore the basics of drawing a shape in Snap! by using the repeat block to loop through the same code multiple times.

: Algorithm and Pseudocode
AAP-2.A.1, AAP-2.A.2, AAP-2.A.3

An algorithm is a sequence of steps that are usually performed by a computer. The algorithm doesn't have to be written in any particular programming language or even in a programming language at all; you can write your algorithm in English or any other human language. Some people call an algorithm written in human language pseudocode. Once you know the steps that the computer will take, you can code your algorithm in the programming language of your choice.

What's the purpose of "pseudocode"? Why write an algorithm vaguely in English when you could write it precisely in Snap!? If you were programming in a punctuation-heavy language, designing your program in pseudocode would help you focus on the important ideas instead of on details like quotation marks and semicolons. But pseudocode isn't as necessary with a language like Snap!, and pseudocode can make it easy for you to fall into wishful thinking about what the computer is capable of (such as writing "Pick tomorrow's winning lottery numbers" or "Here's the melody; write the harmony").
    AAP-2.A, AAP-3.A part b
  1. Work with a Partner Write Out Your Thoughts Describe what this algorithm will make the sprite do:
    repeat (4) (move (100), turn clockwise (90))
  2. Log in to Snap! and build that script to test your hypothesis.
    1. Click it, and watch what the sprite does.
    2. Click pen down, and then click your script to run it again.
    3. You can click pen down (or any block) in the palette on the left or in the scripting area to run it. If you click a block inside a script, the whole script runs.
  3. Talk with Your Partner Analyze why that script does what it does.
  4. Talk with Another PairCompare your work with another pair. If your script behaves differently from theirs, check both.

    5. Using Visible Stepping

    Snap! has a tool called Visible Stepping that allows you to control how quickly Snap! steps through the blocks of your code.

    • Click the Visible Stepping button (Visible Stepping button with two footprints), and adjust the slider to control the stepping speed. When you run your code, the sprite will slowly execute each step of the code and highlight it in cyan.
      Click for a video of adjusting the Visible Stepping slider.
      Animation that shows how to use Visible stepping in Snap!
    • You can slow the stepping to do only one step at a time and wait until you tell Snap! to go on to the next one. Move the slider all the way to the left, and then you can press the Run/Pause button (pause button with play/pause icon) to see what happens at each step of your code.
      Click for a video of single-stepping through code.
      Animation that shows how to use single-step Visible stepping in Snap!

    Visible stepping can be useful as you read someone else's code because you can watch it at human speed instead of computer speed. It's also useful in debugging (fixing problems with) your own code when it's doing something wrong.

  5. Pair Programming Swap Switch who is sitting at the keyboard. Then experiment:
      You can put your sprite back in the center of the screen with go to x: (0) y: (0) and you can reset the direction it's pointing with point in direction (90).
    1. Change 100 to 50 in the move block of your script by clicking on the 100 and typing 50. Then click the script again to run it with the new input value.
    2. Click the clear block in the green Pen palette.
    3. Change the number in the turn block and run the script again... and again... and again.
    4. Clear the stage again, and change the number in the repeat (4){} block.
    5. Experiment with the input numbers in the turn and repeat blocks. Try to draw a triangle with equal sides.
    6. Use set pen size to () to set the pen size to something like 4 or 10 or 50. Then click your repeat, move, turn script again.
      7. To change the pen size you must click the set pen size block to run it after you've entered the number you want.
    7. Use set pen color to 'magenta colored square' to experiment with the pen color.
  1. Experiment: What leaves a trace?
    1. Move the sprite by dragging it to a new location. Does it leave a trace as you move it?
    2. Move the sprite by clicking on move (50) steps. Does it leave a trace as it moves?
    3. Does clicking go to x:(0) y:(0) leave a trace?
    2. sphere
  2. Make sure your other work has been saved, then Click here to load this file. Then save it to your Snap! account.
    Experiment with the scripts and look inside them to figure out how they work. Could you change the sizes or colors to make it more interesting?
Snap! art inspired by Malevich art Snap! art inspired by Malevich art Snap! art inspired by Malevich art Snap! art inspired by Malevich art
  1. Solid rectangles. Make and run this script:
    point in direction (45); set (flat line ends) to (True); set pen size to (20); pen down; move (150) steps
    The light blue set block is in the Sensing palette, where it looks like set (video capture) to ( ). Just click once in the hexagonal slot to get True (the green check box). If you're not sure what difference the "flat line ends" makes, try clicking the hexagonal slot again to run the script with that option False. And of course you can change all the numbers, or have your program pick random numbers.
  2. Color families. Click the file menu icon and select "Libraries..." Then, find the "Colors and Crayons" library and click "Import."
    Snap! file menu, highlighting "Libraries..." Import library dialog box with "Colors and Crayons" library highlighted
    In the Pen menu you'll find the set pen to crayon block. Computers can display billions of colors, but unless you have to match the paint on your wall very precisely, finding your way through all those colors may be more trouble than it's worth. The crayon library, just like a box of crayons, gives you a small set of vibrant colors, arranged in families. So if you want a lot of browns in your picture, you could pick a random number between 30 and 39.
    Set pen to crayon block with menu of color families, selecting "browns" and showing submenu of ten brownish named colors, highlighting "34 chestnut #954535"
    3. painting-by-Malevich
  3. At the right is a painting by Kazimir Malevich. Its elements are rectangles, either horizontal or at a 45-degree angle, plus or minus a few degrees. You can position rectangles randomly. Your picture doesn't have to look like his—you're the artist!
    Alphie: If we just put rectangles in randomly, the tiny square dots will often be covered by larger ones. Maybe we should do big ones first and smaller ones later.
    Gamal: I know ours don't have to look like the original, but I really like that huge black horizontal rectangle. It gives the painting a structure, with a top part and a bottom part, even though it doesn't go all the way across. I want to make sure to have one like that.
    Betsy: I bet we can use the idea of drawing really thick lines without using flat line ends and get interesting results:
    curved horn shape made of overlapping circles in different colors
    4. art by van Doesburg
  4. At the right is a painting by Theo van Doesburg. It has some things in common with the Malevich picture, mainly the use of rectangles as the design elements. But there are no 45-degree rectangles; instead, the constraint is that rectangles may not overlap, so if you want to place a random rectangle in the picture, each end may have to be shortened to avoid collisions. You can use ((brightness) at (myself)) = 0 to find out if the point behind the sprite's rotation center is black.