Color Rules

All Color rules may take Fixed and List Values, but they may also take a specific set of parameters to deal with color values.

RGB

Since colors are actually composed of 3 components (RGB). Color rules take 3 different parametes: r, g and b; each with it's own set of parameters.

Fixed rgb

Any one of this (r,g or b) may take a fixed value or the full set of RGB parameters. For example, you might leave r at a fixed value and move g and b with steps. Fixed RGB values must be an string representing an hexanumeric value from "00" to "ff" (in lowercase).

Parameters

min (required)

Min takes an Hexanumeric value from "00" to "ff" (in lowercase).

max (required)

Max takes an Hexanumeric value from "00" to "ff" (in lowercase).

steps

If steps is set to true, generativeText will move sequentially step by step from min to max. If steps is not set and there is no stepFunction, generativeText will pick a value randomly from the range of min to max.

stepFunction

r, g and b may also take an stepFunction. A stepFunction on r,g or b must return a number between 0 and 255.

stepFunctions on colors have access to the following variables:


    this.totalSteps //Contains the total number of steps
    this.currentStep //Contains the current step
    this.range //Contains the range of posible values (max-min)
    this.min //Contains the value of min
    this.max //Contains the value of max

Example

The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.
JS CSS

var rules = {
    color: {
        r: "b0",
        g: {
            min: "33",
            max: "bb",
            steps: true,
        },
        b: {
            min: "00",
            max: "ff",
            stepFunction: function() {
                var two_pi = 6.2832;
                var step = (two_pi * 6) / this.totalSteps;
                var val = (Math.cos( (step * this.currentStep ) ) +1) / 2;
                return this.min + (this.range * val);
            }
        }
    }
}

var opts = {
    split: "wrapped",
}

var colorize = new generativeText(rules, opts);
colorize.applyToElementById("example1");
            

#example1 { background-color: #000000; padding: 0.6em;}

Rules that may take Color Values: