Additional Topics

tutorial #9: P5.JS Tutorial

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

The native JavaScript functions setTimeout and setInterval are covered. I also explore the concept of a JavaScript closure. What does it mean to define a function inside a function and how is that useful?


Transformations (Translate, Rotate, Push/Pop) - Part 1

18 Sep 2017

In this three part tutorial, I cover matrix “transformations” using p5.js. In this video I cover the functions translate(), rotate(), push() and pop().


Minimum Spanning Tree (Prim's Algorithm)

18 Mar 2016

This video covers the computational geometry “minimum spanning tree” problem, and walks through the JavaScript code for a solution known as “prim’s algorithm.”


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.


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.


CodePen in p5.js

03 Aug 2016

In this tutorial, I show you how you can use the online code editor CodePen to write your own p5.js sketches.


Polar Coordinates

15 Mar 2017

In this video, I cover the basics of polar coordinates and trigonometry. This applies to a variety of scenarios in my tutorials and challenges where an algorithm calculates geometry in polar coordinates, but I need to convert the values to cartesian coordinates in order to actually draw them.



24 Sep 2017

This video is about a nifty tool for p5.js called “p5-manager”. The tool was created by Chiun Hau You in node.js and allows you to create a p5.js sketch with simple terminal commands.


Custom Shapes

27 Sep 2017

In this video, I look at how to draw “custom” shapes in p5.js, using, beginShape(), endShape(), vertex() and curveVertex() Special thanks to Rune Madsen’s Programming Design Systems!



29 Dec 2017

In this video, I discuss the p5.js function createGraphics(). createGraphics() creates a 2D graphics “context” (also sometimes called “buffer”) that you can use as an “offscreen canvas.”