SVG Code Template for This Chapter | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Generating Sine-Based Petals

Consider the set of sine-based petals in Figure 14.1.

click to expand
Figure 14.1: A set of sine-based petals.

The SVG document in Listing 14.1 demonstrates how to define an ECMAScript function in order to dynamically generate a set of sine-based petals.

Listing 14.1 sineCirclePetals1.svg

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%" onload="init(evt)"      xmlns="http://www.w3.org/2000/svg">   <script type="text/ecmascript">     <![CDATA[     var basePointX    = 300.;     var basePointY    = 250.;     var currentX      = 0.;     var currentY      = 0.;     var offsetX       = 0.;     var offsetY       = 0.;     var radius        = 0.;     var smallRadius   = 2.;     var Constant      = 200.;     var branches      = 5.;     var angle         = 0.;     var maxAngle      = 360.;     var angleDelta    = 1.;     var strokeWidth   = 2.;     var style         = "";     var circleNode    = null;     var svgDocument   = null;     var target        = null;     var gcNode        = null;     function init(event)     {        target = event.getTarget();        svgDocument = target.getOwnerDocument();        gcNode = svgDocument.getElementById("gc");        drawSpiral();     }     function drawSpiral()     {        for(angle=0; angle<maxAngle; angle+=angleDelta)        {           radius = Constant*Math.sin(                          branches*angle*Math.PI/180);           offsetX = radius*Math.cos(angle*Math.PI/180);           offsetY = radius*Math.sin(angle*Math.PI/180);           currentX = basePointX+offsetX;           currentY = basePointY-offsetY;           circleNode = svgDocument.createElement(                                            "circle");           style  = "fill:red;";           style += "stroke-width:"+strokeWidth;           circleNode.setAttribute("style",style);           circleNode.setAttribute("cx", currentX);           circleNode.setAttribute("cy", currentY);           circleNode.setAttribute("r",  smallRadius);           gcNode.appendChild(circleNode);        }     } // drawSpiral   ]]> </script>  <!-- ============================ -->  <g  transform="translate(10,10)">    <rect x="0" y="0"          width="800" height="500"          fill="none" stroke="none"/>  </g>  </svg>

Remarks

The SVG code in Listing 14.1 starts with a block of global ECMAScript variables, followed by the ECMAScript function init(), whose purpose is to initialize the global variables svgDocument, target, and gcNode and then invoke the ECMAScript function drawSpiral(), which performs the required computations.

Listing 14.1 illustrates a technique that is used in virtually all the SVG examples in this book: the global variable gcNode serves as the parent of all the SVG elements that are dynamically created in the drawSpiral() function.

Notice that the ECMAScript function drawSpiral() contains a loop for dynamically creating SVG circle elements that are added to the DOM. The first part of the loop contains code that calculates the x-coordinate and the y-coordinate of each new circle, as shown below:

radius = Constant*Math.sin(                    branches*angle*Math.PI/180); offsetX = radius*Math.cos(angle*Math.PI/180); offsetY = radius*Math.sin(angle*Math.PI/180); currentX = basePointX+offsetX; currentY = basePointY-offsetY;

The value of the variable radius is computed as the product of the global variable Constant (which has a constant value) and a sine function that depends on the variables branches and angle. The value of radius is then used for calculating the values of the variables offsetX and offsetY (which also depend on sine and cosine values).

The second part of the loop contains code for dynamically creating, initializing, and adding a circle to the SVG DOM, as shown below:

circleNode = document.createElement("circle"); style  = "fill:red;"; style += "stroke-width:"+strokeWidth; circleNode.setAttribute("style",style); circleNode.setAttribute("cx", currentX); circleNode.setAttribute("cy", currentY); circleNode.setAttribute("r",  smallRadius); gcNode.appendChild(circleNode);

The preceding code fragment assigns the variable circleNode a reference to a dynamically created SVG circle element. Next, values are assigned to the attributes style, cx, cy, and r, after which the newly created SVG circle element is added to the SVG DOM by means of the last statement in the code block above.

Make sure that you pay close attention to the manner in which dynamically created SVG elements are assigned to the SVG DOM:

gcNode.appendChild(circleNode);

Recall that the global variable gcNode is initialized in the init() function, and it is a reference to a statically defined SVG rect element that is defined at the bottom of the SVG document.

The last section of Listing 14.1 renders a rectangle whose id attribute has the value gc, which is the static SVG element that serves as the 'graphics context' for the SVG document:

<g  transform="translate(10,10)">   <rect x="0" y="0"         width="800" height="500"         fill="none" stroke="none"/> </g>