VERY Intro to P5.js
Posted: Thu Sep 16, 2021 6:35 am
https://p5js.org/
Coding Train intro to P5js
INTRO TO P5.js
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:
Then, if we don't have a ton of stuff installed, we can just upgrade everything that's out of date with:
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:
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". https://github.com/nvm-sh/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.
Add this line where you load modules for antigen:
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:
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:
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: https://github.com/lukechilds/zsh-nvm
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:
https://www.npmjs.com/package/p5-manager
To install it, type the command below. The "-g" means make it globally available on the command-line:
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:
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:
Then, it's time to start the server, so, from the master directory, start the server:
Now you can open the server in a browser with this address:
localhost:5555
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:
As you develop, you'll likely collect a number of libraries. To list installed packages (all)
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: Then you need to enable Live Edit for JavaScript which is disabled by default: Next, create a node.js run configuration for your project and point it to your web directory: Under Browser / Live Edit, tell it what you want:
---
REFERENCE:
https://p5js.org/reference/
Web Editor vs IDE
Shapes and Drawing
setup() and draw() - one time vs loop
rect
line
circle()
Color
background()
fill()
noFill()
noStroke()
Errors - Console
Comments
Variables
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 = += -+
Use
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
random()
map()
createGraphics()
Conditional Statements
Else and Else if, AND/OR
Booleans
while and for loops
Functions - writing your own
Function parameters - how to pass them around
Function return values
Object Oriented Programming
Classes in JavaScript
Constructors
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:
Coding Train intro to P5js
INTRO TO P5.js
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
Code: Select all
brew upgrade
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
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
Code: Select all
antigen bundle lukechilds/zsh-nvm
Code: Select all
nvm ls
Code: Select all
nvm install node # "node" is an alias for the latest version
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:
https://www.npmjs.com/package/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
Code: Select all
p5 new ART4612EAI
Code: Select all
cd ART4612EAI
p5 generate "InsertSketchNameHere"
Code: Select all
p5 server
localhost:5555
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"
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: Then you need to enable Live Edit for JavaScript which is disabled by default: Next, create a node.js run configuration for your project and point it to your web directory: Under Browser / Live Edit, tell it what you want:
---
REFERENCE:
https://p5js.org/reference/
Web Editor vs IDE
Shapes and Drawing
setup() and draw() - one time vs loop
rect
line
circle()
Color
background()
fill()
noFill()
noStroke()
Errors - Console
Comments
Variables
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 = += -+
Use
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
random()
map()
createGraphics()
Conditional Statements
Else and Else if, AND/OR
Booleans
while and for loops
Functions - writing your own
Function parameters - how to pass them around
Function return values
Object Oriented Programming
Classes in JavaScript
Constructors
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: