Processing

Draw

Draw

• A computer screen is a grid of light elements called pixels. Each pixel has a position within the grid defned by coordinates. In Processing, the x-coordinate is the distance from the left edge of the Display Window and the y-coordinate is the distance from the top edge
• We write coordinates of a pixel like this: (x, y). So, if the screen is 200×200 pixels, the upperleft is (0, 0), the center is at (100, 100), and the lower-right is (199, 199)

• The Display Window is created and images are drawn inside through code elements called functions. Functions are the basic building blocks of a Processing program. The behavior of a function is defined by its parameters
• For example, almost every Processing program has a size() function to set the width and height of the Display Window

​

Note:

If your program doesn’t have a size() function, the dimension is set to 100×100 pixels

Draw a point

​

​

​

​

size(480, 120);

point(240, 60);

Basic Shapes

​

​

​

​

Draw a line

​

​

​

​

size(480, 120);

line(20, 50, 420, 110);

Draw Basic Shapes

​

​

​

​

size(480, 120);

quad(158, 55, 199, 14, 392, 66, 351, 107);

triangle(347, 54, 392, 9, 392, 66);

triangle(158, 55, 290, 91, 290, 112);

Draw Rectangle

​

​

​

​

size(480, 120);

rect(180, 60, 220, 40);

Draw an Ellipse

​

​

​

​

size(480, 120);

ellipse(278, -100, 400, 400);

ellipse(120, 100, 110, 110);

ellipse(412, 60, 18, 18);

Draw Part of an Ellipse

​

​

​

​

size(480, 120);

arc(90, 60, 80, 80, 0, HALF_PI);

arc(190, 60, 80, 80, 0, PI+HALF_PI);

arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI);

arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI)

​

• The first and second parameters set the location, the third and fourth set the width and height. The fifth parameter sets the angle to start the arc, and the sixth sets the angle to stop. The angles are set in radians, rather than degrees
• Radians are angle measurements based on the value of pi (3.14159)
• The values PI, QUARTER_PI, HALF_PI, and TWO_PI can be used to replace the radian values for 180º, 45º, 90º, and 360º

​

​

Radian and degrees measurements

Draw with Degrees

size(480, 120);

arc(90, 60, 80, 80, 0, radians(90));

arc(190, 60, 80, 80, 0, radians(270));

arc(290, 60, 80, 80, radians(180), radians(450));

arc(390, 60, 80, 80, radians(45), radians(225));

Thanks

(Semangat…!)