Processing: Shape

Front 1

createShape() (part 1 of 4)

Back 1

The createShape() function is used to define a new shape. Once created, this shape can be drawn with the shape() function. The basic way to use the function defines new primitive shapes. One of the following parameters are used as the first parameter: ELLIPSE, RECT, ARC, TRIANGLE, SPHERE, BOX, QUAD, LINE. The parameters for each of these different shapes are the same as their corrsponding functions: ellipse(), rect(), arc(), triangle(), sphere(), box(), and line(). The first example above clarifies how this works.

Example

PShape square; // The PShape object

void setup() {
size(100, 100, P2D);
// Creating the PShape as a square. The
// numeric arguments are similar to rect().
square = createShape(RECT, 0, 0, 50, 50);
square.setFill(color(0, 0, 255));
square.setStroke(false);
}

void draw() {
shape(square, 25, 25);
}

Syntax
createShape()

Front 2

createShape() (part 2 of 4)

Back 2

Custom, unique shapes can be made by using createShape() without a parameter. After the shape is started, the drawing attributes and geometry can be set directly to the shape within the beginShape() and endShape() methods. See the second example above for specifics.

Example

PShape s; // The PShape object

void setup() {
size(100, 100, P2D);
// Creating a custom PShape as a square, by
// specifying a series of vertices.
s = createShape();
s.beginShape();
s.fill(0, 0, 255);
s.noStroke();
s.vertex(0, 0);
s.vertex(0, 50);
s.vertex(50, 50);
s.vertex(50, 0);
s.endShape(CLOSE);
}

void draw() {
shape(s, 25, 25);
}


Syntax
createShape(source)

Front 3

createShape() (part 3 of 4)

Back 3

Geometry that groups vertices to build larger forms, such as group of triangles, can be created with parameters to beginShape(). These options are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. See the third example above.

The createShape() function can also be used to make a complex shape made of other shapes. This is called a "group" and it's created by using the parameter GROUP as the first parameter. See the fourth example above to see how it works.

Example

PShape s;

void setup() {
size(100, 100, P2D);
s = createShape();
s.beginShape(TRIANGLE_STRIP);
s.vertex(30, 75);
s.vertex(40, 20);
s.vertex(50, 75);
s.vertex(60, 20);
s.vertex(70, 75);
s.vertex(80, 20);
s.vertex(90, 75);
s.endShape();
}

void draw() {
shape(s, 0, 0);
}


Syntax
createShape(type)

Front 4

createShape() (part 4 of 4)

Back 4

When a shape is first created inside the beingShape() and endShape() methods, the normal Processing style functions like fill() and stroke() are used to define the drawing attributes. However, after a shape is created, a different set of functions needs to be used. These include the setFill() and setStroke() functions shown in the examples above. The complete list of methods and fields for the PShape class are in the Processing Javadoc.

Example

PShape alien, head, body;

void setup() {
size(100, 100, P2D);

// Create the shape group
alien = createShape(GROUP);

// Make two shapes
head = createShape(ELLIPSE, -25, 0, 50, 50);
head.setFill(color(255));
body = createShape(RECT, -25, 45, 50, 40);
body.setFill(color(0));

// Add the two "child" shapes to the parent group
alien.addChild(body);
alien.addChild(head);
}

void draw() {
background(204);
translate(50, 15);
shape(alien); // Draw the group
}

Syntax
createShape(kind, p)

Front 5

loadShape

Back 5

Loads geometry into a variable of type PShape. SVG and OBJ files may be loaded. To load correctly, the file must be located in the data directory of the current sketch. In most cases, loadShape() should be used inside setup() because loading shapes inside draw() will reduce the speed of a sketch.

Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.

If the file is not available or an error occurs, null will be returned and an error message will be printed to the console. The error message does not halt the program, however the null value may cause a NullPointerException if your code does not check whether the value returned is null.

Syntax
loadShape(filename)
loadShape(filename, options)

Front 6

PShape() (description)

Back 6

Datatype for storing shapes. Before a shape is used, it must be loaded with the loadShape() or created with the createShape(). The shape() function is used to draw the shape to the display window. Processing can currently load and display SVG (Scalable Vector Graphics) and OBJ shapes. OBJ files can only be opened using the P3D renderer and createShape() is only available with the P2D and P3D renderers. The loadShape() function supports SVG files created with Inkscape and Adobe Illustrator. It is not a full SVG implementation, but offers some straightforward support for handling vector data.

The PShape object contains a group of methods that can operate on the shape data. Some of the methods are listed below, but the full list used for creating and modifying shapes is available here in the Processing Javadoc.

Front 7

PShape() (example)

Back 7

PShape s;

void setup() {
size(100, 100);
// The file "bot.svg" must be in the data folder
// of the current sketch to load successfully
s = loadShape("bot.svg");
}

void draw() {
shape(s, 10, 10, 80, 80);
}
PShape square; // The PShape object

void setup() {
size(100, 100, P2D);
// Creating the PShape as a square. The corner
// is 0,0 so that the center is at 40,40
square = createShape(RECT, 0, 0, 80, 80);
}

void draw() {
shape(square, 10, 10);
}

Front 8

PShape() (methods)

Back 8

isVisible()
Returns a boolean value "true" if the image is set to be visible, "false" if not
setVisible()
Sets the shape to be visible or invisible
disableStyle()
Disables the shape's style data and uses Processing styles
enableStyle()
Enables the shape's style data and ignores the Processing styles
beginContour()
Starts a new contour
endContour()
Ends a contour
beginShape()
Starts the creation of a new PShape
endShape()
Finishes the creation of a new PShape
getChildCount()
Returns the number of children
getChild()
Returns a child element of a shape as a PShape object
addChild()
Adds a new child
getVertexCount()
Returns the total number of vertices as an int
getVertex()
Returns the vertex at the index position
setVertex()
Sets the vertex at the index position
translate()
Displaces the shape
rotateX()
Rotates the shape around the x-axis
rotateY()
Rotates the shape around the y-axis
rotateZ()
Rotates the shape around the z-axis
rotate()
Rotates the shape
scale()
Increases and decreases