Quick Jump: Shapes, Complex Shapes, Colors, Text, Transforms, Environment, Mouse, Keyboard, Math, Trig, Date/Time, Debugging, JavaScript
ProcessingJS
Shapes
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 shapes
stroke(r, g, b)
Set the outline color for shapesstrokeWeight(thickness)
Change the thickness of lines and outlinesnoStroke()
Turn off outlines for shapes
color(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 text
textFont(font, size*)
Changes the font of text
textSize(size)
Change the size of text
See also: textWidth
, textAscent
, textDescent
, textLeading
, textAlign
Transforms
rotate(angle)
Rotate shapes by an angle
scale(amount)
Scale shapes in both dimensions
translate(x, y)
Translate shapes by an offset
See also: pushMatrix
/popMatrix
, resetMatrix
, printMatrix
Environment
draw = function() { };
Called repeatedly during program execution.
playSound(sound)
Plays one of the allowed sounds.
See also: Program.assertEqual
, Program.restart
, frameRate(fps)
frameCount
, loop
/ noLoop
Mouse
mouseX, mouseY
Current coordinates of the mousepmouseX, pmouseY
Past coordinates of the mousemouseButton
Which button is pressedmouseIsPressed
Whether mouse is being pressed
mouseClicked = function() { };
Called when mouse is clickedmousePressed = function() { };
Called when mouse is pressedmouseReleased = function() { };
Called when mouse is released
mouseMoved = 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
key
Number representing which key is pressedkeyCode
Represents when a special key is pressedkeyIsPressed
True if a key is being pressed, false otherwise
keyPressed = 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 numbers
abs(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 number
round(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 angle
sin(degrees)
Take the sine of an angle
tan(degrees)
Take the tangent of an angle
See also: acos
, asin
, atan
, atan2
, radians
, degrees
, angleMode
Date & Time
millis()
Milliseconds elapsed since program start
Debugging
debug(arg1, arg2, ...)
Print to your browser's developer console
println(data)
Print to the canvas console
print(data)
Print to the canvas console
JavaScript
var drawWinston = function() { };
Define a new functionif (x < 20) { ... }
Only run code if a certain condition is true
while (x < 250) { ... }
Only run code while a certain condition is truefor (var i = 0; i < 8; i++) { }
Repeat code a fixed number of times
var array = [0, 1, 2, 3, 4];
Make an array of 5 numbers
Our documentation does not cover the many ways to use JavaScript. Learn more at:
This reference is based on ProcessingJS reference and is licensed under the CC BY-NC-SA 2.0 license.