Web Programming with html5, css, and JavaScript

FIGUre 12.23e 
JavaScript file for Solar Shadowing web page
function showOneShadow(x0, y0) {
var xB; // horizontal position of bottom-left shadow corner 
var yB; // vertical position of bottom-left shadow corner 
var xT; // horizontal position of top-left shadow corner 
var yT; // vertical position of top-left shadow corner 
var clearance; // distance from roof to lower edge of panels 
var totalHeight; // distance from roof to upper edge of panels 
var botDxS; // bottom-left horizontal shadow offset 
var botDyS; // bottom-left vertical shadow offset 
var topDxS; // top-left horizontal shadow offset
var topDyS; // top-left vertical shadow offset 
var width; // image width (598 pixels) 
clearance = length * parseFloat(form.elements["clearance"].value); 
totalHeight = clearance + length * Math.abs(Math.sin(slope)); 
botDxS = - Math.sin(azimuth) * clearance / Math.tan(altitude); 
botDyS = Math.cos(azimuth) * clearance / Math.tan(altitude); 
topDxS = - Math.sin(azimuth) * totalHeight / Math.tan(altitude); 
topDyS = Math.cos(azimuth) * totalHeight / Math.tan(altitude);
width = image.width; 
xB = x0 + botDxS;
yB = y0 + botDyS; 
xT = x0 + topDxS; 
yT = y0 + dyP + topDyS;
context.beginPath(); 
context.moveTo(xB, yB); 
context.lineTo(xT, yT); 
context.lineTo(xT + width, yT); 
context.lineTo(xB + width, yB); 
context.fillStyle = "gray"; 
context.fill(); 
} // end showOneShadow 
620
Chapter 12
 
Canvas

---

paint that covers everything below, it uses semi-transparent paint that allows some of what’s below 
to show through. The 
context
’s 
globalAlpha
property is the “opacity” or pigment-to-water 
ratio in a water-color paintbrush. A lower value implies less pigment and allows more to show 
through. To use this property to simulate shadowing, it’s crucial that 
fillStyle
be black. Any 
lighter color will look like a deposition of soot or snow.
When the sun is behind the panels in early summer mornings or late summer afternoons, 
getObscuration
fills a rectangle that covers all of the collector array except for the sunlit 
white strip at the top. The small +2 and ‒1 
y
-position adjustments move the shading slightly 
away from the white strip at the upper end of the image and assure coverage of the lower edge 
of the image.
If the collector arrays are close together, when and the sun is low in the sky in winter, there is 
inter-panel shading, and the array closer to the sun casts a shadow on part of the array behind it. 
The shade angle is the projection of the solar altitude onto a vertical north-south plane. Except at 
noon, it will always be steeper than the solar altitude. The extent of the shading up from the bot-
tom of the shaded array is 
shadeLength
. Given total panel length, spacing between array bases, 
slope angle and tangent of shade angle, one can compute 
shadeLength
by equating the ratios of 
corresponding sides in similar triangles ( 
bc/de = ac/ae
) in this east-looking side view of the 
two arrays:
shadeAngle
shadeLength
SUN
length
slope
e
b
d
c
a
Multiplying 
shadeLength
by 
Math.cos(slope)
gives 
projLength
, the 
y
-direction 
horizontal projection of 
shadeLength
. The 
offset
is the value of the 
x
-direction offset from an 
edge of the collector array to the edge of an off-center shadow on that array. The one-pixel adjustment 
to 
y0
in the 
if(slope>=0)
statement makes shading completely cover an otherwise disconcerting 
exposed sliver of image at the bottom of south-facing panels. That statement’s 
else
clause negates 
projectLength
for north-facing panels. The next 
if
, 
else
statement paints the semi-transparent 
rectangular shading at the bottom of the shaded array with the unshaded
offset
on the west in the 
afternoon (when 
Math.sin(azimuth)
is negative), or on the east in the morning.
Next, the local 
obscuration
variable gets the shaded fraction of the collector array. The 
context
’s 
globalAlpha
is restored to unity to avoid distortions in subsequent canvas opera-
tions. Finally, the previously computed 
obscuration
is returned.