ContextQMD
Back to P5 Js

Updating hello.p5js.org

contributor_docs/project_wrapups/elginmclaren_gsoc_2018.md

2.2.33.5 KB
Original Source

Updating hello.p5js.org

Overview

The goal of this project was to modernize the hello.p5js.org website though development of a new trailer featuring diverse members of the Processing community.

Project Description

hello.p5js.org is likely to be many users’ first introduction to p5.js (and possibly Processing as well). As these individuals may be brand new to coding, it is important that this webpage be inviting, interesting and informative.

Tasks Completed

  • Met with Lauren McCarthy and mentor to determine requirements for the new hello.p5.js website
  • Created a new code-base for the project using modern web tools (eg: Node, Browserify, Plyr)
  • Enabled multilingual captioning on video player using WebVTT files
  • Wrote code to toggle between languages using non-HTML video controls
  • Developed a survey to gather feedback from the community regarding what they use p5js for, and what they like about it
  • Promoted survey on Github, Processing Forum, and Twitter
  • Analyzed results, identified key features, and incorporated feedback into a video script
  • Drew video storyboards for feedback from mentor and Lauren
  • Designed UX wireframes to illustrate how p5.js sketches would be overlayed on video content, how captions would appear, and how users would control the video
  • Recorded draft video as proof of concept for the final project
  • Recruited volunteers for the video through a second online survey
  • Corresponded with community leaders to ensure diverse representation in the video
  • Promoted second survey on Github, Processing Forum, and Twitter
  • Coordinated video making tasks with members of the community
  • Coded and modified p5.js sketches to be overlaid on the video content
  • Secured Spanish and French translation for video content
  • Consulted media professionals to ensure high quality look and feel
  • Procured background music samples from several musicians and gathered feedback from mentor
  • Edited video clips together using Adobe Premier, Audition, and After Effects

Challenges

  • Crowdsourcing the video content was fun and filled with delightful suprises; however, it was challenging to coordinate video-making tasks with community members over the summer (e.g. tight GSOC time constraints, people's summer vacations).
  • Creating a dynamic, post-production greenscreen effect was more difficult than I imagined. Using seriously.js for the canvas background removal worked well; however, setting videos to a neutral background color in After Effects was difficult without a neutral background.
  • When incorporating browserify to pre-process my javascript, I missed one crucial line of code. This required tremendous digging to figure out why it wouldn't compile. It set me back several days, but I learned a lot!

Contribution & Next Steps

I created a video and draft website to launch the new and improved hello.p5js.org. Before going live, I will coordinate with Processing to ensure the site's content meets the Processing foundations’ standards. I will also make sure it loads properly across devices.

Dropbox folder (for video files): https://www.dropbox.com/sh/vcr58ughgedaj0k/AAC9y13UjjiMuXdcYKxaVmCOa?dl=0

Github Repo: https://github.com/emclaren/hello-p5

Acknowledgements

I would like to thank my mentor Evelyn Masso, and Lauren McCarthy for their support and feedback. I would also like to acknowledge the awesome community members who volunteered to be a part of this project.

I learned so much while working on this project - thanks to the Processing foundation for having me on the team.