![]() |
![]() |
![]() |
![]() |
Drawing the Traffic Light
We will now start to draw the traffic light itself.
- Choose "Rectangle" from the Graphics page of the Object Palette.
- Drag on the working model to get a rectangle that looks like the outer rectangle in the picture below.
![]()
Next we will change the color to orange and draw the inner part of the traffic light.
- Choose "Orange" from the Color page of the Object Palette.
- Click once anywhere on the working model. Now the next thing which is drawn will be orange.
- Choose "Filled Rectangle" from the Graphics page of the Object Palette.
- Draw a Filled rectangle inside the first similar to the inner rectangle in the figure.
Now you will start to set up some code which will let the traffic light display the three lights.
- Click on the Code Sourcerer button in the Simplicity Composer.
- Choose Java Language Statements... and press the Next button.
- Choose if ... and press the Next button.
- type "state == RED" in the conditions box, and press the Done button.
Now you will draw the first of the bulbs of the traffic light.
- Choose "Red" from the Color page of the Object Palette.
- Click once anywhere on the working model.
- Choose "Filled Oval" from the Graphics page of the Object Palette.
- Hold down the control key and drag the oval near the top third of the rectangle. The control key constrains the oval to be a circle.
If you wish to change the location or the size of the circle, you may edit the line that was just generated in the Simplicity Composer. If you dislike the circle that you drew, you could also erase the line that was generated and try again.
The second and third bulbs are set up and drawn in a very similar manner.
- Click on the Code Sourcerer button in the Simplicity Composer. Choose Java Language Statements... and press the Next button.
- Choose if... and press the Next button.
- type "state == YELLOW" in the conditions box, and press the Done button.
- Choose "Yellow" from the Color page of the Object Palette.
- Click once anywhere on the working model.
- Choose "Filled Oval" from the Graphics page of the Object Palette.
- Hold down the control key and drag over the middle third of the rectangle, to draw a circle.
- Press the Code Sourcerer button in the Simplicity Composer. Choose Java Language Statements... and press the Next button.
- Choose if... and press the Next button.
- type "state == GREEN" in the conditions box, and press the Done button.
- Choose "Green" from the Color page of the Object Palette.
- Click once anywhere on the working model.
- Choose "Filled Oval" from the Graphics page of the Object Palette.
- Hold down the control key and drag the oval over the bottom third of the rectangle to draw a circle. Your traffic light should now look like the figure.
- Now you must do some editing of the generated code. The last part of the code which is generated will look like this:
You need to change the code so that the setColor and fillOval methods are inside their respective if statements. This is easily accomplished by deleting each close bracket, "}", and typing it after the following fillOval method. You may also wish to adjust the tabs in the code. This section of your code will now look like this:
Data Representations, Inc. http://www.datarepresentations.com support@datarepresentations.com sales@datarepresentations.com |
![]() |
![]() |
![]() |
![]() |