Web Programming with html5, css, and JavaScript

FIGUre 12.23C
 shows the third part of 
solarAngles.js
. The 
showBehavior
function 
executes when a user clicks the web page’s 
Show Behavior
button. Before going into details, 
FIGUre 12.23C 
JavaScript file for Solar Shadowing web page
// This function is called when the Show Behavior button is clicked.
function showBehavior() {
var degradation; // shadowing effect
var output;
// electrical output %
var direct; // direct solar
computeAngles();
context.clearRect(0, 0, canvas.width, canvas.height);
if (altitude > 0) { // daytime
canvas.style.backgroundColor = "lightgray";
showOneShadow(X0, Y0); // from north panel
showOneShadow(X0, Y0 + spacing); // from south panel
drawOneArray(Y0);
drawOneArray(Y0 + spacing);
degradation = Math.pow(getObscuration(X0, Y0), 0.38);
degradation += Math.pow(getObscuration(X0, Y0 + spacing), 0.38);
form.elements["azimuth"].value = Math.round(azimuth * 180/Math.PI);
form.elements["altitude"].value = Math.round(altitude * 180/Math.PI);
direct = 0.86 * cosIncidenceAngle * (1.0 - 0.5 * degradation);
// Using 1985 ASHRAE Fundamentals Guide, Chapter 27, Diffuse Solar:
output = parseInt(100 * (direct + 0.14 * Math.sin(altitude)));
}
else {
// nighttime
canvas.style.backgroundColor = "midnightblue";
form.elements["azimuth"].value = "";
form.elements["altitude"].value = "";
output = 0;
}
context.fillStyle = "black";
context.font = "1em Tahoma";
context.fillText("Electrical Output: " + output + " %", 10, 25);
context.fillText("(North)", 324, 20);
} // showBehavior
617
12.12 Case Study: Solar Shadowing Dynamics

---

consider the problem it addresses: Incoming solar power has two components, one directly from 
the sun, and the other indirectly from the sky and reflection from surrounding surfaces. When 
sunlight shines straight on the faces of the solar panels, 
cosIncidenceAngle
equals 1.0, and 
the direct component of incoming solar power (
direct
) maximizes at about 86% of the max-
imum total solar power. But when sunlight hits the faces of the solar panels at a glancing angle, 
cosIncidenceAngle
is less, and the direct component of incoming solar power is less. If the 
solar panels are obscured from the sun, 
degradation
further reduces the electrical output gen-
erated by light coming directly from the sun.
After declaring local variables, 
showBehavior
calls the subordinate
computeAngles
function, which assigns values to the global variables, 
altitude
, 
azimuth
, and 
cosIncidenceAngle
. The 
clearRect
method call erases the canvas drawing area in prepara-
tion for new drawing.
If 
altitude
holds a positive value, the sun is up, and it’s daytime. Then the 
showBehavior
function sets the 
canvas
background color to light gray and calls the 
showOneShadow
func-
tion for each solar array. Because shadow painting usually covers parts of the previously painted 
arrays, 
showBehavior
calls 
drawOneArray
again for each array to put fresh images of the 
collector arrays on top of the shadows they create. Then 
showBehavior
calls
getObscuration
for each array and 
getObscuration
returns the shaded fraction of that array. (Only one of the 
two arrays will have nonzero shading.) Then an empirical formula involving 
Math.pow
converts 
the returned shaded fraction to the direct-power 
degradation
produced by the obscuration. 
The 
getObscuration
function also paints appropriate shadowing on the collector image. Next, 
showBehavior
retrieves the global 
azimuth
and 
altitude
values computed previously by 
computeAngles
and displays them in the web page’s corresponding (
readonly
) 
input
boxes. 
Then 
showBehavior
calculates the 
direct
component of generated electrical 
output
using the 
previously computed 
degradation
. The 0.5 multiplier accounts for the fact that
degradation
is the fractional degradation for just one of the two arrays.
If 
altitude
is not positive, the sun is down, and it’s night. Then the 
showBehavior
func-
tion sets the 
canvas
background color to midnight blue, erases anything currently in the read-
only Azimuth and Altitude text boxes, and sets 
output
to zero.
The last part of the 
showBehavior
function writes a text description of the electrical output 
as a percent of maximum (rated) output in the upper-left corner of the canvas. It also rewrites the 
original “(North)” text at top center.