p5.
js
2D Primitives Attributes Environment Structure
strokeWeight(weight) print(string) function preload(){
(x1, y1)
line(x1, y1, x2, y2) run once before setup():
set the width of the stroke = console.log() asynchronous function
//load data
(x2, y2) background(color) cursor(TYPE) }
set the background color ARROW, CROSS, HAND, MOVE, TEXT
function setup(){ run once when the program starts
(x1, y1) rect(x1, y1, width, height)
fill(color) framerate(fps)
height
createCanvas(width, height); create a canvas, size in pixels
set the fill color change frame per second
width noLoop(); stops continuously executing draw()
stroke(color) windowResized()
}
ellipse(x1, y1, width, height) set the stroke color called when window resized
(x1, y1) function draw(){ run continuously after setup()
height
noFill()
//draw
width disables fill
Rendering }
arc(x1, y1, width, height, start, stop) noStroke() createCanvas(w, h)
(x1, y1) disables stroke redraw()
stop height
resizeCanvas(w, h)
executes the code in draw() once
start
width ellipseMode(MODE) createGraphics(w, h)
CENTER, RADIUS, CORNER, CORNERS return new p5.Renderer object
(x1, y1)
beginShape(); off-screen graphics buffer for loop init
vertex(x1, y1); rectMode(MODE)
for ( init; test; update ) {
(x2, y2)
vertex(x2, y2); CORNER, CENTER, RADIUS
statement false
(x3, y3)
vertex(x3, y3); Events test
textAlign(h, v) }
endShape(CLOSE); keyPressed() true
h: LEFT, CENTER, RIGHT //example
for (var i = 0; i < 10; i++){ statements
v: TOP, BOTTOM, CENTER, BASELINE keyReleased()
text(string, x, y, x2, y2) print(i);
textSize(n) mouseMoved() }
update
mousePressed()
RADIANS
Colours mouseClicked()
PI + HALF_PI
4.71
fill(120) gray: 0 - 255
3.93 if statement false
270 5.50
Image test
225 315 fill(255, 0, 0) r, g, b: 0 - 255 if (test) {
saveCanvas(canvas, filename, ext) true
statement
fill(255, 0, 0, 50) r, g, b, alpha (0 - 100)
PI 3.14 180 DEGREES 0 0.00 TWO_PI
filename: string } statements
fill(‘red’) color string ext: “jpg” or “png”
135 45 fill(‘#ccc’) 3-digit hex
2.36 90 0.79 QUARTER_PI
fill(‘#222222’) 6-digit hex
1.57
HALF_PI fill(color(0, 0, 255)) p5.Color object
System Variables IO p5.dom note
frameCount loadFont() select(name)
number of frames since program started load .otf or ..ttf file in preload() select HTML element by ID(“#”) or class(“.”)
focused loadJSON(path, [callback], [errorcallback]) createDiv(html)
confirms if the window is focused loading JSON file createP(html)
displayWidth / displayHeight loadString(path, [callback], [errorcallback]) createSpan(html)
width / height of entire screen display loading a text file
createImg(src, [alt])
windowWidth / windowHeight loadTable(path, [options], [callback)
width / height of window options: “header”, “csv”, “tsv” createA(href, html, [targe])
returns p5.Table object
width / height createSlider(min, max, [value], [step])
width / height of canvas createButton(label, [value])
Math
key dist(x1, y1, x2, y2) createCheckbox([label], [value])
most recent key typed calculate distance between 2 points
createSelect()
keyCode option(string) to add item
map(v, input1, input2, output1, output2)
special keys: BACKSPACE, DELETE, ENTER, mapping the value from input to output range createRadio([divID])
RETURN, TAB, ESCAPE, SHIFT, CONTROL, option(string) to add item
OPTION, ALT, UP_ARROW, DOWN_ARROW, max()
LEFT_ARROW, RIGHT_ARROW createInput([value], [type])
min()
type: “text”, “password”
mouseX / mouseY round()
createFileInput([callback], [multiple])
current horizontal / vertical mouse position floor()
ceil() parent(parent)
pmouseX / pmouseY
horizontal / vertical mouse position in degrees(radians) id([id])
the previous frame
radians(degrees)
class([class])
mouseButton random()
LEFT, RIGHT, or CENTER changed(function)
Conversion input(function)
String float() mousePressed(function)
trim(string) int()
remove white spaces str()
useful links
split(string, delim) boolean()
thecodingtrain.com by daniel shiffman
split a string into pieces by delimiters hex() p5js.org
github.com/processing/p5.js/wiki/Instantiation-Cases
