Members

• toExtrudedMeshBuffer
  Generates a mesh buffer consisting of “walls” that follow this graphics path approximately, and, optionally, a base and top.
• toLineMeshBuffer
  Generates a mesh buffer consisting of the approximate line segments that make up this graphics path.
• toMeshBuffer
  Decomposes this path into triangles and generates a mesh buffer with those triangles.

Methods

• getPromiseResults
  Utility function that returns a promise that resolves after the given list of promises finishes its work.
• getPromiseResultsAll
  Utility function that returns a promise that resolves or is rejected after the given list of promises finishes its work.
• getTimePosition
  Gets the position of a time value within an interval.
• newFrames
  Returns the number of frame-length intervals that occurred since the last known time, where a frame’s length is 1/60 of a second.
• toGLColor
  Creates a 4-element array representing a color.

### toExtrudedMeshBuffer (constant)

Generates a mesh buffer consisting of “walls” that follow this graphics path approximately, and, optionally, a base and top.

### toLineMeshBuffer (constant)

Generates a mesh buffer consisting of the approximate line segments that make up this graphics path.

### toMeshBuffer (constant)

Decomposes this path into triangles and generates a mesh buffer with those triangles. Each triangle’s normal will point toward the Z axis, and each triangle vertex’s texture coordinates will be the same as that vertex’s position.

### getPromiseResults(promises, [progressResolve], [progressReject])

Utility function that returns a promise that resolves after the given list of promises finishes its work.

Parameters

• promises (Type: Array.<Promise>)
  an array containing promise objects
• progressResolve (Type: function) (optional)
  A function called as each individual promise is resolved.
• progressReject (Type: function) (optional)
  A function called as each individual promise is rejected.

Return Value

A promise that is never rejected and resolves when all of the promises are each resolved or rejected. The result of the promise will be an object with three keys:<ul>

"successes" - contains a list of results from the promises that succeeded, in the order in which those promises were listed.

"failures" - contains a list of results from the promises that failed, in the order in which those promises were listed.

"results" - contains a list of boolean values for each promise, in the order in which the promises were listed. True means success, and false means failure.</ul> (Type: Promise) ### getPromiseResultsAll(promises, [progressResolve], [progressReject]) Utility function that returns a promise that resolves or is rejected after the given list of promises finishes its work. #### Parameters * `promises` (Type: Array.<Promise>)
an array containing promise objects * `progressResolve` (Type: function) (optional)
a function called as each individual promise is resolved; optional * `progressReject` (Type: function) (optional)
a function called as each individual promise is rejected; optional #### Return Value A promise that is resolved when all of the promises are each resolved; the result will be an array of results from those promises, in the order in which those promises were listed. Will be rejected if any of the promises is rejected; the result will be an object as specified in getPromiseResults.</ul> (Type: Promise) ### getTimePosition(timer, timeInMs, intervalInMs) Gets the position of a time value within an interval. This is useful for doing animation cycles lasting a certain number of seconds, such as rotating a shape in a 5-second cycle. This method may be called any number of times each frame. #### Parameters * `timer` (Type: Object)
An object that will hold two properties:

• "time" - initial time value, in milliseconds.
• "lastTime" - last known time value, in milliseconds. Will be set to the value given in "timeInMs" before returning. </ul> The object should be initialized using the idiom {} or new Object(). * `timeInMs` (Type: number)
  A time value, in milliseconds. This could be the parameter received in a requestAnimationFrame() callback method. * `intervalInMs` (Type: number)
  The length of the interval (animation cycle), in milliseconds. #### Return Value A value in the range [0, 1), where closer to 0 means "timeInMs" lies closer to the start, and closer to 1 means closer to the end of the interval. If an initial time wasn't set, returns 0. (Type: number) #### Examples The following code sets an angle of rotation, in degrees, such that an object rotated with the angle does a 360-degree turn in 5 seconds (5000 milliseconds). The variable time is assumed to be a time value in milliseconds, such as the parameter of a requestAnimationFrame() callback method. var angle = 360 * getTimePosition(timer, time, 5000); ### newFrames(timer, timeInMs) Returns the number of frame-length intervals that occurred since the last known time, where a frame's length is 1/60 of a second. This method should be called only once each frame. #### Parameters * `timer` (Type: Object)
  An object described in getTimePosition. * `timeInMs` (Type: number)
  A time value, in milliseconds. This could be the parameter received in a requestAnimationFrame() callback method. </code>. #### Return Value The number of frame-length intervals relative to the last known time held in the parameter "timer". The number can include fractional frames. If an initial time or last known time wasn't set, returns 0. (Type: number) ### toGLColor(r, [g], [b], [a]) Creates a 4-element array representing a color. Each element can range from 0 to 1 and specifies the red, green, blue or alpha component, respectively. This method also converts HTML and CSS color strings to 4-element RGB colors. - \*\*What colors can I use?\*\* You can use values like the following as color strings. \* CSS color names (from the CSS3 Color Module): `red`, `blue`, `silver`, `fuchsia`, `darkslateblue`. \* HTML “hex colors”: `#223344`, `#234`, `#234F`, or `#223344FF`. (See _What is the syntax for HTML colors?_) \* RGB notation: `rgb(20,30,40)` or `rgba(20,30,40,50%)`. (See _What is RGB notation?_, later.) \* HSL notation: `hsl(200,100%,50%)` or `hsla(200,100%,50%,80%`. (See _What is HSL notation?_, later.) \* The newly-added color name `rebeccapurple`. \* The word `transparent`, meaning a fully-transparent color. - \*\*What do some colors look like?\*\* Consult a [list of useful colors sorted by hue or color tone](https://peteroupc.github.io/html3dutil/websafe.svg). This particular list was historically called the "Web safe" colors or the "safety palette", and consists of 216 colors that are uniformly spaced in the red–green–blue color cube. Robert Hess's article "[The Safety Palette](https://learn.microsoft.com/en-us/previous-versions/ms976419(v=msdn.10))", 1996, described the advantage that images that use only colors in this palette won't dither when displayed by Web browsers on displays that can show up to 256 colors at once. (See also [\*\*Wikipedia\*\*](http://en.wikipedia.org/wiki/Web_colors). Dithering is the scattering of colors in a limited set to simulate colors outside that set.) Each entry in the list consists of a color swatch and the corresponding HTML name (see next question). A [second list](https://peteroupc.github.io/html3dutil/colornames.svg) shows the colors defined in the [\*\*CSS3 Color Module section 4\*\*](http://www.w3.org/TR/css3-color/#colorunits), as well as the newly-added name `rebeccapurple`. Where `gray` is part of a name, it can be replaced with `grey`. Next to the name of each color in the list, the color's HTML notation is shown. - \*\*What is the syntax for HTML colors?\*\* The notation employed in the "safety palette" in the preceding section is HTML's way to define colors. It’s also known as “hex colors”. Take `#ff80cc` as an example. The color defined is a carnation pink. There are four parts to this example: \* The `#` identifies this code as a color. \* The `ff` is two letters and/or digits that show the red component of the color. This is a so-called hexadecimal number, or base-16 number. Each digit of this number can range from 0-9 and from A-F, with 0 being the lowest digit, and F being the highest digit. The highest two-digit value is 00, and the lowest two-digit value is FF (256). (The digits A-F may appear in upper or lower case.) \* The `80` is a base-16 number showing the color’s green component. \* The `cc` is a base-16 number showing the color’s blue component. The notation may also include an additional base-16 number, as in this example: `#ac80ccff`. Here, the last `ff` shows the color's alpha component (see _What is an alpha component?_, later). Two shortened notations are supported: colors with only three or four base-16 digits are the same as their expanded six-digit or eight-digit form, respectively. For example, `#f8c` is the same as `#ff88cc`; and `#f8ce`, `#ff88ccee`. - \*\*How do I make HTML colors?\*\* Look at the table below that shows some of the values possible for the red, green, and blue components of some colors. Red.. 00 10 20 30 40 50 60 70 80 90 A0 B0 C0 D0 E0 F0 FF Green 00 10 20 30 40 50 60 70 80 90 A0 B0 C0 D0 E0 F0 FF Blue. 00 10 20 30 40 50 60 70 80 90 A0 B0 C0 D0 E0 F0 FF Now, to make a custom color, you choose one value from the red row, one value from the green row, and one value from the blue row. Each value shows the intensity of the "light" that the color ideally reflects. For example, a red value of 00 means that, ideally, "red light" is not reflected, and a red value of FF, fully reflected. If you choose the same value in all three rows, the result is black (if you choose 00), white (if you choose FF) or a shade of gray. This shows that "red light", "green light", and "blue light" are ideally equally reflected. After you choose the three values, combine them by writing the `#`, then the red value, then the green value, then the blue value. For example, if you choose `FF` for red, `A0` for green, and `00` for blue, write the resulting color (orange) like this: `#FFA000`. - \*\*How do I "darken" an HTML color?\*\* To darken a color (make a \*shade\* of it), consult the table shown in the question _How do I make HTML colors?_, earlier, and move each component (red, green, and blue) the same number of steps to the left. If you can’t move a component that far to the left, that component becomes 00. For example, to make a "darker" sky blue, start with 00, FF, and FF for red, green, and blue. When we move these components ten steps to the left, we get 00, 60, and 60. The final color becomes #006060. - \*\*How do I "lighten" an HTML color?\*\* "Lightening" a color (making a \*tint\* of it) is almost the same as "darkening" a color, except we move the same number of steps to the right rather than the left. If you can’t move a component that far to the right, that component becomes FF. For example, to make a "lighter" red, start with FF, 00, and 00 for red, green, and blue. When we move these components ten steps to the right, we get FF, A0, and A0. The final color becomes #FFA0A0. - \*\*How do I "desaturate" an HTML color?\*\* To make a "desaturated" ("washed-out") version (or \*tone\*) of a color, move the color components closer to each other, in about the same proportion. (If they’re exactly the same, the result is a shade of gray.) For example, to make a "washed-out" red, start with FF, 00, and 00 for red, green, and blue. When we move these components closer to each other, we get C0, 40, and 40. The final color becomes #C04040. - \*\*What is RGB notation?\*\* A color in RGB notation contains the same information as an HTML color, except that each value is shown in the familiar base-10 format. For example, the value `rgb(192,64,0)` is the same as the HTML color value `#C04000`. The components of the RGB color (red, green, and blue, in that order) can range from `0` to `255`, or from `0%` to `100%`, but mixing ranges is not allowed. For example, `rgb(192,64,0)` and `rgb(80%,50%,0%)` are allowed, but not `rgb(192,50%,0%)`. The steps for "darkening", "lightening", and "desaturating" RGB colors are pretty much the same as with HTML colors. Another syntax for RGB colors supports the alpha component (see _What is an alpha component?_, later): in the example `rgba(192,64,0,0.5)`, the `0.5` is the alpha component. This component supports either range for RGB colors, either 0-255 or percentages. (Note that the example starts with `rgba`, not just `rgb`.) - \*\*What is HSL notation?\*\* A color in HSL notation is made of the following three components: \* _Hue_ ranges from 0 to 360 degrees. Each angle on the color wheel (which looks more like a hexagon than like a circle in HSL) stands for a different hue: red, yellow, green, cyan (sky-blue), blue, and magenta correspond roughly to hue 0 (say, 12 o’clock), 60, 120, 180, 240, and 300, respectively. \* "Saturation" and "lightness" range from 0% to 100%. "Saturation" is the distance of the color from gray (0% means gray; 100% means most distant from gray). "Lightness" is roughly the amount of black or white mixed with the color (0% means black; 100% means white; closer to 0% means closer to black; closer to 100% means closer to white). > \*\*Example:\*\* The value `hsl(240,100%,50%)` has a hue of 240 (blue), a "saturation" of 100% (fully saturated), and a "lightness" of 50% (neither black or white). It represents a vivid blue. If we lower "lightness" to 20%, we get a "darker" blue. If we also change the hue to 0, we get a "dark" red. An alternate syntax for HSL colors supports the alpha component (see next question): in the example `hsla(240,100%,50%,80%)`, the `80%` is the alpha component. - \*\*What is an alpha component?\*\* An alpha component shows how much the color is transparent (see-through) or opaque. The alpha component can range from `00`/`0.0`, or "fully transparent" (completely invisible), to `FF`/`1.0`, or "fully opaque" (letting nothing through it). If a color notation doesn't provide for an alpha component, the color is fully opaque. #### Parameters * `r` (Type: Array.<number> | number | string)
  One of the following:
  • A color vector or string, which can be one of these:
    • An array of three color components, each of which ranges from 0 to 1. The three components are red, green, and blue in that order.
    • An array of four color components, each of which ranges from 0 to 1. The three components are red, green, blue, and alpha in that order.
    • A string specifying an HTML or CSS color, in one of the formats mentioned above in the method description.
  • A number specifying the red component. Must range from 0 to 1.
  Returns (0,0,0,0) if this value is null. * `g` (Type: number) (optional)
  Green color component (0-1). May be null or omitted if a string or array is given as the "r" parameter. * `b` (Type: number) (optional)
  Blue color component (0-1). May be null or omitted if a string or array is given as the "r" parameter. * `a` (Type: number) (optional)
  Alpha color component (0-1). If the "r" parameter is given and this parameter is null, undefined, or omitted, this value is treated as 1.0. #### Return Value The color as a 4-element array; if the color is invalid, returns [0,0,0,0], or transparent black. Numbers less than 0 are clamped to 0, and numbers greater than 1 are clamped to 1. (Type: Array.<number>) [Back to documentation index.](index.html)