Processing: Shape Attributes

Front 1

ellipseMode() (part 1 of 2)

Back 1

Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are intepreted.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

The parameter must be written in ALL CAPS because Processing is a case-sensitive language.

Front 2

ellipseMode() (part 2 of 2)

Back 2

Example

http://processing.org/reference/ellipseMode_.html

ellipseMode(RADIUS); // Set ellipseMode to RADIUS
fill(255); // Set fill to white
ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER
fill(100); // Set fill to gray
ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode

ellipseMode(CORNER); // Set ellipseMode is CORNER
fill(255); // Set fill to white
ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode

ellipseMode(CORNERS); // Set ellipseMode to CORNERS
fill(100); // Set fill to gray
ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode

Syntax

ellipseMode(mode)

Parameters

mode int: either CENTER, RADIUS, CORNER, or CORNERS

Front 3

noSmooth()

Back 3

Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts.

Example

http://processing.org/reference/noSmooth_.html

background(0);
noStroke();
smooth();
ellipse(30, 48, 36, 36);
noSmooth();
ellipse(70, 48, 36, 36);

Front 4

rectMode() (part 1 of 2)

Back 4

Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are intepreted.

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.

The parameter must be written in ALL CAPS because Processing is a case-sensitive language.

Front 5

rectMode() (part 2 of 2)

Back 5

Example

http://processing.org/reference/rectMode_.html

rectMode(CORNER); // Default rectMode is CORNER
fill(255); // Set fill to white
rect(25, 25, 50, 50); // Draw white rect using CORNER mode

rectMode(CORNERS); // Set rectMode to CORNERS
fill(100); // Set fill to gray
rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode

rectMode(RADIUS); // Set rectMode to RADIUS
fill(255); // Set fill to white
rect(50, 50, 30, 30); // Draw white rect using RADIUS mode

rectMode(CENTER); // Set rectMode to CENTER
fill(100); // Set fill to gray
rect(50, 50, 30, 30); // Draw gray rect using CENTER mode


Syntax

rectMode(mode)

Parameters

mode int: either CORNER, CORNERS, CENTER, or RADIUS

Front 6

smooth()

Back 6

Draws all geometry with smooth (anti-aliased) edges. smooth() will also improve image quality of resized images. Note that smooth() is active by default; noSmooth() can be used to disable smoothing of geometry, images, and fonts.

The level parameter increases the level of smoothness with the P2D and P3D renderers. This is the level of over sampling applied to the graphics buffer. The value "2" will double the rendering size before scaling it down to the display size. This is called "2x anti-aliasing." The value 4 is used for 4x anti-aliasing and 8 is specified for 8x anti-aliasing. If level is set to 0, it will disable all smoothing; it's the equivalent of the function noSmooth(). The maximum anti-aliasing level is determined by the hardware of the machine that is running the software.

With the default renderer, smooth(2) is bilinear and smooth(4) is bicubic. Nothing implemented on Android 2D.

Example
background(0);
noStroke();
smooth();
ellipse(30, 48, 36, 36);

Front 7

strokeCap()

Back 7

Sets the style for rendering line endings. These ends are either squared, extended, or rounded, each of which specified with the corresponding parameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.

Example

http://processing.org/reference/strokeCap_.html

strokeWeight(12.0);
strokeCap(ROUND);
line(20, 30, 80, 30);
strokeCap(SQUARE);
line(20, 50, 80, 50);
strokeCap(PROJECT);
line(20, 70, 80, 70);


Syntax

strokeCap(cap)

Parameters

cap int: either SQUARE, PROJECT, or ROUND

Front 8

strokeJoin()

Back 8

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.

Example

http://processing.org/reference/strokeJoin_.html

noFill();
strokeWeight(10.0);
strokeJoin(MITER);
beginShape();
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();

noFill();
strokeWeight(10.0);
strokeJoin(BEVEL);
beginShape();
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();

noFill();
strokeWeight(10.0);
strokeJoin(ROUND);
beginShape();
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();


Syntax

strokeJoin(join)

Parameters

join int: either MITER, BEVEL, ROUND

Front 9

strokeWeight()

Back 9

Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels.

Example

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

Syntax

strokeWeight(weight)

Parameters

weight float: the weight (in pixels) of the stroke