Tutorials

Here you can find all tutorials made by Daniel Shiffman on TheCodingTrain.

If you are searching for tutorials made by guests, you can check them out here.

tutorial #1: P5.JS Basics

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 1 we cover the basics of p5.js and how you can get started.

#1.2

p5.js Web Editor

06 Sep 2018

In this video, I cover getting set up with and using the p5.js Web Editor.

#1.3

Basics of Drawing

01 Sep 2015

In this video, I teach you about the basics of drawing shapes in a web browser using the p5.js library.

Watch all tutorials

tutorial #2: Variables

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 2 we cover variables and some more p5 functions

#2.1

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.

#2.2

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.

Watch all tutorials

tutorial #3: Conditionals

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 3 we cover conditionals and boolean variables

#3.2

The Bouncing Ball

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

#3.3

Else and Else If, AND and OR

10 Sep 2015

This video covers the “else” and “else if” control structures as well as the logical operators AND (&&) and OR (II).

Watch all tutorials

tutorial #4: Loops

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 4 we cover loop structures in javascript.

#4.1

while and for Loops

11 Sep 2015
This video examines the while and for loop in p5.js. I look at drawing multiple copies of the same shape with a loop.
#4.2

Nested Loops

11 Sep 2015
This 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?
Watch all tutorials

tutorial #5: Functions

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 5 we cover creating your own functions.

#5.1

Function Basics

17 Sep 2015

This video covers the basics of writing your own functions in JavaScript. What does it mean to define and call your own function? How can this make a program more modular?

#5.2

Function Parameters and Arguments

17 Sep 2015

This video looks at re-usability and functions. How does defining a function with parameters allow a function to be re-used?

Watch all tutorials

tutorial #6: Object-Oriented Programming

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 6 we cover Object-Oriented Programming and how to create your own classes.

tutorial #7: Object Interaction

Foundations of Programming in JavaScript - P5.JS Tutorial

In part 7 of the p5.js tutorials we talk about how you can interact with objects on the canvas.

#7.4

Mouse Interaction with Objects

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

#7.6

Object Communication Part 1

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

Watch all tutorials

tutorial #8: HTML / CSS / DOM

P5.JS Tutorial

In this Tutorial you will learn the basics of HTML in combination with CSS and the DOM using p5.JS.

tutorial #9: Additional Topics

P5.JS Tutorial

This is part 9 of the p5.js tutorials. Other additional topics about JavaScript and p5.js are covered here.

tutorial #10: Working with Data

p5.JS Tutorial

This tutorial focuses on Data and APIs as well as JSON (JavaScript Object Notation). More about asynchronous callbacks and event handling is covered.

tutorial #12: WebSockets

Node.JS and p5.JS Tutorial

This tutorial covers how to use Node.JS, p5.JS, and socket.io (WebSockets) to create a shared HTML5 canvas across multiple browser sessions.

#12.1

Introduction to Node

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

#12.2

Using Express with Node

13 Apr 2016

In this video, I look at how to add express.js to your node application to serve static files.

Watch all tutorials

tutorial #15: Twitter Bot

Node.JS and Processing

This playlist covers all the steps you need to know to make a twitter image bot using Node.js and Processing.

#15.1

What is Node.js?

12 Nov 2015

This video covers the basics of node.js. What is node.js? What is server-side programming? What might you use it for and how do you get started? Basic unix commands and working with terminal are covered.

Watch all tutorials

tutorial #16: Topics of JavaScript/ES6

P5.JS Tutorial

This playlist contains different ES6 - ECMAScript2015 related videos.

#16.1

let vs var

28 Sep 2017

In this video, I cover the “let” keyword in ES6 JavaScript. I discuss the differences between “let” and “var” (block scope vs. functional scope).

#16.2

const

28 Sep 2017

In this video, I cover the JavaScript ES6 keyword “const.” This is a continuation of the previous video about “let” and “var”.

#16.3

ES6 Arrow Function

30 Oct 2017

In this video, I cover anonymous functions with the arrow syntax in ES6 JavaScript.

Watch all tutorials

tutorial #18: WebGl in p5.js

Rendering 3D Objects using the p5.js library

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

#18.1

Introduction to WebGL in p5.js

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

#18.2

3D Geometries

19 Dec 2017

In this video about p5.js and WebGL I cover 3D geometry and primitive shapes.

#18.3

Light and Material

22 Dec 2017

In this video, I inestigate lights and materials in the p5.js WebGL 3D renderer.

Watch all tutorials