In Storytelling, students use computer science to tell fun and interactive stories. Storytelling emphasizes creativity by encouraging club members to tell a unique story each day.
In Friends, students are encouraged to sign up with a friend or make a new friend in the club. Friends emphasizes teamwork by allowing club members to tell the story of how their friendship started and imagine a company together.
In Fashion & Design, students learn how computer science and technology are used in the fashion industry while building fashion-themed programs, like a fashion walk, a stylist tool, and a pattern maker.
In Art, students create animations, interactive artwork, photograph filters, and other exciting, artistic projects.
In Social Media, students create fun social media style applications and games while learning about the computer science concepts that enable these programs to work.
In Sports, students use computer science to simulate extreme sports, make their own fitness gadget commercial, and create commentary for a big sporting event.
In Music & Sound, students use the computer to play musical notes, create a music video, and build an interactive music display while learning how programming is used to create music.
In Game Design, students learn basic video game coding concepts by making different types of games, including racing, platform, launching, and more!
Students create fun and complex animated projects. This is an advanced curriculum, which means it teaches new concepts that are recommended for students who have already participated in at least two other CS First themes.
In this sample activity students animate an ocean wave to create a setting, then tell a story that takes place on the high seas.
In this sample activity students tell a story using the characters from Cartoon Network’s "The Amazing World of Gumball."
Be a designer and programmer – bring the Google logo to life using code.
In this add-on, you will animate your character's love with a cute heart effect.
To start, click on the character sprite, and broadcast a message to start the heart animation, and name the message something like “hearts.”
Add “say” blocks in the character sprite to describe your loving moment.
In this example, this message is broadcast after the character says, "You're the best!"
Program the heart sprite to receive this message.
Add a "when I receive" message, and make sure the "hearts" message is selected.
The heart sprite is currently hidden.
Add a "show" block, and click it to show the sprite.
Program the hearts sprite to appear near your character, then glide up and disappear.
From the motion menu, add a "go to mousepointer" block above the "show" block, and select your character sprite's name in the dropdown menu.
Click the blockstack to test.
If you cannot see the heart sprite, add a "go to front" block.
Click again to test.
Choose a spot for the hearts to start by adding a “change y” block and adjusting the value until the animation starts in the right place.
This example uses negative 65.
Click the block stack to test.
Next, program the sprite to move up and to the right as it becomes transparent.
Add a "change x" block and a "change y" block to the scripts area.
Add a "change effect" block, and select "ghost" from the dropdown.
Adjust the values in these blocks to change the look of the animation.
This example uses 10 in all three blocks.
Click these blocks to test a couple of times.
To make the heart look like it's continuously moving and growing transparent, add a "repeat" loop around the code, and attach this block stack to the bottom of the "when I receive" block stack.
To make the heart start off solid and visible, add a "clear graphic effects" block above the "show" block.
Click the block stack to test.
To make the heart move slower, add a "wait" block in the repeat loop, and adjust the time.
This example uses 0.03 seconds.
To make the heart move in a slightly different way, add a "pick random" block to the "change x" block, and type in the values 1 and 20.
Click again to test.
This looks pretty cool, but it would look even better with more hearts.
To make that happen, program the sprite to create several clones.
Detach everything under the "when I receive" block.
Then, add a "create clone" block and a "wait" block.
Change the time in the wait block to 0.1 seconds.
To make several clones, add a "repeat" block.
Next, program the clones to animate.
Add a "when I start as clone" block to the top of the detached block stack.
Click to test.
To increase the time between the hearts flying, adjust the time in the "wait" block under the "create clone" block.
This example uses 0.25.
To hide the heart at the start of your program, add a “hide” block and a “when flag clicked” block.
Click the flag to test out your whole animation.
Now, it's your turn.
Broadcast a message to tell the heart sprite to animate.
Program the heart sprite to start at your character, then move up and over and grow transparent when it receives this message.
Program the heart sprite to create clones of itself, and animate the clones.