ProcessingJSShapes
Complex ShapesSee also: strokeJoin, curveTightness
Colors
Text
Transforms
Environment
Mouse
Keyboard
Math
Trigonometry
Date & Time
Debugging
JavaScript
Our documentation does not cover the many ways to use JavaScript. Learn more at:
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*)
Complex ShapesSee also: strokeJoin, curveTightness
Colors
- background(r, g, b)
Set the background color - fill(r, g, b)
Set the fill color for shapes - noFill()
Turn off fill for shapes - stroke(r, g, b)
Set the outline color for shapes - strokeWeight(thickness)
Change the thickness of lines and outlines - noStroke()
Turn off outlines for shapes - color(r, g, b)
Store a color in a variable - blendColor(c1, c2, MODE)
Blend two colors together - lerpColor(c1, c2, amount)
Find color between 2 colors
Text
- text(text, x, y)
Draw some text - textFont(font, size*)
Changes the font of text - textSize(size)
Change the size of text
Transforms
- rotate(angle)
Rotate shapes by an angle - scale(amount)
Scale shapes in both dimensions - translate(x, y)
Translate shapes by an offset
Environment
- width / height
The size of the canvas - frameRate(fps)
Change the frame rate of draw. - loop() / noLoop()
Cause the program to stop/start drawing.
Mouse
- mouseX, mouseY
Current coordinates of the mouse - pmouseX, pmouseY
Past coordinates of the mouse - mouseButton
Which button is pressed - mouseIsPressed
Whether mouse is being pressed - var mouseClicked = function() { };
Called when mouse is clicked - var mousePressed = function() { };
Called when mouse is pressed - var mouseReleased = function() { };
Called when mouse is released - var mouseMoved = function() { };
Called when mouse is moved - var mouseDragged = function() { };
Called when mouse is released - var mouseOver = function() { };
Called when mouse moves over canvas - var mouseOut = function() { };
Called when mouse moves out of canvas
Keyboard
- key
Number representing which key is pressed - keyCode
Represents when a special key is pressed - keyIsPressed
True if a key is being pressed, false otherwise - var keyPressed = function() { };
Called when a key is pressed - var keyReleased = function() { };
Called when a key is released - var keyTyped = function() { };
Called when a key is typed
Math
- random(low, high)
Generate a random number - dist(x1, y1, x2, y2)
Calculates the distance between two points - constrain(value, min, max)
Constrain value between min and max - min(num1, num2)
Return the minimum of two numbers - max(num1, num2)
Return the maximum of two numbers - abs(num)
Take the absolute value of a number - log(num)
Take the logarithm of a number - pow(num, exponent)
Raise a number to an exponent - sq(num)
Square a number - sqrt(num)
Take the square root of a number - round(num)
Return nearest whole number - ceil(num)
Return nearest whole number of greater/equal value - floor(num)
Return nearest whole number of lesser/equal value - PVector(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
Date & Time
- day() / month() / year()
Current date - hour() / minute() / second()
Current time - millis()
Milliseconds ellapsed 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 function - if (x < 20) { ... }
Only run code if a certain condition is true - while (x < 250) { ... }
Only run code while a certain condition is true - for (var i = 0; i < 8; i += 1) { }
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: