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

In this three part tutorial, I cover matrix “transformations” using p5.js. In this video I look at the scale() function.

In this three part tutorial, I cover matrix “transformations” using p5.js. In this video, I look a bit behind the scenes on how transformations work and where the terms “push” and “pop” come from. I discuss the difference between a stack and a queue, rotate() vs rotateZ(), and what a “matrix” refers to in computer graphics.

This video covers the setTimeout function in JavaScript in the context of p5.js. setTimeout allows you to execute a given function at a specific time (in milliseconds.)

This video covers the setInterval() function in JavaScript in the context of p5.js. setInterval() allows you to execute a given function every N milliseconds.

This video covers JavaScript closures. What is a closure? Why is it useful? The context explored is a closure function that animates a DOM element in the browser.

This video looks at how an object can store a history of positions. This allows you to render the object’s trail while keeping background() in the draw() loop. I look briefly at p5.Vector and createVector() as well as the push() and splice() functions in JavaScript arrays.

This video demonstrates a “circle packing”-like algorithm. Circles are placed randomly in the canvas, but only if they are not overlapping with any previous circles. This is referred to as “uniform random sampling.” The p5.js dist() function is demonstrated.

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

This video looks at how to “reset” a p5 sketch on the click of a button. The example uses the p5.dom library and createButton() / mousePressed() functions.

This video looks at p5.js “instance mode”.

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.

In this short tutorial, I will show you how to use GitHub Pages to host your own p5.js sketches for free.

In this p5.js tutorial, I demonstrate how to create a loading animation (progress bar) in JavaScript. The preload() method is covered, as well as how to use callbacks to track loading multiple media files asynchronously.

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.

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

In this JavaScript Tutorial, I discuss how the JavaScript “arguments” array can be used for function and constructor overloading.

In this video, I demonstrate two programming environments you can use to code p5.js sketches. First I look at the OpenProcessing online editor created by Sinan Ascioglu. I also cover p5.js mode in the Processing IDE.

In this video, I examine the concept of “Prototype” in the JavaScript programming language. I look at how you can attach methods to objects via prototype (for both objects of existing JS types or your own). I also discuss the “prototype chain” and prototypal inheritance.

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.

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.

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!

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

You should go and watch my videos on ES6 classes instead, but if you choose to be here, I will discuss how inheritance works with prototypes in JS.