Screenshot 2017 03 13 18 04 18

I have previously worked with this poem that I recently wrote and performed for a Black History Month event put on by classmates of mine (who are wonderful and did a wonderful job). You can read about creating a digital poem skeleton using json structure. And about developing a scroll animation for going through the poem. After my midterm presentation in Thesis class, Ian sent me a video of the performance (thank you Ian), which I have put together with the scrolling functionality I built for the poem using a json structure and Scrollreveal js., a javascript library that allows you to trigger animated events when a user scrolls on the page.

My idea, illustrated below, is to create a A Scroller environment where the user can watch a video of me performing the poem on the right, and scroll through the lines of the poem in real time, or at whatever pace they would like, to see the text of each part of the poem as it is being read.

IMG 4126

I have a working demo which you can try out by clicking the image below

Screenshot 2017 03 13 18 04 23

# write up solution

– make a transparent ghost button with z index 1 across the width of the canvas with a fized positoin for playh/pause

My next steps will be

* Make a version that is automated and flows through without scroll (video like)
– Style the title page and transition into poem
– figure out what to do when position of camera changes (is text still readable?-this might make it not worth doing over plan b)
– revise the text of the poem itself
– figuring out how to structure the line breaks of the text being read in
– to optimize the sizing and position of text and video.
– to optimize visibility of tex coming over video
– to work with the animations of the text to try and make them more interesting to engage with, and to see if there are any other ways they can be in conversation with the poem itself.
– Make a write up of part one two and three of this as a thesis entry about son structured digital poetry

And I am going to create a second version of this to user test the two against each other. The second version will have the text next to the video and as the user scrolls through the text will animate through the poem on a separate stage next to the video.

I would love feedback on the experience. If you have any thoughts after going through the poem please leave them as comments on this post. All user testing and feedback would be greatly appreciated. Thank you