Code Elements and Processing Coordinate System Code elements

Code Elements and Processing Coordinate System

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

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: Function call size(500, 500); parameters background(102);

Expressions • • Expression are means for expressing a computation or logic Example: 56 + 100 value is 156 89 > 90 value is false

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.

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 x 2 = 20; int y 2 = 30; println(x 2 + “ “ + y 2); println(“I am learning Problem solving using Processing”);

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

Processing Coordinate System (10 X 10) X 0, 0 Y 10, 10

Primitive Shapes • • • point(x, y) Example: point(2, 67); line(x 1, y 1, x 2, y 2) Example: line(23, 45, 56, 90); triangle(x 1, y 1, x 2, y 2, x 3, y 3); Example: triangle(60, 10, 25, 60, 75, 65);

More Primitive Shapes • • • quad(20, 20, 70, 60, 90, 60, 40); quad(20, 70, -20, 110, 0, 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

Complete example • Lets draw a desktop computer. rect(0, 0, 90, 50); rect(5, 50, 75, 4); rect(24, 54, 6, 6); rect(64, 54, 6, 6); rect(20, 60, 75, 10); rect(10, 70, 80, 2);

Drawing attributes • • • fill(r, g, b); Before you draw will fill the object you draw with the fill color. smooth(); no. Smooth(); stroke. Width(6); no. Stroke(); Lets try these commands on Processing