MCB419 logo  


p5js

In this course we will be programming in javascript using a library called p5js to develop interactive, agent-based simulations. We will have weekly programming assignments and will be doing in-class programming exercises almost every class session. Please bring a laptop to class. If this is a problem, talk to Prof. Nelson.

Getting Started

We will be using a couple of different online code editors: the p5js editor and the jsbin editor.
p5js editor: Keyboard Shortcuts

Here's a sample MCB 419 template file in both environments: the p5js template and the jsbin template.
If you create a user account you can "duplicate" or "clone" the template files and save your own modified version.

Here are some p5js examples and the full language reference.

If you are relatively new to programming, you might want to work through 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.

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)

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