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 7.8 variant
182 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 2.1
212 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Variables in p5.js (mouseX, mouseY)
Tutorial 7.3
90 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Arrays of Objects

Lessons have "Coding Train" videos and online "Worlds" you can edit.
Click video to play.
Click World image to run.
Click World name to get a page where you can clone it and edit it.



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

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



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

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

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

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

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

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

"Coding Train" video.
Tutorial 2.2
11 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.
Tutorial 2.3 (0)
12 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
JavaScript without Objects
Tutorial 2.3 (1)
16 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
JavaScript with Objects

"Coding Train" video.
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.
Tutorial 2.5
19 runs ♦ 1 like
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
The random() Function

"Coding Train" video.
Tutorial 3.1
13 runs ♦ 1 like
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Introduction to Conditional Statements

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

"Coding Train" video.
Tutorial 3.3
10 runs ♦ 1 like
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Else and Else if, AND and OR

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

"Coding Train" video.
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.
Tutorial 4.2 (0)
11 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.
Tutorial 5.1 (0)
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Function Basics
Tutorial 5.1 (1)
8 runs ♦ 0 likes
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Function Basics

"Coding Train" video.
Tutorial 5.2
15 runs ♦ 1 like
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Function Parameters and Arguments

"Coding Train" video.
Tutorial 5.3
9 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.

Link video for the Coding Train playlist. No World.



"Coding Train" video.

"Coding Train" video.
Tutorial 6.2
10 runs ♦ 1 like
By "Coding Train" p...  
Created: 4 Sep 2018
Modified: 4 Sep 2018
Classes in JavaScript

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

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

"Coding Train" video.
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.
Tutorial 7.3
90 runs ♦ 0 likes
By "Coding Train" p...  
Created: 5 Sep 2018
Modified: 5 Sep 2018
Arrays of Objects

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

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

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

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

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

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



"Coding Train" video.
Tutorial 7.8
71 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
182 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.

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