Tutorial 3: Drawing with Code

Drawing Points and Lines

Processing supports the drawing points, lines and a number of primitive shapes, i.e., triangles, quadrangles, rectangles, and ellipses. In addition, Processing supports the drawing of Bezier curves and more complex shapes as a series of vertices.

Drawing Points

Single points can be drawn to the display using the point() function. The point() function takes two parameters for the x and y co-ordinate of the point that we want to draw. Remembering that x-coordinates increase from left-to-right across the display window and that y-coordinates increase from top-to-bottom, i.e., (0, 0) is located in the top-left corner of the display window.

The colour used to draw the point is controlled by the stroke() function, which sets the colour used to 'stroke' lines and the outlines of shapes. Note that Processing uses the American spelling of colour, i.e., color, and that we'll use this when referring to them in the code.

If you would like to experiment with any of the code in a tutorial, copy and paste the code into the editor window on the right-hand side of the page. For example, if you have problems seeing the points that are being drawn, copy the above code into the editor and add the following line before the first call to point():

We'll look at the strokeWeight() function a little later in this tutorial. but for now just run the sketch and observe what effect it has on the drawing.

Practice placing points on the screen to get used to the way that the x and y values are arranged in the window. Remember that the origin is in the top-left corner of the canvas and that the values for x and y increase as we travel right and down the screen. Try placing one point in each corner of the window, 10 pixels from the edge.

Drawing Lines

Individual lines can be drawn to the display using the line() function. The line() function takes 4 parameters for the x and y coordinates of the start and end points of the line. The following code draws 9 individual lines in three groups: the first group of three lines are red and horizontal (the y coordinate is the same for the start and end of each line), the second three are green and vertical (the x coordinate is the same for the start and end of each line), and the third group of three is blue and are not aligned with each other.

Practice drawing individual lines by writing a program that draws an 'X' to fill the display window, like this:

If you would like to practice some more with drawing lines, try writing sketches to create the following outputs:

Drawing Shapes

Processing supports the drawing of simple shapes like triangles and quadrilaterals using the triangle() and quad() functions that take a list of parameters that specify the corners of the shape. Processing also supports the drawing of rectangles and ellipses. The meaning of the parameters given to the rect() and ellipse() drawing functions depends on the drawing mode currently being used.

Drawing Triangles

Triangles are drawn in Processing using the triangle() function, which takes a total of 6 parameters (when drawn in 2D). The 6 parameters describe 3 coordinate x-y pairs that describe the corners of the triangle. Here's the example from today's lecture slides:

Continue practicing with the placement of coordinates in the display window by writing a sketch that can produce the following:

Drawing Quadrilaterals

Quadrilaterals are any 4-sided shape. Drawing quadrilaterals in Processing is very similar to drawing triangles, we simply need to pass the quad() function the coordinate data for the shapes corner points. To draw in 2D this means supplying 8 numbers. Here's the example of drawing quadrilaterals that we saw in the lecture today:

Quadrilaterals allow relatively complex arrangements of 4 sided shapes to be arranged. Try writing a sketch that looks similar to the following:

Drawing Rectangles

Rectangles are a type of quadrilateral, so we could use the quad() function to draw them, but they are so commonly needed that Processing includes a rect() function for drawing them. Drawing rectangles using the rect() function is a little different from the shape drawing functions we've seen so far, instead of specifying all of the corner points, which would typically require 8 numbers to be provided, the rect() function only requires 4 numbers. By default these 4 parameters specify the coordinate of the top-left corner of the rectangle and its width and height. (As we shall see in a moment, the way that the rect() function interprets the numbers it is given depends on the current rectangle drawing mode.) Here's the code from the lecture:

There is no square() function in Processing, squares are simply drawn by passing the same width and height values to the rect() function.

Experiment with drawing with the rect() function by writing sketches that generate the following drawings:

Drawing Ellipses

Ellipses and circles are commonly required in many drawing applications but are difficult to draw quickly using straight lines. Processing provides the ellipse() function to handle this drawing task. Like the rect() function, ellipse() takes 4 parameters, by default the first two parameters specify the centre of the ellipse and the third and fourth parameters specify the diameter of the ellipse in the horizontal and vertical directions, i.e., the width and height of an unseen rectangle that bounds the ellipse. As with the drawing of squares, circles can be drawn by simply providing the same value for the width and height of the ellipse, as in this example:

Drawing Curves

Curves (or splines) can be drawn in a number of different ways, Processing supports two varieties of curves Bezier and Catmull-Rom. The difference between these two methods of drawing curves is how the points provided are used interpreted.

Drawing Bezier Curves

Bezier curves are likely to be familiar if you have ever used a drawing program, especially a vector drawing program like Adobe Illustrator. A Bezier curve is constructed using four points; start and end points and two control points. The curve described by these points will be drawing from the start to the end point and will begin tangent to the line joining the start and first control point and will end tangent to the line joining the second control point and end point. The Bezier curve will not pass through the second and third control points.

The bezier() function draws a Bezier curve by taking 8 parameters (in 2D), or 4 pairs of coordinates. The first and last pairs of coordinates specify the start and end points of the curve, the middle two pairs specify the first and second control points.

Experiment with the following sketch to see what types of curves can be created with a single call to bezier(). You can drag the start, end and control points with the mouse.

The properties of Bezier curves makes it simple to smoothly join multiple curves together but difficult to draw a curve that must pass through a point that is not one of the start or end points of a curve.

BezierEllipse by Ira Greenberg

The following sketch is an example called "BezierEllipse" by Ira Greenberg that comes with the desktop version of Processing. The sketch shows the use of Bezier curves to produce a wide range of interesting shapes. (Don't worry about looking at the code for the moment, it uses techniques that we will explore in the coming weeks.)

The example has been modified here to allow the drawing of the control points to be turned on and off, to show the control points first click on the sketch and then press b on the keyboard.

Drawing Catmull-Rom Splines

The following editor allows you to experiment with Catmull-Rom curves by moving the position of four points that control the drawing of three curves. Notice that the curves drawn pass through each of the control points.

Tutorial Excerise

Your final exercise for this tutorial is to develop a sketch using the shape drawing functions that we've been looking at to draw a simple scene.

Write a portfolio post that documents your experiments developing a sketch. The dimensions of you sketch should be 400x400 pixels, i.e., use size(400, 400); to define the size of your sketch. To allow your sketch to run within the body text of your portfolio post, begin each sketch with:

int c;//declars variable 'c' - Center of canvas
c = (200,200);//defines 'c' as (200,200), this is the center of the canvase

stroke(127,0,0);
strokeWeight(3);
//the following are the 4 lines that form the square
line(c-0,c-180,c-180,c+0)
line(c-0,c-180,c+180,c+0)
line(c-0,c+180,c-180,c+0)
line(c-0,c+180,c+180,c+0)
//the four lines that form the cross
line(c-180,c-180,c+180,c+180)
line(c+180,c-180,c-180,c+180)

/** @peep sketch *//** @peep sketchcode *///this should be a trianglesize(400, 400);fill(240, 60, 360);triangle(200, 40, 100, 280, 300, 280);//This should be an X that overlaps three triangles//stroke(127, 0, 0);//this is the strokeline(40, 120, 360, 280);//this is the line from the top left to the bottom rightline(360, 120, 40, 280);//this is the line from the top right to the bottomr leftline(40, 40, 320, 40);//this is the line on laying on top of the pillarsline(40, 280, 360, 280);//this is the line on the bottom of the structure//These are parralel rectangles on both sides of the trianglefill(100, 160, 80);rect(40, 40, 40, 240);rect(320, 40, 40, 240);//This will be the quad diamond underneathfill(120, 120, 120);quad(200, 280, 360, 340, 200, 400, 40, 340);