yt:channel:vjgXvBlbQiydffZU7m1_aw vjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2006-07-03T18:24:29+00:00 yt:video:IF414I26_K8 IF414I26_K8 UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-12-01T16:08:26+00:00 2024-12-20T11:36:40+00:00 3D Pose Estimation with ml5.js Building on BodyPose in ml5.js, this video explores the 3D capabilities of the BlazePose model, visualizing poses in a 3D space using WEBGL in p5.js. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/7-bodypose/blazePose 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-3d-pose-estimation-with-ml5js p5.js Web Editor Sketches: 🕹️ BlazePose 3D: https://editor.p5js.org/codingtrain/sketches/ftALPDieT 🕹️ BlazePose Lerp: https://editor.p5js.org/codingtrain/sketches/JMhDRpcxi_ 🎥 Previous: https://youtu.be/T99fNXTUUaQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/vfNHdVbE-l4?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 💻 ml5.js: BodyPose: https://docs.ml5js.org/#/reference/bodypose 📄 On-device, Real-time Body Pose Tracking with MediaPipe BlazePose: https://research.google/blog/on-device-real-time-body-pose-tracking-with-mediapipe-blazepose/ 📄 3D Pose Detection with MediaPipe BlazePose GHUM and TensorFlow.js: https://blog.tensorflow.org/2021/08/3d-pose-detection-with-mediapipe-blazepose-ghum-tfjs.html 📄 BlazePose GHUM Holistic:: https://arxiv.org/pdf/2206.11678 Videos: 🚂 https://youtu.be/T99fNXTUUaQ 🚂 https://youtu.be/76fiD5DvzeQ 🚂 https://youtu.be/o9sgjuh-CBM Timestamps: 0:00 Introduction 2:00 Incorporating BlazePose model 2:37 What are the xyz values? 4:30 Replace live camera with recorded video. 5:49 Render with p5.js WEBGL 7:48 Use scale() to expand range of xyz values 9:00 Creating 3D scene 9:58 Rotating scene. 11:24 Using orbitControl() 12:22 Using 3D shapes 13:42 Goodbye! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearningml #webcam #posedetection #ml5js #movenet #blazepose #ml5js #javascript yt:video:R5UZsIwPbJA R5UZsIwPbJA UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-11-16T17:39:30+00:00 2024-12-21T20:48:10+00:00 Face Mesh Detection with ml5.js In this video, I explore the FaceMesh model using ml5.js. I demonstrate how to track all 468 face landmark positions as well as texture map an image onto the triangular mesh with uv coordinates. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/facemesh 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-facemesh-with-ml5js p5.js Web Editor Sketches: 🕹️ FaceMesh - Keypoints: https://editor.p5js.org/codingtrain/sketches/KHm9CI2RJ 🕹️ FaceMesh - Part: https://editor.p5js.org/codingtrain/sketches/HaGkT63qG 🕹️ FaceMesh - Custom List (Lips): https://editor.p5js.org/codingtrain/sketches/CYL9bQtvc 🕹️ FaceMesh - Centered Face: https://editor.p5js.org/codingtrain/sketches/DGEuFKf87 🕹️ FaceMesh - Triangles: https://editor.p5js.org/codingtrain/sketches/EjIrb89WY 🕹️ FaceMesh - Texture Map: https://editor.p5js.org/codingtrain/sketches/zUKp9n4MW 🕹️ FaceMesh - 3D: https://editor.p5js.org/codingtrain/sketches/zUKp9n4MW 🕹️ FaceMesh - Blow Bubbles: https://editor.p5js.org/codingtrain/sketches/Mf74RjP92 🕹️ FaceMesh - Stretch and Skew: https://editor.p5js.org/codingtrain/sketches/tS6bxPzmE 🎥 Previous: https://youtu.be/vfNHdVbE-l4?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/2h8VArJ3gnQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 💻 ml5.js: https://ml5js.org/ 🎹 Mouth Controlled Synteszier: https://jackbdu.com/blog/mouth-controlled-synthesizer/ 📄 Face and hand tracking in the browser with MediaPipe and TensorFlow.js: https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html 📄 Real-time Facial Surface Geometry from Monocular Video on Mobile GPUs: https://arxiv.org/pdf/1907.06724 📄 Face Mesh Model Card: https://drive.google.com/file/d/1VFC_wIpw4O7xBOiTgUldl79d9LA-LsnA/view ▵ Face Mesh UV Keypoints Map: https://developers.google.com/static/ml-kit/vision/face-mesh-detection/images/uv_unwrap_full.png 📄 Destructuring Assignment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ☁️ Clouds From Plane Window: https://en.wikipedia.org/wiki/File:Cloud_From_Plane_Window.jpg Videos: 🎥 https://youtu.be/FlBRSIz5AcQ 🚂 https://youtu.be/nMUMZ5YRxHI Related Coding Challenges: 🚂 https://youtu.be/Bxdt6T_1qgc 🚂 https://youtu.be/JunJzIe0hEo Timestamps: 0:00 Introduction 1:15 Technical background for the model 2:30 Related projects and inspiration. 3:01 Adapting handpose example to facemesh. 5:29 Keypoints and parts of the facemesh. 11:28 Face bounding box. 13:36 What is a mesh? Rendering the triangles 21:19 Texturing mapping with UV coordinates 30:48 FaceMesh in 3D 31:10 Goodbye! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearningml #facemesh #ml5js #texture #uvcoordinates #ml5js #javascript yt:video:gAhB6DDXHmo gAhB6DDXHmo UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-11-15T23:42:35+00:00 2024-12-22T15:45:39+00:00 What’s new in Nature of Code? yt:video:GybQOJfmnKA GybQOJfmnKA UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-10-31T11:41:42+00:00 2024-12-19T09:22:36+00:00 Spooooooooky ml5.js! Get the code and mask diagram at https://thecodingtrain.com/spooky yt:video:vfNHdVbE-l4 vfNHdVbE-l4 UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-10-29T14:41:27+00:00 2024-12-21T17:51:20+00:00 Hand Pose Detection with ml5.js In this video, I explore the HandPose model using ml5.js. I'll demonstrate how to track hand keypoints and create an interactive painting sketch using gestures. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/hand-pose 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-hand-pose-detection-with-ml5js p5.js Web Editor Sketches: 🕹️ HandPose - Keypoints: https://editor.p5js.org/codingtrain/sketches/o5wnL6esQ 🕹️ HandPose - Painting: https://editor.p5js.org/codingtrain/sketches/LCEHJm6PA 🕹️ Simple painting: https://editor.p5js.org/codingtrain/sketches/3VcKxx_GY 🕹️ HandPose Painting - Stroke Weight: https://editor.p5js.org/codingtrain/sketches/-C3Og5Wzs 🕹️ HandPose Painting - Color: https://editor.p5js.org/codingtrain/sketches/InzaVXI-R 🕹️ HandPose - Thumbs up or Thumbs Down: https://editor.p5js.org/codingtrain/sketches/0_qPHtsF_ 🕹️ HandPose - Particles: https://editor.p5js.org/codingtrain/sketches/t7l5pYDDI 🎥 Previous: https://youtu.be/T99fNXTUUaQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/2h8VArJ3gnQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 💻 ml5.js: https://ml5js.org/ 🏫 Introduction to ML for the Arts: https://github.com/ml5js/Intro-ML-Arts-IMA-F24 📺 Jack B. Du's YouTube channel: https://www.youtube.com/channel/UCUP34ETx7nvIbd4ypkR02hg 🎨 Jack B. Du's Instagram: https://www.instagram.com/jackbdu/ 💻 On-Device, Real-Time Hand Tracking with MediaPipe: https://research.google/blog/on-device-real-time-hand-tracking-with-mediapipe/ 📄 3D Hand Pose with MediaPipe and TensorFlow.js: https://blog.tensorflow.org/2021/11/3D-handpose.html Timestamps: 0:00 Introduction 1:23 Technical background of the model 3:52 Convert BodyPose to HandPose 5:54 Detecting more than one hand 6:14 Detecting handedness (left or right) 6:51 Creating a painting sketch with index and thumb 10:19 Add a layer using createGraphics() 12:40 Storing previous hand position to draw a line 14:17 Exercise ideas for you! 15:27 Goodbye! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearningml #webcam #posedetection #ml5js #handpose #ml5js #javascript yt:video:T99fNXTUUaQ T99fNXTUUaQ UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-10-17T00:24:06+00:00 2024-12-20T22:37:20+00:00 Pose Estimation with ml5.js Strike a pose! In this video, I explore the BodyPose model in ml5.js with MoveNet and BlazePose, showing how to track body keypoints and visualize 'skeleton' connections using live video. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/7-bodypose/pose-detection 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-pose-detection-with-ml5js p5.js Web Editor Sketches: 🕹️ BodyPose - single image: https://editor.p5js.org/codingtrain/sketches/WQrffEIsJ 🕹️ BodyPose - Nose: https://editor.p5js.org/codingtrain/sketches/AWrwZ_rSv 🕹️ BodyPose - Nose with Lerp: https://editor.p5js.org/codingtrain/sketches/9O6KbYyiX 🕹️ BodyPose - More Parts: https://editor.p5js.org/codingtrain/sketches/uPd6s2iVO 🕹️ BodyPose - Hat: https://editor.p5js.org/codingtrain/sketches/e_vqrMWcL 🕹️ BodyPose - 3D BlazePose: https://editor.p5js.org/codingtrain/sketches/ftALPDieT 🎥 Previous: https://youtu.be/fFzvwdkzr_c?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/FYgYyq-xqAw?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 💻 ml5.js: https://ml5js.org/ 🏫 Introduction to ML for the Arts: https://github.com/ml5js/Intro-ML-Arts-IMA-F24 💻 Common objects in Context Dataset: https://cocodataset.org/#home 🏫 Humans of AI: https://humans-of.ai 💻 Next-Generation Pose Detection: https://blog.tensorflow.org/2021/05/next-generation-pose-detection-with-movenet-and-tensorflowjs.html 📄 BlazePose Paper: https://arxiv.org/pdf/2006.10204 💃 PoseNet Sketchbook: https://googlecreativelab.github.io/posenet-sketchbook/ 🏅 Olympic Form: https://charstiles.github.io/olympicForm/ Videos: 🎥 https://www.youtube.com/watch?v=8uLVnM36XUc Timestamps: 0:00 Introduction 0:45 What is the BodyPose model? 3:28 Coco Dataset 4:04 Creative Inspiration 5:49 Start coding 8:58 Working with specific keypoints 15:39 Skeleton connections between the keypoints 17:57 Using dist() function 19:39 BlazePose 20:56 Outro Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearningml #webcam #posedetection #ml5js #movenet #blazepose #ml5js #javascript yt:video:pbjR20eTLVs pbjR20eTLVs UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-10-08T15:53:28+00:00 2024-12-22T02:14:42+00:00 Image Classification with ml5.js This video covers image classification in ml5.js 1.0. I demonstrate both the default MobileNet model as well as how to train your own classifier with transfer leraning and teachable machine. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification p5.js Web Editor Sketches: 🕹️ Image Classification: https://editor.p5js.org/codingtrain/sketches/A2W-0ayI5 🕹️ Image Classification with Webcam: https://editor.p5js.org/codingtrain/sketches/r9LjJqaw6 🕹️ Image Classification - Drag and Drop: https://editor.p5js.org/codingtrain/sketches/v1sAlvSHR 🕹️ Image Classification - Display label and confidence: https://editor.p5js.org/codingtrain/sketches/7zA6_MlIo 🕹️ Image Classification - Tint: https://editor.p5js.org/codingtrain/sketches/uHN5htRpC 🎥 Previous: https://youtu.be/jmznx0Q1fP0?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/QEzRxnuaZCk?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 💻 ml5.js: https://ml5js.org/ 🏫 Introduction to Machine Learning for the Arts: https://github.com/ml5js/Intro-ML-Arts-IMA-F24 📄 MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications: https://arxiv.org/abs/1704.04861 💻 Tensorflow.js port of MobileNet: https://github.com/tensorflow/tfjs-models/tree/master/mobilenet 💻 Image-Net: https://image-net.org/ 🎤 https://www.youtube.com/watch?v=40riCqvRoMs 🌐 Excavating AI: The Politics of Images in Machine Learning Training Sets: https://excavating.ai/ 🖼️ ml5 ImageClassifier: https://docs.ml5js.org/#/reference/image-classifier 📱 Teachable Machine: https://teachablemachine.withgoogle.com/ Timestamps: 0:00 Introduction 2:30 What is MobileNet? 4:53 What is ImageNet? 10:32 ml5.js Classifier Code! 21:19 Incorporating Live Video 24:51 Training your own model Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearningml #webcam #imageclassification #ml5js #mobilenet #ml5js #javascript yt:video:MazpwQNdJYQ MazpwQNdJYQ UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-08-18T13:57:10+00:00 2024-12-20T09:48:53+00:00 Coding Challenge 185: Unfolding Fractals 25% off The Nature of Code book with code CHOOCHOO at https://natureofcode.com (comes with exclusive sticker+bookmark). The Dragon Curve fractal is created by repeatedly folding a strip of paper in half, then unfolding it to form a curve. In this challenge, I attempt to code an animation of the Dragon Curve forming with p5.js in JavaScript. Code: https://thecodingtrain.com/challenges/185-dragon-curve 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-184-dragon-curve p5.js Web Editor Sketches: 🕹️ Dragon curve animation: https://editor.p5js.org/codingtrain/sketches/LXDsoCSZs 🕹️ Dragon curve color variation: https://editor.p5js.org/codingtrain/sketches/7nNd-f7iY 🕹️ Dragon curve noise variation: https://editor.p5js.org/codingtrain/sketches/7r7ZIE4dc 🎥 Previous: https://youtu.be/dJNFPv9Mj-Y?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📕 The Nature of Code: https://natureofcode.com/ 🛒 Nature of Code shop: https://store.natureofcode.com/products/the-nature-of-code 🔗 Dragon Curve: https://en.wikipedia.org/wiki/Dragon_curve 🔗 concat() function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat Videos: 🎥 https://youtu.be/UBuPWdSbyf8 🎥 https://www.youtube.com/watch?v=wCyC-K_PnRY Related Coding Challenges: 🚂 https://youtu.be/0jjeOYMjmDU 🚂 https://youtu.be/E1B4UoSQMFw 🚂 https://youtu.be/jPsZwrV9ld0 🚂 https://youtu.be/i-k04yzfMpw 🚂 https://youtu.be/dSK-MW-zuAc Timestamps: 00:00 Introduction 00:36 The Nature of Code book 01:43 Explain algorithm 03:38 Start coding 05:05 Write rotate function 07:05 Rotate all the segments 11:30 We have the dragon curve! 12:00 Add animation 16:31 Add the starting positions for a and b 21:43 Scale the lines 24:08 Add a nextGeneration() function 25:16 The reduction ratio 26:44 Target zoom 28:57 Challenge complete! 29:57 What can you do? 30:25 Outro Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #fractals #dragoncurve #natureofcode #p5js #javascript yt:video:vfeUb7w8Hr8 vfeUb7w8Hr8 UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-08-15T16:39:19+00:00 2024-12-22T06:38:00+00:00 Let's Build a Nature of Code 404 Page! Let's build a "404 Page Not Found" page for The Nature of Code website! Use code CHOOCHOO for 25% off Nature of Code at https://natureofcode.com/. Code: https://thecodingtrain.com/tracks/livestreams/livestreams/page-not-found 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/ZcZjrgQHr 🎥 Next: https://youtu.be/-_ivRdVjjzA References: 📕 The Nature of Code: https://natureofcode.com/ 🛒 Nature of Code shop: https://store.natureofcode.com/products/the-nature-of-code Related Coding Challenges: 🚂 https://youtu.be/4hA7G3gup-4 Timestamps: 0:00:00 Count down starts 0:08:00 Livestream starts 0:19:50 Annual mailing 0:20:45 NOC website 0:21:38 Discount 0:22:52 Purchase options 1:09:54 404 Error page 1:17:28 Start coding 1:27:14 Add mouse interaction 2:23:17 Outro Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #thenatureofcode #steeringbehaviors #javascript ===================================================== yt:video:2h8VArJ3gnQ 2h8VArJ3gnQ UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-07-31T15:00:02+00:00 2024-12-19T09:15:08+00:00 ml5.js 1.0 and Guest Conductor Patt Vira The ml5.js library recently celebrated it's 1.0 release! In this video, I provide an overview of the new release and cover how to use the FaceMesh model. Guest Conductor Patt Vira (http://youtube.com/@PattVira) takes over and demonstrates how to build a creative kinetic type visualization controlled by your mouth! Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/0-introduction/patt-vira p5.js Web Editor Sketches: 🕹️ FaceMesh (Lips): https://editor.p5js.org/codingtrain/sketches/LdEmvXdGI 🕹️ Interactive Kinect Type: https://editor.p5js.org/codingtrain/sketches/CITZ-7eyA 🎥 Previous: https://youtu.be/jmznx0Q1fP0?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/yNkAuWz5lnY?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 🎥 http://youtube.com/@PattVira 🎥 https://youtu.be/X4XMhpRFKvU 💻 ml5.js: https://ml5js.org/ 🏕 ITP Camp: https://tisch.nyu.edu/itp/camp 💻 Tensorflow.js: https://www.tensorflow.org/js 📕 The Nature of Code: https://natureofcode.com/ Timestamps: 0:00 Introducing Patt Vira! 1:08 What is ml5.js? 2:00 The Nature of Code book 2:12 ml5.js overview 4:27 Importing the ml5.js library 5:38 How to use the FaceMesh model 18:34 Guest Conductor Patt Vira! 54:14 Thanks for watching! Editing by Patt Vira and Mathieu Blanchette Videography by Don Lee ml5.js slides by Micaelle Lages and the ml5.js team ITP Camp workshop photos by Parth Pawar, Chienn Tai, Alan Ren Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearning #ml5js #facemesh #guestconductor #p5js #ml5js yt:video:HGe-nD90GWs HGe-nD90GWs UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-07-30T06:51:38+00:00 2024-12-19T06:38:07+00:00 Use code CHOOCHOO for 25% off. Pre-ordering direct from me comes with a bonus bookmark and sticker! yt:video:dJNFPv9Mj-Y dJNFPv9Mj-Y UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-07-13T09:08:51+00:00 2024-12-20T04:28:59+00:00 Collisions Without a Physics Library! (Coding Challenge 184) What happens when two circles collide in a p5.js canvas? In this video, I examine the math and implement idealized elastic collisions in a JavaScript physics simulation. This video supplements the Nature of Code book series in Chapter 6 which uses 3rd party physics libraries to handle collisions rather than a direct implementation. Code: https://thecodingtrain.com/challenges/184-elastic-collisions 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-184-elastic-collisions p5.js Web Editor Sketches: 🕹️ Elastic Collisions: https://editor.p5js.org/codingtrain/sketches/3DrBb8LCp 🕹️ Elastic Collisions - Quadtree: https://editor.p5js.org/codingtrain/sketches/z8n19RFz9 🎥 Previous: https://youtu.be/p7IGZTjC008?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📕 The Nature of Code: https://natureofcode.com/ 🛒 Pre-order The Nature of Code: https://nostarch.com/nature-code 🔗 Elastic Collision: https://en.wikipedia.org/wiki/Elastic_collision 📃 2-Dimensional Elastic Collisions without Trigonometry: https://www.vobarian.com/collisions/2dcollisions2.pdf 📃 Elastic Collisions Formula Derivation: https://dipamsen.github.io/notebook/collisions.pdf Related Coding Challenges: 🚂 https://youtu.be/IIrC5Qcb2G4 🚂 https://youtu.be/OJxEcs0w_kE 🚂 https://youtu.be/PoW8g67XNxA 🚂 https://youtu.be/h5ZNcAPXxew Timestamps: 0:00 Introduction 0:20 The Nature of Code book 1:22 Review background material 4:15 Collision Resolution 5:42 Start Coding 8:48 Add collide() function 10:17 Momentum and kinetic energy 14:15 Line of impact 16:44 Add the formulas 21:25 Simplify the code 22:57 Check for overlap 24:31 Check the particle's kinetic enery 25:48 Fix error 27:30 Add more particles 30:11 Optimizations 30:50 Outro Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #collisions #physicssimulation #p5js #javascript ===================================================== yt:video:XBJL-WJ6Z58 XBJL-WJ6Z58 UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-07-02T03:06:48+00:00 2024-12-20T14:23:34+00:00 i like pink yt:video:LHrWxGsq-GI LHrWxGsq-GI UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-05-16T16:59:46+00:00 2024-12-20T11:05:24+00:00 Marbling Ink Simulation #javascript #fluidsimulation Drop💧into this new coding challenge: the art of Mathematical Marbling!🌌 Watch the full video of this challenge at codingtrain.com/183 🎥 📣 Get your ticket to be featured in this week’s #PassengerShowcase post by submitting your work via one of the following methods: 1. WEBSITE: Navigate to codingtrain.com/submit 🧑‍💻 2. INSTAGRAM: Post & use the hashtag #PassengerShowcase 🚂 3. DISCORD: Join us at codingtrain.com/discord #share channel 💬 We are so thrilled to celebrate the community’s talent and creativity. 🌟🎉 yt:video:p7IGZTjC008 p7IGZTjC008 UCvjgXvBlbQiydffZU7m1_aw The Coding Train https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw 2024-05-02T15:17:04+00:00 2024-12-22T16:04:20+00:00 Coding Challenge 183: Paper Marbling Algorithm All aboard as I attempt to simulate the artistic process of paper marbling. The algorithm is based on the paper 'Mathematical Marbling' by S. Lu, A. Jaffer, X. Jin, H. Zhao, and X. Mao. The code is written in JavaScript using the p5.js library. Code: https://thecodingtrain.com/challenges/183-mathematical-marbling 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-183-paper-marbling-simulation p5.js Web Editor Sketches: 🕹️ Mathematical Marbling: https://editor.p5js.org/codingtrain/sketches/fsw-rJrpr 🕹️ Dodecahedron: https://editor.p5js.org/codingtrain/sketches/frIcGeI8l 🕹️ Marbling Phyllotaxis: https://editor.p5js.org/codingtrain/sketches/xoK1M7K3- 🕹️ Marbling Mouse: https://editor.p5js.org/codingtrain/sketches/GlQ8BqbZ2 🕹️ Marbling Color: https://editor.p5js.org/codingtrain/sketches/ONPlawNRq 🕹️ Marbling Combs: https://editor.p5js.org/codingtrain/sketches/kUPncgjvO 🕹️ Marbling Raster Pixels: https://editor.p5js.org/codingtrain/sketches/5b29Taght 🕹️ Marbling Raster Pixels - Image: https://editor.p5js.org/codingtrain/sketches/nb5hSYsgX 🕹️ Marbling Raster Pixels - Video: https://editor.p5js.org/codingtrain/sketches/kVyT302xf 🕹️ Marbling Color - animate ink: https://editor.p5js.org/codingtrain/sketches/HtEtm1vii 🕹️ handPose Marbling: https://editor.p5js.org/codingtrain/sketches/EwQhSqGK5 🎥 Previous: https://youtu.be/6UlGLB_jiCs?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🔗 Paper Marbling: https://en.wikipedia.org/wiki/Paper_marbling 🔗 Tokutaro Yagi: https://suminagashi.com/meet-the-artisan-tokutaro-yagi/ 🔗 Digital Marbling: https://blog.amandaghassaei.com/2022/10/25/digital-marbling/ 📄 Mathematical Marbling: https://doi.org/10.1109/MCG.2011.51 🔗 Mathematical Marbling: https://people.csail.mit.edu/jaffer/Marbling/ Videos: 🎥 The Hydrodynamics of Marbling Art: https://gfm.aps.org/meetings/dfd-2023/649b3ad8199e4c137897831b 🎥 https://youtu.be/O5wjXoFrau4 Related Coding Challenges: 🚂 https://youtu.be/OAcXnzRNiCY 🚂 https://youtu.be/BZUdGqeOD0w 🚂 https://youtu.be/alhpH6ECFvQ 🚂 https://youtu.be/IxdGyqhppis Timestamps: 0:00 Introduction 1:47 Mathematical Marbling 2:16 Explain approach 3:20 Start Coding 4:20 Dropping paint 7:03 Add the circle vertices using polar coordinates 10:57 Add a marble function 13:24 Refine the algorithm 16:45 Add a tine function 19:46 Circle detail 24:50 Generalize the tine function 29:43 Possible variations 31:45 Outro Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #mathematicalmarbling #fluidsimulation #p5js #javascript