Web Tutorial: The Easter Egg Generator (Part 2/4)

Welcome, and thanks for joining me as we embark on the next part of this thrilling Easter ride! There's more new stuff to add. Don't worry, it's quick and (relatively) painless. We are going to make stars.

Yep, stars!

Beautiful five-point stars to place on your Easter egg. Before we go any further, let's examine the HTML and CSS code behind each star. One star is a div comprising of three sub divs. Each of these divs is a triangle. 

                <div id="polkadot1" class="polkadot"></div>
                <div id="polkadot2" class="polkadot"></div>
                <div id="polkadot3" class="polkadot"></div>
                <div id="polkadot4" class="polkadot"></div>
                <div id="polkadot5" class="polkadot"></div>

                <div class="star_wrapper">
                    <div class="star_part1"></div>
                    <div class="star_part2"></div>
                    <div class="star_part3"></div>
                </div>

Here's the CSS specification. Yes, add this to your CSS. The star_wrapper class does not contribute to the shape of the star - instead it's a box that contains the points of the star for easy movement and rotation. Here, I've set the border to a black line to help you see.

            #pnlBands,#pnlPolkadots{display:none;}

            .band
            {
                width:1000px;
                margin-left:-350px;
                -webkit-transform-origin:50% 50%;
                transform-origin:50% 50%;
                display:none;
                position:absolute;
            }

            .polkadot
            {
                border-radius:50%;
                display:none;
                position:absolute;
            }

            .star_wrapper
            {
                overflow: visible;
                -webkit-transform-origin:50% 50%;                transform-origin:50% 50%;
                display:none;
                position:absolute;
            }

            .star_part1
            {
                 position: absolute;
                 display: block;
                 color: red;
                 width: 0px;
                 height: 0px;
                 border-right: 20px solid transparent;
                 border-bottom: 15px solid red;
                 border-left: 20px solid transparent;
                 -webkit-transform:rotate(0deg);
                 transform:rotate(0deg);
            }

            .star_part2
            {
                 position: absolute;
                 display: block;
                 color: red;
                 width: 0px;
                 height: 0px;
                 border-right: 20px solid transparent;
                 border-bottom: 15px solid red;
                 border-left: 20px solid transparent;
                 -webkit-transform:rotate(70deg);
                 transform:rotate(70deg);
            }

            .star_part3
            {
                 position: absolute;
                 display: block;
                 color: red;
                 width: 0px;
                 height: 0px;
                 border-right: 20px solid transparent;
                 border-bottom: 15px solid red;
                 border-left: 20px solid transparent;
                 -webkit-transform:rotate(-70deg);
                 transform:rotate(-70deg);
            }

The CSS classes star_part1, star_part2 and star_part3 are essentially identical except for their rotation values. Each of these classes is a div that forms a triangle because the border thicknesses are different. Here's what happens when you have a div where the left and right borders are thicker than that of the bottom border, and the top border is 0 pixels (or not specified, which is pretty much the same thing) - it forms a filled triangle.

Thus star_part1 is not rotated, while star_part2 and star_part3 are rotated.

They form a star when combined.

So to place five stars in your egg_wrapper div, you do this.

        <div id="egg_wrapper">
            <div id="egg">
                <div id="band1" class="band"></div>
                <div id="band2" class="band"></div>
                <div id="band3" class="band"></div>

                <div id="polkadot1" class="polkadot"></div>
                <div id="polkadot2" class="polkadot"></div>
                <div id="polkadot3" class="polkadot"></div>
                <div id="polkadot4" class="polkadot"></div>
                <div id="polkadot5" class="polkadot"></div>

                <div id="star_wrapper1" class="star_wrapper">
                    <div id="star1_part1" class="star_part1"></div>
                    <div id="star1_part2" class="star_part2"></div>
                    <div id="star1_part3" class="star_part3"></div>
                </div>

                <div id="star_wrapper2" class="star_wrapper">
                    <div id="star2_part1" class="star_part1"></div>
                    <div id="star2_part2" class="star_part2"></div>
                    <div id="star2_part3" class="star_part3"></div>
                </div>

                <div id="star_wrapper3" class="star_wrapper">
                    <div id="star3_part1" class="star_part1"></div>
                    <div id="star3_part2" class="star_part2"></div>
                    <div id="star3_part3" class="star_part3"></div>
                </div>

                <div id="star_wrapper4" class="star_wrapper">
                    <div id="star4_part1" class="star_part1"></div>
                    <div id="star4_part2" class="star_part2"></div>
                    <div id="star4_part3" class="star_part3"></div>
                </div>

                <div id="star_wrapper5" class="star_wrapper">
                    <div id="star5_part1" class="star_part1"></div>
                    <div id="star5_part2" class="star_part2"></div>
                    <div id="star5_part3" class="star_part3"></div>
                </div>
            </div>
        </div>

Now of course, we add controls to the dashboard_wrapper div. Remember the controls for bands and polka dots? Basically more of the same. I won't bore you by repeating myself.

            <fieldset>
                <legend>Polkadot Settings <input type="checkbox" id="cb_pnlPolkadots" onclick="setvisible('pnlPolkadots');"></legend>
                <div id="pnlPolkadots">
                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_polkadot1" onclick="setvisible('polkadot1');"><br />
                                <div class="verticaltext">Polkadot 1</div>
                            </td>
                            <td><label for="col_polkadot1">Color</label></td>
                            <td><input type="color" id="col_polkadot1" value="#04EE04" onchange="setcolor('polkadot1');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_height_polkadot1">Height</label></td>
                            <td><input type="range" id="rng_height_polkadot1" class="smallslider" value="20" min="10" max="200" step="10" onchange="setheight('polkadot1');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_width_polkadot1">Width</label></td>
                            <td><input type="range" id="rng_width_polkadot1" class="smallslider" value="20" min="10" max="200" step="10" onchange="setwidth('polkadot1');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_polkadot1">X</label></td>
                            <td><input type="range" id="rng_x_polkadot1" class="smallslider" value="50" min="0" max="200" step="10" onchange="setx('polkadot1');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_polkadot1">Y</label></td>
                            <td><input type="range" id="rng_y_polkadot1" class="smallslider" value="50" min="0" max="200" step="10" onchange="sety('polkadot1');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_polkadot1">Z</label></td>
                            <td><input type="range" id="rng_z_polkadot1" class="smallslider" value="50" min="20" max="500" step="10" onchange="setz('polkadot1');"></td>
                        </tr>              
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_polkadot2" onclick="setvisible('polkadot2');"><br />
                                <div class="verticaltext">Polkadot 2</div>
                            </td>
                            <td><label for="col_polkadot2">Color</label></td>
                            <td><input type="color" id="col_polkadot2" value="#44EEFF" onchange="setcolor('polkadot2');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_height_polkadot2">Height</label></td>
                            <td><input type="range" id="rng_height_polkadot2" class="smallslider" value="30" min="10" max="200" step="10" onchange="setheight('polkadot2');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_width_polkadot2">Width</label></td>
                            <td><input type="range" id="rng_width_polkadot2" class="smallslider" value="30" min="10" max="200" step="10" onchange="setwidth('polkadot2');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_polkadot2">X</label></td>
                            <td><input type="range" id="rng_x_polkadot2" class="smallslider" value="50" min="0" max="200" step="10" onchange="setx('polkadot2');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_polkadot2">Y</label></td>
                            <td><input type="range" id="rng_y_polkadot2" class="smallslider" value="80" min="0" max="200" step="10" onchange="sety('polkadot2');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_polkadot2">Z</label></td>
                            <td><input type="range" id="rng_z_polkadot2" class="smallslider" value="60" min="20" max="500" step="10" onchange="setz('polkadot2');"></td>
                        </tr>              
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_polkadot3" onclick="setvisible('polkadot3');"><br />
                                <div class="verticaltext">Polkadot 3</div>
                            </td>
                            <td><label for="col_polkadot3">Color</label></td>
                            <td><input type="color" id="col_polkadot3" value="#004499" onchange="setcolor('polkadot3');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_height_polkadot3">Height</label></td>
                            <td><input type="range" id="rng_height_polkadot3" class="smallslider" value="10" min="10" max="200" step="10" onchange="setheight('polkadot3');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_width_polkadot3">Width</label></td>
                            <td><input type="range" id="rng_width_polkadot3" class="smallslider" value="10" min="10" max="200" step="10" onchange="setwidth('polkadot3');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_polkadot3">X</label></td>
                            <td><input type="range" id="rng_x_polkadot3" class="smallslider" value="150" min="0" max="200" step="10" onchange="setx('polkadot3');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_polkadot3">Y</label></td>
                            <td><input type="range" id="rng_y_polkadot3" class="smallslider" value="150" min="0" max="200" step="10" onchange="sety('polkadot3');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_polkadot3">Z</label></td>
                            <td><input type="range" id="rng_z_polkadot3" class="smallslider" value="70" min="20" max="500" step="10" onchange="setz('polkadot3');"></td>
                        </tr>              
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_polkadot4" onclick="setvisible('polkadot4');"><br />
                                <div class="verticaltext">Polkadot 4</div>
                            </td>
                            <td><label for="col_polkadot4">Color</label></td>
                            <td><input type="color" id="col_polkadot4" value="#FFFF00" onchange="setcolor('polkadot4');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_height_polkadot4">Height</label></td>
                            <td><input type="range" id="rng_height_polkadot4" class="smallslider" value="30" min="10" max="200" step="10" onchange="setheight('polkadot4');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_width_polkadot4">Width</label></td>
                            <td><input type="range" id="rng_width_polkadot4" class="smallslider" value="30" min="10" max="200" step="10" onchange="setwidth('polkadot4');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_polkadot4">X</label></td>
                            <td><input type="range" id="rng_x_polkadot4" class="smallslider" value="120" min="0" max="200" step="10" onchange="setx('polkadot4');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_polkadot4">Y</label></td>
                            <td><input type="range" id="rng_y_polkadot4" class="smallslider" value="90" min="0" max="200" step="10" onchange="sety('polkadot4');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_polkadot4">Z</label></td>
                            <td><input type="range" id="rng_z_polkadot4" class="smallslider" value="80" min="20" max="500" step="10" onchange="setz('polkadot4');"></td>
                        </tr>              
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_polkadot5" onclick="setvisible('polkadot5');"><br />
                                <div class="verticaltext">Polkadot 5</div>
                            </td>
                            <td><label for="col_polkadot5">Color</label></td>
                            <td><input type="color" id="col_polkadot5" value="#AA0544" onchange="setcolor('polkadot5');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_height_polkadot5">Height</label></td>
                            <td><input type="range" id="rng_height_polkadot5" class="smallslider" value="50" min="10" max="200" step="10" onchange="setheight('polkadot5');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_width_polkadot5">Width</label></td>
                            <td><input type="range" id="rng_width_polkadot5" class="smallslider" value="50" min="10" max="200" step="10" onchange="setwidth('polkadot5');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_polkadot5">X</label></td>
                            <td><input type="range" id="rng_x_polkadot5" class="smallslider" value="80" min="0" max="200" step="10" onchange="setx('polkadot5');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_polkadot5">Y</label></td>
                            <td><input type="range" id="rng_y_polkadot5" class="smallslider" value="10" min="0" max="200" step="10" onchange="sety('polkadot5');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_polkadot5">Z</label></td>
                            <td><input type="range" id="rng_z_polkadot5" class="smallslider" value="90" min="20" max="500" step="10" onchange="setz('polkadot5');"></td>
                        </tr>              
                    </table>              
                </div>
            </fieldset>

            <fieldset>
                <legend>Star Settings <input type="checkbox" id="cb_pnlStars" onclick="setvisible('pnlStars');"></legend>
                <div id="pnlStars">
                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_star_wrapper1" onclick="setvisible('star_wrapper1');"><br />
                                <div class="verticaltext">Star 1</div>
                            </td>
                            <td><label for="col_star1">Color</label></td>
                            <td><input type="color" id="col_star1" value="#05F044" onchange="setstar('star1');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_size_star1">Size</label></td>
                            <td><input type="range" id="rng_size_star1" class="smallslider" value="20" min="20" max="100" step="20" onchange="setstchaar('star1');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_rotate_star_wrapper1">Rotation</label></td>
                            <td><input type="range" id="rng_rotate_star_wrapper1" class="smallslider" value="0" min="-180" max="180" step="10" onchange="setrotation('star_wrapper1');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_star_wrapper1">X</label></td>
                            <td><input type="range" id="rng_x_star_wrapper1" class="smallslider" value="150" min="0" max="200" step="10" onchange="setx('star_wrapper1');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_star_wrapper1">Y</label></td>
                            <td><input type="range" id="rng_y_star_wrapper1" class="smallslider" value="150" min="0" max="200" step="10" onchange="sety('star_wrapper1');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_star_wrapper1">Z</label></td>
                            <td><input type="range" id="rng_z_star_wrapper1" class="smallslider" value="160" min="20" max="500" step="10" onchange="setz('star_wrapper1');"></td>
                        </tr>               
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_star_wrapper2" onclick="setvisible('star_wrapper2');"><br />
                                <div class="verticaltext">Star 2</div>
                            </td>
                            <td><label for="col_star2">Color</label></td>
                            <td><input type="color" id="col_star2" value="#EE0088" onchange="setstar('star2');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_size_star2">Size</label></td>
                            <td><input type="range" id="rng_size_star2" class="smallslider" value="40" min="20" max="100" step="20" onchange="setstar('star2');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_rotate_star_wrapper2">Rotation</label></td>
                            <td><input type="range" id="rng_rotate_star_wrapper2" class="smallslider" value="0" min="-180" max="180" step="10" onchange="setrotation('star_wrapper2');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_star_wrapper2">X</label></td>
                            <td><input type="range" id="rng_x_star_wrapper2" class="smallslider" value="150" min="0" max="200" step="10" onchange="setx('star_wrapper2');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_star_wrapper2">Y</label></td>
                            <td><input type="range" id="rng_y_star_wrapper2" class="smallslider" value="250" min="0" max="200" step="10" onchange="sety('star_wrapper2');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_star_wrapper2">Z</label></td>
                            <td><input type="range" id="rng_z_star_wrapper2" class="smallslider" value="170" min="20" max="500" step="10" onchange="setz('star_wrapper2');"></td>
                        </tr>               
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_star_wrapper3" onclick="setvisible('star_wrapper3');"><br />
                                <div class="verticaltext">Star 3</div>
                            </td>
                            <td><label for="col_star3">Color</label></td>
                            <td><input type="color" id="col_star3" value="#FF9966" onchange="setstar('star3');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_size_star3">Size</label></td>
                            <td><input type="range" id="rng_size_star3" class="smallslider" value="20" min="20" max="100" step="20" onchange="setstar('star3');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_rotate_star_wrapper3">Rotation</label></td>
                            <td><input type="range" id="rng_rotate_star_wrapper3" class="smallslider" value="0" min="-180" max="180" step="10" onchange="setrotation('star_wrapper3');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_star_wrapper3">X</label></td>
                            <td><input type="range" id="rng_x_star_wrapper3" class="smallslider" value="50" min="0" max="200" step="10" onchange="setx('star_wrapper3');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_star_wrapper3">Y</label></td>
                            <td><input type="range" id="rng_y_star_wrapper3" class="smallslider" value="280" min="0" max="200" step="10" onchange="sety('star_wrapper3');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_star_wrapper3">Z</label></td>
                            <td><input type="range" id="rng_z_star_wrapper3" class="smallslider" value="180" min="20" max="500" step="10" onchange="setz('star_wrapper3');"></td>
                        </tr>               
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_star_wrapper4" onclick="setvisible('star_wrapper4');"><br />
                                <div class="verticaltext">Star 4</div>
                            </td>
                            <td><label for="col_star4">Color</label></td>
                            <td><input type="color" id="col_star4" value="#0055FF" onchange="setstar('star4');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_size_star4">Size</label></td>
                            <td><input type="range" id="rng_size_star4" class="smallslider" value="80" min="20" max="100" step="20" onchange="setstar('star4');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_rotate_star_wrapper4">Rotation</label></td>
                            <td><input type="range" id="rng_rotate_star_wrapper4" class="smallslider" value="0" min="-180" max="180" step="10" onchange="setrotation('star_wrapper4');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_star_wrapper4">X</label></td>
                            <td><input type="range" id="rng_x_star_wrapper4" class="smallslider" value="150" min="0" max="200" step="10" onchange="setx('star_wrapper4');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_star_wrapper4">Y</label></td>
                            <td><input type="range" id="rng_y_star_wrapper4" class="smallslider" value="50" min="0" max="200" step="10" onchange="sety('star_wrapper4');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_star_wrapper4">Z</label></td>
                            <td><input type="range" id="rng_z_star_wrapper4" class="smallslider" value="190" min="20" max="500" step="10" onchange="setz('star_wrapper4');"></td>
                        </tr>               
                    </table>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <input type="checkbox" id="cb_star_wrapper5" onclick="setvisible('star_wrapper5');"><br />
                                <div class="verticaltext">Star 5</div>
                            </td>
                            <td><label for="col_star5">Color</label></td>
                            <td><input type="color" id="col_star5" value="#040444" onchange="setstar('star5');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_size_star5">Size</label></td>
                            <td><input type="range" id="rng_size_star5" class="smallslider" value="20" min="40" max="100" step="20" onchange="setstar('star5');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_rotate_star_wrapper5">Rotation</label></td>
                            <td><input type="range" id="rng_rotate_star_wrapper5" class="smallslider" value="0" min="-180" max="180" step="10" onchange="setrotation('star_wrapper5');"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label for="rng_x_star_wrapper5">X</label></td>
                            <td><input type="range" id="rng_x_star_wrapper5" class="smallslider" value="50" min="0" max="200" step="10" onchange="setx('star_wrapper5');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_y_star_wrapper5">Y</label></td>
                            <td><input type="range" id="rng_y_star_wrapper5" class="smallslider" value="100" min="0" max="200" step="10" onchange="sety('star_wrapper5');"></td>
                            <td>&nbsp;</td>
                            <td><label for="rng_z_star_wrapper5">Z</label></td>
                            <td><input type="range" id="rng_z_star_wrapper5" class="smallslider" value="200" min="20" max="500" step="10" onchange="setz('star_wrapper5');"></td>
                        </tr>               
                    </table>
                </div>
            </fieldset>   

Controls of the stars use pretty much all of the functions we've written so far, but special cases have to be made. For setvisible(), of course, we do what we did for the others.

            function setvisible(varid)
            {
                if ($("#cb_"+varid).prop("checked"))
                {
                    $("#"+varid).show();

                    if (varid.indexOf("band")==0)
                    {
                        setcolor(varid);
                        setheight(varid);
                        setrotation(varid);
                        sety(varid);
                        setz(varid);
                    }

                    if (varid.indexOf("polkadot")==0)
                    {
                        setcolor(varid);
                        setheight(varid);
                        setwidth(varid);
                        setx(varid);
                        sety(varid);
                        setz(varid);
                    }

                    if (varid.indexOf("star")==0)
                    {
                        setstar(varid.replace("_wrapper",""));
                        setx(varid);
                        sety(varid);
                        setz(varid);
                    }
                }
                else
                {
                    $("#"+varid).hide();
                }
            }

Color and size, however, are set using the setstar() function. That's because the color and size of the stars are manipulated by operating on the points of the star. So we write a For loop that iterates through all three parts of the star to change the color...

            function setvisible(varid)
            {
                if ($("#cb_"+varid).prop("checked"))
                {
                    $("#"+varid).show();

                    if (varid.indexOf("band")==0)
                    {
                        setcolor(varid);
                        setheight(varid);
                        setrotation(varid);
                        sety(varid);
                        setz(varid);
                    }

                    if (varid.indexOf("polkadot")==0)
                    {
                        setcolor(varid);
                        setheight(varid);
                        setwidth(varid);
                        setx(varid);
                        sety(varid);
                        setz(varid);
                    }

                    if (varid.indexOf("star")==0)
                    {
                        setstar(varid.replace("_wrapper",""));
                        setx(varid);
                        sety(varid);
                        setz(varid);
                    }
                }
                else
                {
                    $("#"+varid).hide();
                }
            }

            function setstar(varid)
            {
                for (var i=1;i<=3;i++)
                {
                    $("#"+varid+"_part"+i).get(0).style.color=$("#col_"+varid).val();                       
                }
            }

...and for the size it's a little bit trickier. We need to preserve the aspect ratio of the parts of the star. Remember that the left and right borders are thicker than the bottom border? Well, the ratio is 3:4. So here we specify the variables minval and maxval. maxval is the value of the control, while minval is three-quarters that.

Also, height and width of the relevant star_wrapper is equivalent to double minval.

            function setstar(varid)
            {
                var minval=($("#rng_size_"+varid).val()/4)*3;
                var maxval=$("#rng_size_"+varid).val();

                $("#"+varid.replace("star","star_wrapper")).width(minval*2);
                $("#"+varid.replace("star","star_wrapper")).height(minval*2);

                for (var i=1;i<=3;i++)
                {
                    $("#"+varid+"_part"+i).css("color", $("#col_"+varid).val());                           
                }
            }

Next, of course, we set the border thicknesses.

            function setstar(varid)
            {
                var minval=($("#rng_size_"+varid).val()/4)*3;
                var maxval=$("#rng_size_"+varid).val();

                $("#"+varid.replace("star","star_wrapper")).width(minval*2);
                $("#"+varid.replace("star","star_wrapper")).height(minval*2);

                for (var i=1;i<=3;i++)
                {
                    $("#"+varid+"_part"+i).css("color", $("#col_"+varid).val());   
                    $("#"+varid+"_part"+i).css("border-right", maxval+"px solid transparent");
                    $("#"+varid+"_part"+i).css("border-left", maxval+"px solid transparent");       
                    $("#"+varid+"_part"+i).css("border-bottom", minval+"px solid "+$("#col_"+varid).val());                        
                }
            }

Modify as shown to hide the controls initially.

            #pnlBands,#pnlPolkadots,#pnlStars{display:none;}

Try your code. Can you adjust the color and size of your stars? Groovy, baby.

Next

More awesome stuff coming up. Next one's a biggie!