Options: pFunctions and Memory

pFunctions (preFunc and posFunc) are functions that are called before or after each step of the generativeText sequence.

Memory

Takes a boolean value (false by default). If memory is set to true, the different spans created by generativeText are stored in the variable memory.

pObject

A pObj must have either a preFunc or a posFunc.

preFunc and posFunc have access to the following variables:


    this.totalSteps //The total number of steps
    this.memory //If memory was set to true, it contains all the nodes created till that step.
    this.container //The container element
    this.currentStep //The current step

Example

In this example, we are creating a ruleset that has a 1/6 chance of setting the color of the letter to red, and a 1/4 chance of setting the backgroundColor of the letter to grey.

Appart from that we have a preFunc that does the following: if the character is an "e" and it has no backgroundColor it adds a grey border to it. We also have a posFunc that if the letter was preceded by a space, capitalizes the letter, changes the background to black, the color to red and rotates it 5 degrees.

Conventions for the capitalization of titles and other classes of words vary between languages and, to a lesser extent, between different style guides.

JS CSS HTML


var rules = {
    color: {
        values: ["", "", "", "", "", "#dd5555"]
    },
    backgroundColor: {
        values: ["", "", "", "#aaaaaa"]
    }
}

var pObj = {
    getElementText: function(elem) {
        //For browser compatibility
        var text;

        if(!!elem.textContent) {
            text = elem.textContent;
        } else {
            text = elem.innerText;
        }
        if(typeof text == "undefined") text = "";
        return text;
    },
    preFunc: function() {
        if(this.currentStep > 0) {
            var previous = this.memory[ this.currentStep -1 ];
        }
        if(typeof previous != "undefined" && this.getElementText(previous) == "e"
        && previous.style.backgroundColor == "") {
            previous.style.border = "1px solid #aaaaaa";
        }
    },

    posFunc: function() {
        if(this.currentStep > 0) {
            var previous = this.memory[ this.currentStep -1 ];
        }
        var current = this.memory[ this.currentStep ];

        if(typeof previous == "undefined" || this.getElementText(previous).trim() == ""  ) {
            current.style.backgroundColor = "#111111";
            current.style.color = "#dd1111";
            current.style.textTransform = "uppercase";
            current.style.padding = "0.2em";
            current.style.transform = "rotate(3deg)";

        }
    }
}

var opts = {
    split: "wrapped",
    textSpaces: "nostyle",
    memory: true,
    pObj: pObj,
}

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

capitalize.cleanUp();


#example1 span { padding: 0.3em 0.1em 0.3em 0.1em; }
#example1 span.gt-word span { padding: 0.1em; }


<div id="example1">Conventions for the capitalization of titles and other classes of words
vary between languages and, to a lesser extent, between different style guides.</div>

Cleaning Memory

If memory is set to true, memory will persist after the applyTo function has finished. You can access it at generativeTextInstance.memory.

Since this keeps a lot of DOM references, you may want to clean this up, to do so, call: generativeTextInstance.cleanUp();