Class #1. introduction, functions, variables, conditionals

Transcription

1 Class #1 introduction, functions, variables, conditionals

2 what is processing hello world tour of the grounds functions,expressions, statements console/debugging drawing data types and variables decisions homework

3 What is processing programming language development environment software that lets you write other software

4 What is processing good for software sketchbook - good for prototyping extendible with JAVA if needed designed for artists and designers

5 nice things about processing open source syntactically derived from popular languages low overhead to get started well documented online

6

7 hello world! size(200,200); background(150);

8 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

9 export creates all the files needed to put your program on the internet export application creates a stand alone application

10 Comments // single comment / * */ multiple line comment useful for remembering what the heck you re doing handy for debugging

11 Two functions size (100, 300) // creates a window 100 pixels wide and 300 pixels tall background (150) // sets the background color to grey

12 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 ();

13 Parameters The parentheses contain the parameters Functions can have none, one, or many parameters Parameters affect how the function works

14 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 ((3+2) * 12) 60

15 comparison expressions can also compare two values 5 > 6 False 8 > (14-10) True

16 statements combination of expressions creates a statement. statement is the programming equivalent of a sentence must end in a semicolon ; many kinds of statements

17 some example statements size (200, 200); int x; x = 400;

18 notes processing is case sensitive processing is not white space sensitive don t forget those semi-colons

19 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

20 print() and println() print ( this class sux ); println (1); println (2); println (3);

21 debugging save working versions divide and conquer retreat to last known working state

22 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

23 Size (x, y) size (x, y) sets the size of the window of our program in pixels. don t forget the semi-colon

24 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)

25

26 Primitives drawing a shape with code is weird because you have to say where everything goes with number

27 Point point (x, y) setting a point off screen will make it magically not appear

28 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)

29 rect and ellipse rect and ellipse have their own thing going on rect (x, y, width, height); ellipse (x, y, width, height);

30 Bezier really has its own thing going on

31 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

32 grey values 8 bit graphic, 0 to 255 background (0); // black background (255); // white background (122); // one of 253 lovely shades of grey

33 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

34 save() save( my_picture.jpg ); documents/processing/mysketch

35 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

36 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 = 41 = A

37

38 variables container for holding data specific data type two parts - name and value must be declared before used

39 declaration states the data type and name int x int x = 4 float y = float x, y, z

40 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

41 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

42 scope Where you declare your variable affects where you can use it. More on this later

43 Math expressions to the right of = are evaluated before value is assigned to the left int a = // a = 14 a = a + 10 // a was 14, now a = 24

44 ints and floats float corrupts int 4/3 = 1 (int with int = int) 4.0 / 3.0 = (float with float = float) 4/3.0 = (int with float = float)

45 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

46 order of operations multiplication and division before addition and subtraction use parentheses to control order of operations and to clarify code

47 shortcuts x++, x-- add or subtract one from the variable +=, -= combines addition/subtraction with assignment x += 5 is equivalent to x =x + 5

48 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

49 Decisions values can be compared with relational operators 3 > 5 // false 3 > 2 // true

50 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

51 no seriously, don t use = to compare two values. use == instead.

52 Conditionals if (test) { } statements if test is true, do code in brackets if test is false ignore code in brackets

53

54

55

56 ?)*+&,"+ B*&2$2#!! "#$ %% &' ( #&)*

57 C4)+*--$"2 C5&'.&,$"2 +,-.*!!*+,-. +,-. +,-.*!!*/012. /012. /012.*!!*/012. /012. +,-.*%%*+,-. +,-. +,-.*%%*/012. +,-. /012.*%%*/012. /012. (+,-. /012. (/012.* +,-. *

58 Iteration make code compact repeat processes make fun things possible

59 For For (init; test; update) { statements }

60 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

61

62 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

63