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?

#9.9

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

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

#9.16

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.

#9.20

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.

#9.21

p5-manager

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.

#9.22

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!

#9.23

createGraphics()

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