Class #1 introduction, functions, variables, conditionals
what is processing hello world tour of the grounds functions,expressions, statements console/debugging drawing data types and variables decisions homework
What is processing programming language development environment software that lets you write other software
What is processing good for software sketchbook - good for prototyping extendible with JAVA if needed designed for artists and designers
nice things about processing open source syntactically derived from popular languages low overhead to get started well documented online
hello world! size(200,200); background(150);
sketches processing projects are called sketches each sketch has its own folder that contains the sketch and associated files preferences will show where sketch folders are located
export creates all the files needed to put your program on the internet export application creates a stand alone application
Comments // single comment / * */ multiple line comment useful for remembering what the heck you re doing handy for debugging
Two functions size (100, 300) // creates a window 100 pixels wide and 300 pixels tall background (150) // sets the background color to grey
Functions functions command the computer to do all kinds of actions - draw shapes, set colors, perform calculations etc usually lowercase word followed by parentheses myfunction ();
Parameters The parentheses contain the parameters Functions can have none, one, or many parameters Parameters affect how the function works
expressions combination of operators such as +, -, *, / that operate on values from left to right expression always has a value found by evaluating it s contents 5 5 5-14 -9 ((3+2) * 12) 60
comparison expressions can also compare two values 5 > 6 False 8 > (14-10) True
statements combination of expressions creates a statement. statement is the programming equivalent of a sentence must end in a semicolon ; many kinds of statements
some example statements size (200, 200); int x; x = 400;
notes processing is case sensitive processing is not white space sensitive don t forget those semi-colons
console a nice place for you to hang out and chat with your program very useful for debugging and in general figuring out what your program is doing
print() and println() print ( this class sux ); println (1); println (2); println (3);
debugging save working versions divide and conquer retreat to last known working state
Pixels Pixels, also known as picture elements are the elementary building blocks of the universe. The computer screen is a grid of pixels Using processing, we ll achieve TOTAL PIXEL CONTROL
Size (x, y) size (x, y) sets the size of the window of our program in pixels. don t forget the semi-colon
Coordinate system screen position is given by an x position (horizontal) and y position (vertical). point of origin is the upper left corner values increase going down and going right position is given by writing first the x position, then a comma, then the y (12, 78)
Primitives drawing a shape with code is weird because you have to say where everything goes with number
Point point (x, y) setting a point off screen will make it magically not appear
line and friends line(x1, y1, x2, y2) x1 and y1 are starting cords, x2 and y2 are ending cords triangle (x1, y1, x2, y2, x3, y3) quad (x1, y1, x2, y2, x3, y3, x4, y4)
rect and ellipse rect and ellipse have their own thing going on rect (x, y, width, height); ellipse (x, y, width, height);
Bezier really has its own thing going on
Drawing order just like real life, whatever you draw last ends up on top if you execute background() it draws over whatever you drew before
grey values 8 bit graphic, 0 to 255 background (0); // black background (255); // white background (122); // one of 253 lovely shades of grey
fill and stroke fill () sets the color the shape is filled with stroke () sets the outline color nostroke () turns off outlines fill and stroke affect all proceeding drawing commands. call fill and stroke again to change values optional second value affects transparency
save() save( my_picture.jpg ); documents/processing/mysketch
data population of the lab, average grade, mouse clicks, user name, etc stored as numbers and characters store the location of a shape, track user activity
data types numbers, letters, words, colors, images, fonts, boolean values different kinds of data need more or less space allocation memory locations can be interpreted as various things. 01000001 = 41 = A
variables container for holding data specific data type two parts - name and value must be declared before used
declaration states the data type and name int x int x = 4 float y = 4.0002 float x, y, z
don t 5 = 12 //assign a constant to another constant int x = 2.5 //assign a float to an int redeclare the same variable use a reserved word as a variable name start variable with a number
do use descriptive, self-documenting names have fun start name with a lower letter, if there are multiple words, capitalize the start of each word myradvariable
scope Where you declare your variable affects where you can use it. More on this later
Math expressions to the right of = are evaluated before value is assigned to the left int a = 5 + 9 // a = 14 a = a + 10 // a was 14, now a = 24
ints and floats float corrupts int 4/3 = 1 (int with int = int) 4.0 / 3.0 = 1.3333334 (float with float = float) 4/3.0 = 1.3333334 (int with float = float)
int and float int values can be assigned to floats float values can only be assigned to int explicitly int a = 1; float f = 0.5; a = f; //error a = int(f); converts f to an int
order of operations multiplication and division before addition and subtraction use parentheses to control order of operations and to clarify code
shortcuts x++, x-- add or subtract one from the variable +=, -= combines addition/subtraction with assignment x += 5 is equivalent to x =x + 5
random() random (x) returns a float between 0 and x use int() to convert result to an int int() truncates the remainder random (x, y) returns a float between x and y
Decisions values can be compared with relational operators 3 > 5 // false 3 > 2 // true
our friends the relational operators > greater than < less than > = greater than or equal to <= less than or equal to == equivalent to (don t use =)!= not equivalent to
no seriously, don t use = to compare two values. use == instead.
Conditionals if (test) { } statements if test is true, do code in brackets if test is false ignore code in brackets
?)*+&,"+ B*&2$2#!! "#$ %% &' ( #&)*
C4)+*--$"2 C5&'.&,$"2 +,-.*!!*+,-. +,-. +,-.*!!*/012. /012. /012.*!!*/012. /012. +,-.*%%*+,-. +,-. +,-.*%%*/012. +,-. /012.*%%*/012. /012. (+,-. /012. (/012.* +,-. *
Iteration make code compact repeat processes make fun things possible
For For (init; test; update) { statements }
For (init; test; update) { statements } 1. Init Statement is run 2. Test is evaluated true or false 3. If test is true, jump to step 4. If false, jump to step 6 4. Run statements within the block 5. Run the update statement
Homework write a sketch that makes a random drawing use random, variables, conditionals and relational operators use save() to save and print your three favorite versions