Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 1. Quick Start > Procedure 1.8. Creating a Neon Sign

Procedure 1.8. Creating a Neon Sign

1.
Drawing an unanimated neon sign.

a. Set up the drawing.

With the Document Properties dialog (File → Document Properties... (Shift+Ctrl+D)), set the drawing size to 300 × 300 pixels. Create a Grid with spacing of 5 pixels and turn snapping nodes to the Grid on.

Our sign is depicted at night. We’ll need a black background. Use the Rectangle Tool to draw a rectangle that covers the page. Give it a black Fill and remove any Stroke. For the moment, change the Master opacity to 50%. This will make it easier to see other objects as they are drawn (such as black text). We’ll change the opacity back to 100% at the end.

We don’t want the background to move so use the Object Properties dialog (Object → Object Properties... (Shift+Ctrl+O)) to lock the rectangle (normally it is recommended to lock objects indirectly by using a locked Layer, but in this case, we need to keep all of the sign parts on the same Layer if we want to animate the sign using an animated GIF). While we’re at it, in the dialog, change the Id to “Background” to make it easier to find the Rectangle later.

b. Draw Saturn and the rings.

Saturn will consist of a yellow plastic orb surrounded by three neon rings. The neon rings will be tilted and the whole mechanism will rotate in the SVG animated version. For animation purposes, it is easier to draw the orb and rings centered around the SVG coordinate origin (upper-left page corner) and then group the parts and translate the group into place.

Using the Ellipse Tool draw a circle with radius 30 pixels and origin at the upper left corner of the page. If the Shift key is held down while using the Ellipse Tool, the center of the circle will be at the start of the drag. Set the Fill color to light yellow (RGB: 252, 249, 63) and turn off any Stroke. A slight Blur of a few percent gives the globe a soft glow... but at the cost of more CPU usage. For the moment, leave the blur set to zero.

If you plan to animate the sign, it is very useful to have each object labeled with an appropriate name. One could use the Object Properties dialog for this (as we did for the background rectangle), but it is probably more useful to use the XML Editor dialog (Edit → XML Editor... (Shift+Ctrl+X)). The XML Editor dialog allows you to easily move objects up and down in z-order and into and out of Groups as well as change various object properties. Open the XML Editor. When the orb is selected on the main Inkscape window, its XML entry will be highlighted in blue on the left side of the XML Editor dialog. You can also select a single object or Group by clicking on its entry in the XML Editor. Click on the id line on the left side of the dialog. This selects the id attribute for editing in the lower-left side of the dialog. The orb will have an id of the form “path####”. Change this to “Orb” and use Ctrl+Enter to register the new name. While you have the dialog open, note the Sodipodi parameters cx, cy, rx, and ry. These attributes mark the center and radius of the arc. Inkscape automatically calculates the SVG path from these parameters.

XML Editor dialog (after orb path relabeled).

Now add the rings by using the Ellipse Tool. Again by holding the Shift key down, create an arc with an x radius of 50 and a y radius of 10. Turn off the Fill and add a 2 pixel wide red Stroke (RGB: 255, 34, 34). Create a second arc with x radius of 55 and y of 15. Set the color to orange (RGB: 255, 144, 6). Finally, create a third ring with x radius of 60 and y radius of 20. Set the color to the same red as the first ring. Using the XML Editor dialog, change the id names to “Ring1”, “Ring2”, and “Ring3”, respectively.

The rings don’t look right. There are two problems. The first is the shape of the larger rings. The y radius is too large. This resulted from snapping to the grid not allowing the correct y radius. Use the XML Editor to set the y radius (ry) of “Ring2” and “Ring3” to 12 and 14 pixels respectively.

The second problem is that both the top (front) and bottom (back) of the rings are in front of the orb. We could just open the arc using the Start and End entry boxes in the Ellipse Tool Tool Controls but this will run into problems when we animate the drawing as the start and end angles of the arcs will change with the rotation of the rings. The best solution is to move the rings behind the orb and create three new half rings in front of the orb.

Duplicate each ring in turn. Name the new rings “Ring1-Front”, etc. Rename the old rings “Ring1-Back”, etc. Rearrange the rings so that the three “Back” rings are behind the orb. This is easy to do by selecting each of the rings on the right side of the XML Editor and clicking on the and icons in the XML Editor to move the rings up or down in z-order.

XML Editor dialog after labeling the rings and adjusting their z-order.

Now take each of the “Front” rings and with the Ellipse Tool-Tool Controls set the End of each ring to 180° and check the Open arc box.

Group the orb and rings together and label the new Group “Saturn-Group”. Your drawing should look like the one below.

Saturn group before the move.

Finally move the “Saturn” Group 150 pixels to the left and 80 pixels down. Our Saturn is complete.

c. Draw the sign board.

We will start with the text before adding the neon sign border.

  1. Add the text.

    Start by adding the required text as shown in the first figure of this section. The text for the list of items (Hamburger, etc.) need to be center justified. Select this option by clicking the Center icon () in the Text Tool-Tool Controls. (Note: The “SATURN” text should not be center justified if animation is planned.) Add the following using a Sans-Serif font:

    • SATURN: Bold, 36 pt.

    • DRIVE IN: 28 pt.

    • Hamburgers

      Root Beer Floats

      Shakes--Fries: Italic, 14 pt.

    Center the text under Saturn by using the Align and Distribute dialog (Object → Align and Distribute... (Shift+Ctrl+A)). Set Relative to to Page and after selecting the text objects, use the Center on vertical axis icon (). With the XML Editor dialog, change the id attribute of the text objects to “Saturn-Text”, “DriveIn-Text”, and “Items-Text” as appropriate. This should be done before the next step.

  2. Add neon effect to the text.

    The neon effect for the text consists of two parts, the first simulating the neon tube and the second the glow of the tube off of the sign backboard. The procedure will be almost the same for each of the text objects.

    Start with the “SATURN” text. We’ll simulate using a neon tube to outline each letter. Select the text object and give the Stroke a width of 2 pixels and an orange-neon color of RGB: 255, 191, 127. Remove the Fill.

    To add the neon glow, use the Path → Linked Offset (Ctrl+Alt+J) command to duplicate the path. This command produces a copy of an object that is linked to the original so that any change to the original object will be reflected in the duplicate. In addition, there is a handle that one can use to enlarge or shrink the duplicate relative to the original. The inkscape:radius parameter controls the offset. You can precisely set it by using the XML Editor. Set it to 5.

    With the Fill and Stroke dialog give the new path a Fill of RGB: 255, 31, 31; remove the Stroke and add a blur of 7.5%. If necessary (it shouldn’t be), move it below the original path via the Object → Lower (Page Down) command. Label the path “Saturn-Glow” and Group it with the original path. Give the Group the name “Saturn-Text”.

    Repeat the above process for the “DRIVE IN” text but with the following changes: Give the text a Fill of RGB: 207, 228, 241; and no Stroke. Use a glow color of RGB: 0, 127, 189. Name the objects as before, substituting “DriveIn” in place of “Saturn”.

    One problem with the “DRIVE IN” text is that the font is too thick to approximate the neon tube. This can be remedied by selecting the text (“DriveIn-Tube”) and using the Path → Dynamic Offset (Ctrl+J) command. This command will convert the text to a path with a handle that can be used to expand or shrink the path. Unlike a Linked Offset, no new path is created. With the XML Editor dialog, precisely set the offset by changing the inkscape.radius parameter to -0.2. As a last step, you’ll need to change the id attribute back to “DriveIn-Tube”.

    For the “Items” text, again follow the procedure for the “SATURN” text, but use a Fill rather than a Stroke for the neon tube text and substitute “Items” for “Saturn” in the labels.

    Sign board text completed.

  3. Create the sign shape.

    Inkscape and SVG support Rectangles with rounded corners. Our 1950’s style sign, though, has a trapezoid shape. How can we get uniform rounded corners in this case? The easiest way is to create a trapezoid Path smaller than our desired sign and then give it a wide Stroke with a Round join. Then we can use the Inkscape Stroke to Path command to convert the outer edge of the stroke to a new path with beautifully rounded corners.

    Using the Bezier Tool, draw a trapezoid a bit smaller than the text. With the Stroke style tab of the Fill and Stroke dialog, set the Stroke Width to 40 pixels. Click on the Round join icon () to round the corners. Remove any Fill, and set the Stroke color to black and the Master opacity to 50% (to better view the text with the trapezoid). Use the Node Tool to make adjustments to the corners of the trapezoid so that the trapezoid encloses the text with a margin wide enough to account for the glow of the neon border light. You can also tweak the text positions if desired.

    Sign board prior to converting Stroke to Path.

    Select the signboard and use the Path → Stroke to Path (Ctrl+Alt+C) command to convert the Stroke of the trapezoid to a Path. The signboard Path now consists of two separate sections. Remove the inner section by using the Path → Break Apart (Shift+Ctrl+K) command and deleting the inner Path. The outer section will be our neon tube. Change the “id” attribute to “Border-Tube” and give it a neon-orange Stroke color (RGB: 255, 231, 110) and a Stroke width of 2 pixels. Remove the Fill and set the Master opacity to 100%.

    Now we will add the glow to the border neon light. Use the Path → Linked Offset (Ctrl+Alt+J) command to duplicate the tube path. In this case, we will not use an offset. Change the Stroke color to RGB: 255, 32, 32 and the width to 10 pixels. Give the path a blur of 3%. Finally, change the id attribute to “Border-Glow”.

    The glow of the border neon light needs to be clipped to the size of the sign backboard (no backboard, no light reflected). Select the “Border-Tube” path and duplicate it with the Path → Linked Offset (Ctrl+Alt+J) command. Set the offset to 4 pixels with the XML Editor dialog by changing the inkscape-radius attribute to 4. Finally, add the “Border-Glow” path to the selection (Shift+Alt+Left Mouse maybe useful for adding the path to the selection) and use the Object → Clip → Set command to execute the clipping.

    As a final step, select both the “Border-Tube” and “Border-Glow” paths and Group them, labeling the Group “Border”.

    The sign border neon light completed.

d. Draw the arrow.

  1. Create the tail.

    The simplest way to add the arrow is to use the Bezier Tool. I prefer to create the arrow with a bit more precision by using the Stroke-to-Path trick.

    • Select the “Border-Tube” path and copy it. Leave the “Border” group (double click on the canvas where there is no object). Put a copy in the drawing using the Edit → Paste In Place (Ctrl+Alt+V) command.

    • Set the Stroke width to 50 pixels and use the Path → Stroke to Path (Ctrl+Alt+C) command to convert the Stroke to a path. Remove the inner path as done above.

    • Remove the Fill and add a Stroke with a width of 20 pixels.

    • With the Node Tool, remove the nodes on the top and left (select the nodes, then click on the Delete Selected Nodes icon (). Open the path with the Split path between two end points command in the Node ToolTool Controls (). If necessary, remove the extra node at the top right. You should have four nodes left, as shown below.

      Arrow tail showing the four Path nodes.

  2. Create the arrow head.

    In principle one could use one of the arrow Markers for the arrow head but none of the default markers is quite the right shape. Creating an appropriate arrow head is trivial with the Node Tool so we will go that route.

    First convert the Stroke to a Path with the Path → Stroke to Path (Ctrl+Alt+C) command. Next, with the Node Tool select the two leftmost nodes and drag them left 30 pixels. They should snap to the grid.

    Next, double click on the Path between the two leftmost nodes. This will create a new node. Drag the new node left 40 pixels. This will be the tip of the arrow. Double click on the path between the tip and the top-left node, and drag the new node above the top-left node 10 pixels. Mirror that node with a new node on the bottom.

    Arrow ready for adding color.

  3. Lighting up the arrow.

    We’ll follow the same procedure we used for the sign border to add the neon effects to the arrow. First set the Stroke color to RGB: 160, 255, 255, the Stroke width to 2 px, and the Stroke Join style to Miter join (). Remove the fill and label the arrow “Arrow-Tube”.

    Next create the neon glow by using the Path → Linked Offset (Ctrl+Alt+J) command to duplicate the path. Change the Stroke color to RGB: 0, 127, 255; and the width to 10 px. Set the blur to 3%. Name the path “Arrow-Glow”.

    To clip the glow, we could use the same trick we used for the neon border but this would give us rounded corners for the backboard of the arrow. Instead we’ll again use the Stroke-to-Path trick. Select the “Arrow-Tube” path and duplicate it. Set the width of the Stroke to 8 pixels and then use the Path → Stroke to Path (Ctrl+Alt+C) command. Remove the inner path. The outer path will be our clip-path. Select both the clip-path and the “Arrow-Glow” path. You may have to use the XML Editor dialog to select the “Arrow-Glow” path first before adding the clipping path to the selection. Apply the clip with the Object → Clip → Set command. Finally group the two “Arrow” paths into a Group with the label “Arrow”.

    Finally, add the “ENTER” text to the arrow following the instructions for the “Items” text. Use a 12 pt font. Center it between the top and bottom of the arrow’s tail as show in the figure below. Use the Alt+Arrow keys to move the text up and down.

    Arrow with neon.

  4. Add finishing touches.

    Most of the finishing touches described here should be applied at the end of the drawing process. If you wish to animate the sign, skip ahead to the animation section and return here at the end.

    • Change the background to black: Select the background rectangle with the XML Editor dialog. Remember that the rectangle has been locked and normal methods of selection will not work. Set the color to black.

    • Convert the text objects to paths: The “glow” of the text is defined as a path linked by Inkscape to the original text. This linkage is only used by Inkscape. The program recalculates a normal SVG path every time the original object is changed. Other SVG browsers will use the SVG path in their display. If the original font is missing, browsers will substitute a different font which is unlikely to match the style and spacing of the original and thus the glow will not match the text. This can be avoided by applying the Path → Object to Path (Shift+Ctrl+C) command to all of the text objects. As of v0.46, Inkscape supports the Morphology that could handle the offset needed for the glow. But we’ll not use it here as it is a bit complicated and there are still some bugs in Inkscape filter support.

    • Add more detail: The amount of detail one could add is limitless. A structural support for the sign would be one idea of a detail to add. Blurring the Saturn globe would be another.

      Finished unanimated sign.

2.
Animate the sign.

We will demonstrate two ways of animating the sign. The first is to use an animated GIF. The second is to use JavaScript. In both cases, we will need to make six versions of the “SATURN” text with the following combinations of letters: “S”, “SA”, “SAT”, “SATU”, “SATUR”, and “SATURN”; saving each version on a different layer. It would be ideal if we could just add one letter at a time to the sign but the if we did that the glow of each new letter would cover the tube of the previous letter.

Start by deleting the “SATURN” Group by using the Edit → Cut (Ctrl+X) command. The group will be stored in the Inkscape clipboard.

Next, create a new Layer above the base Layer by using the Layer → Add Layer... command or through the Layer dialog (Layer → Layers... (Shift+Ctrl+L)). Give the Layer the title “Saturn1”. The new Layer will be automatically selected. The drop-down menu in the Status Bar shows the currently selected Layer. Paste a copy of the “SATURN” Group using the Edit → Paste In Place (Ctrl+Alt+V) command. This command puts the copy in the exact position of the original. Repeat the Layer creation process to add five more Layers named “Saturn2” through “Saturn6”, each with a copy of the “SATURN” Group.

Now we can work our way backward through the Layers, removing one additional letter on each Layer. So the “Satellite6” Layer has all the letters in “SATURN” while the “Satellite1” Layer has only the “S”.

There is one problem with removing letters: the copy of “Saturn-Glow” in each Layer is linked to the original text object “Saturn-Tube” (now in the Layer “Saturn1”). The “glow” in each Layer won’t be properly updated as letters are removed. This can be changed by systematically changing the attributes inkscape:href and xlink:href using the XML Editor dialog.

Starting with Layer “Saturn6”, change the Group id to “Saturn-Text-N”, the text id to “Saturn-Tube-N”, and the path id to “Saturn-Glow-N”. Then in the path change xlink:href to “#Saturn-Tube-N” (inkscape:href will update automatically).

XML Editor dialog after changing the xlink:href attribute.

Now continue on to Layer “Saturn5”. To make it easier to select objects in this Layer it is easiest to hide Layer “Saturn6” by using the Toggle current Layer visibility icon in the Status Bar. After hiding “Saturn6”, select the text object and remove the N. Follow the instructions in the paragraph above to relabel and to relink the objects, substituting R for N.

Before proceeding to the actual animation, complete the “finishing touches” listed above.

a. Produce an animated GIF.

We will need to use an external program to create an animated GIF. There are a number of programs that have the ability to animate bitmaps. We’ll use Gimp. Inkscape has the ability to save drawings in the native Gimp file format but unfortunately, the export does not yet properly handle objects using the Gaussian Blur filter. If it did, then we could just save the drawing in that Gimp format, open the file in Gimp, and export as a GIF. The Gimp export dialog would ask us if we wanted to use the Layers as overlays for the animation. (We would have to take care of one other issue with overlapping letters, but that’s an issue we’ll leave for a different time.)

Since we cannot export to the Gimp format, we will save each time step as an individual PNG and then import each PNG into Gimp as a Layer. We can then save the whole thing as an animated GIF.

Start by hiding all the Layers but “Layer 1”. Export to a PNG using the Export Bitmap dialog (File → Export Bitmap... (Shift+Ctrl+E)). Make sure you export the Page. At this point, you will need to decide the size in pixels of the final drawing. Give the PNG the name “Saturn_00.png”.

Next, turn on Layer “Saturn1” and export the drawing as “Saturn_01.png”. Then hide Layer “Saturn1” and show “Saturn2”, exporting as “Saturn_02.png”. Continue through all the Layers. We’ll add an extra flash with all the letters turn on. Hide Layer “Saturn6” and export the drawing as “Saturn_07.png”. Redisplay Layer “Saturn6” and export as “Saturn_08.png” and “Saturn_09.png”.

Now start up Gimp. Open “Saturn_00.png”. Next add all the other PNG files, in order, using the Open as Layer command under the File menu. You can check your work by looking at the Layers dialog (found under the Dialogs menu). Once all the drawings are imported, save the file as a GIF using the Save as command under the File menu. Give the GIF file the name “Saturn.gif”. Using the .gif file name tag will automatically set the file type to GIF. Hit the Save button. A dialog will pop up. Select the Save as Animation option. Click the Export button. Another dialog will pop up. Set the Delay between frames to 1000 milliseconds and then hit the OK button. The animation is finished! You can view the author’s version on the book’s web site [http://tavmjong.free.fr/INKSCAPE/].

Gimp GIF Export dialog.

Gimp animated GIF Save As dialog.

b. Produce an animated SVG.

We will use JavaScript to animate the SVG version of the sign. It will be necessary to save the file as plain text; that is, without special formatting characters. Most text editors have a “Save as Plain Text” option. It would be helpful to look at the the section called Simple Animation for an introduction to animating an SVG.

Tip

You can get help debugging your script by monitoring the Error Console in Firefox (2, 3) or Opera (look under the Tools menu).

Open the drawing in the editor. The first step is to add an instruction to start the JavaScript program to run. In the SVG header, add “onload=“Start(evt)””.

...
   width="300"
   height="300"
   onload="Start(evt)"
   id="svg2122"
   sodipodi:version="0.32"
...

The next step is to add the JavaScript itself. A good place to add it is just after the <defs> section. The script must include the type. If you don’t add the id attribute. Inkscape will add it the next time you open and save the file with Inkscape. Note that you cannot use ‘>’ and ‘<’ symbols unless you embed the script in a “CDATA” block. However, Inkscape will remove the “CDATA” block if you open and save the file. It will also change all double quote marks (”) to &quot; and all ‘<’ and ‘>’ to &lt; and &gt;, respectively. The script will still work.

...
  <script                    
     type="text/ecmascript"
     id="script2259">

     /* SATURN layers */
     var nlayers = 6;   /* Number of layers */
     var tlayer  = 0;   /* Time for layers */
     var layer = new Array( nlayers ); 

     function Start(evt) { 

       layer[ 0 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn1&quot;); 
       layer[ 1 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn2&quot;);
       layer[ 2 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn3&quot;);
       layer[ 3 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn4&quot;);
       layer[ 4 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn5&quot;);
       layer[ 5 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn6&quot;);

       Run(); 
     }

     function Run() { 

     /* Select only one 'layer', turn off others. */
     for( var i = 0; i &lt; nlayers; ++i ) {
       if( i == tlayer-1 ) {
         layer[i].setAttribute( &quot;style&quot;, &quot;opacity:1&quot; );
       } else {
         layer[i].setAttribute( &quot;style&quot;, &quot;opacity:0&quot; );
       }
     }
     /* Flash all letters */
     if( tlayer == 7 || tlayer == 9 )
       layer[ nlayers-1 ].setAttribute( &quot;style&quot;, &quot;opacity:1&quot; );

     tlayer++;
     if( tlayer &gt; 10 ) tlayer = 0; /* Reset every 10 seconds */

     setTimeout(&quot;Run()&quot;, 1000) 

   }
</script>

					  

Declaration and start of script.

Array to store pointers to objects, in this case Layers.

Start function, called on loading file.

Find pointer to specified object using “id” tag.

Call to run function.

Function that is repeatedly called.

Set a timeout to call the “Run” function every second.

We now have the SVG equivalent of the GIF animation, except that the SVG can be rescaled without losing sharpness. But we can do even more by animating the Saturn sphere and rings and by making the “Enter” neon tube flaky.

The first step is to change the time interval between redrawing to 0.2 seconds. This requires a few modifications but will result in a smoother animation.

The next step is to animate the rings. The animation is composed of two parts. The first is to change the tilt of the rings by adding a transformation attribute with a rotation. The second is to change the y radii (or height) of the rings by modifying the path attribute.

The last step is to create a flaky “ENTER” neon tube by randomly changing the opacity of the “ENTER” group.

Here is the full script:

  <script
     type="text/ecmascript"
     id="script2259">

     /* Time (frame) */
     var time  = 0;     /* Time in seconds */

     /* SATURN layers */
     var nlayers = 6;   /* Number of layers */
     var layer = new Array( nlayers );

     /* Saturn's rings */
     var nrings = 3;    /* Number of rings */
     var ring_front = new Array( nrings );
     var ring_back  = new Array( nrings );
     var angle = 90;    /* Angle of rings with respect to Saturn */
     var ring_width  = new Array( 50, 60, 70 );
     var ring_height = new Array( 10, 12, 14 ); /* 1/5 of width */

     /* ENTER neon tube */
     var enter;

     function Start(evt) {

       layer[ 0 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn1&quot;);
       layer[ 1 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn2&quot;);
       layer[ 2 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn3&quot;);
       layer[ 3 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn4&quot;);
       layer[ 4 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn5&quot;);
       layer[ 5 ]  = evt.target.ownerDocument.getElementById(&quot;Saturn6&quot;);

       enter       = evt.target.ownerDocument.getElementById(&quot;Enter-Text&quot;);

       ring_front[ 0 ] = evt.target.ownerDocument.getElementById(&quot;Ring1-Front&quot;);
       ring_front[ 1 ] = evt.target.ownerDocument.getElementById(&quot;Ring2-Front&quot;);
       ring_front[ 2 ] = evt.target.ownerDocument.getElementById(&quot;Ring3-Front&quot;);

       ring_back[ 0 ] = evt.target.ownerDocument.getElementById(&quot;Ring1-Back&quot;);
       ring_back[ 1 ] = evt.target.ownerDocument.getElementById(&quot;Ring2-Back&quot;);
       ring_back[ 2 ] = evt.target.ownerDocument.getElementById(&quot;Ring3-Back&quot;);

       Run();

     }

     function Run() {

       /* SATURN Text */

       /* Select only one 'layer', turn off others. */
       var t = Math.floor( time );
       for( var i = 0; i &lt; nlayers; ++i ) {
         if( i == t-1 ) {
           layer[i].setAttribute( &quot;style&quot;, &quot;opacity:1&quot; );
         } else {
           layer[i].setAttribute( &quot;style&quot;, &quot;opacity:0&quot; );
         }
       }
       /* Flash all letters */
       if( t == 7 || t == 9 )
         layer[ nlayers-1 ].setAttribute( &quot;style&quot;, &quot;opacity:1&quot; );

       /* Animate Saturn's rings */

       /*
        * Rotation is composed of two parts:
        *  Changing the y radius of the ellipses.
        *  Changing the incline angle of the ellipses.
        */

       /* Update angle */
       angle += 3; /* Rotate rings */
       if( angle &gt; 360 ) angle = 0;

       var angle_radians = anle * 3.141592653/180.0;

       /* Change incline */
       var incline = 10 * Math.cos( angle_radians );
       var transform = &quot;rotate(&quot; +incline+ &quot;)&quot; ;

       for( var i = 0; i &lt; nrings; ++i ) {

         /* Change incline */
         ring_front[ i ].setAttribute( &quot;transform&quot;, transform );
         ring_back[  i ].setAttribute( &quot;transform&quot;, transform );

         /* Change y radius */
         var height = ring_height[i] * Math.sin( angle_radians );
         /* This little do da is necessary as an arc must have a positive radius. */
         var df = 1;
         var db = 0;
         if( height &lt; 0) {
           height = - height;
           df = 0;
           db = 1;
         }
         var path_front = &quot;M &quot; + ring_width[i] +&quot;, 0 A &quot; +
                     ring_width[i] + &quot;,&quot; + height + &quot; 0 1 &quot; +
                     df + &quot; &quot; +
                     -ring_width[i] + &quot;, 0&quot; ;
         var path_back = &quot;M &quot; + ring_width[i] +&quot;, 0 A &quot; +
                     ring_width[i] + &quot;,&quot; + height + &quot; 0 1 &quot; +
                     db + &quot; &quot; +
                     -ring_width[i] + &quot;, 0&quot; ;

         ring_front[ i ].setAttribute( &quot;d&quot;, path_front );
         ring_back[  i ].setAttribute( &quot;d&quot;, path_back  );
       }

       /* Create flaky ENTER sign by randomly changing opacity */
       var enter_opacity = Math.round( 10.0 * Math.random() )/10.0;
       if( enter_opacity < 0.2 ) enter_opacity = 0.2; /* Minimum glow */
       enter.setAttribute( &quot;style&quot;, &quot;opacity:&quot; +enter_opacity );

       time += 0.2;
       if( time &gt;= 10 ) time = 0.0; /* Reset every 10 seconds */

       setTimeout(&quot;Run()&quot;, 200)


     }
  </script>

					  


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint