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
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:
- backgroundColor
- borderBottomColor
- borderColor
- borderLeftColor
- borderRightColor
- borderTopColor
- color
- outlineColor
- textDecorationColor