BASIC SHAPES

Coordinate Space

The above figure shows a line between point A (1,0) and point B (4,5).

Graphing Paper Computer

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

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.

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).

Functions allow you to draw shapes, set colors, calculate numbers, and to execute many other types of actions.

A function’s name is usually a lowercase word followed by parentheses

The comma-separated elements between the parentheses are called parameters, and they affect the way the function works

Some functions have no parameters and others have many

FUNCTIONS

size()◦Defines the dimension of the display window in units of pixels.

◦It must be the first line in setup()◦If size() is not called, the default size of the window is 100x100 pixels. 

Drawing a Window

The size() function has two parameters:◦ first sets the width of the window and the second

sets the height.

Example:To draw a window that is 800 pixels wide and 600

high, write:

size(800, 600);

point()◦ Draws a point, a coordinate in space at the

dimension of one pixel.◦ It has two parameters that define a position: the

x-coordinate followed by the y-coordinate.

To draw a little window and a point at the center of the screen

size(480, 120);point(240, 60);

Drawing a Point

line()◦ Draws a line (a direct path between two points) to

the screen

To draw a line between coordinate (20, 50) and (420,110)

size(480, 120);line(20, 50, 420, 110);

Drawing a line

triangle()◦ A triangle is a plane created by connecting three

points. ◦ The first two arguments specify the first point, the

middle two arguments specify the second point, and the last two arguments specify the third point.

triangle(x1, y1, x2, y2, x3, y3);

Drawing a triangle

rect()◦ Draws a rectangle to the screen. ◦ A rectangle is a four-sided shape with every angle

at ninety degrees. ◦ The first two parameters set the location, the

third sets the width, and the fourth sets the height.

size(480, 120);rect(180, 60, 220, 40);

Drawing a Rectangle

quad()◦ A quad is a quadrilateral, a four sided polygon.◦ It is similar to a rectangle, but the angles between

its edges are not constrained to ninety degrees. ◦ The first pair of parameters (x1,y1) sets the first

vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape.

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

Drawing a Quadrilateral

ellipse()◦ Draws an ellipse (oval) in the display window.◦ An ellipse with an equal width and height is a

circle. ◦ The first two parameters set the location, the

third sets the width, and the fourth sets the height.

size(480, 120);ellipse(120, 100, 110, 110);

Drawing an Ellipse

arc()◦ Draws an arc in the display window. ◦ Arcs are drawn along the outer edge of an ellipse

defined by the x, y, width and height parameters.

◦ The start and stop parameters specify the angles at which to draw the arc.

size(480, 120);arc(50, 55, 60, 60, PI/2, PI);

Drawing an arc

NOTE: Objects can be drawn partially (or entirely)

out of the window without an error Processing doesn’t have separate

functions to make squares and circles. To make these shapes, use the same value for the width and the height parameters to ellipse() and rect().

When a program runs, the computer starts at the top and reads each line of code until it reaches the last line and then stops. If you want a shape to be drawn on top of all other shapes, it needs to follow the others in the code.

You can think of it like painting with a brush or making a collage. The last element that you add is what’s visible on top.

DRAWING ORDER

size(480, 120);ellipse(140, 0, 190, 190);// The rectangle draws on top of the ellipse// because it comes after in the coderect(160, 30, 260, 20);

smooth()◦ Draws all geometry with smooth (anti-aliased) edges. ◦ This will slow down the frame rate of the application,

but will enhance the visual refinement.

noSmooth()◦ Draws all geometry with jagged (aliased) edges.

smooth();ellipse(70, 48, 36, 36);noSmooth();ellipse(30, 48, 36, 36);

SHAPE PROPERTIES

strokeWeight()◦ Sets the width of the stroke used for lines, points,

and the border around shapes. ◦ All widths are set in units of pixels. 

smooth(); strokeWeight(1); // Default line(20, 20, 80, 20); strokeWeight(4); // Thicker line(20, 40, 80, 40); strokeWeight(10); // Beastly line(20, 70, 80, 70);

Setting Stroke Weight

strokeJoin()◦ Sets the style of the joints which connect line

segments. ◦ These joints are either mitered, beveled, or

rounded and specified with the corresponding parameters MITER, BEVEL, and ROUND.

◦ The default joint is MITER. 

Setting Stroke Attributes

strokeCap()◦ Sets the style for rendering line endings. ◦ These ends are either squared, extended, or

rounded and specified with the corresponding parameters SQUARE, PROJECT, and ROUND.

◦ The default cap is ROUND. 

size(480, 120);smooth();strokeWeight(12);strokeJoin(ROUND); // Round the stroke

cornersrect(40, 25, 70, 70);strokeJoin(BEVEL); // Bevel the stroke cornersrect(140, 25, 70, 70);strokeCap(SQUARE); // Square the line endingsline(270, 25, 340, 95);strokeCap(ROUND); // Round the line endingsline(350, 25, 420, 95);

rectMode()◦ Modifies the location from which rectangles draw.◦ The default mode is CORNER ◦ Modes are either CORNER, CORNERS, CENTER, or

RADIUS

rectMode(CENTER); rect(35, 35, 50, 50); rectMode(CORNER); rect(35, 35, 50, 50);

ellipseMode()◦ Modifies the location from which ellipse draw.◦ The default mode is CENTER◦ Modes are either CORNER, CORNERS, CENTER, or

RADIUS

ellipseMode(CENTER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);

background()◦ function sets the color used for the background of

the Processing window. ◦ The default background is light gray.

background(gray) background(gray, alpha) background(value1, value2, value3) background(value1, value2, value3, alpha) background(color) background(color, alpha) background(hex) background(hex, alpha)

COLOR

fill()◦ Sets the color used to fill shapes.

fill(gray) fill(gray, alpha) fill(value1, value2, value3) fill(value1, value2, value3, alpha) fill(color) fill(color, alpha) fill(hex) fill(hex, alpha)

gray◦ number specifying value between white and black◦ values are from 0-255

alpha ◦ opacity of the fill◦ values are from 0-255

value1◦ red or hue value◦ values are from 0-255

value2◦ green or saturation value◦ values are from 0-255

value3◦ blue or brightness value◦ values are from 0-255

color◦ any value of the color datatype

hex◦ color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)

noStroke()◦Disables drawing the stroke (outline). ◦If both noStroke() and noFill() are

called, nothing will be drawn to the screen.

noFill()◦ Disables filling geometry. ◦ If both noStroke() and noFill() are called,

nothing will be drawn to the screen.

size(480, 120);noStroke();smooth();background(0, 26, 51); // Dark blue colorfill(255, 0, 0); // Red colorellipse(132, 82, 200, 200); // Red circlefill(0, 255, 0); // Green colorellipse(228, -16, 200, 200); // Green circlefill(0, 0, 255); // Blue colorellipse(268, 118, 200, 200); // Blue circle

size(480, 120);noStroke();smooth();background(204, 226, 225); // Light blue colorfill(255, 0, 0, 160); // Red colorellipse(132, 82, 200, 200); // Red circlefill(0, 255, 0, 160); // Green colorellipse(228, -16, 200, 200); // Green circlefill(0, 0, 255, 160); // Blue colorellipse(268, 118, 200, 200); // Blue circle

Setting Transparency