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: