Tuesday, January 7, 2025

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

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 #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

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. 





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









Sunday, January 5, 2025

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. 

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