CS Inspired by Literature #WAOTL Challenge 3 - Adding and Controlling a Diver Sprite

In  my recent posts, I introduced a #WAOTL series where you and your students experience computer science by using Scratch to create and code an interactive experience with bioluminescent characters from the children's book "Whose Afraid of the Light" by Anna McGregor.  

Here are the posts in the series so far

• Welcome post and video introducing the series 
• Workflow for importing students art work into Scratch 

• Challenge 1 - Coding an animation that simulates bioluminescence  

• Challenge 2 - Adding Game Play to our Bioluminescent animation

Today's post will introduce Challenge 3 where we will learn to code a new DIVER sprite that you can move through the deep ocean with your arrow keys. The Diver will explore the 'balls of light' in the ocean to discover  the sea creature that each ball of light belongs to. 

By completing this challenge you will  create confidence with code using the following blocks; the challenge will be divided into two parts. 

Let’s get started by adding a diver sprite to your Scratch project from the last challenge.
Click on the purple Choose a Sprite bar and use the MAGNIFYING glass to search for a sprite from the library of sprites built into SCRATCH.  Type in the word DIVER and choose the one you want. 
You can resize the diver by changing the SIZE from 100 to whatever size you prefer. 
You can also drag the diver around the screen to position it to a new location.

 We will now Code the Diver by dragging out 4 copies of the EVENT block "When Space Key is Pressed. 
We would like to control the Diver Sprite with the 4 arrow keys.  You can do this by clicking on the little black arrow next to the word SPACE and selecting a different arrow key for each of these 4 Event Blocks. Your code blocks for the diver should look like this. 

Pull out 2 more blue code blocks

Does your code look like this?

Can you add code to the other 3 Event blocks so that the Diver moves
in the same direction as each arrow Key for each of the 4 events. 

Teachers might use an unplugged game to help the students learn how the POINT in DIRECTION block works. 

Now that you understand how to CODE an ALGORITHM when an EVENT occurs, 
 there are so many cool games and projects you can create.   
You are now ready for the second part of Challenge 3 where. you learn to use IF .. THEN logic.  

Let's change from coding the diver to coding one of your sea creature sprites.  Click on the sea creature sprite you want to code.  Let’s add some code to your  sea creature so that when the diver touches its light, the sea creature costume changes from "light only". to the costume showing the sea creature with the light on and  starts to blink.  

We’ll need to drag out this SENSING block, and change it from ‘touching  mouse pointer”to “touching Diver”
Make sure you are in the CODE section for the sea creature (not the diver)

Now let's add some IF .. THEN logic to our code. 

Now here is a challenge for you.  Your goal is to move the algorithm that made our sea creature blink inside the IF THEN block. 

Start by pulling  the FOREVER BLOCK. away. Look at your blinking animation code. 

See if you can rearrange these blocks so that when the Green Flag is pressed, the program is forever checking to see if you are touching the diver.  If the answer is YES to the question (Are you touching the diver) then the sprite should blink.

Chat with a classmate and experiment.  This is called PAIRED PROGRAMMING and is used by computer scientists every day in their job. 

Test your program.  If you got it right.  Let’s code the rest of the sea creatures with the same code. 

Test your program again.  Debug any unexpected results.

Are you ready for another challenge?

What would you like to happen to your Sea Creature Sprite 

when the Diver is NOT Exploring (Touching) it?

Here is a sample  Scratch solution  to this challenge. Click "SEE INSIDE" to compare this solution to the ones you and your classmates have come up with.  Remember that there are many different ways to solve these challenges. 

What type of game play rules  might add in future lessons?  How do you know if you WIN or LOSE the game? What would you like to happen if you WIN or LOSE? 

What if you trade computers  with your class mates and see who can explore all 4 sea creatures first.

Congratulations! You have mastered some important computer science concepts that computer scientists use every day.  Stay tuned for Challenge 4 where we will learn to change the backdrop and add sound to our project. 

Here is a teacher guide to Challenge 3

You can subscribe to this blog to get notified when the next challenge is posted.

Originally created for  CSTA-Vermont during Computer Science Education Week 2024

CS Inspired by Literature © 2024 by Lucie deLaBruere is licensed under CC BY-NC-SA 4.0

CS Inspired by Literature #WAOTL Challenge 2 - Adding game play to our project

In  my recent posts, I introduced a #WAOTL series where you and your students experience computer science by using Scratch to create and code an interactive experience with bioluminescent characters from the children's book "Whose Afraid of the Light" by Anna McGregor.  

Here are the posts in the series so far

• Welcome post and video introducing the series 
• Workflow for importing students art work into Scratch 

• Challenge 1 - Coding an animation that simulates bioluminescence

Today's post will introduce Challenge 2 where we will learn to code a simple guessing game using the character sprites from the book.  We will add a yellow light costume to our sea creature sprite. We will add code so that we can  display only the yellow lights when the game starts. When you click on the yellow light, the costume will change to a character from the book.

Here is a sample project solution for this challenge

Let's get started.
First -- Duplicate the costume with the light.. 

Add a bright yellow shape where your character glows. 

You should now have 3 costumes for your sea creature sprite.
(Name them so you know which is which. Repeat for all 4 sprites)

Drag out these two code blocks 

Put the blocks together so 

that every time you start the 
game the Fergus sprites switches to the light ONLY costume.

Drag out a new EVENT block - WHEN SPRITE IS CLICKED

Remember the flashing code you created in the last post?
Remove the When Green Flag clicked and replace it with your NEW EVENT block - WHEN SPRITE IS CLICKED. Snap it together.

Let's Test it!

• Press Green Flag on your new Scratch project.
• Do you only have a light? 
• What happens when you click on that yellow light?

Let's add these two algorithms to each of our sprites!  

Ask students how they might add GAME PLAY to this Scratch project.

What if... you created a card deck with all the students hand drawings of the characters.  Students play a game where they draw a card and have to click on the correct "blinking light" to make that character appear. 
How might you turn this idea into a Classroom Game with the student Scratch projects? 

Lucie's notes: They might not have the skills to implement the game play that they imagine, YET!  But explain that new computer science algorithms are created every day by imagining a possibility and learning the skills to code what you imagine.  Encourage them to continue to the next challenge to learn more new computer science skills that can help them code the game they imagined. 

Note:  I imagined a ball that was blinking and showed up at different  random parts of the screen making it harder to predict where it would be next.  The skills to code this idea and your students ideas will come with time.   Have your students write their aspired game play on an index card and create a Vision Board for your projects.

Stay tuned for Challenge 3 where we will add a diver sprite that you can control with the arrow keys. 

You can subscribe to this blog to get notified when the next challenge is posted.

Originally created for  CSTA-Vermont during Computer Science Education Week 2024

CS Inspired by Literature © 2024 by Lucie deLaBruere is licensed under CC BY-NC-SA 4.0 

CS Inspired by Literature #WAOTL Challenge 1 Coding an Animation

In  my recent posts, I introduced a #WAOTL series where you and your students might experience computer science by using Scratch to create and code an interactive experience with bioluminescent characters from the children's book "Whose Afraid of the Light" by Anna McGregor.  

Here are the posts in the series so far

• Welcome post and video introducing the series 
• Workflow for importing students art work into Scratch

Today's post will Kickoff the first of 5 challenge cards you and your students can use to create the interactive experience 

In Challenge 1 students will create and code characters from one of the 2024-2025 Red Clover Book Award nominees.

Here is a Sample completed project to Challenge 1  

Start by creating a NEW Scratch project at http://scratch.mit.edu

Your students may access Scratch in the following  ways depending on district policy. 

• No login (Save projects to your own computer or Google Drive)
• Use Scratch Teacher account to create student accounts which they supervise.
• Students create their own accounts with parental permission. 

To start the challenge have your students draw one (or all four) characters from the book.



Your students can  draw a character from the book using the digital paint tools built into Scratch. The Scratch interface allows you to switch between Vector drawing tools and Bitmap drawing tools. 

Vector graphics in Scratch allow you to draw shapes that remain smooth and crisp at any size.The vector editor uses points and curves to define shapes mathematically.

Bitmap graphics in Scratch) work with individual pixels. the images can become pixelated when enlarged.

I like the the vector editor because it uses a layer approach to more easily change parts of projects when editing different costumes. However, the bitmap editor comes in handy at times also. Watch this 5 minute videofrom STEAMIST to see which tools  are available when in vector or bitmap mode.   I would suggest  guiding your students through an exploration of each of these tools 

Tip: When you are in vector mode you will see a button that says 
Convert to Bitmap.  When you are in Bitmap mode that button will say Convert to Vector. 

Your students can choose to create hand drawings of the characters. I go over my workflow for this option in step by step details  in my previous blog post.

Now that your students have created or imported characters from the book in a Scratch Project...

Let's DIVE INTO CODING AN ANIMATION

I would encourage you to create your own sprites, but here’s a Scratch Starter Project you can use if you’d like to learn to code an  animation without completing the previous steps.  In this starter project, you will find 4 sprites already created by young learners, so you can dive right into learning to code an animation. 

Next, you'll want to duplicate the costume of the sprite and use the paint tools to add a new costume that appears to glow or be bioluminescent.

Now it's time to add Code to create a blinking/glowing effect. Click on the CODE Tab for your sprite. Drag out the following blocks of code.

This would be a great time to provide students with the block code Challenge 1 card and have them experiment with  arranging the code. Don't forget to show them how to pull apart the code blocks and reassemble them in different order. 

Once your students have created their own solution to this Coding Challenge #1,  ask them to compare their solutions.  What would happen if they changed the Wait Time to more or less seconds?

Finally, apply your new coding skills to create all 4 characters from the book. 

Here is a Sample completed project to Challenge 1  

These steps are also included as part of the  Challenge 1 teacher guide .  You can find additional steps to this Challenge in the previous blog posts.

Lucie's Notes and Tip:  Younger students  (K-2) might become the artists for this project, while older students (Gr 3+) could code the project or use Scratch paint tools to draw sprites. Adults or older student mentors (Gr 5+) could assist uploading hand drawn images from younger learners into the Scratch project. 

You could have students complete a project with just 1 sprite instead of all 4 characters then create a collaborative Scratch project with the contribution of different students. 

If students each created 1 animation, the sprites could be exported
(Right click and download) and also imported (or uploaded) into another Scratch project making it possible for a group of 4 students to each complete one part of this project. 

Stay tuned for our next post which will walk you through Challenge Card #2 where we learn to add code that turns our Scratch project into a Guessing Game.

Subscribe to this blog to be notified when the next challenge is posted.

Originally created for  CSTA-Vermont during Computer Science Education Week 2024

CS Inspired by Literature © 2024 by Lucie deLaBruere is licensed under CC BY-NC-SA 4.0 

Import Student Art Into a Scratch Project - WAOTL

In my last blog post, I introduced a #WAOTL series where you and your students might experience computer science by using Scratch to create and code an interactive experience with bioluminescent characters from the children's book "Whose Afraid of the Light" by Anna McGregor.  

Although Scratch does offer opportunities to paint digital drawings of the characters, I  love including students' hand-drawn art into Scratch projects.  There are several ways to go about this depending on the tools you have access to.  If you are looking for a step by step workflow for bringing in your student art work into Scratch projects, this post is for you. 

If you have your own workflow for importing art into Scratch projects, you can skip this post and proceed to the next post in this series . 

STEP 1: Create Hand Drawn Art Work

I ask students to use the unlined back of index cards to draw and color a picture of one of the characters in the book. (You can also use cardstock cut to size). Make sure to include a yellowish color for the part of the character that glows in the dark.  It's also important that there is a sharp contrast between the white background and the drawing. One way to achieve this is to outline the drawing with a black sharpie or a bright bold colored sharpie. Here are a couple drawings from young learners from Grade K and Grade 1.

STEP 2: Create a Digital Copy with Transparent Background

The next step is to take pictures of the art work and remove the background. There are many ways to approach this.  One way is to use some of the features of your phone's photo apps that automatically remove the background.  But since it's impossible to know what phone or apps teachers have access to, I'm going to use a workflow that works no matter what type of phone or tablet you have. 

1. Use the browser in your phone (or tablet) to go to the website remove.bg
(I use this so often that I've created a shortcut to this website on my phone)

2. From the remove.bg website, click on 

Upload
Choose Take Photo
Snap Photo
(Carefully try to only capture the white background around your character)
Select Use Photo
(The background should disappear)
Click on Download 
Click on Save Image

You now have a digital photo of a hand drawn photo image with a transparent background on your phone.   

STEP 3: Transfer photos of art work from phone to your computer

You can use several methods to transfer these images to your computer before uploading them to Scratch.   If your school uses Google Apps then I suggest using the Google Drive App on your phone to upload the pictures in a Google Drive folder that can be shared with your students.

STEP 4: Upload images into a Scratch project

The next step will be to download the images onto your computer so that you can  upload them in a SCRATCH project.  

Depending on the age of your students, you can now either

--Share the folder with your students so they can download the pictures they need individually .

• Click on the three dots.. next to folder.  

• Select Share. 

• Change General Access from Restricted to Anyone with the Link. 

• Copy Link.   

• Share the link with students (either in Google Classroom, via email, or other method)  

• Download all the pictures on your teacher computer, and upload them to a Scratch project that your students can remix. 

--Download the folder of images on your teacher computer and add them as sprites to Scratch project that students can access and REMIX. 

If your school allows students access to Google Photos, you can also create a  Google Photos Album to transfer images from phone to computer for students to access.  Be sure to check first  because many districts restrict use of Google Photos for students course.

Of course if you have access to different tools, (i.e. Air Drop) use the method that works best for you and your students based on available tools and age of students. 

Now it's time to bring those images into a SCRATCH project. 

There are some options depending on the age of your students and the method you chose above.

Option 1: For younger students, you might download all the artwork on your  teacher computer. You can then upload all those images at once as individual sprites on ONE Scratch project.  The students can then REMIX that project and TRASH the sprites they don't want.

 

This will import each image as its own sprite. They will be piled on top of each other.  Here is an Example Scratch project with art work created by my grandchildren in Kindergarten and Grade 1. 

Here is a sample Scratch project with 4 student hand drawn sprites from the book.

Option 2. For older students, you can share the link to the Google Drive folder of images and they can independently DOWNLOAD only their images onto their computer or Chromebook, then UPLOAD the images as a sprite in their own Scratch projects.

Here's a video recap of all the steps above,
plus a few extra tips on how to create shortcuts on your phone. 

These steps are also included as part of the  Challenge 1 teacher guide .  The rest of the Challenge 1 steps will be described in details in the next blog post.

You might also want to check out this great tutorial  and video from the Scratch team to guide you on how to bring your drawings into Scratch.

Lucie's Notes: Although this process is more consuming that the rest of the steps in this series, I'm confident you will see that importing student hand drawn art is worth the time investments.  Once the students start working with their own drawings, they are hooked to learn to code them into a fun experience. There is something about the act of creation that motivates the students to persevere through challenges of learning a new skill (like computer science).  Motivation is KING in teaching and learning coding or any subject! 

Another thought I had was that older students (Grades 4-6) often act as reading buddies for younger learners.  Why not have your older reading buddy import a younger student's art work into a Scratch project that becomes an interactive experience for their reading buddy. Older students now have an authentic audience for their coding project as they gain  computer science skills inspired by literature.

If you give this a try, please reach out and share.  I hope these tips give you the confidence to give it a try.

In the next post we'll show you how to create and code a Glow effect to the  sprites to simulate the bioluminescence found in the children's book - "Are You Afraid of the Light"

---------------------------------------------------------------------------------------------

PS. This blog post is part of a series guiding you to experience computer science by using Scratch to create and code an interactive experience with bioluminescent characters from the book. Most of the coding challenges target grades 4-6.

Younger students will be able to participate in SOME of the activities in collaboration with older students or with support from teacher and other adults.  

Originally created for  CSTA-Vermont during Computer Science Education Week 2024

CS Inspired by Literature © 2024 by Lucie deLaBruere is licensed under CC BY-NC-SA 4.0