VEGAS JS

Namespace: colors

core. colors

The core.colors package is a modular JavaScript library that provides extra rgb color methods.

Author:
License:

Methods

distance(color1, color2)

Calculates the distance between two color number values.

Parameters:
Name Type Description
color1 number

The first color value.
color2 number

The second color value.
Example
trace( distance( 0xFFFFFF , 0x000000 ) ) ; // 195075
trace( distance( 0xFFFFFF , 0xFFEEFF ) ) ; // 289
trace( distance( 0xFF0000 , 0xFF0000 ) ) ; // 0
trace( distance( 0xFFFFFF , 0xFFFFFF ) ) ; // 0

equals(color1, color2 [, tolerance])

Evaluates if two colors are similar with a specific tolerance ratio between 0 and 1.

Parameters:
Name Type Argument Default Description
color1 number

The first color value.
color2 number

The second color value.
tolerance number <optional>
 0.01

The tolerance ratio.
Returns:

true if the two colors are similar.

Example
trace( equals( 0xFFFFFF , 0x000000 ) ) ; // false
trace( equals( 0xFF0000 , 0xFF0000 ) ) ; // true
trace( equals( 0xFFFFFF , 0xFFFFFF ) ) ; // true

trace( equals( 0xFFFFFF , 0xFFEEFF ) ) ; // true
trace( equals( 0xFFFFFF , 0xFFEEFF , 0 ) ) ; // false
trace( equals( 0xFFFFFF , 0xFFEEFF , 1 ) ) ; // true

fade(from, to, ratio)

Creates a new color with the fading between two rgb numeric colors and a specific ratio.

Parameters:
Name Type Description
from number

The first color to interpolate.
to number

The second color to interpolate.
ratio

The value between 0 and 1 to calculate the fading level.
Examples

Javascript example

"use strict" ;
window.onload = function()
{
    if( !vegas )
    {
        throw new Error("The VEGAS library is not found.") ;
    }

    // ----- imports

    var global   = vegas.global ; // jshint ignore:line
    var trace    = vegas.trace  ; // jshint ignore:line
    var core     = vegas.core   ; // jshint ignore:line
    var system   = vegas.system ; // jshint ignore:line
    var graphics = vegas.graphics ; // jshint ignore:line

    var fade  = core.colors.fade ;
    var toHex = core.colors.toHex ;
    var Point = graphics.geom.Point ;

    // ----- initialize

    var canvas  = document.getElementById('canvas') ;
    var context = canvas.getContext('2d');

    canvas.width  = 800;
    canvas.height = 640;

    var width  = canvas.width ;
    var height = canvas.height ;

    var size = 40 ;

    var ratio ;
    var rgb ;
    var color ;

    var clear = function()
    {
        context.clearRect(0, 0, width, height);
        context.fillStyle = '#333333' ;
        context.fillRect(0, 0, width, height );
    }

    var render = function( position , start , end , rows )
    {
        for( var i = 0 ; i < rows ; i++ )
        {
            ratio = i/(rows-1);
            color = fade( start , end, ratio ) ;

            rgb = toHex( color ) ;

            context.fillStyle = rgb ;
            context.fillRect( position.x + (i * size) , position.y , size , size );

            trace( ratio + " => value:" + color + " color:" + rgb );
        }
    }

    clear() ;
    render( new Point(25, 25) , 0x00FF00 , 0xFF0000 , 12 ) ;
    render( new Point(25, 75) , 0xFFFFFF , 0x000000 , 12 ) ;
    render( new Point(25,130) , 0x125D7F , 0xFFED5D , 12 ) ;
 }

HTML page

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test core.colors.fade()</title>
    <style>
    body
    {
        margin: 0px;
        padding: 0px;
    }
    </style>
</head>
<body>
    <canvas id="canvas" width="100%" height="100%"></canvas>
    <script src="./js/vegas.js"></script>
    <script src="./js/fade.js"></script>
</body>
</html>

fromARGB(a, r, g, b)

Calculates the ARGB hexadecimal color value with the fours respected passed-in a,r,g,b components (values between 0 and 255).

Parameters:
Name Type Description
a number

The alpha (transparency) integer component between 0 and 1.
r number

The red integer component between 0 and 255 (0xFF).
g number

The green integer component between 0 and 255 (0xFF).
b number

The blue integer component between 0 and 255 (0xFF).
Example
trace( fromARGB(0.6,170,170,170) === 0x99AAAAAA ) ; // true

getAlpha(color)

Extract the alpha part of an ARGB color (value between 0 and 255).

Parameters:
Name Type Description
color number

The color value to evaluates.
Returns:

The alpha part of an ARGB color (value between 0 and 255).

Example
trace( getAlpha( 0xFFFFFFFF ) ) ; // 255
trace( getAlpha( 0xFF000000 ) ) ; // 255
trace( getAlpha( 0x00FFFFFF ) ) ; // 0

getBlue(color)

Extract the blue part of an ARGB color (value between 0 and 255).

Parameters:
Name Type Description
color number

The color value to evaluates.
Returns:

The blue part of an ARGB color (value between 0 and 255).

Example
trace( getBlue( 0x0000FF ) ) ; // 255
trace( getBlue( 0xFFFF00 ) ) ; // 0
trace( getBlue( 0x000000 ) ) ; // 0

getGreen(color)

Extract the green part of an ARGB color (value between 0 and 255).

Parameters:
Name Type Description
color number

The color value to evaluates.
Returns:

The green part of an ARGB color (value between 0 and 255).

Example
trace( getGreen( 0x0000FF00 ) ) ; // 255
trace( getGreen( 0x00FF00 ) ) ; // 0
trace( getGreen( 0x000000 ) ) ; // 0

getRed(color)

Extract the red part of an ARGB color (value between 0 and 255).

Parameters:
Name Type Description
color number

The color value to evaluates.
Returns:

The red part of an ARGB color (value between 0 and 255).

Example
trace( getRed( 0x00FF0000 ) ) ; // 255
trace( getRed( 0xFF0000 ) ) ; // 0
trace( getRed( 0x000000 ) ) ; // 0

isUnique(color, colors [, tolerance])

Evaluates a given color to a set of colors and defines if this color is unique.

Parameters:
Name Type Argument Default Description
color number

The color to evaluate.
colors Array

The vector of uint colors to compare the specific color value.
tolerance number <optional>
 0.01

The tolerance of the algorythm.
Returns:

True is the color is sufficiently unique.

Example
var colors = [ 0xFF0000 , 0x00FF00 , 0x0000FF , 0x000000 ] ;

trace( isUnique( 0xFFFFFF , colors ) ) ; // true
trace( isUnique( 0xEEFFFF , colors ) ) ; // true

trace( isUnique( 0xFF0000 , colors ) ) ; // false
trace( isUnique( 0xFE0000 , colors ) ) ; // false

trace( isUnique( 0x00FF00 , colors ) ) ; // false
trace( isUnique( 0x0000FF , colors ) ) ; // false
trace( isUnique( 0x000000 , colors ) ) ; // false

toHex(value [, prefix] [, upper])

Converts the specified uint value in a hexadecimal String representation.

Parameters:
Name Type Argument Default Description
value number

The value to format in an hexadecimal string expression.
prefix string <optional>
 #

The string prefix of the final expression (default #).
upper boolean <optional>
 true

Indicates if the string result is uppercase.
Example
trace( toHex( 0xFF0000 ) ) ; // #FF0000
trace( toHex( 0xFF0000 , '#' , false ) ) ; // #ff0000
trace( toHex( 0xFF0000 , '0x' ) ; // 0xFF0000
trace( toHex( 0xFF0000 , '' ) ) ; // FF0000
trace( toHex( 0xFF0000 , '' , false ) ) ; // ff0000

uniques(colors, maximum [, tolerance])

Returns a set of unique colors up to a given maximum.

Parameters:
Name Type Argument Default Description
colors Array

The vector of uint colors to evaluates.
maximum number

The maximum length of the result set of color elements.
tolerance number <optional>
 0.01

The tolerance of the algorythm.
Returns:

A set of unique colors up to a given maximum.

Type
Array
Example
var colors = [0xFFFFFF,0xFFFFFE,0xFF0000,0xFFFFFF,0x000000,0xFF0000,0xFFFFFD] ;

trace( colors ) ; // 16777215,16777214,16711680,16777215,0,16711680,16777213

colors = uniques( colors ) ;

trace( colors ) ; // 16777215,16711680,0