1. PROCESSING A computer screen is a grid of small light elements called pixels.

2. The Interface

3. Predefined methods to draw shapes. These predefined shapes require different arguments in the parameter. Arguments: Beginning x, y position Ending x, y position Arguments: Beginning x, y position Arguments: 1 st x, y position 2 nd x, y position 3 rd x, y position These are connected to make the triangle

4. Arguments: Requires 4 x and y positions for each point. The points are connected Arguments: Beginning point x, y and the width & height width + beginning x = ending x Height + y = ending y

5. Tips to draw other shapes square, you need to use the rect(int x, int y, int width, int height) and use the same value for the width and height circle, you can use the ellipse(int x, int y, int width, int height) function with the same value for the width and height. triangle() function is used with six parameters. These are three x/y coordinates for the three points of the triangle. You should try to draw these points clockwise on the screen to keep things simple. The quad() is similar to the triangle() function, but uses eight parameters, as a quad has four points.

6. Attributes of shapes attributes of shapes are controlled with other code elements. size(int x, int y); background(int colorNum); // used to set the background color of the frame stroke(int num, int num, int num) ; // used to change the color of a line fill(int num); // used to fill a shape with a shade of gray fill(int colorNum, int colorNum, int colorNum); // used to fill a shape with a color noFill(); noStroke() strokeWeight(int num), strokeCap(), strokeJoin() smooth(), noSmooth(), ellipseMode(), rectMode()

7. Setting colors The intensities of each color element are specified with values between 0 and 255 In Processing, colors are defined by the parameters to the background(value1, value2, value3) fill(value1, value2, value3) fill(value1, value2, value3, alpha) stroke(value1, value2, value3) stroke(value1, value2, value3, alpha) Fill is used with shapes that have a width and height. Stroke is used with lines background(242, 204, 47); RGB VALUES FOR COLOR: Color ranges from 0 to 255 background(75, 255, 150); Would produce some color

8. This is the code to make these different shapes

9. Ice Cream Cone background(255, 162, 0); fill(0, 255, 255); ellipse(200, 92, 80, 80); // Top scoop fill(242, 0, 255); ellipse(200, 141, 80, 80); // Middle scoop! fill(255, 204, 0); ellipse(200, 187, 80, 80); // Bottom scoop! fill(0, 13, 255); rect(150, 200, 107, 112); // The cup! fill(255, 0, 0); ellipse(200, 46, 20, 20); // The cherry, yum line(200, 27, 200, 36); // And the cherry stem

10. Drawing with coordinates

11. Different x Same y

12. Drawing Custom Shapes Processing has a beginShape() method to draw custom shapes by specifying specific vertex x and y point on the grid. It will connect the points to draw the shape. End the procedure with endShape();

13. Work on Your Initial/Logo project Refer to your rubric