Class Color

Defines a color as values in the range of 0 to 1 for the four channels red, green, blue and alpha (for opacity)

Hierarchy (View Summary)

Mutable
- Color

Implements

Constructors

constructor

new Color(_r?: number, _g?: number, _b?: number, _a?: number): Color
Parameters
- _r: number = 1
- _g: number = 1
- _b: number = 1
- _a: number = 1
Returns Color
Overrides Mutable.constructor
- Defined in Source/Core/Material/Color.ts:21

Properties

a

a: number

b

b: number

g

g: number

r

r: number

`Static`crc2

crc2: CanvasRenderingContext2D = ...

Accessors

clone

get clone(): Color
Creates and returns a clone of this color.

Returns Color
- Defined in Source/Core/Material/Color.ts:210

isArrayConvertible

get isArrayConvertible(): true
Returns true
Implementation of ArrayConvertible.isArrayConvertible
- Defined in Source/Core/Material/Color.ts:203

type

get type(): string
Retrieves the type of this mutable subclass as the name of the runtime class

Returns string
The type of the mutable
Inherited from Mutable.type
- Defined in Source/Core/Serialization/Mutable.ts:193

Methods

add

add(_color: Color): Color
Adds the given color to this.
Parameters
- _color: Color
Returns Color
- Defined in Source/Core/Material/Color.ts:322

addEventListener

addEventListener(
    _type: string,
    _handler: EventListenerUnified,
    _options?: boolean | AddEventListenerOptions,
): void
See EventTarget.addEventListener for reference. Works with EventListenerUnified and EventUnified
Parameters
- _type: string
- _handler: EventListenerUnified
- Optional_options: boolean | AddEventListenerOptions
Returns void
Inherited from Mutable.addEventListener
- Defined in Source/Core/Event/Event.ts:91

animate

animate(_mutator: AnimationMutator): void
Updates the property values of the instance according to the state of the animation mutator. Override to implement custom animation behavior.
Parameters
- _mutator: AnimationMutator
Returns void
Inherited from Mutable.animate
- Defined in Source/Core/Serialization/Mutable.ts:329

apply

apply(
    _function: (
        _value: number,
        _index: number,
        _channel: "a" | "b" | "g" | "r",
        _color: Color,
    ) => number,
): Color
Calls a defined callback function on each channel of the color and assigns the result to the channel. Similar to Color.map but mutates this color instead of creating a new one.
Parameters
- _function: (
      _value: number,
      _index: number,
      _channel: "a" | "b" | "g" | "r",
      _color: Color,
  ) => number
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:379

copy

copy(_color: Color): Color
Copies the color channels of the given color into this color and returns it.
Parameters
- _color: Color
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:220

deserialize

deserialize(_serialization: Serialization): Promise<Serializable>
Recreates this instance of Serializable with the information from the given Serialization.
Parameters
- _serialization: Serialization
Returns Promise<Serializable>
Implementation of Serializable.deserialize
- Defined in Source/Core/Material/Color.ts:432

dispatchEvent

dispatchEvent(_event: EventUnified): boolean
See EventTarget.dispatchEvent for reference. Works with with EventUnified
Parameters
- _event: EventUnified
Returns boolean
Inherited from Mutable.dispatchEvent
- Defined in Source/Core/Event/Event.ts:105

equals

equals(_compare: Color, _tolerance?: number): boolean
Returns true if this vector is equal to the given vector within the given tolerance.
Parameters
- _compare: Color
- _tolerance: number = Number.EPSILON
Returns boolean
- Defined in Source/Core/Material/Color.ts:244

fromArray

fromArray(_array: ArrayLike<number>, _offset?: number): this
Set the values of this object from the given array starting at the given offset.
Parameters
- _array: ArrayLike<number>
  The array to read the values from.
- _offset: number = 0
  (optional) The offset to start reading from.
Returns this
A reference to this instance.
Implementation of ArrayConvertible.fromArray
- Defined in Source/Core/Material/Color.ts:387

getCSS

getCSS(): string
Returns the css color keyword representing this color.

Returns string
Deprecated
Use toCSS instead.
- Defined in Source/Core/Material/Color.ts:307

getHex

getHex(): string
Returns the hex string representation of this color.

Returns string
Deprecated
Use toHex instead.
- Defined in Source/Core/Material/Color.ts:315

getMetaAttributeTypes

getMetaAttributeTypes(): MetaAttributeTypes
Retrieves the specified attribute types from the metadata of this instance's class.

Returns MetaAttributeTypes
Inherited from Mutable.getMetaAttributeTypes
- Defined in Source/Core/Serialization/Mutable.ts:289

getMetadata

getMetadata(): Metadata
Retrieves the metadata of this instance's class.

Returns Metadata
Inherited from Mutable.getMetadata
- Defined in Source/Core/Serialization/Mutable.ts:296

getMutator

getMutator(_extendable?: boolean): Mutator
Collect applicable attributes of the instance and copies of their values in a Mutator-object. By default, a mutator cannot be extended, since extensions are not available in the object the mutator belongs to. A mutator may be reduced by the descendants of Mutable to contain only the properties needed.
Parameters
- _extendable: boolean = false
Returns Mutator
Inherited from Mutable.getMutator
- Defined in Source/Core/Serialization/Mutable.ts:202

getMutatorAttributeTypes

getMutatorAttributeTypes(_mutator: Mutator): MutatorAttributeTypes
Returns an associative array with the same attributes as the given mutator, but with the corresponding types as string-values. Does not recurse into objects! This will return the decorated meta-type instead of the runtime-type of the object, if available.
Parameters
- _mutator: Mutator
Returns MutatorAttributeTypes
Inherited from Mutable.getMutatorAttributeTypes
- Defined in Source/Core/Serialization/Mutable.ts:260

getMutatorForAnimation

getMutatorForAnimation(_extendable?: boolean): MutatorForAnimation
Collect the attributes of the instance and their values applicable for animation. Basic functionality is identical to getMutator, returned mutator should then be reduced by the subclassed instance
Parameters
- _extendable: boolean = false
Returns MutatorForAnimation
Inherited from Mutable.getMutatorForAnimation
- Defined in Source/Core/Serialization/Mutable.ts:237

getMutatorForUserInterface

getMutatorForUserInterface(_extendable?: boolean): MutatorForUserInterface
Collect the attributes of the instance and their values applicable for the user interface. Basic functionality is identical to getMutator, returned mutator should then be reduced by the subclassed instance
Parameters
- _extendable: boolean = false
Returns MutatorForUserInterface
Inherited from Mutable.getMutatorForUserInterface
- Defined in Source/Core/Serialization/Mutable.ts:245

map

map(
    _function: (
        _value: number,
        _index: number,
        _channel: "a" | "b" | "g" | "r",
        _color: Color,
    ) => number,
    _out?: Color,
): Color
Calls a defined callback function on each channel of the color, and returns a new color that contains the results. Similar to Array.map.
Parameters
- _function: (
      _value: number,
      _index: number,
      _channel: "a" | "b" | "g" | "r",
      _color: Color,
  ) => number
- _out: Color = ...
  Optional color to store the result in.
Returns Color
- Defined in Source/Core/Material/Color.ts:367

multiply

multiply(_color: Color): Color
Multiplies this with the given color.
Parameters
- _color: Color
Returns Color
- Defined in Source/Core/Material/Color.ts:344

mutate

mutate(_mutator: Mutator): void
Updates the attribute values of the instance according to the state of the mutator. The mutation may be restricted to a subset of the mutator and the event dispatching suppressed. Uses mutateBase, but can be overwritten in subclasses
Parameters
- _mutator: Mutator
Returns void
Overrides Mutable.mutate
- Defined in Source/Core/Material/Color.ts:440

recycle

recycle(): void
Recycles the object for the next reuse by setting its properties to their default states.

Returns void
Implementation of Recycable.recycle
- Defined in Source/Core/Material/Color.ts:237

removeEventListener

removeEventListener(
    _type: string,
    _handler: EventListenerUnified,
    _options?: boolean | AddEventListenerOptions,
): void
See EventTarget.removeEventListener for reference. Works with EventListenerUnified and EventUnified
Parameters
- _type: string
- _handler: EventListenerUnified
- Optional_options: boolean | AddEventListenerOptions
Returns void
Inherited from Mutable.removeEventListener
- Defined in Source/Core/Event/Event.ts:98

scale

scale(_scaling: number): Color
Scales this color by the given factor.
Parameters
- _scaling: number
Returns Color
- Defined in Source/Core/Material/Color.ts:355

serialize

serialize(): Serialization
Returns a Serialization of this object.

Returns Serialization
Implementation of Serializable.serialize
- Defined in Source/Core/Material/Color.ts:425

set

set(_r: number, _g: number, _b: number, _a: number): Color
Sets the color channels of this color.
Parameters
- _r: number
- _g: number
- _b: number
- _a: number
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:232

setBytes

setBytes(_r: number, _g: number, _b: number, _a: number): Color
Sets this color from the given 8-bit values for the color channels.
Parameters
- _r: number
- _g: number
- _b: number
- _a: number
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:281

setClamped

setClamped(_r: number, _g: number, _b: number, _a: number): Color
Sets the color channels of this color and clamps them between 0 and 1.
Parameters
- _r: number
- _g: number
- _b: number
- _a: number
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:263

setCSS

setCSS(_keyword: string, _alpha?: number): Color
Sets this color from the given css color keyword. Optinally sets the alpha value to the given value.
Parameters
- _keyword: string
- Optional_alpha: number
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:255

setHex

setHex(_hex: string): Color
Sets this color from the given hex string color.
Parameters
- _hex: string
Returns Color
A reference to this color.
- Defined in Source/Core/Material/Color.ts:289

setHSL

setHSL(
    _hue: number,
    _saturation: number,
    _lightness: number,
    _alpha?: number,
): Color
Sets this color from the given hsl values.
Parameters
- _hue: number
- _saturation: number
- _lightness: number
- Optional_alpha: number
Returns Color
- Defined in Source/Core/Material/Color.ts:270

subtract

subtract(_color: Color): Color
Adds the given color to this.
Parameters
- _color: Color
Returns Color
- Defined in Source/Core/Material/Color.ts:333

toArray

toArray<T extends { [n: number]: number } = number[]>(
_out?: T,
_offset?: number,
): T
Copy the values of this object into the given array starting at the given offset. Creates a new array if none is provided.
Type Parameters
- T extends { [n: number]: number } = number[]
Parameters
- _out: T = ...
  (optional) The receiving array.
- _offset: number = 0
  (optional) The offset to start writing to.
Returns T
_out or a new array if none is provided.
Implementation of ArrayConvertible.toArray
- Defined in Source/Core/Material/Color.ts:395

toCSS

toCSS(): string
Returns the css color keyword representing this color.

Returns string
- Defined in Source/Core/Material/Color.ts:420

toHex

toHex(): string
Returns the hex string representation of this color. // TODO: maybe this should return a number instead of a string?

Returns string
- Defined in Source/Core/Material/Color.ts:413

toString

toString(): string
Returns a formatted string representation of this color

Returns string
- Defined in Source/Core/Material/Color.ts:406

updateMutator

updateMutator(_mutator: Mutator): void
Updates the values of the given mutator according to the current state of the instance
Parameters
- _mutator: Mutator
Returns void
Inherited from Mutable.updateMutator
- Defined in Source/Core/Serialization/Mutable.ts:304

`Static`CSS

CSS(_keyword: string, _alpha?: number, _out?: Color): Color
Returns a new Color object created from the given css color keyword. Passing an _alpha value will override the alpha value specified in the keyword. Supported color formats are:
- named colors (e.g. "red", "blue", "green")
- hex colors (e.g. "#f00" "#ff0000", "#ff0000ff")
- srgb colors (e.g. "rgb(255 0 0 / 1)", "rgb(255, 0, 0)", "rgba(0, 0, 255, 1))
- hsl colors (e.g. "hsl(90deg 100% 50% / 1)", "hsl(90, 100%, 50%)", hsla(90, 100%, 50%, 1))
Note: If possibile try to avoid invoking this method frequently, as it might cause major garbage collection depending on the keyword and browser.
Parameters
- _keyword: string
- Optional_alpha: number
- _out: Color = ...
  Optional color to store the result in.
Returns Color
- Defined in Source/Core/Material/Color.ts:107

`Static`DIFFERENCE

DIFFERENCE(_clrA: Color, _clrB: Color, _out?: Color): Color
Computes and returns the sum of two colors.
Parameters
- _clrA: Color
- _clrB: Color
- _out: Color = ...
  Optional color to store the result in.
Returns Color
- Defined in Source/Core/Material/Color.ts:175

`Static`getMutatorFromPath

getMutatorFromPath(_mutator: Mutator, _path: string[]): Mutator
Decorator allows to attach Mutable functionality to existing classes.
Parameters
- _mutator: Mutator
- _path: string[]
Returns Mutator
Inherited from Mutable.getMutatorFromPath
- Defined in Source/Core/Serialization/Mutable.ts:178

`Static`hsl2rgb

hsl2rgb<
    T extends
        { b: number; g: number; r: number } = {
        b: number;
        g: number;
        r: number;
    },
>(
    _hue: number,
    _saturation: number,
    _lightness: number,
    _out: T,
): T
Converts the given HSL values to RGB and returns the result in the given object.
Type Parameters
- T extends { b: number; g: number; r: number } = { b: number; g: number; r: number }
Parameters
- _hue: number
  Hue as an angle in degrees in range [0, 360].
- _saturation: number
  Saturation in range [0, 1]
- _lightness: number
  Lightness in range [0, 1]
- _out: T
  Optional color to store the result in.
Returns T
The RGB values in range [0, 1].

Source
https://www.w3.org/TR/css-color-4/#hsl-to-rgb
- Defined in Source/Core/Material/Color.ts:36

`Static`PRODUCT

PRODUCT(_clrA: Color, _clrB: Color, _out?: Color): Color
Computes and returns the product of two colors.
Parameters
- _clrA: Color
- _clrB: Color
- _out: Color = ...
  Optional color to store the result in.
Returns Color
- Defined in Source/Core/Material/Color.ts:183

`Static`rgb2hsl

rgb2hsl<
    T extends
        { h: number; l: number; s: number } = {
        h: number;
        l: number;
        s: number;
    },
>(
    _red: number,
    _green: number,
    _blue: number,
    _out: T,
): T
Type Parameters
- T extends { h: number; l: number; s: number } = { h: number; l: number; s: number }
Parameters
- _red: number
  Red value [0, 1]
- _green: number
  Green component [0, 1]
- _blue: number
  Blue component [0, 1]
- _out: T
  Optional color to store the result in.
Returns T
The HSL values. Hue as an angle in degrees in range [0, 360]. Saturation and lightness in range [0, 1].

Source
https://www.w3.org/TR/css-color-4/#rgb-to-hsl
- Defined in Source/Core/Material/Color.ts:57

`Static`SCALE

SCALE(_vector: Color, _scaling: number, _out?: Color): Color
Returns a new color representing the given color scaled by the given scaling factor.
Parameters
- _vector: Color
- _scaling: number
- _out: Color = ...
  Optional color to store the result in.
Returns Color
- Defined in Source/Core/Material/Color.ts:191

`Static`SUM

SUM(_clrA: Color, _clrB: Color, _out?: Color): Color
Computes and returns the sum of two colors.
Parameters
- _clrA: Color
- _clrB: Color
- _out: Color = ...
  Optional color to store the result in.
Returns Color
- Defined in Source/Core/Material/Color.ts:167

Class Color

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Color

Properties

a

b

g

r

Staticcrc2

Accessors

clone

Returns Color

isArrayConvertible

Returns true

type

Returns string

Methods

add

Parameters

Returns Color

addEventListener

Parameters

Returns void

animate

Parameters

Returns void

apply

Parameters

Returns Color

copy

Parameters

Returns Color

deserialize

Parameters

Returns Promise<Serializable>

dispatchEvent

Parameters

Returns boolean

equals

Parameters

Returns boolean

fromArray

Parameters

Returns this

getCSS

Returns string

Deprecated

getHex

Returns string

Deprecated

getMetaAttributeTypes

Returns MetaAttributeTypes

getMetadata

Returns Metadata

getMutator

Parameters

Returns Mutator

getMutatorAttributeTypes

Parameters

Returns MutatorAttributeTypes

getMutatorForAnimation

Parameters

Returns MutatorForAnimation

getMutatorForUserInterface

Parameters

Returns MutatorForUserInterface

map

Parameters

Returns Color

multiply

Parameters

`Static`crc2

`Static`CSS

`Static`DIFFERENCE

`Static`getMutatorFromPath

`Static`hsl2rgb

`Static`PRODUCT

`Static`rgb2hsl