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

In this coding challenge, I use Perlin noise to create a two-dimensional flow field with the p5.js library.

🚂 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

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

In this coding challenge, I struggle my way through implementing a Naive Bayes text classifier in JavaScript using p5.js. I explain Bayes' theorem, demonstrate word frequency analysis, implement Laplacian smoothing, and build a working sentiment classifier that runs entirely in the browser. Code: https://thecodingtrain.com/challenges/187-bayesian-text-classification 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-187-bayes-classifier p5.js Web Editor Sketches: 🕹️ Text Classifier - Initial Version: https://editor.p5js.org/codingtrain/sketches/RZ8a1z4DN 🕹️ Text Classifier - Refactored Version: https://editor.p5js.org/codingtrain/sketches/P3ngrAANX 🕹️ Text Classifier - File Loading Version: https://editor.p5js.org/codingtrain/sketches/WowR2Q9xg 🎥 Previous: https://youtu.be/5iSAvzU2WYY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📓 Naive Bayes Classifier: https://en.wikipedia.org/wiki/Naive_Bayes_classifier 📓 Laplacian Smoothing: https://en.wikipedia.org/wiki/Additive_smoothing Videos: 🚂 https://youtu.be/unm0BLor8aE 🚂 https://youtu.be/7DG3kCDx53c?list=PLRqwX-V7Uu6YEypLuls7iidwHMdCM6o2w 📺 https://youtu.be/HZGCoVF3YvM 🚂 https://youtu.be/0Ad5Frf8NBM Live Stream Archives: 🔴 https://youtube.com/live/TsBDm0P0qaA Related Coding Challenges: 🚂 https://youtu.be/unm0BLor8aE 🚂 https://youtu.be/eGFJ8vugIWA Timestamps: 0:00:00 Hello! 0:03:34 Explaining Bayes' Theorem 0:12:07 What is Naive Bayes? 0:13:49 Setting up the Classifier in p5.js 0:15:41 Coding the train() function 0:22:14 Coding the classify() Function 0:24:45 Revising the train() function 0:29:06 Implementing Probability Calculations 0:33:24 Laplacian (Additive) Smoothing 0:42:21 Ignoring the enominator (Normalization) 0:45:36 Quick User Interface 0:49:42 Final thoughts and next steps. 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 #bayestheorem #textclassification #naivebayes #sentimentanalysis #naturallanguageprocessing #machinelearning #wordfrequency #laplaciansmoothing #javascript #p5js

I've got a few things to tell you about! + Well, I'm obligated to remind you about the Nature of Code book + Severance Season 2 is out and I'm working on some experiments. + Genuary! + What should I work on in 2025? + Wave Function Collapse the Overlapping Model is out now on Nebula! Support the coding train by signing up to watch! (It'll be on YouTube one week from today.) https://nebula.tv/videos/codingtrain-coding-challenge-186-wave-function-collapse 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Welcome to a new series all about working with machine learning models in JavaScript in the browser using the Transformers.js library! In this introduction, I cover what Transformers.js is, how to load it into a p5.js sketch, explain the pipeline API, and demonstrate sentiment analysis and language detection examples. Code: https://thecodingtrain.com/tracks/transformers-js/transformers-js/introduction 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-machine-learning-in-the-browser p5.js Web Editor Sketches: 🕹️ Sentiment Analysis: https://editor.p5js.org/codingtrain/sketches/JaXqVSHxM 🕹️ Language Detection: https://editor.p5js.org/codingtrain/sketches/VmS9V6-0o References: 💻 Transformers.js Documentation: https://huggingface.co/docs/transformers.js 🤗 Hugging Face: https://huggingface.co/ 🤗 Hugging Face Models: https://huggingface.co/models?library=transformers.js 🤗 Xenova on Hugging Face: https://huggingface.co/Xenova 🤗 Whisper Web: https://huggingface.co/spaces/Xenova/whisper-web 💻 p5.js 2.0 reference: https://beta.p5js.org/ 📓 ES6 Modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules 📓 Quantization: https://huggingface.co/docs/optimum/concept_guides/quantization Videos: 🚂 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🚂 https://youtu.be/0Ad5Frf8NBM Timestamps: 0:00 Welcome! 1:53 Why JavaScript and not Python? 3:01 What is Hugging Face? 4:03 Transformers.js Documentation 4:18 Pipeline API 5:41 import syntax and ES6 modules 8:34 Object Destructuring 11:33 Creating a Pipeline 13:18 Sentiment Analysis Example 19:04 Tasks and Models on Hugging Face 20:20 Language Detection Example 22:27 Device: WebGPU, CPU and more 24:25 Data Types and Quantization 27:54 See you next time! 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 #machinelearning #transformersjs #huggingface #sentimentanalysis #languagedetection #naturallanguageprocessing #pipelineapi #asyncawait #es6modules #javascript #p5js #transformersjs

🚂 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 video covers how to load external assets like images, JSON files, and data from APIs into your p5.js 2.0 sketches. Learn the fundamentals of asynchronous operations in p5.js using Promises with async/await. Code: https://thecodingtrain.com/tracks/p5js-2.0/p5js-2.0/loading-data 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-how-to-load-data-with-p5js-20 p5.js Web Editor Sketches: 🕹️ Loading a Single Image: https://editor.p5js.org/codingtrain/sketches/NPKPIYhBR 🕹️ Sequential Loading: https://editor.p5js.org/codingtrain/sketches/lQxT7PTKC 🕹️ API and Loading Animation: https://editor.p5js.org/codingtrain/sketches/M_NGGyqr4 🕹️ Parallel Loading with Promise.all: https://editor.p5js.org/codingtrain/sketches/MgrJuSvJt 🕹️ Loading images with placeholders exercise: https://editor.p5js.org/codingtrain/sketches/Ur6plDyKK 🎥 Previous: https://youtu.be/0Ad5Frf8NBM 🎥 Next: https://youtu.be/1KqQeqZ3R9Y References: 📖 p5.js 2.0 Beta: https://beta.p5js.org/ 📖 Promise.all: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all 🎨 Dog API: https://dog.ceo/dog-api/ Videos: 🚂 https://youtu.be/0Ad5Frf8NBM 🚂 https://youtu.be/QO4NXhWo_NM 🚂 https://youtu.be/AwyoVjVXnLk Timestamps: 0:00:00 Hello! 0:00:54 How to Load an Image in p5.js 0:02:16 Asynchronous Code: promises, async, and await 0:04:10 Common Mistakes to Avoid 0:05:51 Loading Data from a Live API 0:08:21 Loading Multiple Items in a Sequence 0:09:12 Creating a Custom Loading Animation 0:13:39 Faster Parallel Loading with Promise.all() 0:16:48 Challenge for you! 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 #asyncawait #promises #p5js2 #loadingimages #api #json #promiseall #p5js #javascript =====================================================

This video tackles one of the bigger changes in p5.js 2: loading data with async and await! Fear not, I'll cover how to transition from preload and callbacks in p5.js 1.0 to using promises with async/await in 2.0. Code: https://thecodingtrain.com/tracks/p5js-2.0/p5js-2.0/async-await 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-p5js-20-async-and-await p5.js Web Editor Sketches: 🕹️ p5.js 2 - async and await: https://editor.p5js.org/codingtrain/sketches/Q6S38g0rS 🕹️ p5.js 2 - loading animation: https://editor.p5js.org/codingtrain/sketches/JLIxyHrkn 🕹️ p5.js 2 - loading in a sequence: https://editor.p5js.org/codingtrain/sketches/lQxT7PTKC 🎥 Next: https://youtu.be/1KqQeqZ3R9Y References: 📖 p5.js 2.0 Beta: https://beta.p5js.org/ 📖 p5.js 2.0: https://github.com/processing/p5.js/issues/7488 📖 p5.js 2.0: You Are Here & How to Contribute!: https://discourse.processing.org/t/dev-updates-p5-js-2-0-you-are-here-how-to-contribute/46130 🎨 Dog API: https://dog.ceo/dog-api/ Videos: 🚂 https://youtu.be/QO4NXhWo_NM 🚂 https://youtu.be/AwyoVjVXnLk Timestamps: 0:00:00 p5.js 2.0! 0:03:00 Switching versions in the web editor 0:05:02 Loading with p5.js 1 0:06:11 Synchronous vs Asynchronous Code 0:08:37 Promises! 0:11:29 switching from preload to async setup() 0:13:57 Loading with callbacks in p5.js 1.0 0:17:15 Sequencing loading data in p5.js 1.0 0:19:26 Sequencing with async and await in p5.js 2.0 0:20:09 Creating a custom Async Function 0:22:13 Thank you for watching! 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 #asyncawait #promises #p5js2 #preload #callbacks #p5js #javascript

🚂 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

🚂 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

🚂 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

🚂 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 #robotics #p5js #pidcontroller #raiberthopper #simulation #physics #leggedlocomotion #robotcontrol #p5js #matlab

Here's a clip from the most recent live stream about simulating Robot Controllers with p5.js with Dr. Christian Hubicki! @chubicki 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

It's that time of year! It's never too late for Genuary! 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ 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 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Wave Function Collapse is an algorithm for procedural image generation. In this long overdue follow-up to my tiled model video, I dive into the overlapping model, coding it step by step (complete with struggles and messy debugging interludes) in JavaScript with p5.js. Code: https://thecodingtrain.com/challenges/186-wfc-overlapping-model 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-186-wave-function-collapse 💻 Github Repo: https://github.com/CodingTrain/Wave-Function-Collapse p5.js Web Editor Sketches: 🕹️ Wave Function Collapse: Overlapping Model: https://editor.p5js.org/codingtrain/sketches/SI0c2D_tQ 🕹️ WFC Overlapping Model Refactored: https://editor.p5js.org/codingtrain/sketches/2sV4KtcoD 🕹️ WFC Overlapping Model: Shannon entropy: https://editor.p5js.org/codingtrain/sketches/PX0Hn6TF8 🕹️ WFC Overlapping Model: More tiles!: https://editor.p5js.org/codingtrain/sketches/z_N2TVjRH 🎥 Previous: https://youtu.be/MazpwQNdJYQ?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🗄 Wave Function Collapse GitHub Repo: https://github.com/mxgmn/WaveFunctionCollapse 🗄 Model Synthesis: https://paulmerrell.org/model-synthesis/ 🗄 Procedural Generation with Wave Function Collapse: https://www.gridbugs.org/wave-function-collapse/ 🗄 Wave Function Collapse: https://github.com/CodingTrain/Wave-Function-Collapse 🔗 p5.js copy(): https://p5js.org/reference/p5/copy/ 🔗 p5.js web editor console log GitHub issue: https://github.com/processing/p5.js-web-editor/issues/3178 🔗 JavaScript concat() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat 🔗 p5.js randomSeed(): https://p5js.org/reference/p5/randomSeed/ Videos: 🎥 https://youtu.be/nMUMZ5YRxHI 🎥 https://www.youtube.com/watch?v=r5Iy3v1co0A 🎥 https://youtu.be/qmnH5MT_luk 🎥 https://youtu.be/mrYMzpbFz18 Creative Works Featured: 🎨 Townscaper: https://www.townscapergame.com/ 🎨 unity-wave-function-collapse: https://selfsame.itch.io/unitywfc 🎨 Super Mario WFC: https://observablehq.com/@makio135/super-mario-wfc 🎨 Zelda WFC: https://observablehq.com/@makio135/zelda-wfc 🎨 Infinite procedurally generated city: https://marian42.de/article/wfc/ Related Coding Challenges: 🚂 https://youtu.be/HyK_Q5rrcr4 🚂 https://youtu.be/uQZLzhrzEs4 🚂 https://youtu.be/rI_y2GAlQFM Timestamps: 0:00:00 Introduction 0:01:12 The Nature of Code book! 0:02:20 WFC Resources and References 0:08:19 Extracting tiles from a source image 0:21:30 Calculating adjacency rules for tiles 0:24:34 Checking for overlapping pixel colors 0:32:20 Debugging tile adjacencies 0:43:30 Creating a Cell class 0:46:21 Incorporate code from WFC tile model 0:50:50 Reduce entropy of neighboring tiles 0:55:56 Rendering the center pixel for each tile 0:58:05 Cross checking valid tile options 1:01:57 Recursive entropy reduction 1:05:32 Limit recursion depth 1:06:32 Challenge complete? 1:08:26 Bugs found between Day 1 and Day 2 1:09:13 Starting Day 2 1:10:02 Correcting pixel color if statement 1:11:16 Refactoring redundant code 1:17:26 Running out of tile options 1:21:24 Optimizing the code 1:23:47 Rendering average pixel color of remaining tile options 1:26:23 How to handle redundant tiles? 1:28:30 More tiles with rotations and reflections 1:29:39 Additional performance optimizations 1:31:40 Thanks for watching! 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 #wavefunctioncollapse #overlappingmodel #proceduralgeneration #p5js #javascript