11.8: Video Effects with Seriously.js - p5.js Tutorial

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=jdKep6jo7b0


Category:
Tutorial
Duration: 17:30
29,481 views
480

In this video I cover how to combine seriously.js with p5.js for real-time manipulation of video in the browser. I look at a Gaussian blur as well as chroma key.

Seriously.js: http://seriouslyjs.org/

All examples: https://github.com/CodingTrain/Rainbow-Code/tree/master/Tutorials/P5JS/p5.js_video/10.8_p5.js_seriously

Contact: https://twitter.com/shiffman

Learn JavaScript basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Learn HTML / CSS basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

Working with Data / APIs:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r

More about image processing in Processing:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YB9x6f23CBftiyx0u_5sO9

Help us caption & translate this video!

http://amara.org/v/Qbsx/

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct



Other Videos By The Coding Train


2016-04-191.1: Introduction - Git and GitHub for Poets
2016-04-19Coding Train Live 32: Git and GitHub Tutorial and the Snake Game
2016-04-17Coding Challenge #2: Menger Sponge Fractal
2016-04-13Coding Train Live 31: Shape Morphing and Menger Sponge in Processing
2016-04-1312.2: Using Express with Node - WebSockets and p5.js Tutorial
2016-04-1312.3: Connecting Client to Server with Socket.io - WebSockets and p5.js Tutorial
2016-04-1312.1: Introduction to Node - WebSockets and p5.js Tutorial
2016-04-1312.4: Shared Drawing Canvas - WebSockets and p5.js Tutorial
2016-04-12Coding Challenge #1: Starfield in Processing
2016-04-12Code Train Live 30: Creating Real-Time Shared Canvas with WebSockets
2016-04-1111.8: Video Effects with Seriously.js - p5.js Tutorial
2016-04-1111.7: Slit-Scan Video - p5.js Tutorial
2016-04-0811.3: Slit-Scan Video - Processing Tutorial
2016-04-08Coding Train Live 29: Processing and p5.js - Slit-scan and Seriously.js
2016-04-0714.3: Dynamic Text (contenteditable attribute) - Hamilton Lottery Simulator with p5.js
2016-04-0714.1: The Mathematics (Probability, Logarithm) - Hamilton Lottery Simulator with p5.js
2016-04-0714.2: The Code (HTML, CSS, and JavaScript) - Hamilton Lottery Simulator with p5.js
2016-04-07Coding Train Live 28: Hamilton Lottery Simulator - Probability and DOM
2016-04-0611.6: Painting with Pixels - p5.js Tutorial
2016-04-0511.5: Checkbox Mirror - p5.js Tutorial
2016-04-05Coding Train Live 27: Checkbox Mirror and Painting with Pixels in p5.js


Tags:
seriously.js
seriously js
seriously.js tutorial
seriously.js blur
p5.js
p5 js
javascript chroma key
html5 (api)
video
p5
js
JavaScript
html5
canvas
javascript (programming language)
tutorial (media genre)
html (programming language)
image processing
creative coding
tutorial
education
capture
seriously.js p5.js
gaussian blur
programming
blur
blur tutorial
chroma-key
chroma key
greenscreen
p5js
javascript blur
seriously
p5.js tutorial