Shapes
rect(x, y, w, h)ellipse(x, y, w, h)triangle(x1, y1, x2, y2, x3, y3)line(x1, y1, x2, y2)point(x, y)arc(x, y, w, h, start, stop)bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)quad(x1, y1, x2, y2, x3, y3, x4, y4)image(image, x, y, width*, height*)
See also: ellipseMode, rectMode, imageMode, strokeCap, bezierPoint, bezierTangent, curve, curvePoint, curveTangent, curveTightness
Complex Shapes
See also: strokeJoin, curveTightness
Colors
background(r, g, b)Set the background colorfill(r, g, b)Set the fill color for shapesnoFill()Turn off fill for shapesstroke(r, g, b)Set the outline color for shapesstrokeWeight(thickness)Change the thickness of lines and outlinesnoStroke()Turn off outlines for shapescolor(r, g, b)Store a color in a variableblendColor(c1, c2, MODE)Blend two colors togetherlerpColor(c1, c2, amount)Find color between 2 colors
See also: colorMode, red, green, blue, alpha, hue, saturation, brightness
Text
text(text, x, y)Draw some texttextFont(font, size*)Changes the font of texttextSize(size)Change the size of text
See also: textWidth, textAscent, textDescent, textLeading, textAlign
Transform
rotate(angle)Rotate shapes by an anglescale(amount)Scale shapes in both dimensionstranslate(x, y)Translate shapes by an offset
See also: pushMatrix/popMatrix, resetMatrix, printMatrix
Environment
width/heightThe size of the canvasdraw = function() { }Called repeatedly during program executionplaySound(sound)Plays one of the allowed sounds
See also: Program.assertEqual, Program.restart, frameRate(fps), frameCount, loop, noLoop
Mouse
mouseX, mouseYCurrent coordinates of the mousepmouseX, pmouseYPast coordinates of the mousemouseButtonWhich button is pressedmouseIsPressedWhether mouse is being pressedmouseClicked = function() { }Called when mouse is clickedmousePressed = function() { }Called when mouse is pressedmouseReleased = function() { }Called when mouse is releasedmouseMoved = function() { }Called when mouse is movedmouseDragged = function() { }Called when mouse is draggedmouseOver = function() { }Called when mouse moves over canvasmouseOut = function() { }Called when mouse moves out of canvas
Keyboard
keyNumber representing which key is pressedkeyCodeRepresents when a special key is pressedkeyIsPressedTrue if a key is being pressed, false otherwisekeyPressed = function() { }Called when a key is pressedkeyReleased = function() { }Called when a key is releasedkeyTyped = function() { }Called when a key is typed
Math
random(low, high)Generate a random numberdist(x1, y1, x2, y2)Calculates the distance between two pointsconstrain(value, min, max)Constrain value between min and maxmin(num1, num2)Return the minimum of two numbersmax(num1, num2)Return the maximum of two numbersabs(num)Take the absolute value of a numberlog(num)Take the logarithm of a numberpow(num, exponent)Raise a number to an exponentsq(num)Square a numbersqrt(num)Take the square root of a numberround(num)Return nearest integerceil(num)Return nearest integer of greater/equal valuefloor(num)Return nearest integer of lesser/equal valuePVector(x, y)An object that describes a 2-dimensional vector
See also: mag, exp, map, norm, lerp, noise, noiseDetail, Random.nextGaussian
Trigonometry
cos(degrees)Take the cosine of an anglesin(degrees)Take the sine of an angletan(degrees)Take the tangent of an angle
See also: acos, asin, atan, atan2, radians, degrees, angleMode
Date & Time
day()/month()/year()Current datehour()/minute()/second()Current timemillis()Milliseconds elapsed since program start
Debugging
debug(arg1, arg2, ...)Print to your browser’s developer consoleprintln(data)Print a new line to the canvas consoleprint(data)Print to the canvas console
JavaScript
var drawWinston = function() { }Define a new functionvar array = [0, 1, 2, 3, 4]Make an array of 5 numbersif (x < 20) { }Only run code if a certain condition is truefor (var i = 0; i < 8; i++) { }Repeat code a fixed number of timeswhile (x < 250) { }Only run code while a certain condition is true
Our documentation does not cover the many ways to use JavaScript. Learn more at:
Based on: ProcessingJS reference. Licensed under: CC BY-NC-SA 2.0 license.