Category: CITE

Introduction to Scratch Jr: Crab Dance Animation

This has been written in collaboration with BMCC’s Early Childhood Education Department as part of CUNY’s Computer-Integrated Teacher Education (CITE) Project. For more information on the project and more, visit this CITE website.

Project Objective: To better understand computational thinking and coding through a simple, visually-based programming language. 

But how does Scratch help understand Computational Thinking?

  • Decomposition: Taking your intended program and breaking it down by actions. 
  • Abstraction: Seeing what actions can be done within the limitations of Scratch/Scratch Jr.
  • Algorithmic thinking: Synthesizing the desired actions into the proper code blocks. 
  • Pattern Recognition: Finding similar actions or logic used to create your project.

What is Scratch Jr?

Scratch Jr. Is an even more simplified version of Scratch, created for children from the ages of 5-7 years old to help give them the grasp of coding. It can only be used on a tablet and not on a browser (like Scratch proper) and limits the kind of functions one can program.

Unlike Scratch, Scratch Jr also has some limited resources outside of the site, but a few books on Amazon, I will link below.

What Can I Do in Scratch Jr?

A lot of things! Anything from simple games to silly animations for fun or for storytelling, or both! Your only limitations are the code and your imagination. If you’re coming from the original Scratch, you might find it significantly limited as this is intended for 5-7 year olds. 

However, looking at this with no coding knowledge at all can be a little daunting at first– but don’t worry. Playing and experimentation can help you understand the interface and blocks better. It is a bit more intuitive, a lot more tap and drag than Scratch, likely because it’s tablet only.

Crab Dance Animation

Overview:

First, you will need to install Scratch Jr on a tablet. If you are using one from the Makerspace, disregard this, as we already have it on our tablets. If you plan to to use your own tablet, please use the following links to install: iPad | Android Tablets | Amazon Fire Tablets

When you open up the app it will ask what you’re using this for– it doesn’t exactly matter, as I haven’t noticed any difference in the interface.

The Home button takes you to the app proper (or in fancy coding terms the integrated development environment, or IDE), and the question mark is a quick onboarding video on how to use Scratch Jr. You can come back to watch it anytime you want or need.

When you’re on the IDE menu, we want to select the plus sign icon to make a new project. The bow icon is for uploading from the tablet itself (for those who might receive someone else’s code– more on that later.)

You will be taken to the IDE, where you can see Scratch Cat on a white background. To the left of the workspace is your character selection, to the right is the scenery selection. Left to right on the top are the full screen button (rectangle with brackets), the grid tool (rectangle with grid)l, the background selection (photograph), title text (circle with ABC), reset (curved arrow with x), and run (green flag). Below the workspace is where you’ll drag and drop them. On the far right bottom are the Undo/Redo buttons, and on the far left there is a light gray line art of a character– the character you currently have selected.. 

While I hope this is all intuitive, I will label everything in the screenshot below.

You’ll find at the bottom there are blocks of many colors– those are our code blocks. Yellow is trigger blocks, Blue is motions, Purple is appearances, Green sounds, Orange is control options, and Red is the ending code.

Setting the Stage

First, I want to add a background. Select the Background button and choose a background. Mine is called “Beach Day”. 

Next, we’re removing Scratch Cat. You can hold down on Scratch Cat themselves on the workspace or on the character option on the left until you see a big red X. Click that to remove them from the scene. 

Select the plus sign on the left, and pick your characters, we will need two crabs, so repeat this twice. 


I want the crabs looking at one another, so I need to flip it with the code blocks. I am going to the blue code block and finding the move left arrow and clicking it. It will flip the character. (You can drag it off when you’re done.) I also want to drag from the purple the invisible block so I can make my characters disappear (you will need to make both crabs invisible).

For our peace of mind, we will recolor one of the crabs, select one of the crabs in the character panel, and you will be taken to the editor. I selected the lineart and fill and made it blue. I also labeled it Crab2 for clarity. 

(Sidebar, while you can’t upload things like in Scratch,  you can draw over or use the camera to snap a photo to edit over the premade Characters or Backgrounds.)

Coding the Dance

So drag your code blocks to make the crabs dance. You can follow my code below or experiment. As you can see I have code on both crabs, as that particular code controls them. (You can do each one at a time, or hop between as I like to do.)

To explain my actions in pseudocode, this is what is happening:

When the green flag is clicked, the red crab will appear visible on the stage and move 6 space right, the blue crab will remain invisible. It will send a message (orange letter) to the blue crab. When the red crab receives the red letter message, they will move up and down 1 space twice, and end. 

Here’s the pseudocode here:

When the blue crab receives the orange letter message, it will stay invisible, move to the left 1 step (as my character refuses to appear on the far right and kept popping up), then become visible. The blue crab will move another 6 spaces towards the left and send out a red letter message. When the blue crab receives the red letter message, they will move up and down 1 space twice, and end. 

Saving

On the far right top corner, there’s a yellow tab. This is where you’ll name your project, and have the option to share. 

To share, select For Parents, and solve the math problem presented to access these options.

For the safety of children, Scratch Jr has only one or two sharing options depending on the device. You can email your code to another person through your tablet’s mail app, or  for iPad users via AirDrop. 

Further Exploration Challenges:

If you’re welling brave to try some of these ideas:

  • Add dialogue vis speech bubbles
  • Add sounds (you only have the pop or record your own)
  • Create a second scene and figure out how to transition to it!

Links and Resources:

Introduction to Scratch: Turtle Game

This has been written in collaboration with BMCC’s Early Childhood Education Department as part of CUNY’s Computer-Integrated Teacher Education (CITE) Project. For more information on the project and more, visit this CITE website.

Project Objective: To better understand computational thinking and coding through a simple, visually-based programming language. 

But how does Scratch help understand Computational Thinking?

  • Decomposition: Taking your intended program and breaking it down by actions. 
  • Abstraction: Seeing what actions can be done within the limitations of Scratch/Scratch Jr.
  • Algorithmic thinking: Synthesizing the desired actions into the proper code blocks. 
  • Pattern Recognition: Finding similar actions or logic used to create your project.

What is Scratch?

Scratch is a visual programming language– meaning it shows its code syntax though visual graphics rather than just text. In Scratch, these are displayed as blocks, but still follow the logic and rules of traditional coding languages. Scratch is coded through the browser, but has offline editors for browsers and tablets.

Scratch Jr. Is an even more simplified version of Scratch, created for children from the ages of 5-7 years old to help give them the grasp of coding. It can only be used on a tablet and not on a browser (like Scratch proper) and limits the kind of functions one can program. 

Tinkercad also allows for Scratch-Style Programming with their Circuit Simulator to allow experimentation into virtual physical computing– this is the means of using code with (usually) a physical component with inputs and outputs with the intention of creating an interactive system. This is more advanced; but I feel it’s worth sharing as it is a great bridge of shifting from a visual programming language to a more traditional, text-based programming language (Arduino Code).

What Can I Do in Scratch?

A lot of things! Anything from simple games, visualizations, to silly animations for fun or for storytelling, or both! You can use premade assets or import your own sounds and images! Your only limitations are the code and your imagination!

It can look a little daunting at first– but don’t worry. Playing and experimentation can help you understand the interface and blocks better.

Sea Turtle Jam Game

Check Out My Code on Scratch!

We are going to design a simple game in Scratch. This is based on Craig Steele’s Unicorn Rush game from DK’s Coding With Scratch 3.0: Projects Workbook. [Thriftbooks] | [ Amazon ]. The code is still relevant, even if the graphics are outdated with the current version of scratch. The objective is to make the sea turtle eat as many jellyfish as possible within a time limit.

First, Download these Assets:

This is our sea turtle and jellyfish. I wanted a more realistic looking turtle (and Scratch has no turtle assets), and jellyfish to match.

Setting the Stage:

Next go to the Scratch Website (scratch.mit.edu), and either click Start Creating to create without an account, or click Join to make an account. Making an account is free, and great if you want to keep your projects. 


Regardless of what you choose, it will take you to the Scratch Editor. I recommend watching the little tour guide to help onboard you better.


First we want to set up our space background– this is already a premade asset in Scratch!

On the far bottom right you’ll see a long, skinny rectangle dedicated for backgrounds. Select the purple icon to choose your background. There’s plenty of backgrounds, choose one. I’m staying in theme, using Underwater 2. 

Next we’re going to have to replace Scratch-Cat with our turtle. Bye, Scratch Cat! Selecting Scratch-Cat on the lower right and clicking the trash can will remove them from the stage. Hovering your mouse over the Cat icon will give you options. You want the Upload Sprite option.


Select the turtle and jellyfish and both will upload!


As you can see, our sprites are a little too big for our space– so let’s resize them. In the lower right pane, we can resize the sprites by clicking on each and adjusting the percentage. I adjusted both to 30 percent. Next, hide the jellyfish (for now) by clicking the icon above it.

Setting Up the Turtle:

Now, we want to set up the base code and the turtle’s actions. Make sure your turtle is selected!

 On the left side, you’ll see the code blocks are organized by color. We need Events (Yellow), these are blocks to help determine how our program will start. For us, we want it when the Green Flag is clicked. So when we click the green flag on the page, it will always start. We will also need blocks from Motion, Control, and Sensing to start our code.

To add code, drag and drop in the workspace, to remove a block, drag it off the workspace. 

Here are the blocks for one direction. In pseudo-code we’d say: When the green flag is clicked the program will start. While the program is running, when you select the right arrow key, the turtle will move 10 steps forward and point at 90 degrees.

 But we need to repeat this for each direction.

If you run your code you might see the turtle is flipping around weirdly. Let’s Fix that. We’re going to add something between the start and code: Set rotation style: left-right.


In pseudo-code we’d say: When the green flag is clicked the program will start. Our sprites will rotate left to right. While the program is running, when you select the right arrow key, the turtle will move 10 steps forward and point at 90 degrees. When you select the left arrow key, the turtle will move 10 steps forward and point at -90 degrees. When you select the up arrow key, the turtle will move 10 steps forward and point at 0 degrees. When you select the down arrow key, the turtle will move 10 steps forward and point at 180 degrees.

Run the code (the green flag on the upper right) to make sure everything is working.

(Bonus: If you don’t like the turtle hiding the edge, add the block if on edge, bounce.)

Setting Up the Jellyfish

Now select our friend the jellyfish so we can put some code on them. 

In pseudo-code we’d say: When the green flag is clicked the program will start. While the program is running the jellyfish will reveal itself and appear at a random location on the screen. If it is touched by the turtle, then it must go to a new random position.

Run the code again to see that when you move the turtle to the jellyfish, it moves to a different position. 

Set the Score:

Finally we need to set the timer and the scoring system in. We will need to create a custom Variable. When you go to the Variable section, you’ll see a dialogue box that will allow you to name it. We’ll name it Score. It will pop up in the Variable page.

Select the jellyfish. We’ll be adding more code.

In pseudo-code we’d say: When the green flag is clicked the program will start. Start the Score at 0 points and show it on the screen. While the program is running the jellyfish will reveal itself and appear at a random location on the screen. If it is touched by the turtle, then add +1 to the score and go to a new random position.

Next we need to add a timer. While still in the jellyfish’s code, we’ll add a second block. It does not have to be connected to the main block. This is our timer.

In pseudo-code we’d say: When the timer is more than 10 seconds, hide the jellyfish and stop the program.

Congratulations! You’ve just made your first game in Scratch!

Bonus Challenges:

  • Can you make the turtle reappear on the screen when hitting the edge?
  • Can you add a visual timer to count down the time left? 
  • Can you add music and sounds?

(Spoiler: You Can! Hint: Check the Background character for the code!)

Links and Resources: