|
This function accepts any single-digit, double-digit, or triple-digit number, and returns a triple-digit number, appending preceding 0 digits when needed. At first, it converts the number to a string, required for the use of the length property. A string type is also required because numbers with leading 0 digits are considered octal. The length, or the number of digits in the original number, is assigned to the local variable length. The following statement is a loop whose command block is executed once for each digit missing to complete a triple-digit number. For example, if the number consists of two digits, the loop’s command block is executed once (3 – 2 = 1, 1 – 0 = 1). printDeg(deg)
function printDeg(deg) { // print degree in green font document.write("<FONT COLOR='purple' SIZE=1>" + get3DigitNum(deg) + "</FONT>") }
This function accepts a number, converts it to a triple-digit number, and prints it in a purple font. drawLine(deg)
function drawLine(deg) { // assign spot (–30 to 30) var spot = getSpot(deg) // if sine is negative if (spot < 0) { // draw blank images up to spot, not inclusive drawBlank(30 + spot) // draw dot image drawDot() // draw remaining images until axis drawBlank(–spot – 1) // 30 – ((30 + spot) + 1) // print current degree printDeg(deg) } else // if sine is positive if (spot > 0) { // draw 30 blank images = left of axis drawBlank(30) // print current degree printDeg(deg) // draw blank images up to spot, not inclusive drawBlank(spot – 1) // draw dot image drawDot() } else { // draw 30 blank images = left of axis drawBlank(30) // print current degree printDeg(deg) } // move to next line document.write("<BR>") }
The rounded-off sine value multiplied by 30 is assigned to the variable spot. The function is basically divided into three sections, of which only one is executed. The first deals with a situation in which the sine value is negative, the second deals with positive sine values, and the third deals with the remaining situations; that is, when the sine is zero. When the sine (sine multiplied by 30) is negative, 30 – spot transparent images are printed. For example, if the value of spot is –20, 10 transparent images are printed. The dot image is printed after these transparent images. The function then prints –spot – 1 transparent images, up to the center axis. So far 30 + spot transparent images were printed, as well as one more image representing the dot on the curve. In total, there are 31 + spot images. Remember that each side of the axis consists of 30 images, so 30 – (31 + spot) images still need to be printed; that is –spot – 1. The current degree is then printed via a call to the function printDeg(). When the sine of the current angle is positive, 30 transparent images are printed to fill up the left side of the center axis. The current degree is then printed to continue the vertical span of the axis. Then spot – 1 images are printed, up to the place where the dot on the curve needs to be placed. The dot image is then printed. When the sine of the current angle is zero, a row of 30 transparent images is printed, followed by the current angle in degrees. The last statement of the function appends a line break to the document, opening a new row of images. drawCurve(lastDeg, jump)
function drawCurve(lastDeg, jump) { // loop through plot vertically for (var deg = 0; deg <= lastDeg; deg += jump) { drawLine(deg) } }
This function accepts two arguments. The first parameter, lastDeg, accepts the last value included in the curve; that is, the last angle whose sine appears. The second argument specifies the difference between each two angles. Global Statements The script includes only one global statement, a function call. It calls the drawCurve() function with the desired arguments. General Plotting Utility
As you can see it is not difficult to plot a specific curve in JavaScript using two different images. The following example enables you to plot the curve of almost any function:
|
|||||||||||||||||||||||
With any suggestions or questions please feel free to contact us |