Friday, October 9, 2015

Visual programing Concepts

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

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

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, 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

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

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

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

debug(arg1, arg2, ...) Print to your browser's developer consoleprintln(data) Print to the canvas consoleprint(data) Print to the canvas console


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