VERY Intro to P5.js

Software tutorials of interest.
Post Reply
Site Admin
Posts: 87
Joined: Wed Jan 27, 2010 7:33 pm

VERY Intro to P5.js

#1 Post by jstenner »

Coding Train intro to P5js


First thing you'd normally do if working on your own computer is update and upgrade Homebrew. Homebrew will update it's database of packages like this:

Code: Select all

brew update
Then, if we don't have a ton of stuff installed, we can just upgrade everything that's out of date with:

Code: Select all

brew upgrade
Because the FAC302 lab is a shared environment, permissions can be tricky, so we'll just leave it to others to keep our Homebrew install updated. Unless you're having problems, you can ignore the updates/upgrades.

To work with P5.js we COULD use the P5 Web Editor. It's free and a good starting place, but we'd prefer to develop locally on our own machines, use a more developed and helpful IDE (remember what that means?), and generally have more control. We could use all sorts of web servers and each has specific workflows, but we're going to use Node.js. Since we have the Homebrew package manager installed we COULD do this via the shell:

Code: Select all

brew install node
BUT, it's not uncommon to need to switch between versions of node.js specific to a particular project. So, we're going to install Node Version Manager or "nvm".

Since we've previously installed the oh-my-zsh antigen plugin manager, we can install nvm really easily as a shell plugin using antigen. All we have to do is modify our .zshrc file to load nvm.

Code: Select all

pico .zshrc
Add this line where you load modules for antigen:

Code: Select all

antigen bundle lukechilds/zsh-nvm
Quit iTerm2 and reopen it. You will see that antigen is retrieving and installing nvm for us! You can test that it's working with:

Code: Select all

nvm ls
That will show you which versions of node.js are installed. The next step is to install whatever version of node.js we want to develop with, or just install the latest release with:

Code: Select all

nvm install node # "node" is an alias for the latest version
Use nvm ls again and you'll see the default is the version you just installed. Here's where it's getting the nvm-zsh install:

When node is installed (either via Homebrew or antigen/zsh) it comes with node package manager (npm), so we don't need a separate install of that! Yes, this is yet another "package manager". NPM is specifically a JavaScript package manager for Node.js applications.

The first node.js package we want to install is a tool to make it easy to get started with P5.js "sketches". That tool is called p5-manager:

To install it, type the command below. The "-g" means make it globally available on the command-line:

Code: Select all

npm install p5-manager -g
Using p5-manger, there are a couple of things we can do easily. If you are going to work on a number of different sketches, potentially, say for my class, you might want to create a "collection" of sketches. Each of the sketches will use a single node.js webserver. If you're just going to create a single sketch, then you'll want to "generate" a "bundle". Here are the two concepts. First, generate a "collection" in your student directory on Titaniumz-share. Remember how to use "cd" to navigate to that directory? Once you're there:

Code: Select all

p5 new ART4612EAI
That will make a master folder with subdirectories containing the necessary files to run the server and allow you to create sketch-specific subdirectories. To create a sketch:

Code: Select all

cd ART4612EAI
p5 generate "InsertSketchNameHere"
Then, it's time to start the server, so, from the master directory, start the server:

Code: Select all

p5 server
Now you can open the server in a browser with this address:

If at some point in the future you just want to create a freestanding sketch (i.e. NOT a part of a "collection") you'll use the "bundle" keyword like this:

Code: Select all

p5 generate --bundle "InsertSketchNameHere"
As you develop, you'll likely collect a number of libraries. To list installed packages (all)

Code: Select all

npm list -g

Okay, so that's a start. Let's say we want all the goodness that a professional quality IDE provides. JetBrains WebStorm is installed on lab machines and a license has been purchased for you with your course fees. Open WebStorm.

To get WebStorm to recognized p5js functions you have to add it to the Libraries list:
Screen Shot 2021-08-12 at 2.13.19 PM.png
Then you need to enable Live Edit for JavaScript which is disabled by default:
Screen Shot 2021-08-12 at 2.42.21 PM.png
Next, create a node.js run configuration for your project and point it to your web directory:
Screen Shot 2021-08-12 at 2.43.06 PM.png
Under Browser / Live Edit, tell it what you want:
Screen Shot 2021-08-12 at 2.43.28 PM.png


Web Editor vs IDE
Shapes and Drawing
setup() and draw() - one time vs loop
Errors - Console
System variables: mouseX, mouseY
Draw/animate with mouse
Create your own variables
Declare - "let" used to be "var" in earlier versions of JavaScript
Initialize - assignment operations = += -+
Scope of variables - global, local
Animate circle location with variable: circleX = circleX + 1;
You could reset the circle location with mousePressed();
move background() up to setup() so you can animate without redrawing background
Incrementation Operations
Conditional Statements
Else and Else if, AND/OR
while and for loops
Functions - writing your own
Function parameters - how to pass them around
Function return values
Object Oriented Programming
Classes in JavaScript
Multiple Files in a project
Arrays Intro
Arrays and Loops
Arrays of Objects
Removing objects from Arrays
Passing info between Objects
Objects and Images
ES6 Arrow Functions:
The master of disaster!

Site Admin
Posts: 87
Joined: Wed Jan 27, 2010 7:33 pm

Re: VERY Intro to P5.js

#2 Post by jstenner »

More info from class:

Code for each of these is on Titaniumz-share/Students/ai
or, you can grab it from Daniel Shiffman's GitHub: ... arning/ml5
#1 - Did last week...basic Image classification and object detection.

#3 - (no idea re: #2) Using Transfer Learning with ML5 Feature Extractor: ... rning.html

#4 - Saving and Loading models

#5 - Using Transfer Learning with Teachable Machines and KNN Classification: ... sorflow-js ... ion-1.html

#6 - Training our own Neural Network: ... r-own.html

#8 - Training our own NN using Image Convolution (CNN):
The master of disaster!

Post Reply