Foundations of Programming in JavaScript

This is a series of Ancient Brain Worlds based on the course Foundations of Programming in JavaScript (video tutorials) by Daniel Shiffman at The Coding Train. This is a full course to teach Introduction to Programming from basics, using JavaScript for the language, and the P5 library for the graphics, for people who have never programmed before.

The Coding Train course provides source code for the video tutorials. The code has been ported here to Ancient Brain Worlds that can be run and edited in the browser. Done with permission of The Coding Train under MIT licence. On Ancient Brain, you can clone, edit, run, host, share, comment, like and embed these Worlds. You can upload your own resources (images, music, etc.) to use in these Worlds.


  • If you are unfamiliar with the Ancient Brain platform, work through the P5 Starter Tutorial first.
  • This course uses the P5 graphics library.

  • The videos describe coding JavaScript on these platforms:
    1. Offline, using http://localhost.
    2. Online, using the p5.js Web Editor.
    Both of these are a bit different to coding on Ancient Brain.

  • For more on The Coding Train, see their site and YouTube channel.


When you are finished this course, you will be able to make Worlds like the following. Click to run them.

Tutorial 2.1
194 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Variables in p5.js (mouseX, mouseY)
Tutorial 7.8 variant
155 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 11 Sep 2018
Tutorial 7.8 with music and other uploaded images, including from other users. Click on the images.
Tutorial 7.3
80 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Arrays of Objects

Code! Programming with p5.js

Tutorial 1.1
24 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 6 Sep 2018
Code! Programming with p5.js

"Coding Train" video.

p5.js Web Editor

Optional video. This describes a different platform to Ancient Brain.

Tutorial 1.2
12 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 6 Sep 2018
p5.js Web Editor

"Coding Train" video.

Shapes & Drawing

Tutorial 1.3
12 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 6 Sep 2018
Shapes & Drawing

"Coding Train" video.

Color

Tutorial 1.4
11 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Color

"Coding Train" video.

Errors & Console

Tutorial 1.5
6 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 6 Sep 2018
Errors & Console

"Coding Train" video.

Code Comments

Tutorial 1.6
18 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 6 Sep 2018
Code Comments

"Coding Train" video.

Variables in p5.js (mouseX, mouseY)

Tutorial 2.1
194 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Variables in p5.js (mouseX, mouseY)

"Coding Train" video.

Variables in p5.js (Make your own)

Tutorial 2.2
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Variables in p5.js (Make your own)

"Coding Train" video.

JavaScript Objects

Tutorial 2.3 (0)
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
JavaScript without Objects
Tutorial 2.3 (1)
13 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
JavaScript with Objects

"Coding Train" video.

The map() Function

Tutorial 2.4
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
The map() Function

"Coding Train" video.

The random() Function

Tutorial 2.5
17 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
The random() Function

"Coding Train" video.

Introduction to Conditional Statements

Tutorial 3.1
11 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Introduction to Conditional Statements

"Coding Train" video.

The Bouncing Ball

Tutorial 3.2
11 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
The Bouncing Ball

"Coding Train" video.

Else and Else if, AND and OR

Tutorial 3.3
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Else and Else if, AND and OR

"Coding Train" video.

Boolean Variables

Tutorial 3.4 (0)
10 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Boolean Variables
Tutorial 3.4 (1)
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Boolean Variables

"Coding Train" video.

while and for Loops

Tutorial 4.1 (0)
14 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
while and for Loops
Tutorial 4.1 (1)
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
while and for Loops

"Coding Train" video.

Nested Loops

Tutorial 4.2 (0)
10 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Nested Loops
Tutorial 4.2 (1)
7 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Nested Loops

"Coding Train" video.

Function Basics

Tutorial 5.1 (0)
7 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Function Basics
Tutorial 5.1 (1)
7 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Function Basics

"Coding Train" video.

Function Parameters and Arguments

Tutorial 5.2
13 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Function Parameters and Arguments

"Coding Train" video.

Functions and Return

Tutorial 5.3
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 6 Sep 2018
Functions and Return. Nothing on screen. See console for output.

"Coding Train" video.

6.1 Introduction to Object-Oriented Programming

Link video for the Coding Train playlist. No World.


"Coding Train" video.

Classes in JavaScript

Tutorial 6.2
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Classes in JavaScript

"Coding Train" video.

Constructor Arguments with Classes

Tutorial 6.3
7 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Constructor Arguments with Classes in JavaScript

"Coding Train" video.

What is an array?

Tutorial 7.1
10 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
What is an array?

"Coding Train" video.

Arrays and Loops

Tutorial 7.2
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Arrays and Loops

"Coding Train" video.

Arrays of Objects

Tutorial 7.3
80 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Arrays of Objects

"Coding Train" video.

for...of loop

Tutorial 16.4
14 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 6 Sep 2018
for...of loop

"Coding Train" video.

Mouse Interaction with Objects

Tutorial 7.4
15 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Mouse Interaction with Objects

"Coding Train" video.

Removing Objects from Arrays

Tutorial 7.5 (0)
11 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Removing Objects from Arrays
Tutorial 7.5 (1)
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Removing Objects from Arrays
Tutorial 7.5 (2)
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Removing Objects from Arrays

"Coding Train" video.

Object Communication Part 1

Tutorial 7.6
14 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Object Communication Part 1

"Coding Train" video.

Object Communication Part 2

Tutorial 7.7
9 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Object Communication Part 2

"Coding Train" video.

Objects and Images

On Ancient Brain you can upload your own images and music. Try it!

Tutorial 7.8
61 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Objects and Images. On Ancient Brain you can upload your own images. Try it!
Tutorial 7.8 variant
155 runs ♦ 0 likes
By "Coding Train" p...  
Created: 6 Sep 2018
Modified: 11 Sep 2018
Tutorial 7.8 with music and other uploaded images, including from other users. Click on the images.

"Coding Train" video.

What next?

Now you know some programming in JavaScript and P5, you can keep going. JavaScript and P5 support many more advanced features. The Coding Train has more videos showing how to code these advanced features. See playlists and in particular P5 playlists.

We have another Coding Train course adapted to Ancient Brain. This course shows how to do more advanced 3D graphics "WebGL" Worlds using P5. You might like to go there next:

3D graphics course