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 Einen Regenbogen programmieren


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.

Erweiterung auswählen
Auf das Wetter reagieren
Die Figuren in eurer Geschichte so programmieren, dass sie auf den Blitz reagieren
Einen Blitzeinschlag zeichnen und animieren
Einen Blitz programmieren, der sich vom Himmel zum Boden bewegt
Die Szene wechseln
Eine zweite Szene für eure Regen-Geschichte programmieren
Donner hinzufügen
Donner- und Regenklänge in eurer Geschichte programmieren
Ein Erdbeben programmieren
Ein Erdbeben programmieren, das eure Geschichte erschüttert
Einen Regenbogen programmieren
Einen Regenbogen zeichnen und programmieren, der in eurer Regen-Geschichte erscheint
arrow_backward Zurück
Weiter arrow_forward
  1. Wählt eine der Erweiterungen aus und schaut euch das Video an, um zu sehen, wie sie programmiert wird.
  2. Wenn ihr mit einer Erweiterung fertig seid, probiert eine andere aus!