Here you can find all tutorials made by Daniel Shiffman on TheCodingTrain.
For even more tutorials, you can visit the guest tutorials page.
If you are interested in creating your own machine learning models, have a look at the Teachable Machine page.
Tutorial #1: P5.JS Basics
In part 1 we cover the basics of p5.js and how you can get started.
Programming for Beginners with p5.js05 Sep 2018
In this video, I talk about the p5.js basics course, what I hope you will learn and the goals of the course.
p5.js Web Editor06 Sep 2018
In this video, I cover getting set up with and using the p5.js Web Editor.
Basics of Drawing01 Sep 2015
In this video, I teach you about the basics of drawing shapes in a web browser using the p5.js library.
Tutorial #2: Variables
In part 2 we cover variables and some more p5 functions
Variables in p5.js (mouseX, mouseY)04 Sep 2015
In this video, I introduce the concept of variables in p5.js. The setup() and draw() functions are covered as well as mouseX and mouseY.
Variables in p5.js (Make your own)04 Sep 2015
In this video, I look at how to create your own variables and how to use them to animate elements of your p5.js sketches.
Tutorial #3: Conditionals
In part 3 we cover conditionals and boolean variables
Introduction to Conditional Logic10 Sep 2015
This video introduces the idea of a boolean expression and conditional logic in programming.
The Bouncing Ball10 Sep 2015
This video continues the discussion of conditional statements and looks at a classic scenario – a circle that bounces off the edges of the canvas.
Else and Else If, AND and OR10 Sep 2015
This video covers the “else” and “else if” control structures as well as the logical operators AND (&&) and OR (II).
Tutorial #4: Loops
while and for Loops11 Sep 2015This video examines the while and for loop in p5.js. I look at drawing multiple copies of the same shape with a loop.
Nested Loops11 Sep 2015This video looks at loops nested in loops. What does it mean to have a for loop in the draw() loop? How do you draw a grid of shapes with two loops?
Tutorial #5: Functions
In part 5 we cover creating your own functions.
Function Basics17 Sep 2015
Function Parameters and Arguments17 Sep 2015
This video looks at re-usability and functions. How does defining a function with parameters allow a function to be re-used?
Functions and Return17 Sep 2015
This video covers what it means for a function to return a value.
Tutorial #6: Object-Oriented Programming
In part 6 we cover Object-Oriented Programming and how to create your own classes.
Introduction to Object-Oriented Programming with ES606 Oct 2017
Tutorial #7: Object Interaction
In part 7 of the p5.js tutorials we talk about how you can interact with objects on the canvas.
Mouse Interaction with Objects16 Oct 2017
How can an object interact with the mouse? This video looks at how you can implement basic mouse interaction (rollover, mousePressed) with your own code and HTML5 canvas.
Removing Objects from Arrays17 Oct 2017
This video covers the “splice” function to delete / remove objects from an array.
Object Communication Part 113 Dec 2017
This video covers how to determine if two circles are overlapping (intersecting) in a p5.js sketch. The functionality is demonstrated with an object-oriented approach.
Tutorial #8: HTML / CSS / DOM
In this Tutorial you will learn the basics of HTML in combination with CSS and the DOM using p5.JS.
What is HTML?16 Oct 2015
This video covers the basics of HTML in the context of DOM manipulation with p5.js.
Manipulating DOM Elements with html() and position()16 Oct 2015
This video shows how to change the content of an HTML element using
html()or set its position using
Tutorial #9: Additional Topics
Transformations (Translate, Rotate, Push/Pop) - Part 118 Sep 2017
In this three part tutorial, I cover matrix “transformations” using p5.js. In this video I cover the functions
Minimum Spanning Tree (Prim's Algorithm)18 Mar 2016
Instance Mode (aka "namespacing")24 Mar 2016
This video looks at p5.js “instance mode”.
Tutorial #10: Working with Data
This video introduces the idea of using external data in a p5.js sketch.
What is JSON? - Part I30 Oct 2015
What is JSON? - Part II30 Oct 2015
Tutorial #12: WebSockets
This tutorial covers how to use Node.JS, p5.JS, and socket.io (WebSockets) to create a shared HTML5 canvas across multiple browser sessions.
Introduction to Node13 Apr 2016
In this first video, I discuss the all the pieces required to create a shared, collaborative drawing canvas with p5.js, node, and web sockets.
Using Express with Node13 Apr 2016
In this video, I look at how to add express.js to your node application to serve static files.
Connecting Client to Server with Socket.io13 Apr 2016
Tutorial #15: Twitter Bot
This playlist covers all the steps you need to know to make a twitter image bot using Node.js and Processing.
This playlist contains different ES6 - ECMAScript2015 related videos.
let vs var28 Sep 2017
const28 Sep 2017
ES6 Arrow Function30 Oct 2017
Tutorial #18: WebGl in p5.js
This series of the p5.js tutorial is about the WEBGL renderer. I discuss 3D rendering in the browser and the current state of capabilities in p5.js WEBGL
Introduction to WebGL in p5.js18 Dec 2017
This is the first video in a playlist about the WEBGL renderer in the p5.js library. I discuss 3D rendering in the browser and the current state of capabilities in p5.js WEBGL.
3D Geometries19 Dec 2017
In this video about p5.js and WebGL I cover 3D geometry and primitive shapes.
Light and Material22 Dec 2017
In this video, I inestigate lights and materials in the p5.js WebGL 3D renderer.