Hello P5.js Webpage

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.

Shout Outs

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 contributed survey responses, videos and code:

Video & Code Contributors (in alphabetical order)

Mayra Barrera Machuca
Uddipana Baishya
Punyashlok Dash
Miguel Elizalde
Tristan Espinoza
Max Frischknecht & Philipp Möckli (Début Début)
Dongqi Han
Kate Hollenbach
Vincent Hopkins
Cat Janowitz
Brennan Jones
Sam Kissee
Zach Krall
Ginger Kretschmer
Peter Manson
Gavin Mogan
Seyitan Oke
Suraj Rai
@reona396
Eliza Struthers-Jobin
Dan Weiner
Sailor Winkelman
Computational Thinkers® of Hawaii
STEM Coding
Other members of the p5 community
Music By Ah, Venice
Video Consulting by Joey Chaos

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

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

To Install & Set Up Repository

• First, ensure that node.js & npm are both installed. If not, choose your OS and installation method from this page and follow the instructions.

git clone XXX.XX
cd hello-p5
npm install

npm run watch will start a new server, open up a browser and watch for any SCSS or JS changes in the src directory , as well as any changes to the video fonts and captions in the src directory; once it compiles those changes, the browser will automatically inject the changed file(s)

This project's Build Process is based of the NPM Build Boilerplate: https://github.com/damonbauer/npm-build-boilerplate

Support

If there are any issues with the website, please open an issue.