Simple App Development using MIT Scratch : Draw Shapes with Color

Following is a quick overview of a simple App I am prototyping using MIT Scratch programming environment. MIT Scratch allows one to create visual stories, interactions by stacking chunks of “pre-programmed” blocks together. Chunks of blocks can communicate with each other by broadcasting messages and receiving message and act accordingly. You are not really writing code but are building code using equivalent Lego like code objects.

When you click the flag, a square shape is drawn in red color. You can then click the canvas so that the next shape is drawn there. Click on the colored buttons to choose drawing color. Click on the shapes to draw that shape.

NOTE: This app is based on concepts covered in my other article on Medium

Learning MIT Scratch : Stage Global Variables and Messages

Click on “SHOW EMBED” and view the video of my simple app workspace for drawing shapes with different color. (I would recommend watching in full-screen mode)

Blocks At A Glance

Blocks for Stage

Initialization

1. The Stage level variables (global to all the sprites as well) are initialized here. These variables are used by the Sprite for drawing the chosen shape with the chosen color.
2. Any existing pen drawings are erased
3. A “draw” message is broadcasted.

Mouse Interaction

When the stage is clicked with the mouse, a “move_to_cursor” message is broadcast.

The user clicks the Stage to position the Sprite from which the chosen shape is drawn.

Blocks for Pen

When the user chooses the color of the pen by clicking the three different sprites representing the pen color:

1. The Stage level global variable “pen color” is set (0 for Red, 1 for Green, 2 for Blue).
2. A message called “update_settings_color” is broadcast (The pen drawing Sprite receives it and sets the actual Pen color)

Blocks for Red Pen

Blocks for Green Pen

Blocks for Blue Pen

Blocks for Shapes

When the user chooses the desired shape to be drawn:

1. The Stage global variable “time_to_repeat” is set (3 for Triangle, 4 for Square and 5 for Pentagon)
2. The Stage global variable “turn_by_angle” is set (120 for Triangle, 90 for Square and 72 for Pentagon)

Blocks for Triangle Shape

Blocks for Square Shape

Blocks for Pentagon Shape

Blocks for Drawing Sprite

The Sprite that draws the shapes contains various sets of composite blocks that set the drawing state and also draw as well.

Initialization

The Sprite

1. Moves to the center of the canvas
2. Faces towards Right

Mouse Interaction

1. When the “move_to_cursor” message is received
2. The Sprite moves to the position of the mouse cursor

Changes in Global Variables

1. When “update_settings_color” message is received, the current Pen color is set based on the Stage global variable “pen color”
2. When “update_settings_shape” message is received, the “draw” message is broadcast.

Drawing

When the “draw” message is received, the shape is drawn based on the current values of Pen color and shape properties (“times_to_repeat” and “turn_by_angle”).

Summary

You should now have an idea about structuring a simple App using various Scratch constructs like Global variables, Messages and also use Extensions to add power to vanilla Scratch environment.

If you think this article has created value, please show it by clapping and/or leaving a comment.

Cheers,

Satish Goda (satishgoda at live dot com)

References

• https://scratch.mit.edu
• https://bootuppd.org/curriculum-3rd-grade-plus/