Numeric Rules

Though All Numeric rules may take Fixed and List Values, they may also take a specific set of parameters to deal with numeric values.

Parameters

Unit

The unit paramater let's you specify the unit to be used on the generated CSS directive. Valid values are 'px' or 'em'; or also '%' or 'deg' where appropiate. For rules that may only take one type of unit (for example RotateX only takes deg) generativeText will suply the appropiate unit by default.

When dealing with units it is important to know that since pixels are discrete units, pixel values will be rounded to integer. Meanwhile ems are not discrete units (ie: "1.24em" is a valid value) so they are rounded to 2 decimal places.

min (required)

max (required)

Numeric Rules with random values

If min and max are provided, and steps and stepFunction are not, then generativeText will pick a value randomly from the range of min to max.

Example

Here we have some NERVOUS Text
JS CSS

var rules = {
    transformRotate: {
        min: -30,
        max: 30,
    }
}

var opts = {
    split: "wrapped",
}


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

#example1 span.gt-nowrap span { font-family: 'Bitter'; text-shadow: -1px -1px 1px white; margin-left: -6px; }

Numeric Rules with steps

If steps is set to true, then generativeText will iterate through each element, step by step, incrementing from min to max. If min > max then it will go step by step decrementing from the value of min to the value of max.

Example

In computing, plain text is the contents of an ordinary sequential file readable as textual material without much processing.
JS CSS

var rules2 = {
    borderTopLeftRadius: {
        min: 0,
        max: 50,
        steps: true
    },
    borderBottomRightRadius: {
        min: 0,
        max: 50,
        steps: true
    }
}

var circling = new generativeText(rules2);
circling.applyToElementById("example2");
            

#example2 span { width: 44px; border: 1px solid #303030; text-align: center;
margin-right: 0.1em; margin-bottom: 0.1em; font-family: 'Arvo' }

Numeric Rules with stepFunction

A stepFunction is a function that is applied on each step of the process. The stepFunction can calculate and return the value of the CSS directive on this step. On Numeric Rules, stepFunctions 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

In 1822, French mathematician Joseph Fourier discovered that sinusoidal waves can be used as simple building blocks to describe and approximate any periodic waveform, including square waves.
JS CSS

var rules3 = {
    transformTranslateY: {
        min: -20,
        max: 20,
        stepFunction: function () {
            var two_pi = 6.2832;
            var step = (two_pi * 10) / this.totalSteps;
            var val = (Math.cos( (step * this.currentStep ) ) +1) / 2;
            return this.min + (this.range * val);
        }
    },
}

var curve = new generativeText(rules3);
curve.applyToElementById("example3");
            

#example3 span { margin-bottom: 10px; font-family: 'Fjalla One'}

Rules that may take Numeric Values: