How To: p5JS Welcome Video

pranjalchaubey

The p5JS guys have put up a fantastic introductory video on the website. This one, http://hello.p5js.org/

It is basically an interactive HTML5 video demonstrating amazing capabilities of p5. I want to know how they have done it? As in, have they put up this introductory video code somewhere on Github? Simple analysis of the HTML page tells me that they have been using Popcorn, Seriously along with p5 (of course). It would be great if the source code is also out there somewhere.

So far I have successfully managed to create a video element, control it through code, overlay/inject HTML 5 elements on the video itself all by using p5JS only. But I am not able to render (or, if I may use the word, 'inject') a p5JS sketch on the video. How to accomplish this? They have managed to do this in that Intro Video above.

pranjalchaubey

Ok, my bad! They have not minified and mangled the backend script. So you can simply check out the source by doing Ctrl+Shit+i (on Chrome).

jeremydouglass

@pranjalchaubey --

These might be useful -- the first link might be what you are looking for...?

1. https://github.com/scottgarner/p5.js-video
2. 10.8: Video Effects with Seriously.js - p5.js Tutorial by Dan Shiffman
3. Working with video by Allison Parrish
4. p5.js examples: video

Also if that doesn't give you a working example you should consider contacting Lauren and Dan and asking them where the example code is -- and sharing the answer here!

pranjalchaubey

@jeremydouglass - Yes, I got what I was looking for in your answer. Thank you so much!