MCB419 logo  


p5js

For this course, we will be using a javascript library called p5.js, which is closely related to the Processing programming language. Processing was originally developed as a tool for visual artists and graphic designers, but it can also be used as a general-purpose programming language for modeling a wide range of physical, biological and information processing phenomena.

We will be doing in-class programming exercises almost every class session, so please bring a laptop to class. If this is a problem, talk to Prof. Nelson.

You will need to download and install a copy of the p5.js editor on your laptop and/or home computer.

Getting Started

You can find online tutorials and programming examples on the p5.js web site, as well as the full language reference.

If you are relatively new to programming, I recommend working through videos 1.X through 6.X of Dan Schiffman's p5js tutorial videos.

If you are an experienced programmer, but your javascript skills are rusty, I recommend Learn javascript in Y minutes (where Y is about 15 minutes).

I will provide lots of course-specific tutorials and examples in class to help you get started.

Abbreviated Reference

Here are links to some of the most common p5.js functions:

Structure/Control draw() setup()
Graphics Properties createCanvas() frameRate() frameCount height width
Math Functions abs() ceil() constrain() dist() exp() floor() log() mag() map() min() max() norm() pow() round() sq() sqrt()
Trig Functions sin() cos() tan() asin() acos() atan() atan2() degrees() radians()
Random Values noise() noiseSeed() random() randomSeed() randomGaussian()
Useful Variables height width frameCount frameRate
Primitive Shapes arc() ellipse() line() point() quad() rect() triangle()
Color background() color() fill() noFill() stroke() noStroke()
Transforms push() pop() translate() rotate() scale()
Text/String text() textAlign() print() + (concat) nf() (format)
Keyboard key keyCode keyTyped()
Mouse Functions mouseClicked() mouseDragged() mouseMoved() mousePressed() mouseReleased() mouseWheel()
Mouse State mouseButton mouseIsPressed mouseX mouseY pmouseX pmouseY
Graphical User Interface createButton() createInput() createSlider() html() mousePressed() parent() position() size() style() value()
Math Operators + - * / += -= *= /= ++(increment) --(decrement) %(modulus)
Relational Operators !=(inequality) ==(equality) < <= > >=
Logical Operators !(logical NOT) &&(logical AND) ||(logical OR)
Constants true false HALF_PI PI QUARTER_PI TWO_PI
Comments //(inline comment) /* ... */(block comment)

Using jsbin.com IDE (Integrated Development Environment)

The online jsbin.com environment can be used to develop project code, similar to the p5.js editor. We will use jsbin.com for homework submissions.

Setup procedure

  1. create a free user account at github.com (or use an existing github account)
  2. go to jsbin.com/voloxan/edit; this will serve as a template file
  3. login using your github account info
  4. from the jsbin.com File menu select "clone"... this will create a copy that you can modify for your own purposes
  5. read the getting-started guide
  6. ...more details provided in class

Mark E. Nelson, University of Illinois at Urbana-Champaign, 2005-2016.