Generative text output


F0r my piece this week, I designed a generative text output sort of like madlibs. I made 3 strings of text files: adjectives, nouns, verbs, and one array: settings. Each of these strings/ arrays contained words I would refer to in function draw to randomly construct a sentence based on the formula I arranged.

The sentence structure was as follows:

  • the ‘adjective’ ‘noun’ ‘verb’ ‘setting’

For example:

  • the nutty professor danced into the night

Code highlight

function preload() {
  helveticaFont = loadFont("Helvetica-Bold-Font.ttf"); // downloaded font from online

  // loads text files as strings
  adjectives = loadStrings("english-adjectives.txt");
  nouns = loadStrings("english-nouns.txt");
  verbs = loadStrings("english-verbs.txt");

  // background i uploaded
  gradient1 = loadImage("gradient1.png");

function setup() {
  createCanvas(400, 400);

function draw() {

  // loop to generate random stars on the bottom portion of canvas
  for (let i = 55; i < 250; i++) {
    fill(200, 150); // color of stars and transparency
    circle(random(400), random(251, 400), random(1, 2));

Finally kinda figured out loops, also surprised I knew how to use loadStrings… lol. 

Embedded sketch

Click on the canvas to randomly generate sentences.

It’s fun, trust me! My personal favorite is:

  • the fat frog breakdanced into the metaverse

Reflection and improvements

  • Would have liked to have made it so that when a specific setting would pop up, I would be able to generate a design that correlates with it. For example, if the setting “into the snow” gets generated, a snowfall design would pop up to go with it.
  • The ‘settings’ string that referred to the text file I created would sometimes generate blanks, so I had to replace it with an array.
  • Some sort of visual representation of the sentence constructed instead of just displaying the text.
  • I’m still not fully competent using p5js, but I am getting more comfortable!

Bry on Twitter: "when u low key work with Michael Scott 😩🤘🏼" / Twitter

One thought on “Generative text output”

Leave a Reply