Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

arrow_back Code a Rainbow


In this add-on, you’ll make a rainbow appear in the background of your project.

In computer science, there are often many ways to solve a problem. So, there are a lot of ways to make a rainbow show up in your story. You could draw a rainbow in the paint editor. Or, you could import a picture of a rainbow. This video will show you how to write code to draw a rainbow. First, create a sprite that will draw the rainbow. This sprite will be a tiny piece of a rainbow that can be used over and over again to draw a complete rainbow. Click the paint new sprite button. In the paint menu, select the paintbrush tool. Set the tool to have a large line width. Choose the first color for your rainbow. Then, make a single dot in that color near the top of the screen.

Next, make another dot in a different color below the first dot. Continue making dots for each color in your rainbow. Cool, now you have a tiny piece of a rainbow.

Next, build the code that will draw a complete rainbow. Select the scripts tab. To draw a rainbow, the sprite will stamp a picture of itself, move and rotate a little bit, then stamp again, over and over.

Drag out a “stamp” block. Below that, snap a “move 10 steps” block, then a “turn 15 degrees” block. Click the block stack to test it. Cool, the rainbow starts to draw.

Repeat the drawing action by placing a “repeat 10” block around the whole stack. Click the stack again to test it out. Cool! The code is sort of drawing a rainbow. But it’s not quite right yet. There are gaps in the rainbow. That means the values in the “move” and “turn” blocks probably are not correct. Tinker with the values until you find something that works right! This example uses 12 steps and 5 degrees.

Great! But by now, your screen is probably full of rainbow stamps! Place a “clear” block at the top of the block stack, then add a “when flag clicked’ block above it. Test it out! Great. Now the rainbow draws. But, it doesn’t start in the same place each time. Drag out a “point in direction” block, and make sure 90 degrees is selected.

Click the block to test it.

It makes the rainbow point in the original direction. Add this block under the “clear” block.

Click the block stack to test it. The rainbow always stays right side up!

Next, drag the rainbow sprite to the spot where it should start drawing. Then, drag out a “go to x y” block, and place it under the “point in direction” block.

Click the flag to test it. Click the flag a few times. The rainbow always starts in the same location. Cool!

Customize the values in the “point in direction” and “go to x y” blocks to make your rainbow look right for your story. You can also change the values in the repeat loop to make the rainbow bigger or curvier.

Here is an example of a tiny rainbow.

And here is an example of a huge rainbow!

Both these programs use the same code blocks.Only the values in the blocks are different.

Finally, you might make the rainbow a surprise for users. Place a “hide” block at the top of the block stack. Now, the rainbow sprite won’t show up; only the stamps will show up.

Cool! Now, it’s your turn!

Draw a rainbow sprite. Use “repeat,” “stamp,” “move,” and “turn” blocks to draw a rainbow. Give the rainbow a starting location.

Choose an Add-On
Lightning Reaction
In this add-on, you’ll program the characters in your story to react when the lightning strikes.
Drawing and Animating a Lightning Bolt
In this add-on, you’ll draw and program a user-controlled lightning bolt that moves from the sky to the ground.
Sun Comes Out
In this add-on, you’ll program a second scene for your rainy day story.
Playing Thunder
In this add-on, you’ll play thunder and rain sounds in your story.
In this add-on, you’ll broadcast an earthquake to really shake up your story.
Code a Rainbow
Draw and program a rainbow to appear in your rainy day story!
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!