I just got back from New York City and I am happy to announce that Buttercamp was a success! Buttercamp took place at the ITP labs of New York’s Tisch School of the Arts. It was a hack session sponsored by the WebMadeMovies project. The idea behind the hack session was simple – Make cool HTML5 demos using popcorn.js and butter.js (Butterapp – The Popcorn.js Authoring Tool) and any other tool you find. In preparation for the day Brett Gaylor and Ben Moskowitz (who did an awesome job organizing btw) reached out to artists, filmmakers and designers. Ben also had some of his students attend. Anyone interested in participating simply had to fill out a form proposing their idea or project. The requirements were simple, you had to have an HTML5 video, a story to tell, and a developer who knew their way around the web. Each project group was assigned a popcorn.js and butter.js expert to help with the JavaScript part of the demo. The process was flawless. The filmmaker/artist explained their idea and their vision and started annotating their video. The team developer worked on the look and feel. The popcorn.js/butter.js expert started on the functionality. Watch the Video Blog.
The Groups
#18daysinegypt
You can read more about the project on their website. The inspiration for their buttercamp demo came from the current conflict in Egypt. The idea was to produce a non linear timeline. The main video was positioned to take over the entire screen. The video was of a protest happening on a bridge. As the video played information about the location appeared on the screen like Wikipedia articles, close-up photos of the protesters, and even videos of protesters being interviewed. The main challenge for this demo was getting content that was related. Who was on this bridge tweeting posting photos to Flickr etc. as the protest was happening. The main video showed one angle of the protest but the extra data formed a bigger however an incomplete picture. The question remains: how does one go about getting the whole story from every angle. Demo links here!
through a lens darkly
You can read more about the project on their website. The teams wanted to showcase the work of Sylvia Isabe using butter.js. Since this project has a lot of material, it is fair to say that they wanted to get a deeper understanding of how the tools work so that they can use their knowledge and apply it to future work. The team’s tinkering led to an improvement made to the butter.js tool. An import/export tool! The feature is still in review but the idea is to be able to import work previous done using the tool in order to make changes and add content. Demo links coming soon!
everything is a remix
This project aims at revealing how a particular video came to be. Which resources were used in its making and how the content was “remixed”. This was more of a proof of concept than an actual demo request. Kirby Ferguson and I worked on this. Kirby wanted to explore an interface that jumped down rabbit holes for more stuff to watch/learn. Kind of like Jonathan’s Donald Duck demo however instead of having information around the video provide the ability for the user to see the original clip in a clear way. Kirby came up with a simple wire-frame:
When the main video came to a point where an original source video was available a button would appear. In this case we had two source videos. When the user clicked the button a new video would open up on top of the original with extra content (in this case an amazon link). As a result of this we realized that we need a video plugin in popcorn.js which i took some time at the beginning of the day to develop. It is currently making its way into the review process. The main challenge of this demo was CSS. The position of the second video on top of the video proved to be oddly challenging and at the end just did not work. Temporarily you can view the demo here. The idea that Kirby wanted to explore is possible however it really need a designer to make it work.
robots
The idea of the buttercamp demo was to provide a non-linear type of story telling. The user made their own experience by choosing a path to explore. Bobby, a new member of the webmademovies/Mozilla team did an awesome job fine tuning the demo. View it here (Firefox only for now).
Graffiti Markup Language (GML)
The GML project has been around for some time. You can read about it on their website. The video aimed at connecting graffiti with video. A GML popcorn.js plugin is already in the works. The demo can be viewed here (it is most likely getting tweaked as you read this) a similar but different demo can be viewed here.
Tubeyloops
Tubeyloops’ focus was actually remixing video. You can read the project proposal. Greg Dorsainville had a vision of having multiple videos and allowing the user to remix them on the fly in order to produce a finished product. What ended up happening here was AWESOME and hopefully in time I can link you to a blog explaining more. Data from pattern sketch was used to alter the video’s audio and to produce sequences of the final product. How it worked: There were four video clips each linked to a button on the keyboard (QWER). When one of the buttons were pressed the corresponding video played until another button was pressed. A real unique remix was formed each time the demo was used.
Individuals
There were a lot of people there, including Ben’s students, that wanted to learn more about HTML5 video and popcorn.js. We had about an hour dedicated to them in order to provide an overview of what HTML5 was and what you can do with it and just an overall tutorial on using popcorn.js and butter.js. As a result of this group using butter.js a number of bugs have been filled in order to improve the Butterapp – The Popcorn.js Authoring Tool
Lessons Learned
The day went great, participation was through the roof, and the demos were mind-blowing. However, as with most things in this world, Buttercamp can use some improvements.
- The day was way too long. We started at 9:30 am and finished at 10pm. I would say we started seeing people leaving around 4pm. A little less than half of the people stayed for the show and tell at the end.
- More designers were needed. A lot of the demos were centered around the design. I already talked about CSS being the only thing blocking my demo from doing what it is supposed to do. On days like this design experts are needed to fine tune the demo once all of the content has been collected.
- A server to host all of the demos. It would be nice to allow people to ftp their demos as they were working on them. It definitely would have made this blog better, but it would also eliminate the time it will now take to get all of the demos from each team.
Photos
Conclusion
Buttercamp was fantastic. If you missed it maybe you can start a petition to get Buttercamp going in your town. The day went smoothly and encountered no real problems. Everyone had a great time collaborating and sharing ideas. If you attended buttercamp please share your stories, pictures, and results.
Anna on Computing 