Since 2012, POV has brought together visionary filmmakers and inventive technologists to “re-imagine the documentary for web” in a single weekend. The fifth edition of our non-fiction lab, POV Hackathon 5 has concluded. We’re excited to share the prototypes from the six teams that participated, and give you the opportunity not only to explore them, but also to learn more about how the team’s created the prototypes under an impossible deadline, including a technology list and source code.
In most cases, the team members did not know each other before their participation. Find out more about the POV Hackathon process and future calls for participants »
Start viewing the prototypes from POV Hackathon 5 »
View the prototypes from POV Hackathon 6 »
Noriginals: The Art of Uncreativity
Participants’ Choice Award winner
A still from the Noriginals team’s prototype, Poetastr
View the prototype »
View the source code »
Note: Refresh Poetastr when switching poetry forms.
Team: Colin Rothfels, Naqeeb Memon, Evan Misshula, Charles S. Roy, Mark Slutsky.
About the Project: Noriginals: Poetastr is an automated, rule-based poetry creation tool. Sourcing content from the twitter stream, it allows users to specify lyrical forms. Based on the criteria, poems are generated and streamed to the user as they are created.
Technology:
- Poetastr was written primarily in Python, which allowed us to do rapid prototyping, and to share a language between the logic code and the display code.
- Poetastr is built on top of Poetry Utils 2.0 (https://github.com/cmyr/poetryutils2) a poetry library built in python that works with text features like metre and rhyme.
- The web interface was built using Flask, a lightweight python ‘microframework’ for building web applications. We chose Flask because we wanted to be working in python throughout the project, and Flask provided the features we required without a lot of code overhead.
- jQuery was used to handle displaying of the streamed results, and to manipulate the menus. Another JavaScript library, bootstrap, was used to handle basic styling.
- Git, Github, Google Chat and Google Docs were used to facilitate collaboration.
- All our code was written in Sublime Text 3.
Naqeeb Memon (Technologist) is a software developer & photographer based in New York. Naqeeb specializes in building web platforms that can be used to showcase interactive stories.
» Photography
» Naqeeb on Github
Evan Misshula (Technologist) is a Ph.D. student in Criminal Justice, working as a data scientist at the John Jay Research and Evaluation Center. Misshula is currently a Presidential Fellow at John Jay. In 2014 and 2015, he will be a Digital Fellow at CUNY Graduate Center.
» Measure of Justice
» Evan Misshula on Github
Colin Rothfels (Technologist) is an artist and software developer based in Montreal. His software work revolves on automating the creative process. His most recent projects were focused on the automated and automation-assisted writing of poems using text collected from Twitter.
» anagramatron.tumblr.com
» @anagramatron
» @cmyr
Charles S. Roy (Media Maker) is a Montreal-based writer, publisher and filmmaker. A former Film Critic (Sequences, Cinemascope, Cahiers du Cinema) and FIPRESCI juror, Roy launched the LESEDSED Pub. Co. in 2012 and released his AQÉI Excellence Award-nominee “BIS, ou La politesse du débutant” the following year. NORIGINALS: The Art of Uncreativity is his debut multiplatform documentary.
Mark Slutsky (Media Maker) co-wrote and co-produced the feature comedy Peepers and co-wrote the feature documentary The Fruit Hunters. His shorts Sorry, Rabbi and The Decelerators both of which he wrote and directed, have played at festivals around the world. In 2013, he also co-directed and produced the animated short I’m One, Too! for Sesame Street. Mark Slutsky is also the founder-curator of SadYouTube.com, which has been featured in Der Spiegel, Der Zeit, Buzzfeed, Slate and other international publications.
» noriginals.tumblr.com
» Sad YouTube
» @totallyslutsky
» @NORIGINALS_doc
The Angola Project
Click on the image to interact with the The Angola Project prototype, developed at POV Hackathon.
Launch the demo »
View the source code »
Team: Jeremy Xido, Vivian Tse, Brian Chirls.
About the Project: Civil war destroyed Angola’s Benguela railway, which opened the African interior to commerce in the 1920s. Now it’s being rebuilt by Chinese workers. A filmmaker has traveled the route and is sharing his personal connections in an interactive documentary.
Technology:
- HTML5 video: All of our video assets are rendered in hidden HTML video elements. Compared to Flash and hosted video platforms (e.g. YouTube), HTML5 video allows fine-grained seeking and time reporting and post-processing with a Javascript canvas API. Because we encode and host the videos ourselves, we can choose the best resolution and bit rate for our specific application.
- WebGL – Seriously.js and Three.js: WebGL allows extremely fast graphics processing with GPU hardware via a JavaScript API, and Seriously.js and Three.js are high-level libraries that simplify WebGL for specific purposes. Seriously.js is a real-time video post-processing tool that we use for color transition and the “video painting” effect. We use Three.js to create the 3D navigation space.
- GitHub: We used GitHub to host both our code and the live version of the site with all media assets.
- Final Cut Pro 7 and Adobe Premiere Pro : We used FCP7 and Premiere Pro to edit both video and audio content used in the basic narrative sections of the project.
- Adobe After Effects: We used After Effects to build a 3×3 grid to be used on rotating cubes of imagery and video used in the wonder chamber portion of the experience.
Brian Chirls (Technologist) Brian Chirls is creative developer based in New York, known for a range of online innovations, first with the groundbreaking film Four Eyed Monsters, and continuing with interactive stories and video for the web.
» Personal site and blog
» @bchirls
» Brian Chirls on Github
Steve Cordova (Technologist) is a second year graduate student in the ITP Program at NYU. He is currently working on physical computing projects with Arduino microcontrollers and continuing to further study human-computer interaction (HCI). He recently installed a magnet in his finger and built a wearable device that allows people to feel color.
Vivian Tse (Media Maker) began her career working with Oscar-nominated producer Mark Gordon on a variety of films including Emmy-nominated And Starring Pancho Villa as Himself, as well as with Julie Taymor on Golden Globe-nominated Across The Universe. She moved on to produce for National Geographic and program for the Tribeca Film Festival. Her short film Preamble was awarded the Silver Lei Award at the Honolulu Film Festival in 2009. Her feature script Joe Boy was selected for the 2013 Nantucket Screenwriter’s Colony.
Originally from Detroit, Jeremy Xido (Media Maker) graduated cum laude from Columbia University in NYC and trained at the Actor’s Studio. A Fulbright grant took him to Europe where he was co-director of the Award winning film and performance group, CABULA6. Known as a performance artist with a unique artistic voice and approach to stage and film, blending emotionally gripping personal stories with the larger social contexts within which they emerge. Xido directed the film Death Metal Angola, among others. He lives in Harlem.
Bisbee
Click on the image to interact with the Bisbee Interactive Documentary prototype, developed at POV Hackathon.
Team: Allison Otto, Jeff Soyk, Brian Foo, Tony He.
About the Project: Bisbee, Arizona was once a thriving copper-mining town near the US/Mexico border, but its population has been dwindling due to isolation, the national recession and lack of opportunities for youth. “Bisbee” explores how the community has been reinventing itself by repurposing existing spaces and linking the disparate cultural identities of its residents.
Technology: This prototype is best viewed on a modern browser using a touch tablet with webcam enabled. Tested and developed on the latest versions of Chrome.
- JavaScript: Our prototype is entirely built in the front-end using jQuery
- CSS3: For styling, transitions, and animations
- HTML5: Heavily uses the canvas element for image manipulation effects such as brushing and masking
- HTML5 Media Capture: for capturing video feed from user’s webcam
- jQuery UI: for dragging and sliding interactions
- Hammer.js & jQuery Touchpunch: used to enable interactions on touch devices
- Google Maps API: for generating custom maps on the fly
- Photoshop: for creating the design assets such as buttons, controls, and images
- Github: for version control and collaboration between developers
Brian Foo (Technologist) is an application developer at NYPL Labs, an experimental design and technology team working to re-imagine The Library for the Internet age. Brian is also an artist whose art books raised over $30K on Kickstarter and featured in The Atlantic and Curbed.
Tony He (Technologist) has been a software developer since 2006. His languages and technologies include: Java, Spring Framework, SQL, Ajax, JavaScript (DOM, CSS, etc.), as well as basic shell scripting (Unix flavors).
Allison Otto (Media Maker) is an award-winning documentarian and photographer. Her most recent film, Keeper of the Mountains was included in Outside magazine’s list of “Best Adventure Films of 2013.” She graduated from Stanford University and splits time between Colorado and Bisbee, Arizona where she volunteer teaches videography and photography to local youth.
» bisbeedocumentary.tumblr.com
Jeff Soyk (Media Maker) is an award-winning media artist. His passion for meaningful storytelling has lead to creating engaging experiences with a positive impact. Soyk has a B.F.A. in New Media Design from Rochester Institute of Technology and an M.F.A. in Media Art from Emerson College.
» jeffsoyk.com
» @jeffsoyk
» Hollow Documentary
Both Here And There
Click on the image to interact with the Both Here and There prototype, developed at POV Hackathon.
Launch the demo »
View the source code »
Team: Christopher Allen, Alison S. M. Kobayashi, Oliver Budiardjo, Olivia Koski, Ilana Strauss, Patricia R. Zablah.
About the Project: A mobile addition to a broad project produced by UnionDocs “Living Los Sures,” using the storytelling platform Creatavist. It is a prototype that takes advantage of mobility by motivating navigation through the story with real time physical motion. As you walk forward in physical space, you advance through the story.
Technology: This prototype is best experienced on iPhone 5C. It’s best to experience it while wearing workout clothes.
- Creatavist as our Content Management System
- Google Docs, to share the information
- Apple’s iOS location services.
- jQuery to traverse the HTML Document, handle the events and manipulate objects in the DOM.
- HTML/CSS/Javascript, to animate the assets and build the structure for the Creatavist templates.
- Photoshop for creating the animated gifs and image assets.
- Final Cut Pro 7 for Video Editing.
- QuickTime 7 for creating image sequences.
- GitHub, to share code while working.
- Stack Overflow, for debugging code.
- iPhone 4, iPhone 5 and iPad mini.
- xCode for local builds of native codes inside of Creatavist.
Christopher Allen (Media Maker) is the founder and Executive Artistic Director of UnionDocs. His individual documentary projects and collaborative productions have been exhibited in galleries, museums and cinemas internationally. He directed Capitol of Punk, one of the earliest web-documentaries, and was a creator of Yellow Arrow, a seminal locative mobile storytelling project.
» UnionDocs
» UnionDocs on Facebook
Oliver Budiardjo (Technologist) Oliver has been developing for the Android platform since graduating from New York University, where his studies focused on mathematical computing. His interest in mobile application development is motivated by making the future of technology work for its users. His other interests include music and food.
Alison S. M. Kobayashi (Media Maker) is an artist working in video, performance, installation and drawing. She was born in Mississauga, Canada where she received a BA from the University of Toronto. She now lives in Brooklyn where she is the Director of Special Projects at UnionDocs, a Center for Documentary Art.
» asmk.ca
» susanmiyoko.tumblr.com
» @asmkobayashi on Instagram
Olivia Koski (Technologist) teaches multimedia storytelling as Head of Community at Atavist, the makers of the Creatavist publishing platform. Prior to Atavist, she worked as a research engineer and technology transition manager. In her spare time, she dabbles in documentary filmmaking and produces interactive theater with Guerilla Science.
Ilana E. Strauss (Technologist) is a digital design ninja with experience designing for print, web, mobile, and tablet.
Patricia R. Zablah (Technologist) is a current Master’s degree candidate at the Interactive Telecommunications Program (ITP) at NYU. She is a creative technologist, researcher, artist, entrepreneur and writer, primarily focusing on gender equality, the public and performance arts, storytelling and human rights relating to immigration.
» Patricia Zablah’s Portfolio Website
» Hack It Back: Thesis Project
» @patriciarzablah
Karachi Circular Railroad
A still from the Karachi Circular Railroad prototype
Note: Not all links in prototype are live.
Team: Ivan Sigal, Elizabeth Kilroy, Gary Chan, Steve Maing.
About the Project: This nonlinear interactive documentary immerses viewers with the sights and sounds of Karachi, tracing the path of the defunct Karachi Circular Railroad to explore the city’s neighborhoods and topographies.
Technology: This prototype can only be viewed in Chrome.
- BigVideo JS: This jquery plugin from John Polacek makes it possible to add fit-to-fill background video to websites. It can switch a still image for the video on devices that don’t have auto play for ambient video. This Hackathon concept is based on ambient video and still photography so this plugin is a must.
- Video.js: Big Video uses Video,js from Zencoder, an open source HTML 5 Video Player. The Video.js API allows you to control the video through JavaScript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
- JavaScript: There are several times we uses custom javascript to time the length of videos and have them load another video when one completes. We also used custom JavaScript for hidden button areas to bring you back to our main drone page. This was done for speed when we were presenting and would not be used in future versions. We also used JavaScript to make image rollovers.
- Google Fonts: We imported the font Source Sans Pro from Google fonts.
- HTML5: This is the skeleton core of any web page so all pages use HTML5. We used HTML5 audio controls to play mp3 sound files.
- Photoshop: We used PS for building the circular navigation elements on the mini site. We also used it for resizing, converting and compressing very large Camera Raw files. All the images used on the site were re-sized via Photoshop.
- Final Cut Pro: Final Cut was used to edit the video and stills with ambient audio that are triggered during the program navigation.
- jQuery.min.js: a compressed version of jQuery.js. This is one of Big Video dependencies and is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML
- jQuery-ui.min.js – jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library and is also a Big Video dependency.
- Modernizr.js: A JavaScript library that detects HTML5 and CSS3 features and allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them
- Normalize.css: A small CSS file that provides better cross-browser consistency in the default styling of HTML elements
- Miro and MPEG Streamclip: We used these tools to convert camera video to HTML5 web friendly video. This converts very large files and compresses them and allows you to save them as various web friendly files types which work on different browsers.
Gary Chan (Technologist) is a front-end developer, designer and entrepreneur who has attended more than forty hackathons. He is interested in utilizing technical skills in assisting not-for-profit endeavors.
» garyyauchan.com
» Gary-Yau Chan on LinkedIn
Elizabeth Kilroy (Designer) is a award-winning web designer and adjunct professor. Along with classes in Multimedia & Transmedia, Intro to New Media, Web Design and Visual Thinking, she teaches in the Magnum/NYU Human Rights Summer Program. She is an ITP graduate.
» callandesign.com
» @callande
» whatworksdoc.org
» 7 New York Stories
Steve Maing (Media Maker) is a New York based filmmaker. He is a fellow of the Sundance Institute’s Documentary Film Program and a grant recipient of the MacArthur Foundation, New York State Council on the Arts, and the Independent Television Service. He recently directed two New York Times short documentaries and has produced and directed an on-going series of short films about policing and the criminal justice system, The Hunted & The Hated and The Target. His recent film High Tech, Low Life won Best Documentary awards at the Independent Film Festival of Boston and the Little Rock Film Festival, and Best Cinematography at the Woods Hole Film Festival. Most recently, Stephen was awarded a 2013 Grierson Award, one of the U.K.’s highest documentary honors in the category Best Newcomer Documentary. Stephen works on documentary and narrative films as a director, editor and cinematographer and teaches summer classes in documentary cinematography at the Massachusetts College of Art in Boston.
» High Tech, Low Life Official Site
» stephenmaing.com
» @HighTechFilm
» @mainmaing
Ivan Sigal (Media Maker) is the executive director of Global Voices, a non-profit online global citizen media initiative. He is a fellow at the Berkman Center for Internet & Society at Harvard University. He is the author of White Road (Steidl, 2012), a two-volume book of photography and writing about Central Asia.
» Global Voices
» ivansigal.net
» White Road
» @ivonotes
One Way Home
Click on the image to interact with the One Way Home prototype, developed at POV Hackathon.
Team: Liss LaFleur, Kyle Ranson-Walsh, Edward Wisniewski, Dave Hall.
About the Project: Since the 1990?s, a grassroots charity has been reuniting Texans affected by AIDS with their families for what is often their last trip. One Way Home is an interactive documentary that places viewers within the AIDS epidemic though these travelers’ stories.
Technology: The prototype is best viewed in Chrome.
- jQuery: DOM manipulation
- HTML5 (Audio): Depend on native browser support for outputting audio
- JavaScript: DOM manipulation
- dataMaps: Used for data parsing, and DOM insertion of statistical data
- d3.js: Used to display dataMaps output
- Github for version control and collaboration
- Vagrant: Used to simulation production environment for testing, and demoing purposes
- Stylus: Preprocessor for CSS, helped with code maintainability
- Node, Nodefront: Used to simulation production environment for testing, and demoing purposes
- Adobe Photoshop CS6, Adobe Premiere CS6, Adobe AfterEffects CS6: Created design mockup, and prototype. Created visual assets for site.
Liss LaFleur (Media Maker) is a documentary storyteller and new media artist from Texas. Her work investigates identity, gender + sexuality, loss, and historic parallelism. LaFleur is a Media Art Fellow at Emerson College and in the Fall of 2014 she will be the Visiting Artist in Digital/New Media at Davidson College.
» Liss LaFleur’s Portfolio Website
Dave Hall (Technologist) loves to be on the bleeding edge of web development and is obsessed with automation and efficiency. While Dave’s been problem solving his whole life, he’s spent the last five years gazing into a vertical monitor to order elegant experiences for the web. Dave has completed coursework in the Information Systems MS program at Brooklyn College and also holds a Masters Degree in General Psychology from City College and a B.A. in Psychology from Binghamton University. If you’re not careful, he might psychoanalyze you while building you a world-class website.
» Radish Lab
» Dave Hall on Github
Kyle Ranson-Walsh (Media Maker) is a producer & creative strategist. He spent a decade immersed in animation production at Pixar Animation Studios (Ratatouille, WALL•E, UP, Cars 2, The Blue Umbrella). In 2013 he independently produced the award-winning live-action short Cologne. Ranson-Walsh is a graduate of CCA’s innovative MBA in Design Strategy program.
» kyleransonwalsh.com
» Cologne
» madlyin.com
Edward Wisniewski (Technologist) is a skilled interactive storyteller and digital technologist. Combining a rich understanding of creative design and standards-based development, Edward creates immersive and interactive digital experiences. With over 10 years of experience, he’s an expert in user interfaces, understanding user experience, creating rich web experiences, HTML5 based animation, email marketing and agile based development.
Mentors
POV Hackathon mentors play a critical role in providing feedback, project management, therapeutic counselling… whatever is needed at any time to help the teams get their prototypes presentation-ready over the course of the weekend. At POV Hackathon 5, five mentors shared their expertise with the teams, and we can’t thank them enough for their time and for sharing their wisdom.
Ann Bennett is a filmmaker, writer, and transmedia producer. She has worked on a host of documentaries and new media projects for public television, cable networks, and museums. Ann’s goal is to explore the nexus of history, culture, and technology.
Amanda Hickman is an innovative leader in online reporting and media strategy and has deep experience working with low income communities in New York City and across the US. Amanda has spent more than a decade working at the intersection of journalism and civic engagement, reporting on local and international events and helping community organizers understand and draw their membership into the political process.
As Director of Technology at Gotham Gazette, her work won numerous awards, including multiple notable entries to the Knight Batten Awards for Innovation in Journalism and an award in General Excellence in Online Journalism from the Online News Association and a Knight News Challenge Innovation grant. In 2009, Amanda left Gotham Gazette to launch DocumentCloud, an award winning reporting tool and catalog of primary source documents now used by thousands of journalists around the world.
Amanda now teaches multimedia storytelling and data visualization at the CUNY Graduate School of Journalism, and has taught reporting at Columbia’s Journalism School, where she also helped launch The New York World. As a consultant, she works with diverse clients who share a genuine interest in reaching new audiences and engaging them in campaigns and reporting. In addition to Union Settlement House, her current client list includes Studio Rev, a visionary pioneer in transmedia and interactive storytelling, and Adapt NY reporting project that is expanding citizen involvement in New York City’s climate adaptation planning.
» Amanda Hickman at CUNY Graduate School of Journalism
Takaaki Okada is a creative director & advisor, photographer, and filmmaker. His clients include: The National Film Board of Canada, Sundance, Diller Scofidio + Renfro, Magnum, and Bloomberg. He co-founded a video technology company, Condition One. His work for One Laptop Per Child is in the permanent collection at MoMA.
Joe Posner works at the intersection of documentary film and motion design. He has contributed design and animation to several documentary films, most recently the Tribeca-winning Point And Shoot. He recently became Video Director for Ezra Klein’s new explanatory journalism site Vox.com
Emma Raynes is a Program Director at the Magnum Foundation, where she supports photographers to cover under-reported stories on pressing global issues. Through the Magnum Foundation’s Photography, Expanded initiative Raynes inspires photographers to form interdisciplinary partnerships and apply new tools and approaches to their socially engaged narratives. Raynes earned a BA in Art History from Bowdoin College and an MA in Cultural Anthropology from the New School for Social Research. She is the recipient of several awards for research and photography, including a Hine Fellowship from Duke University’s Center for Documentary Studies.
» Photo Expanded on Facebook
» Magnum Foundation
Judges
The prototypes were presented to a public audience and judges who represent a cross-section of the documentary and technology industries. POV Hackathon 5’s judges consisted of Brent Hoff (IDFA Doc Lab | NY Media Center), Ingrid Kopp (Tribeca Film StoryScapes) and Edwin Torres (Rockefeller Foundation).
If you missed any of them, here are links for quick access to the POV Hackathon 5 prototypes:
» Noriginals: The Art of Uncreativity (Participants’ Choice Award winner)
» The Angola Project
» Bisbee
» Both Here and There
» Karachi Circular Railroad
» One Way Home
Want to see more? View the prototypes from POV Hackathon 1 (August 2012), POV Hackathon 2 (January 2013), POV Hackathon 3 (April 2013), and POV Hackathon 4 (July 2013).
Keep up with developments at POV Hackathon: Subscribe to POV’s documentary blog, like POV on Facebook or follow us on Twitter @povdocs!