Below are my running documentation notes from the process. Here is an overview of where I am at now.
I have written three poems for ‘the rest of you.’ I have begun to animate one of them, the idea being to create a ‘play’ using words as the ‘actors’ through jQuery and css animations.
You can check out the progress and poems here
The link will take you to the first page which has the opening animation, and in the top left there are links to the text of the other 2 poems that have not yet been animated.
I worked on a short/small prototype of the poetry animation in adobe after effects, but quickly decided it was taking too much time, energy, and attention to be my ongoing drafting tool. Here is a video of that process/progress.
biasAside from Daniel Silber-Baker on Vimeo.
It was helpful in being able to visualize the movements of letters, which I’m realizing will be a big part of this digital poetry writing experiment. However I moved over to javascript to start creating animated scenes with a series of poems around themes from “the rest of you” class.
# Documentation Notes
Scene 1:
Stanza 1
Actors: all the letters that will be involved
One way to do this which I might fall back on is {{javascript library for animation like a play would be read}}, but I am more interested in the words being the actor themselves. Simulating the experience of watching a play more then reading it.
Use blast and velocity js (name for stack) to animate in the poems I wrote in the last couple days with each stanza as an act or scene.
Set up
– make project with velocity and blast
– blast poem into letters
– start playing around!
In addition to using blast and velocity, I am going to take the risk of trying 1 more, and JUST ONE MORE animation library before settling to focus on my digital poetry writing stack. I am going to try out textillate.js. Which I have used before {{link where? Kendrick?}}.
Blast workflow
– create an array of all the letters present
# actually maybe tis not-I think a conconrdance will be a big part of all this and I should bring it in early
Text is in a file
Read in with p5
– create a concordance
Run through blast js to create classes and id
– draw to canvas by line using p5?
I need to get an array of each word present in the first act. And I can do that combining blast.js and query’s .toArray() method like this
$(".blastText").blast({
delimiter: "word",
tag: "div",
generateValueClass: true
// customClass: "demo",
// generateIndexID: true
});
var myArray = $('.blast').toArray()
console.log(myArray[0].innerHTML)
This gives me an array of each blasted element, which I can then use to draw each word to the canvas when and how I would like by accessing the array.
Up Next
– animate each word in–and or try to do it by line? Do I need to make another array of each line? Maybe I should do that through p5? Or do another blast by line? This is the line break question again
Eventually I would like to be able to refer to each word by its own name instead of its place in the array, but for now I am going to pull the words out by their index in the array.
I have learned a second big javascript method (for me), in addition to jquery’s .toArray(), the javascript slice method is very helpful in being able to access multiple elements in my array of all the words which make up the poem that will be drawn to the canvas. In the example below, you can see both the creation of the array by selecting the blast class, and then accessing elements in them to create ‘lines’ of the poem. Which may really be more like actors, or group of actors, as in a chorus {{link to greek}}, which can be given ‘stage direction’ by creating a sliced version of the overall array which includes only the words which will enter and function together in the creation of the poem as a play
Putting it all together
# post commented final code here