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 Workflow

31 Oct 2017

In this video, I cover my current workflow to create p5.js “sketches” in. If you are interested in following my “Foundations of Programming in JavaScript” playlist, this is a comprehensive introduction to the tools you can use (though some simpler options do exist!)

Watch all tutorials

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

Removing Objects from Arrays

17 Oct 2017

This video covers the “splice” function to delete / remove objects from an array.

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

#8.1

What is HTML?

16 Oct 2015

This video covers the basics of HTML in the context of DOM manipulation with p5.js.

#8.2

Creating HTML Elements with JavaScript

16 Oct 2015

This video covers how to dynamically create HTML elements from JavaScript using p5.js.

#8.3

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

Watch all tutorials

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.

#9.12

Local Server, Text Editor, JavaScript Console

31 Mar 2016

This video looks at how you develop p5.js sketches (HTML, CSS, and JavaScript files) using any text editor. I demonstrate how to run a Python local server as well use the Chrome developer tools/JavaScript console.

#9.15

2D Arrays in JavaScript

18 Jul 2016

In this JavaScript Tutorial, I cover two-dimensional (2D) arrays in JavaScript. I demonstrate how to create, initialize, and use the arrays with nested for loops.

Watch all tutorials

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.

#10.1

Introduction to Data and APIs in JavaScript

30 Oct 2015

This video introduces the idea of using external data in a p5.js sketch.

#10.2

What is JSON? - Part I

30 Oct 2015

This video covers JSON (JavaScript Object Notation).

#10.3

What is JSON? - Part II

30 Oct 2015

This video covers additional JSON (JavaScript Object Notation) scenarios.

Watch all tutorials

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.

#12.3

Connecting Client to Server with Socket.io

13 Apr 2016

In this video, I look at how to add socket.io to both the node server and the client JavaScript.

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