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 Coder un arc-en-ciel


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.

Choisir une extension
Réaction face aux éclairs
Dans cette extension, tu vas programmer les personnages dans ton histoire pour qu’ils réagissent lorsque les éclairs frappent.
Dessiner et animer un éclair
Dans cette extension, tu vas dessiner et programmer un éclair contrôlé par l'utilisateur qui glisse du ciel vers le sol.
Le soleil brille
Dans cette extension, tu vas programmer une deuxième scène pour ton histoire sous une journée pluvieuse.
Dans cette extension, tu vas jouer des sons de tonnerre et de pluie dans ton histoire.
Tremblement de terre
Dans cette extension, tu vas programmer un tremblement de terre pour vraiment secouer ton histoire.
Coder un arc-en-ciel
Dessine un arc-en-ciel et programme son apparition dans ton histoire sous la pluie !
arrow_backward Retour
Suivant arrow_forward
  1. Choisis une extension, et clique sur "Regarder" pour découvrir comment la créer.
  2. Une fois que tu as terminé une extension, essayes-en une autre !