Concept

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() {
  background(gradient1);

  // 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
    noStroke();
    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!