The Scattering

The arrangement above will be unique each time you visit this page. Click on the words to change them. Roll for a new set. Enter a phrase or sentence to create a pattern. Fullscreen

Today’s project uses the RiTa library to generate text. It starts by parsing a “seed” phrase to extract its parts of speech

let rs = new RiString("The big brown dog");
let pattern = rs.pos();

The RiString is a RiTa object that tokenizes strings of words and provides methods to investigate them. The pattern variable above uses RiString’s pos function to receive an array mapping each word in the string to a part of speech. The sample sentence, for example, returns the following

Array(4)
   0: "dt"
   1: "jj"
   2: "jj"
   3: "nn"
length: 4

The parts of speech, from the Penn English Treebank POS tags, are quite granular.

A sentence is now generated by looking up random word substitutions that match the part of speech of the word being replaced.

let word = Rita.randomWord(pattern[i]);

And these are then stuffed into divs which the css style properties spew onto the the screen. By the way, the vh and vw properties help shape responsive sizes to the dimensions of the host by percentages. Just started experimenting with this.

let i = 0;
Array.from({ length: pattern.length }).map(() => document.createElement("div")).forEach(box => {
    box.setAttribute('class', 'box');
    box.innerText = Rita.randomWord(pattern[i]);
    box.dataset.pos = pattern[i];
    i++;
    paint.appendChild(box);

Swap Words

An event listener is attached to each div so that when it is clicked it will spin and replace the word with another word that is the same part of speech…

box.addEventListener("click", () => {
  if (!TweenMax.isTweening(box)) {
    TweenMax.to(box, 0.1, {
      rotationY: "+=180",
      repeat: 1,
      yoyo: true,
      onComplete: () => {
        let word = box.innerText;
        let pos = box.dataset.pos;
        if (!Rita.isPunctuation(word)) {
          word = Rita.randomWord(pos);
        }
        box.innerText = word;
      },
    });
  }
});

Note: a data element provides a handy place to stash the pos tagged with the div and then retrieve it on the click event when the word is being replaced.

Finessing

The seed phrase can be constructed artfully by using specific parts of speech from the Treebank to constrain the sentence.

Based on how the phrase is constructed and tuned, some interesting results can be generated and fine-tuned by flipping individual words. It may not generate a masterpiece for you, but it will reward your clever constructs.