Review 01

What Have We Learned So Far?

Here's a list:

Media Reviewed

What did we learn about media:

Media requires a special treatment to be displayed by Processing.
In general, you have to put the media file to be used into the 'data' folder of the sketch before it can be used.
Each media type requires setting up a variable of that media type.

Once the variable is established, you have to put the media data into the variable with a corresponding special function. It's also best practice to do the in the setup() function.

Once the variable is loaded with the data you display it in the Display Window with a special function that references the variable and its location.

image(variableName, xLocation, yLocation, optionalWidth, optionalHeight)
textFont(variableName, optionalSize) to set the font to be used by the next text("string", xLocation, yLocation, optionalMaxWidth, optionalMaxHeight) function.
shape(variableName, xLocation, yLocation, optionalWidth, optionalHeight)

And SVG shapes can be built with Illustrator, but the big GOTCHA is you can only export to an SVG file with the Advanced Settings > CSS Properties set to Presentation Attributes (click on the More Options button to find the setting in the export dialog).

Font and Text in Processing have lots of settings you can set, and a whole system of code that sets them. They are, to whit:

SYNTAX	Effect	DOCS
PFont	Data type for a variable that can contain a font	link
createFont("fontname.ttf", sizeVal)	Used to put a font file, kept in the sketches data folder, into a variable. The sizeVal must be specified, even though it can be reset with textFont().	link
textFont(fontVariable, optionalSize)	Sets up the text() function to use the font stored in the fontVariable. The optionalSize value can set the size to something other than the default value set in createFont().	link
text("String", xVal, yVal, optWidth, optHeight)	The thing that throws the text into the Display Window. The first parameter can be a string variable or a block of text in double-quotes (not single). xVal and yVal are the location of the baseline of the text, not the upper left corner. optWidth and optHeight create an invisible box that the text lives inside of.	link
textAlign(alignX, optionalAlignY)	Sets the alignment to LEFT, CENTER, or RIGHT. The optionalAlignY sets the vertical alignment to TOP, BOTTOM, or CENTER, which really only makes sense if the text is in a box of a particular width and height.	link
textSize(sizeVal)	Sets the size of the text in pixels. Unnecessary if you use textFont(fontVariable, optionalSize), but handy if you want to change the size after you've set the textFont().	link
textLeading(sizeVal)	Sets the spacing between lines of text in pixels. Reset when you use textSize().	link
fill(rVal, gVal, bVal, alphaVal)	The way to color the text other than the default white.	link

Two kinds, or maybe two tricks, to work with. Detecting a regular key, like a,b,c or space, and detecting a special key, like right and left arrows.

The commands around keyboard interaction are:

key - an environmental variable that holds the value of the last key pressed (and keeps holding it until another key is pressed)
keyCode - an environmental variable that holds the value of the last special key pressed, it returns a value that can be tested with the reserved words UP, DOWN, LEFT, RIGHT, ALT, CONTROL, and SHIFT
keyPressed() - a function the gets run everytime a key is pressed. We won't use this method, but you could if you wanted to. We'll learn more about functions soon...
keyPressed - a boolean environmental variable that is true if any key is pressed and false if no keys are pressed. Useful in a draw() loop.
keyReleased() - similar to keyPressed() and useful if you want to do interaction the responds to keys being held down to repeat an action.
keyTyped() - similar to keyPressed() and useful if you want to do interaction the responds to keys being held down to repeat an action.

The ones we care about for now are key, keyCode, and keyPressed.