Coding Train Live 109: WebGL with p5.js

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


Duration: 2:39:53
14,993 views
506

In this live session, I explore the p5.js WEBGL renderer. I cover some fundamentals and attempt a viewer-suggested coding challenge to recreate a classic beesandbombs GIF.

Timestamps:
20:55 - Introduction to WebGL in p5.js
36:05 - 3D Geometry
50:55 - Lights and Material
1:51:36 - Coding Challenge: Bees and Bombs

πŸš‚ Website: http://thecodingtrain.com/
πŸ‘Ύ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://thecodingtrain.com/discord
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— p5.js: https://p5js.org
πŸ”— p5.js Web Editor: https://editor.p5js.org/
πŸ”— Processing: https://processing.org

References:
Bees and Bombs on Twitter: https://twitter.com/beesandbombs/status/940639806522085376
2017 Google Summer of Code Grand Wrap-Up Post: https://medium.com/@ProcessingOrg/2017-google-summer-of-code-grand-wrap-up-post-16680b1438db
Three.js: https://threejs.org/
The Coding Train on Amazon: https://www.amazon.com/shop/thecodingtrain
p5.js reference: https://p5js.org/reference/
Bees and Bombs: https://beesandbombs.tumblr.com/

Videos:
p5-manager: https://youtu.be/LdWleSHQTcw
Simple Harmonic Motion: https://youtu.be/GvwPwIUSYqE

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

For More Live Streams: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bxnFR6no70vlxxuxDEzflz

Help us caption & translate this video!

https://amara.org/v/dXkl/

πŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct



Other Videos By The Coding Train


2017-12-2218.3: Light and Material - WebGL and p5.js Tutorial
2017-12-20Coding Challenge #87: 3D Knots
2017-12-19Live Stream Archive - ITP Winter Show 2017
2017-12-1918.2: 3D Geometries - WebGL and p5.js Tutorial
2017-12-1818.1: Introduction to WebGL in p5.js - WebGL and p5.js Tutorial
2017-12-17Live Stream #111: More WebGL with p5.js!
2017-12-167.8: Objects and Images - p5.js Tutorial
2017-12-15Coding Train Live 110: WebGL with p5.js Continued
2017-12-1516.4: for...of loop - Topics of JavaScript/ES6
2017-12-147.7: Object Communication Part 2 - p5.js Tutorial
2017-12-13Coding Train Live 109: WebGL with p5.js
2017-12-137.6: Object Communication Part 1 - p5.js Tutorial
2017-12-11Coding Challenge #85: The Game of Life
2017-12-09Coding Train Live 108: More OOP with ES6 & The Game of Life
2017-11-29Coding Challenge #84: Word Definition Extension
2017-11-2811.8: Cross-Browser Extensions - Programming with Text
2017-11-2711.7: Chrome Extensions: New Tab Override - Programming with Text
2017-11-2211.6: Chrome Extensions: Pop-ups Messaging - Programming with Text
2017-11-2111.5: Chrome Extensions: Pop-ups - Programming with Text
2017-11-20Coding Challenge #83: Chrome Extension with p5.js Sketch
2017-11-18Live Stream #107: Chrome Extensions Continued


Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
live stream
itp nyu
class
webgl
threejs
3d javascript
3d canvas
webgl p5js
p5js 3d
3d animation
3d animation javascript
3d lights
3d material
simple harmonic motion
p5.js
p5.js tutorial
3d
javascript
programming challenge