Home
Contacts
Lectures
Artists
Design Elements &
Principles
Resources
[Overview] [Dependence] [Design Issues] [Programming] [Math] [Exercises] [Examples]
This lecture introduces the concept of the canvas or drawing surface in Processing.
None.
The first choice an artist must make is in the shape, size, and proportion of the the drawing canvas. In Processing, we will restrict ourselves to rectanglar canvases leaving us with the choice of size (resolution) and proportion (aspect_ratio = width/height). A large canvas will allow for more detail. The aspect ratio has a significant effect on the composition of the image. Compare the different compositional choices that were made in following Picasso paintings:
Massacre in Korea
Tomato Place
Blue Nude
Once the canvas size has been decided, it is often suggested that one follow the rule of thirds where the main compositional elements be placed on, within, or near the intersections of lines that divide the canvas in thirds vertically and horizontally.
Digital images are stored as a rows and columns of pixels (short for picture elements). Each pixel is assigned a single color.
size(200, 100);In processing, the size of the canvas is set using the size(width,height) command. In the example on left, Processing sets the canvas width to 200 pixels and the height to 100 pixels.
Each pixel is identified by its coordinates, i.e. row and column number. Numbering starts at the top left.
strokeWeight(2); line(20,10,20,90); strokeWeight(4); line(40,30,150,70);Here, two lines are drawn, each with a different weight. The syntax for drawing a line is
line(x0,y0,x1,y2)where (x0,y0) are the coordinates of one end of the line and (x1,x2) are the coordinates of the other end. See line() for more information.
Here, the two lines are drawn, using the above code.
Command order: Lines, points, and other drawing components are drawn in the order in which they appear in the code. For example, compare the two images below. In the first image, the rectangle is drawn second and so overlaps the ellipse. In the second image, the rectangle is drawn first.
size(200,100); ellipse(100,50,150,30); rect(20,10,50,80);size(200,100); rect(20,10,50,80); ellipse(100,50,150,30);Note, overlapping objects conveys the feeling of depth. In the first image, we feel as though the rectangle is in front of the ellipse, and vice versa in the second image.
By overlapping objects and also increasing the line thickness and size of the shapes as they are drawn, we increase the feeling of depth since our brains interpret the smaller size to mean the objects are farther away.
List of useful Processing commands are below.
Maintained by Jenny Orr