Reference: https://github.com/processing/p5.js/wiki/Processing-transition
| Processing | P5.js | Comments |
| size() | createCanvas() | a sketch is more than the drawing canvas |
| frameRate | frameRate() | frameRate(num) sets the frame rate |
| preload() | Typically used to preload images. E.g. function preload() { img = loadImage(“assets/moonwalk.jpg”); } | |
| setup() | Used to configure the application function setup() { createCanvas(640, 480); } | |
| mousePressed | mouseIsPressed | the variable is renamed |
| mouseX, mouseY | touchX, touchY | New touch support that’s comparable to mouse support |
| mousePressed() | touchStarted() | |
| mousedDragged() | touchMoved() | |
| mouseReleased() | touchEnded() | |
| touches[] | predefined array that contains a series of objects with x and y properties corresponding to the position of each finger | |
| pushMatrix() / popMatrix() pushStyle() / popStyle() | push() / pop() | combined matrix and style methods |
| instance mode | Default: Global namespace. Also has instance mode. See instance mode example and global vs instance mode tutorial. |