Visual programing Concepts

 Shapes, Complex Shapes, Colors, Text, Transforms, Environment, Mouse, Keyboard, Math, Trig, Date/Time

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*)Modes: ellipseMode, rectMode, imageMode, strokeCap, bezierPoint, bezierTangent, curve, curvePoint, curveTangent, curveTightness

Complex Shapes

beginShape()endShape()vertex()curveVertex()bezierVertex()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 colorscolorMode, 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 textSee also: textWidth, textAscent, textDescent, textLeading, textAlignTransformsrotate(angle) Rotate shapes by an anglescale(amount) Scale shapes in both dimensionstranslate(x, y) Translate shapes by an offsetpushMatrix/popMatrix, resetMatrix, printMatrixEnvironmentwidth / height The size of the canvasdraw = function() { }; Called repeatedly during program execution.playSound(sound) Plays one of the allowed sounds.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 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

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 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 vectorSee also: mag, exp, map, norm, lerp, noise, noiseDetail, Random.nextGaussian

Trigonometrycos(degrees) Take the cosine of an anglesin(degrees) Take the sine of an angletan(degrees) Take the tangent of an angleSee also: acos, asin, atan, atan2, radians, degrees, angleMode

Date & Timeday()/ 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 to the canvas consoleprint(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++) { } Repeat code a fixed number of times

var array = [0, 1, 2, 3, 4]; 

Make an array of 5 numbers