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