Beep boop. Are you on a mobile device?

codeCampus is a desktop / tablet experience. Log back in on one of those devices and we can get coding!

Get the bestselling book on coding!

Students: do this first!
  1. If you haven't already, read the...
    Chapter 1 - What is Code? storybook
    Chapter 2 - Intro to Scratch storybook.
    Chapter 3 - Loops storybook.
    Chapter 4 - Forever Loops storybook.
    Chapter 5 - If-Thens storybook.
    Chapter 6 - Variables storybook.
  2. Open the Starter Project
  3. Login to your Scratch account*
  4. Click the blue "next" button above to go to the next step
  5. Get ready to code!
*Don't have a Scratch account?
Overview

  1. In this project we will learn how to use code to alter the rainbow's image. We will use different variables to control the rainbow's size, color, and other cool effects!

Step 1: Set our Sprite

  1. Click on the Events tab.
  2. Then, Bring out a when green flag clicked block.
  3. This block tells our program to start reading the code when the green flag above the stage is clicked.

Step 2: Set our Sprite

  1. Click on the Looks tab.
  2. Then, Bring out a set size to '100'% block.
  3. Attach it to the "when green flag clicked" block.

Recap: Variables

Variables keep track of and hold information! In this project, the first two variables we will create will be Size - Numerator and Size - Denominator. We will then use these variables to adjust the size of the rainbow sprite. Making the Denominator variable bigger will decrease the size of the sprite. And making the Numerator variable bigger will increase the size of the sprite!

Step 3: Set the Numerator variable

  1. Click on the Variables tab.
  2. Click on the "Make a Variable" button.
  3. Name your variable 'Size - Numerator' and then click OK.
  4. RIGHT CLICK on the variable and select "slider".
  5. Now, we can change the value in our variable by moving the slider on our stage!

Step 4: Set the Denominator variable

  1. Click on the Variables tab.
  2. Click on the "Make a Variable" button.
  3. Name your variable 'Size - Denominator' and then click OK.
  4. RIGHT CLICK on the variable and select "slider".

Step 5: Set the Denominator to 100

  1. Both the Numerator and Denominator will be set to 100 to begin with. That will make our sprite start at its normal size.
  2. Click on the Variables tab.
  3. Bring out a "set Size - Denominator to '0'" block.
  4. Change the number to "100".

Step 6: Set the Numerator to 100

  1. Click on the Variables tab.
  2. Bring out a "set Size - Numerator to '0'" block.
  3. Change the number to "100".

Step 7: Make a Loop

  1. Click on the Control tab.
  2. Bring out a "forever" block.
  3. Attach it after the "set Size - Denominator to '100'".

Step 8: Set the Size

  1. Now, we'll create an equation that will allow the sprite to change its size as the user moves the numerator and denominator sliders.
  2. Click on the Looks tab.
  3. Bring out a "set size to '100'%" block.
  4. Attach it inside of the "forever" loop.

Step 9: Set the Size

  1. Click on the Operators tab.
  2. Bring out a "( ) / ( )" block.
  3. Insert it into the "set size to '100'%".
  4. Bring out a "( ) * ( )" block.
  5. Insert it into the left side of the "( ) / ( )" block.

Step 10: Set the Size

  1. Type '100' into the left side of the "( ) * ( )" block.
  2. Click on the Variables tab.
  3. Drag "Size - Numerator" into the left side of the "( ) / ( )" block.
  4. Drag "Size - Denominator" into the right side of the "( ) / ( )" block.

Test your work

  1. Now, try moving the sliders on the numerator and denominator variables - what happens to the rainbow sprite?

Step 11: Start a New Thread

  1. Next, we'll create variables that can allow us to use a slider to change the sprite's color and whirl effects.
  2. Click on the Events tab.
  3. Bring out a "when green flag clicked" block.

Step 12: Create a Color Variable

  1. Click on the Variables tab.
  2. Click on the "Make a Variable" button.
  3. Name your variable 'Color' and then click OK.
  4. RIGHT CLICK on the variable and select "slider".

Step 13: Create a Whirl Variable

  1. Click on the Variables tab.
  2. Click on the "Make a Variable" button.
  3. Name your variable 'Whirl' and then click OK.
  4. RIGHT CLICK on the variable and select "slider".

Step 14: Set the Whirl Variable

  1. Click on the Variables tab.
  2. Bring out a "set color to '0'" block.
  3. Bring out another "set color to '0'" block.
  4. Use the dropdown to select "whirl"

Step 15: Make a Loop

  1. Click on the Control tab.
  2. Bring out a "forever" block.
  3. Attach it after the "set Whirl to '0'".

Step 16: Set the Color

  1. Click on the Looks tab.
  2. Bring out a "set color effect to '0'" block.
  3. Attach it inside the "forever" block.

Step 17: Multiply

  1. Click on the Operators tab.
  2. Bring out a "( ) *( )" multiplication block.
  3. Attach it inside the "set color effect to '0'" block.

Step 18: Multiply

  1. Click on the Variables tab.
  2. Bring out a "color" block.
  3. Attach it on the left side of the "( ) * ( )" block.
  4. Type in the number "10" on the right side.

Step 19: Set the Whirl

  1. Click on the Looks tab.
  2. Bring out a "set whirl effect to '0'" block.
  3. Attach it after the "set color effect" block.

Step 20: Multiply

  1. Click on the Operators tab.
  2. Bring out a "( ) * ( )" block.
  3. Attach it inside the "set whirl effect to '0'" block.

Step 21: Multiply

  1. Click on the Variables tab.
  2. Bring out a "Whirl" block.
  3. Attach it inside the left side of the "( ) * ( )" block.
  4. Type in the number "10" on the right side.

Test Your Work

  1. Try it out!
  2. Click the green flag.
  3. Change the slider values and see how it affects the image!

Discussion

  1. Why do we need variables for each effect we add as a feature?
  2. To change the size, why do we need to multiply the fraction by 100?
  3. Which blocks reset all of the effects when you start or restart the project?

Challenge

  1. How do we add another effect feature to our project?
  2. How do we alter the starting values for each of the effects?

Good job! Time to submit your work to your teacher.

  1. Click "remix", then click "share"
  2. Copy the Scratch project link
  3. Go to your Google Classroom
  4. Find the correct assignment
  5. Paste the Scratch project link
  6. Click "Add link"

Unleash the power of Scratch 3!


Become a coding super-genius and create incredible projects with Scratch 3 - the newest version of the most powerful coding language for kids!

This beautifully illustrated, hilariously written, and delightfully engaging step-by-step guide is designed for kids (ages 8+) to learn the fundamentals of coding and apply them to amazingly innovative projects. Readers will learn to use the incredible new features of Scratch 3 to build projects that not only teach them to code, but also inspire them to pursue today's most exciting frontiers of technology:

  • Artificial Intelligence
  • Video Game Bots
  • Machine Learning
  • Augmented Reality
  • Multiplayer Computer Games