Create artistic designs by drawing a rotating shape.
Objective: Students will learn how to use the Pen Tool to draw a basic shape. They will create loops to make the shape rotate to create a design. They can utilize random in the code to vary the output.
Expected Outcome
Students will be able to:
Objectives/Outcome
Shape Art
Prerequisites:
Students should have foundational understanding of:
Vocabulary
Loop
Algorithm
Decompose
Random
Step-by-Step
Go to Clever
Open Code HS
Select the Shape Art Project
Project Sample
01
02
03
04
Lesson Sequence
Vocabulary
Introduce Pen Tools
Decompose Shape
Create Shape Art
decompose
What shape is repeated to make this design?
This small piece of the code creates that shape..
loop
How do I use the Pen Tool?
New Blocks - Pen Tool
Use the pen tool to leave a trail, draw a pattern, or draw a shape.
To add the pen tools, click the “add extension” button and select the “Pen” tool from the menu.
Add extension
How do I use the Pen Tool?
New Blocks - Pen Tool
Turns the pen feature on inside a sprite. The sprite will leave pen marks on the screen whenever it moves until the pen is turned off.
Turns the pen feature off stopping the sprite from leaving pen marks.
Use the pen tool to leave a trail, draw a pattern, or draw a shape.
Changes the size of the pen by a chosen number.
Sets the size of the pen to a chosen number.
TIP: The pen draws a trail of circles. The diameter of the circle in pixels is the equal to the pen size
Removes all the marks made by the pen.
How do I use the Pen Tool?
New Blocks - Pen Tool
This block sets the pen color. Click the bubble and drag the sliders to a select any color.
Use the pen tool to leave a trail, draw a pattern, or draw a shape.
This block changes the pen color by a set amount. Utilize the drop down for other pen style options.
Lesson:
Decompose a Shape
Lesson: Decompose a Shape
Resources:
Starter Project
Decompose a Shape
What shape is repeated to create this design?
How many times is it repeated?
Decompose the base shape
This piece of the code creates the base shape.
5 x 72° = 360°
360° ÷ 72° = 5
72°
Create the Code:
Create Shape Art
Shape Art
https://scratch.mit.edu/ideas
Shape Art
Decompose
Add Pen Tools
Add an event block to start the drawing
Use another loop to rotate and repeat the shape (Hint: repeat x degrees = 360)
Choose a sprite to be the artist and make it small
Add more pen tool blocks to set the color and line size
Draw a foundation shape.
What are some of the code blocks I need?
Step-by-Step
Go to Clever
Open Code HS
Select the Shape Art Project
Create your own shape art
Step-by-Step
1. Add a sprite to be the artist.
2. Make the sprite small, by dragging out the “change size by” block. Change the number to a negative number (-10) and then click it several times until it is small. You can put the block back in the tool box, or, you can adjust the size of your sprite in the sprite adjuster section below the stage.
OR
Step-by-Step
3. Add the Pen Tool Extension to the tool menu
Step-by-Step
4. Draw a line.
Change the number here to adjust the length of the line.
Use the dropdown to choose a control key.
Step-by-Step
5. Put the code that creates a line in a loop to create a basic shape. (What code is needed to make a square.)
How do we decide what number would go here? What is this number based on?
How do we decide what number would go here? What is this number based on?
?
?
Shape Basics
Shape Parameters = (Sides + Turns)→Repeat
A square has 4 sides and 4 turns (angles). To make a square the pen needs to follow a sequence to draw one side, turn, and then repeat 4 times
4 sides
90°
4 x 90° = 360°
360° ÷ 4 = 90°
Step-by-Step
5a Put the line in a loop to create a basic shape. (The code shown here makes a square.)
A square has 4 sides, so we need to repeat the pattern 4 times.
A square has 90 degree turns for each corner.
Step-by-Step
6. You might need a quick way to reset your screen so you can experiment with different shapes and designs. Add this additional string of code.
These green blocks lift the pen and erase all the lines on the screen.
These blue blocks move the cat back to the center and make him face the right direction.
Step-by-Step
7. Duplicate the code and see what other shapes can you make? Hint: Right click on the top of the clode blocks to duplicate the code and then adjust the repeat and degrees to make different shapes.
How many sides does your shape have that you are wanting to code?
Determine what degree is needed for the shape you are coding.
Control each new shape with a different key.
?
?
Shape Parameters - Turns
120°
3 sides
See additional shape resources here
60°
3 sides
Normally, we measure interior angles of shapes. In this activity, we will be measuring turns (baseline to exterior angle)
Baseline to exterior angle
Interior angle
Shape Parameter Turns
120°
4 sides
90°
3 sides
5 sides
72°
6 sides
60°
4 x 90° = 360°
3 x 120° = 360°
5 x 72° = 360°
6 x 60° = 360°
360° ÷ 4 = 90°
360° ÷ 3 = 120°
360° ÷ 6 = 60°
360° ÷ 5 = 72°
360° ÷ # of sides = turn angle °
Step-by-Step
8. Put a shape loop inside another loop (nested loop) to rotate and repeat the shape to make a fun design.
Step-by-Step
9. Customize to make your design unique.
(# of repeats) x (the # of degrees turned) = 360
eg. 10 repeats x 36 degree turns = 360
(10x36=360)
Change the parameters here to get different designs.
Extensions:
Other Shapes
Shape Art
Explore adjusting parameters
1. Students will open the starter project.
2. Follow instructions found in the comments and explore what happens when you adjust some of the parameters.
Decompose the base shape
What happens if you change the number of steps?
Click the flag to clear your design
Click the up arrow to start a new design
Decompose the base shape
Can you change the number of degrees AND the number of repeats to create a new shape? (HINT: the 2 numbers multiplied together needs to equal 360°)
BONUS!!
The 6 repeats when when combined with the 60° turns create the completed design (60 x 6 = 360) Can you change BOTH the turn degree number AND the repeat to make a new complete shape? HINT: When you multiply the 2 numbers they need to equal 360° (a full rotation).
Partner Share
More Extensions
Shape Art
Extension
10. Add a “pen up” block at the bottom and a “go to random position” block at the top of the code stack.
Now that you added this code block, what happens each time you press the “space” key?
Why did we need this code block? What would happen if you removed it?
Extension
11. Add more pen tools to control the color and size of the lines.
Where could you add these blocks to the code sequence you have already created? HINT: Different locations in the code may create surprises.
Extension
12. Add instructions for your user in your reset code.
Extension
13. Experiment changing some of the parameters.
Adjust the numbers in this operator and drag it into the white oval of the pen size block to make this new block
What other parameters can you change to affect the design?
HINT: Build this block instead of the “go to random position” block to keep designs from being interrupted by the edge. Depending on the size of the shape your parameters may need to be adjusted.
Revise
More Extensions
Debug
Can you add buttons to generate specific shape designs?
Can you change the size of the designs.
Does everything work the way you want it to?
Is there anything you want to change?
Can you change the rotation angle and repeats to make a new design?
Can you use a different base shape to create a design? (triangle, pentagon, etc)
Can you make designs appear in specific locations?
Can you make a multicolored design?
Shape Parameter Turns
120°
3 sides
5 sides
72°
6 sides
60°
3 x 120° = 360°
5 x 72° = 360°
6 x 60° = 360°
360° ÷ 3 = 120°
360° ÷ 6 = 60°
360° ÷ 5 = 72°
360° ÷ # of sides = turn angle °
Normally, we measure interior angles of shapes. In this code drawing we will be measuring exterior turns (baseline to exterior angle)
4 x 90° = 360°
5 x 72° = 360°
6 x 60° = 360°
8 x 45° = 360°
Rotation Combinations to Try
9 x 40° = 360°
10 x 36° = 360°
12 x 30° = 360°
15 x 24° = 360°
CS 3AP-1a. Model processes by creating and following algorithms to complete tasks.
CS 3AP-3b Create programs that include sequences, events, loops, and conditionals
CS 3AP-4d. Decompose problems into smaller, manageable tasks which may then be broken down further.
CS 3AP-5e Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended
Vocabulary
Code Blocks
Skills
CODE BLOCKS
SKILLS
VOCABULARY
STANDARDS
Pen down
Pen up
Set pen color
Set pen width
Repeat
Turn
Move
When key pressed
Loop
Algorithm
Decompose
Random
Integration
Shape Art
MATH
Standard 4.MD.5
Recognize angles as geometric figures that are formed wherever two rays share a common endpoint, and understand concepts of angle measurement.
Standard 4.G.1
Draw points, lines, line segments, rays, angles (right, acute, and obtuse), and perpendicular and parallel lines. Identify these in two-dimensional figures.
Standard 5.G.1
Compose and understand the coordinate plane.
ART
Standard 4.V.CR.1:
Brainstorm multiple approaches to a creative art or design problem.
Standard 5.V.C.1:
Combine ideas to generate an innovative idea for art-making.
Standard 6.V.CR.3:
Demonstrate openness in trying new ideas, materials, methods, and approaches in making works of art and design.
Resources
Shape Art
Sample Project: https://scratch.mit.edu/projects/550438487
Consider using this sample project to decompose code and understand the shape components:
https://scratch.mit.edu/projects/551740587