1. Code Elements and Processing Coordinate System

2. Code elements: pages 17-21
Comments: are documentation notes that are ignored by the computer but are important for people (to understand the code).
// single line comment
/* multi line
comment */
Semi-colon (“;” ) is a terminator
Example: size (600, 600);

3. Functions Functions are pre-defined operations
You can define the functions or use the functions already defined and available in libraries/packages
Functions promote modular design
Example:
size(500,500);
background(102);
parameters
Function call

4. Expressions Expression are means for expressing a computation or logic
Example:
value is 156
89 > value is false

5. Variables and types
Variables represent items in the problem to be solved
Variables have (i) type (ii) name by which they are referenced in the code
Example:
int age;
float wage;
char initial;
We will discuss variables in more detail later.

6. Console and Printing Messages
Processing has two instructions for printing out on console: print(…) and println(..)
These can be used to display data when a Processing code is running
Good instructions for understanding your code and trace what is happening with the code. Good “debugging” tool.
Example: (see p.21)
int x = 20; println(x);
int x2 = 20; int y2 = 30;
println(x2 + “ “ + y2);
println(“I am learning Problem solving using Processing”);

7. Coordinates and Primitives
Before you “draw” you need to think about dimensions and qualities of the surface on which you’ll be drawing.
Computer monitor have surfaces that are defined by “pixels” or a “picture element”
When the definition of the screen of your laptop is 1280 X 1024 that means you have 1,310,720 little pixels to display your content on the screen
In processing when you say “size (200, 100)” we have width of 200 pixels and height of 100 pixels

8. Processing Coordinate System (10X10)
0,0
Y 
10,10

9. Primitive Shapes point(x,y) Example: point(2, 67); line(x1,y1, x2, y2)
Example: line(23,45, 56,90);
triangle(x1,y1,x2,y2,x3,y3);
Example: triangle(60,10,25,60,75,65);

10. More Primitive Shapes quad(20,20,20,70,60,90,60,40);
Quad is specified using points
Rect function uses starting point and lengths
rect(x, y, width, height);
ellispe(x,y,width,height); // is used for drawing circle

11. Complete example Lets draw a desktop computer. rect(0, 0, 90, 50);

12. Drawing attributes fill(r,g,b);
Before you draw will fill the object you draw with the fill color.
smooth(); noSmooth();
strokeWidth(6);
noStroke();
Lets try these commands on Processing