The Coding Train

Why Language Models Surprise You

36K views · 3mo ago · 35:30

In this video, I explain the softmax function and the concept of temperature in the context of language models and neural networks. I start by revisiting the Markov chain coding challenge, then break down how softmax converts raw neural network outputs (logits) into probabilities, and how temperature can be used to adjust those probabilities making outputs more random (higher temperature) or more deterministic (lower temperature).

Topics: Hello! · Markov chains as language models · From logits to probabilities · The softmax formula · Implementing softmax in p5.js · Weighted selection (sampling)

▶️ Mentioned videos: Previous · Next · Video on youtube.com · Video on youtube.com

📰 Mentioned news: Softmax function on Wikipedia · Euler's number on Wikipedia

Coding Challenge 188: Voice Chatbot

26K views · 6mo ago · 39:28

In this coding challenge, I build a conversational voice chatbot entirely in the browser with p5.js. I combine three pieces: speech-to-text with OpenAI's Whisper model, text-to-speech with Kokoro TTS, and a "brain" for the bot. I also explore the transformers.js pipeline API and the Web Audio API. For the bot's brain, I start with a simple ELIZA-style therapist, then incorporate a RiveScript number-guessing game, and finally a local LLM. Code

Topics: Hello! · Mapping out the pieces: speech-to-text, text-to-speech, and the brain · Thoughts on AI and creative exploration · Choosing the tools: Whisper and Kokoro TTS · Building a push-to-talk UI in p5.js · Finding models on Hugging Face with Transformers.js

▶️ Mentioned videos: Previous · Video on youtube.com · Video on youtube.com · Video on youtube.com

📄 Mentioned papers: Model Cards for Model Reporting

📰 Mentioned news: Announcing the p5.sound.js library! · ELIZA

What the font?!?!

20K views · 7mo ago · 20:53

Let's explore new typography features in p5.js 2.0! In this video, I cover how to work with variable fonts, convert text to 3D models with textModel(), extract contours with textContours(), and control the detail of your typography with sampleFactor and simplifyThreshold. Code

Topics: Welcome! · Finding Fonts (Google Fonts) · Loading Fonts with Async/Await · Variable Fonts · textWeight() · Animated Text Weight

▶️ Mentioned videos: Previous · Next · Video on youtube.com · Video on youtube.com

What is Transformers.js?

53K views · 1y ago · 29:17

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

Topics: Welcome! · Why JavaScript and not Python? · What is Hugging Face? · Transformers.js Documentation · Pipeline API · import syntax and ES6 modules

▶️ Mentioned videos: Video on youtube.com

Coding Challenge 187: Bayes Theorem

42K views · 1y ago · 53:38

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

Topics: Hello! · Explaining Bayes' Theorem · What is Naive Bayes? · Setting up the Classifier in p5.js · Coding the train() function · Coding the classify() Function

▶️ Mentioned videos: Previous · Video on youtube.com · Video on youtube.com · Video on youtube.com

📰 Mentioned news: Naive Bayes Classifier · Laplacian Smoothing

Coding Challenge Session: Local Browser Conversational Chatbot (STT, TTS, and more?)

9K views · 1y ago · 2:16:32

Guest: Coding Challenge Session

Share Your Creation! Suggest Topics GitHub p5.js Web Editor Processing Code of Conduct

new p5.js 2 functions: textWeight, textContours, textModel

5K views · 1y ago · 2:37:21

Share Your Creation! Suggest Topics GitHub p5.js Web Editor Processing Code of Conduct

What's next?

17K views · 1y ago · 8:25

In this video, I'm sharing my plans for the fall semester, which is broken down into three main categories: updating the p5.js beginner series for version 2.0, exploring new p5.js 2.0 features like variable fonts and splines, and diving deeper into machine learning with transformers.js. I'd love to hear your feedback and ideas in the comments below!

Topics: Hi! · Next videos · Roadmap · Plans for p5.js 2.0 Features · Refreshing the p5.js Beginner Series · Plans for Machine Learning

How to Load Data with p5.js (2.0)

11K views · 1y ago · 17:42

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 p5.js Web Editor Sketches Loading a Single Image Sequential Loading API and Loading Animation Parallel Loading with Promise.all Loading images with placeholders exercise

Topics: Hello! · How to Load an Image in p5.js · Asynchronous Code: promises, async, and await · Common Mistakes to Avoid · Loading Data from a Live API · Loading Multiple Items in a Sequence

▶️ Mentioned videos: Previous · Next · Video on youtube.com · Video on youtube.com

What's new in p5.js 2!

29K views · 1y ago · 23:06

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 p5.js Web Editor Sketches p5.js 2 - async and await p5.js 2 - loading animation p5.js 2 - loading in a sequence

Topics: p5.js 2.0! · Switching versions in the web editor · Loading with p5.js 1 · Synchronous vs Asynchronous Code · Promises! · switching from preload to async setup()

▶️ Mentioned videos: Next · Video on youtube.com · Video on youtube.com

Upcoming Plans, ML Sampling with softmax and temperature

7K views · 1y ago · 3:43:26

Share Your Creation! Suggest Topics GitHub p5.js Web Editor Processing Code of Conduct

Introduction to Transformers.js (LIVE RECORDING SESSION ARCHIVE)

16K views · 1y ago · 2:05:54

Share Your Creation! Suggest Topics GitHub p5.js Web Editor Processing Code of Conduct

p5.js 2.0: loading data with async and await (LIVE RECORDING SESSION ARCHIVE)

9K views · 1y ago · 2:53:41

Share Your Creation! Suggest Topics GitHub p5.js Web Editor Processing Code of Conduct

Coding TRAIN WRECK: Bayesian Text Classification

15K views · 1y ago · 3:34:39

Guest: Coding TRAIN WRECK

Warning, this live stream was a mess and is probably unwatchable! But if you choose to continue you'll see me attempt to build a Naive Bayes text classifier from scratch in the p5.js web editor! I start by explaining the core concepts behind Bayes' Theorem (multiple times) before diving into the code. You'll see my raw, unedited process of structuring the data, implementing the algorithm, debugging issues, and finally building a simple interactive sentiment analysis demo.

Topics: Choo choo! · Welcome & Announcements · Fall Plans · Technical Difficulties: Whiteboard Setup · Main Topic: Bayesian Text Classification · Whiteboard: Explaining Bayes' Theorem (Attempt 1)

▶️ Mentioned videos: Video on youtube.com · Video on youtube.com · Video on youtube.com · Video on youtube.com

Robot Controllers Part 2 with Dr. Christian Hubicki

11K views · 1y ago · 2:39:03

Guest: Dr. Christian Hubicki

Only three years later, I'm rejoined by Dr. Christian Hubicki to continue our series on robot controllers. Dr. Hubicki gives a presentation on the history of legged robots (like ASIMO and Boston Dynamics) and the principles behind the Raibert Hopper. Then, we attempt to implement a 1D hopping robot simulation in p5.js using a PID controller. Code

Topics: Waiting to Start · Welcome to The Coding Train · Revisiting Part 1 from 2022 · Introducing Dr. Christian Hubicki · Dr. Hubicki's Presentation: How to Make a Robot Hop · History of Legged Locomotion: Safety vs. Agility

▶️ Mentioned videos: Previous · Video on youtube.com · Video on youtube.com · Video on youtube.com

p5.js 2.0 with Kit Kuksenok

9K views · 1y ago · 1:19:34

Guest: Kit Kuksenok

In this livestream, I'm joined by Kit Kuksenok, the p5.js Project Lead from the Processing Foundation! Kit gives an overview of the p5.js 2.0 beta, demonstrating new features like variable fonts, asynchronous loading, text to contours, and 3D text extrusion. We also discuss the timeline for the official release and how the community can get involved and provide feedback. Code

Topics: Waiting to Start · Welcome to The Coding Train! · Introducing Kit, p5.js Project Lead · Getting Involved with p5.js & Processing Foundation · What's Happening with p5.js 2.0? · How to Start Using the 2.0 Beta in the Web Editor

▶️ Mentioned videos: Next

All Aboard (ish)

17K views · 1y ago · 1:38:35

I'm testing out my streaming setup, and sharing my plans for the future of The Coding Train. I'm also joined by a new, automated friend who has a lot to say. We discuss the "Nature of Code" book, the upcoming p5.js 2.0 release, and my thoughts on the learning to code in 2025. Join me as I get back into the swing of things and answer your questions live.

Topics: Waiting at the Station · The Nature of Code Book · Meet My New Co-host · What's Next for The Coding Train? · Thoughts on Modern Coding Tools · Rob & Akiva Need a Podcast

Genuary 2025 Speed Run - All 31 Prompts!

19K views · 1y ago · 3:27:07

What is Genuary if not 31 generative art prompts to be completed all in one sitting in February?! Code Github Repo Next References Genuary 2025 Related Coding Challenges Music from Epidemic Sound Share Your Creation! Suggest Topics GitHub

Topics: Welcome! · Genuary 1 - Vertical or horizontal lines only · Genuary 2 - Layers upon layers upon layers · Genuary 3 - Exactly 42 lines of code · Genuary 4 - Black on black · Genuary 5 - Isometric Art (No vanishing points)

▶️ Mentioned videos: Next · Video on youtube.com · Video on youtube.com

Coding Challenge 186: Wave Function Collapse

105K views · 1y ago · 1:32:09

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

Topics: The Nature of Code book! · WFC Resources and References · Extracting tiles from a source image · Calculating adjacency rules for tiles · Checking for overlapping pixel colors · Debugging tile adjacencies

▶️ Mentioned videos: Previous · Video on youtube.com · Video on youtube.com · Video on youtube.com

I would like to say hello to you

19K views · 1y ago · 1:45:00

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.)

3D Pose Estimation with ml5.js

35K views · 1y ago · 14:10

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 p5.js Web Editor Sketches BlazePose 3D BlazePose Lerp Previous Next All

Topics: Incorporating BlazePose model · What are the xyz values? · Replace live camera with recorded video. · Render with p5.js WEBGL · Use scale() to expand range of xyz values · Creating 3D scene

▶️ Mentioned videos: Previous · Next · Video on youtube.com · Video on youtube.com

📄 Mentioned papers: BlazePose GHUM Holistic

Face Mesh Detection with ml5.js

40K views · 1y ago · 31:46

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 p5.js Web Editor Sketches FaceMesh - Keypoints FaceMesh - Part FaceMesh - Custom List (Lips) FaceMesh - Centered Face FaceMesh - Triangles FaceMesh - Texture Map FaceMesh - 3D FaceMesh - Blow Bubbles FaceMesh - Stretch and Skew

Topics: Technical background for the model · Related projects and inspiration. · Adapting handpose example to facemesh. · Keypoints and parts of the facemesh. · Face bounding box. · What is a mesh? Rendering the triangles

▶️ Mentioned videos: Previous · Next · Video on youtube.com · Video on youtube.com

📄 Mentioned papers: Real-time Facial Surface Geometry Monocular Video on Mobile GPUs

📰 Mentioned news: Clouds Plane Window

Hand Pose Detection with ml5.js

45K views · 2y ago · 15:56

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 p5.js Web Editor Sketches HandPose - Keypoints HandPose - Painting Simple painting HandPose Painting - Stroke Weight HandPose Painting - Color HandPose - Thumbs up or Thumbs Down HandPose - Particles

Topics: Technical background of the model · Convert BodyPose to HandPose · Detecting more than one hand · Detecting handedness (left or right) · Creating a painting sketch with index and thumb · Add a layer using createGraphics()

▶️ Mentioned videos: Previous · Next

Pose Estimation with ml5.js

43K views · 2y ago · 21:26

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 p5.js Web Editor Sketches BodyPose - single image BodyPose - Nose BodyPose - Nose with Lerp BodyPose - More Parts BodyPose - Hat BodyPose - 3D BlazePose

Topics: What is the BodyPose model? · Coco Dataset · Creative Inspiration · Working with specific keypoints · Skeleton connections between the keypoints · Using dist() function

▶️ Mentioned videos: Previous · Next · Video on youtube.com

📄 Mentioned papers: BlazePose Paper