HTML5 Canvas 2D Library
 

lightBgAmbDiff Library Method

Short Description: Set background color, ambient and diffuse factors

Signature: t.lightBgAmbDiff (backgroundColor, ambientFactor, diffuseFactor, a0, a1)
Group: Texture
Class: transition Class
 

Defines the ambient and diffuse reflection factors, background color, and transparency. The diffuse factor specifies the amount of light coming directly from the light source and reflected by the object. If the object direclty faces the light source, it receives the full diffuse light specified here. If it turns away or if it is shadowed, it gets less or even no diffuse light. The amibient reflection models the light the object receives from other light sources or via multiple reflections. It always receives light according to the ambient factor specified here, regardless of the objects position.

If the ambient factor is 1.0 and diffuse factor is 0.0, the animated HTML element shows up as is, regardless of its position. If the two factors add up to 1.0 and if the light source is in front of the page (which is roughly the default), then the animated HTML element shows up as is but gets darker if it is rotated away.

If the sum of ambient and diffuse color is less than 1.0, then the animated HTML element becomes darker. If the sum of ambient and diffuse factor is more than 1.0, then the HTML element becomes lighter, however since a screen cannot show lighter colors than white, this does not really look good.

If the method is not used, default values as specified in taccgl.Lighting Parameters are taken. Using lightBgAmbDiff you can only specify grayscale factors as ambient and diffuse colors. If you need other colors, use lightAmbDiff.

The following examples specify a red background color to demonstrate that it does not show up. The background color is of relevance only if the HTML element is (partially) transparent.

taccgl.actor("Layout").rotateMiddle(0,1,0).dur(7).lightBgAmbDiff("red",0.0,1.0,0,0).start(); RUN
taccgl.actor("Layout").rotateMiddle(0,1,0).dur(7).lightBgAmbDiff("red",1.0,0.0,0,0).start(); RUN
taccgl.actor("Layout").rotateMiddle(0,1,0).dur(7).lightBgAmbDiff("red",0.3,0.7,0,0).start(); RUN
taccgl.actor("Layout").rotateMiddle(0,1,0).dur(7).lightBgAmbDiff("red",0.7,0.3,0,0).start(); RUN
taccgl.actor("Layout").rotateMiddle(0,1,0).dur(7).lightBgAmbDiff("red",0.7,0.7,0,0).start(); RUN
taccgl.actor("Layout").rotateMiddle(0,1,0).dur(7).lightBgAmbDiff("red",0.3,0.3,0,0).start(); RUN

The methods color, lightAmbDiff, and lightBgAmbDiff are mutually exclusive, only one of them can be used for a single transition. lightBgAmbDiff sets the specified background color with the specified alpha value a0 (0 means transparent ... 1 fully visible). The parameter backgroundColor must not specify a transparent color. If the second alpha value a1 is given, an animation from the first to the second value is performed. Note that the background color is relevant, only if the HTML element is transparent. But if this is the case, it can be important to show some kind of background.

Examples

taccgl.texClearAll(); var a=taccgl.actor("para").rotateMiddle(0,1,0).dur(7); a.position(a.x,a.y-100,0);
a.lightBgAmbDiff("red",0.3,0.7,0,0).start();
RUN
taccgl.texClearAll(); var a=taccgl.actor("para").rotateMiddle(0,1,0).dur(7); a.position(a.x,a.y-100,0);
a.lightBgAmbDiff("red",0.3,0.7,1,1).start();
RUN
taccgl.texClearAll(); var a=taccgl.actor("para").rotateMiddle(0,1,0).dur(7); a.position(a.x,a.y-100,0);
a.lightBgAmbDiff("red",0.3,0.7,1,0).start();
RUN
taccgl.texClearAll(); var a=taccgl.actor("para").rotateMiddle(0,1,0).dur(7); a.position(a.x,a.y-100,0);
a.lightBgAmbDiff("red",0.3,0.7,1,0).blend(1,0,0,0).start();
RUN
Next Page:transition.specLight - Set specular light factor and shininess
Previous Page: transition.lightAmbDiff - Set ambient and diffuse color
Please Add a Comment or Question, click here!