Using code to make interactive art

Brian Mueller

---

Introduction

• What is p5js?
  • p5.js is a JavaScript library modeled after Processing, a Java library
  • all JavaScript syntax rules apply
• How do I use p5js?
  • It runs nicely in an HTML page. Just embed it like you would with normal javascript!
• What is p5js used for?
  • Animations
  • Games
  • Mockups
  • Much more!

---

Getting Started

• template: use tiny.cc/p5template to get started
• using offline? make sure you download the p5.js file
• you can also fork/clone this repo
• IDEs
• Atom (live preview)
• Cloud9 (cloud based, semi-live preview)
• Nitrous (requires using python -m SimpleHTTPServer -p 3000)
• sandbox: jsbin.com
• native IDE: p5js > editor

---

Understanding the Structure

• function setup(){} is called once on load
• function draw(){} is called 60 times per second
  • you can change this with frameRate(#)
• createCanvas(w,h) sets the size of your sketch (px)
• optional: you can use displayWidth and displayHeight (or windowWidth and windowHeight)
• the top-left corner is (0,0)
  • x increases as you go right
  • y increases as you go down

---

Shapes

• the 4 basic shapes
• point(x,y)
• line(x1,y1,x2,y2)
• rect(x,y,w,h)
  • draws from the top-left corner
  • default "mode" is rectMode(CORNER)
  • rectMode(CENTER) draws from the center
  • rectMode(CORNERS) uses diagonal corners: rect(x1,y1,x2,y2)
  • see documentation for rounded edges
• ellipse(x,y,w,h)
  • draws from the center
  • default "mode" is ellipseMode(CENTER)
  • can also use ellipseMode(CORNER) and ellipseMode(CORNERS) (similar to rectMode())
• other shapes
• triangle, quadrilateral, etc. (see documentation)

---

Color

• color theory
• min = 0 (none of that color)
• max = 255 (100% of that color)
• three values represent RGB values, i.e. (255,0,0) means red (no green or blue)
• one value represents grayscale (all RGB values are equal (150) = (150,150,150)
• 0 = black, 255 = white
• color commands: the setting will be applied to all future shapes until the setting is changed again
• fill(R,G,B,[A]) sets the interior color
  • [A] is an optional "alpha" (opacity) argument
• stroke(R,G,B,[A]) sets the outline color
• strokeWeight(#) sets the outline thickness (px)
• background(R,G,B) sets the color of the background
  • use inside function setup(){} to run once
  • use inside function draw(){} to "wipe" the background for each frame

---

Variables

• global variables must be declared outside of all functions
• their scope is visible inside & outside all functions
• local variables are declared inside a function
• their scope is limited to that specific function
• system variables are reserved keywords for values such as the width and height of the canvas

---

Interaction

• mouseX and mouseY are system variables that contain the coordinates of the user's mouse
• function mousePressed(){} is called when the user clicks the mouse
• function keyPressed(){} is called when the user presses a key

Read more in the documentation under Events (including mobile: touchX, touchY, etc).

---

Conditionals

if (condition){
  // code
} else if (condition){
  // code
}
else {
  // default
}

---

Loops

while (condition) {
  // code
}

do {
  // code
} while (condition);

for (var i = 0; i < num; i++) {
  // code
}

---

Functions

// defining your function
function myFunction(optional parameters){
  // code
}

// calling your function
myFunction(arguments);

---

Arrays

var arrayName = [item1, item2, ...];
arrayName[1]; // returns item2

---

Examples

• Random Circles
• Ghost
• Flower (relative position)
• Flower dilation
• Interaction & Loops
• Interaction & Graffiti
• Circle Orb
• Kuku Kube [mobile]
• Pong

---

Extra

• GitHub Pages Tutorial
  • For mirroring your gh-pages and master branches