code elements and processing coordinate system
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/1.jpg)
Code Elements and Processing Coordinate System
![Page 2: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/2.jpg)
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 terminatorExample: size (600, 600);
![Page 3: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/3.jpg)
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);
Function call
parameters
![Page 4: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/4.jpg)
Expressions
• Expression are means for expressing a computation or logic
• Example:• 56 + 100 value is 156• 89 > 90 value is false
![Page 5: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/5.jpg)
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.
![Page 6: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/6.jpg)
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”);
![Page 7: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/7.jpg)
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
![Page 8: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/8.jpg)
Processing Coordinate System (10X10)
X 0,0
Y
10,10
![Page 9: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/9.jpg)
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);
![Page 10: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/10.jpg)
More Primitive Shapes
• quad(20,20,20,70,60,90,60,40);• quad(20,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
![Page 11: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/11.jpg)
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);
![Page 12: Code Elements and Processing Coordinate System](https://reader033.vdocuments.mx/reader033/viewer/2022051002/56815f12550346895dcdd791/html5/thumbnails/12.jpg)
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