Skip to main content

Interactive Tutorial: Create Valentine’s Day Poems with Romance.JS

By David Yang

Create V Day Poems Romance JS

In addition to forging a friendship in college, Fullstack Academy’s founders also share a mutual love of poetry, so Fullstack wants to help you share the love this Valentine’s Day by helping you create unique poetry using Romance.JS.

If you’ve started with Codecademy or Codeschool’s JavaScript course, this exercise should be right up your alley. It’s a fun way to explore language and we hope it will inspire you.

Try it out in the frame below—and don’t forget to have fun!

Instructions

  1. Type a poem into the box below
  2. Click “write poetry”
  3. Marvel at your genius
  4. Share with your favorite pair programmer.

So what did you think? Keep reading to figure out how it works.

How It Works

If you’ve ever played Mad Libs, you’ve experience the amusing quality of text interpolated with some randomness. Romance.JS is like Mad Libs but with three key differences:

  1. Our program chooses every word rather than filling in blanks.
  2. Our program trains itself by building a set of all words that follow each word in the corpus (the corpus is the poetry or text you want to mimic).
  3. Our program picks a random word from the corpus to start. Then it picks from the set of words that follow this word.

Let’s start with “Since Feeling Is First,” a classic poem from E.E. Cummings:

since feeling is first
who pays any attention
to the syntax of things
will never wholly kiss you;

wholly to be a fool
while Spring is in the world

my blood approves,
and kisses are better fate
than wisdom
lady i swear by all flowers. Don’t cry
—the best gesture of my brain is less than
your eyelids’ flutter which says

we are for each other: then
laugh, leaning back in my arms
for life’s not a paragraph

And death i think is no parenthesis

We first identify the unique words that appear in the poem. For example:

  • since
  • feeling
  • is
  • first
  • who
  • pays
  • any
  • attention

Then for each word, we identify the list of words that follow that word. For example, for the word “is,” we see: first, in, less, and no, and for the word “my,” we see: blood, brain, and arms.

We store these “following” words associated with each starting word.

The magic about this is that based on how we train our model (what body of text we put in and what sequences it has), it can create a pretty good approximation of what the author of that poem sounds like.

How to Set Up the Poem

For our code to work, it first needs some text to train itself on.

Let’s set up a place in our HTML where we can store a bunch of text. For that, we’re going to use a trick web developers use to store long strings in HTML—script tags that aren’t JavaScript.

By setting it up this way, the browser ignores it but makes it still easy for us to grab the text out. Feel free to follow along by opening your own JSFiddle.net fiddle.

Now let’s set up a way to store all the pairs. For our implementation, we’ll create a JavaScript object where the keys are single words and the values are an array of all the words that follow that word in our poem.

Every time we see a new word combination, we’ll store the combination in our object for use later.

We’re going to store duplicates as well so later on, we don’t have to worry about storing probability weights, we just need to randomly choose a word and the probability will work itself out.

Great, now we have two helpful pieces of data: words and wordpairs. words is a long list of every word in our corpus and wordpairs is where the pairs are stored. wordpairs[“love”] will return an array (a list) of every word that our program has ever seen follow love.

Making Poetry

Now that we’ve prepped the kitchen, we just need to flambé the paper (don’t worry—your program will botch its metaphors even worse).

Let’s write a function called “writePhrase” that takes a length of words and returns a phrase of poetry. We also write a helper function to randomly choose from an array since we’ll be doing that several times.

Take a look at this following JSFiddle (set up with Shakespeare’s Sonnets) to see what kind of output it creates.

Open the JSFiddle and you can change out the stock poem and see what kind else you can create! Perhaps you can use it as an inspiration for a beautiful poem for your own loved one.

Further Challenges

The core system that we’ve built is called a Markov Chain. It’s a simple and elegant way to model various problems in computer science, and as we’ve seen, can be used to generate amusing text based off a training poem.

However, there are still many directions to go from here:

  • Our program doesn’t handle sentence structure in the original poem, which makes it start and stop each phrase awkwardly.
  • We’re pretty aggressive about removing punctuation, which produces a bland ending text—try to keep two versions of the word, one that has been normalized and one that keeps the original formatting.

If you’d like to learn more, register for our intro to coding course.

Find the program that fits your life.

Learn about our coding, cybersecurity, and data analytics bootcamps offered on full-time and part-time schedules.