ITP classmates and friends of mine recently put on a Black History Month event, which I was honored to be asked to perform at. For the event I wrote and performed a poem, “An Alphabet for Black History Month.” I am now working on making a digital version of the poem for my thesis. In addition to exploring animation and typography for this project, I am beginning to work on the data structure for Digital poetry in general.

{{capture notes from notebook and discuss JSON structures.}}

I am going to try and put my poem into a JSON structure following the logic

[ //poem


"stanza": o //index
"Lines: ["line one", "line two", "line three"],


Screenshot 2017 02 25 11 44 59

Right now I am creating the json structure of the poem by hand (by computer of course), but as a part of my thesis project I would like to research

if(I find something helpful){

Use it


Else {

Develop a tool to transcribe plain text poems into organized data structures to be used in the development of digital poetry

sublimetext makes this a little easier. Using normalize spaces I can put each stanza on its own line, which will make it easier to do the next step. I am going to use multiple curses in sublime text to paste the opening syntax of the javascript objects to each line

"index": 1,


Then I am planning on putting in each stanza into an array of lines, and then close each javascript object.

Because a great deal of the poem is made up of quotes from the people mentioned, and I want to be intentional and clear about when I am directly quoting people, and when my voice is being presented, I need to figure out how to store strings in an array while preserving their quote marks “quote” which conflict with the javascript syntax of storing strings of text, which is also ” “.

Also using find all ‘]’ to paste the closing part of the javascript object


And then going through and changing each index value to the appropriate letter of the alphabet for each stanza.

Screenshot 2017 02 25 12 24 14

And then the scariest and most exciting step of all, I am going to try and validate the json structure of the entire poem

A couple of mistakes to clean up from the hacky find and replace method.

Screenshot 2017 02 25 12 35 08

And success!

Screenshot 2017 02 25 12 37 42

And now I (finally) get to try and draw the poem to a canvas using javascript to access the json file. I am going to first try using p5, which I’m most comfortable in, and then progress if I need to grow out of p5 from there.

Ok, got the json working with p5 after some finicky struggles with the json. In the end what worked was copy and pasting directly from the validated json text in the browser.

I drew the index of each stanza on to the Dom using p5

[su_row][su_column size=”1/2″]Screenshot 2017 02 25 14 09 39[/su_column]
[su_column size=”1/2″]
var testPoem;
var universalSeed;

function setup(){
the_poem = loadJSON('poem.json', startUp)


function startUp(the_poem){
for (var i = 0; i < the_poem.length; i++) { console.log(the_poem[i].index) var alphabet = createElement('h1', the_poem[i].index); } }

I am going to try and go through the process I have set up for my thesis, and first focus on typography.

- slabtext
- opening text

- typeflow
And then animation


- scrollst

2 Things I want to do with this poem for the first iteration of a digital version

1) I want to try and set up a grid with d3, so that the first thing on the page would be a grid of each part of the alphabet/poem. And in small, tiny letters using zoom js, have the stanza associated with each letter so you can click and zoom in

2) I want to set up an animation on scroll interaction where the user goes through the poem one stanza at a time with animation triggered by scrolling.

For the scrolling animation I am going to start by using scroll reveal js.

I need to figure out how to make each stanza take up the entire viewport, and then animate to the next one on scroll.