Home
Print this page
To start working with processing, you need to be familiar with the basics: Size & Shapes. They constitute the building block to working with processing. Processing is all about commands (lines of code that tell the computer what to do).
1. Size
The Size command in Processing, tells the computer what size (in pixels) the application’s screen should be. The command requires two inputs/arguments which are the width’s value in pixels and height’s value in pixels and is written as size(w, h) where w and h are replaced by actual numbers. The following example will create an application window with a width and height equal to 500 pixels (square).
size(500, 500);The following code is yet another example of creating an application window with a width equal to 600 pixels and a height equal to 400 pixels (rectangle).
size(600, 400);2. Coordinate System & Axis
Before learning how to draw and display shapes in your application, you must be familiar with the coordinate system used in processing. If you’re not too much of a math wizard, don’t worry! We’re tackling this here.
2.1. Axis Visualization in Processing
(Picture of the usual axis and the axis in processing on top of a window with some explanation)
2.2. Coordinates
(Picture of coordinates and where a point is and how to know it’s x and y coordinates)
2.2. Examples
(Picture of circle and rectangle where points/coordinates are with some explanation)
3. Shapes
Now, it’s finally time to draw some shapes. In processing the basic shapes are circles, ellipses, squares, rectangles, triangles, lines, quads, and arcs. In what follows, we will tackle each of these shapes one at a time.
3.1. Circles
To draw a circle in processing, all you have to do is write the command circle(x,y,d) where x and y constitute the coordinates of the center of the circle and d refers to the diameter. The code below instructs the computer to draw a circle at position x:100, y:100 with a diameter of 50 pixels.
size(600, 400);
circle(100, 100, 50);Notice that if you set the x and y of the circle to 0, you will only see a quarter of the circle. The following code is telling your computer that the circle’s center should be on the top left corner of the screen.
size(600, 400);
circle(0, 0, 50);3.2. Ellipses
To draw an ellipse in processing, you can use the command ellipse(x,y,w,h) where x and y are the coordinates of the center and w and h are the width and height of the ellipse. The code below instructs the computer to draw an ellipse at position x:200, y:200 with a width of 100 pixels and a height of 50 pixels.
size(600, 400);
ellipse(200, 200, 100, 50);You can also use ellipses to draw circles if you set the width and height to be the same number. The code below provides such an example.
size(600, 400);
ellipse(200, 200, 100, 100);Note that setting the ellipse’s x and y coordinates to 0 will place the ellipse’s center on the top-left corner of the screen (similar to the circle’s case) and you will only see a quarter of the ellipse.
3.3. Squares
To draw a square in processing, you can use the command square(x,y,s) where x and y are the coordinates of the top left corner and s is the side length of the square. The code below allows you to draw a square of which the top-left corner is at position x:50,y:50 with a side length of 40.
size(600, 400);
square(50, 50, 40);Notice that if you set the x and y coordinates in the square command to 0, you will still be able to see the square. However, it will be stuck to the top-left corner (unlike circles and ellipses).
size(600, 400);
square(0, 0, 40);3.4. Rectangles
To draw a rectangle in processing, you should use the command rect(x,y,w,h) where x and y are the coordinates of the top left corner and w and h are the width and height (in pixels) of the rectangle. The code below allows you to draw a rectangle of which the top-left corner is at position x:50, y:50 with a width of 40 and height of 20.
size(600, 400);
rect(50, 50, 40, 20);You can also draw a square using the rect command by setting the width and height to the same value. The code below provides such an example.
size(600, 300);
rect(50, 50, 40, 40);Notice that a rectangle will also behave similarly to the square in case the x and y coordinates are set to 0.
size(600, 400);
rect(0, 0, 40, 20);3.5. Triangles
To draw a triangle in processing, you can use the command triangle(x1,y1,x2,y2,x3,y3) where (x1, y1) are the coordinates of the first point, (x2,y2) are the coordinates of the second point and (x3,y3) are the coordinates of the third point. The code below instructs the computer to draw a triangle of which points are defined as follows: p1 (x1: 120, y1:300), p2 (x2:232, y2:80) and p3 (x3:344, y3:300).
size(600, 400);
triange(120, 300, 232, 80, 344, 300);3.6. Lines
To draw a line in processing, you can use the command line(x1,y1,x2,y2) where (x1,y1) are the coordinates of the first point and (x2, y2) are the coordinates of the second point that form the line. The code below instructs the computer to draw a line from point p1 (x1:30, y1:50) to point p2 (x2:200, y2:250).
size(600, 400);
line(30, 50, 200, 250);3.7. Quadrilaterals
To draw a quad in processing, you can use the command quad(x1,y1,x2,y2,x3,y3,x4,y4) where (x1,y1), (x2,y2), (x3,y3) and (x4,y4) are the coordinates of the four corner points of the quadrilateral item. It works in a similar way to the triangle command. The code below instructs the computer to draw a quadrilateral object with points p1 (152, 124), p2 (344, 80), p3 (276, 252) and p4(120, 304).
size(600, 400);
quad(152, 124, 344, 80, 276, 252, 120, 304);3.8. Arcs
To draw an arc in processing, you can use the command arc(x,y,w,h,s,t) where x and y are the coordinates of the arc, w, and h are its width and height, and s and t are the angles to start and stop the arc (radians). For example, the following code will generate an arc object with the coordinates x= 50 and y = 55 with a width and height set to 50 pixels (arc of a circle). The arc starts at angle 0 radians and stops at HALF_PI radians. Since we need 2 PI and equal height and width to form a circle from an arc, the code below will create a quarter circle (0 to Half_PI).
size(600, 400);
arc(50, 55, 50, 50, 0, HALF_PI);The following code will create the other part of the circle.
size(600, 400);
arc(50, 55, 50, 50, HALF_PI, 2 * PI);The following code will create an arc that follows the shape of an ellipse (width and height are not the same value).
size(600, 400);
arc(50, 55, 100, 50, HALF_PI, 2 * PI);4. Summary
In this lesson, you learned how to download, install and launch processing on your operating system. You also tried to write code for your very first application. Can you try to create a bigger or smaller circle?