shape functions()

Question 1

arc()

Answer 1

arc(x, y, w, h, start, stop, [mode], [detail])

Draw an arc to the screen. f called with only x, y, w, h, start and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN), a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.

Question 2

ellipse()

Answer 2

ellipse(x, y, w, [h])

Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape’s width and height. If no height is specified, the value of width is used for both the width and height.

Question 3

circle()

Answer 3

circle(x, y, d)

Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle.

Question 4

line()

Answer 4

line(x1, y1, x2, y2)

Draws a line (a direct path between two points) to the screen. If called with only 4 parameters, it will draw a line in 2D with a default width of 1 pixel. This width can be modified by using the strokeWeight() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. So to color a line, use the stroke() function.

Question 5

point()

Answer 5

point(x, y, [z]

Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second param is the vertical value for the point. The color of the point is changed with the stroke() function. The size of the point can be changed with the strokeWeight() function.

Question 6

quad()

Answer 6

quad(x1, y1, x2, y2, x3, y3, x4, y4, [detailX], [detailY])

Draws a quad on the canvas. 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.

Question 7

rect()

Answer 7

rect(x, y, w, [h], [tl], [tr], [br], [bl])

Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list.

Question 8

triangle()

Answer 8

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

Draws a triangle to the canvas. 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.

Question 9

square()

Answer 9

square(x, y, s, [tl], [tr], [br], [bl])

Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called “s” for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, may be changed with the rectMode() function.

The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter lis

Question 10

ellipseMode()

Answer 10

ellipseMode(mode)

Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse(), circle() and arc() are interpreted.

The default mode is CENTER, in which the first two parameters are interpreted as the shape’s center point’s x and y coordinates respectively, while the third and fourth parameters are its width and height.

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

ellipseMode(CORNER) interprets the first two parameters 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 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 to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.

Question 11

noSmooth() & smooth()

Answer 11

Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default in 2D mode, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry.

Question 12

rectMode()

Answer 12

rectMode(MODE)

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

The default mode is CORNER, which interprets the first two parameters 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 as the location of one of the corners, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not neccesary that the first corner be the upper left corner.

rectMode(CENTER) interprets the first two parameters 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 as the shape’s center point, but uses the third and fourth parameters to specify half of the shape’s width and height respectively.

The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.

Question 13

strokeCap()

Answer 13

strokeCap(cap)
Constant: either ROUND, SQUARE or PROJECT

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

The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.

Question 14

strokeJoin()

Answer 14

strokeJoin(join)
Constant: either MITER, BEVEL, ROUND

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.

The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.

Question 15

strokeWeight()

Answer 15

strokeWeight(weight)
Number: the weight of the stroke (in pixels)

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

Note that it is affected by any transformation or scaling that has been applied previously.

Question 16

bezier()

Answer 16

bezier(x1, y1, x2, y2, x3, y3, x4, y4)
anchor points and control points

Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points “pull” the curve towards them.

Question 17

curve()

Answer 17

curve(x1, y1, x2, y2, x3, y3, x4, y4)

Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it’s not drawn. The last two parameters similarly describe the other control point.

Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines.

Question 18

plane()

Answer 18

plane([width], [height], [detailX], [detailY])

Draw a plane with given a width and height

Question 19

box()

Answer 19

box([width], [Height], [depth], [detailX], [detailY])

Draw a box with given width, height and depth

Question 20

sphere()

Answer 20

sphere([radius], [detailX], [detailY])

Draw a sphere with given radius.

DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a sphere. More subdivisions make the sphere seem smoother. The recommended maximum values are both 24. Using a value greater than 24 may cause a warning or slow down the browser.

Question 21

cylinder()

Answer 21

cylinder([radius], [height], [detailX], [detailY], [bottomCap], [topCap])
Draw a cylinder with given radius and height

DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser.

Question 22

cone()

Answer 22

cone([radius], [height], [detailX], [detailY], [cap])

Draw a cone with given radius and height

DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser.

Question 23

ellipsoid()

Answer 23

ellipsoid([radiusx], [radiusy], [radiusz], [detailX], [detailY])

Draw an ellipsoid with given radius

DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother. Avoid detail number above 150, it may crash the browser.

Question 24

torus()

Answer 24

torus([radius], [tubeRadius], [detailX], [detailY])

Draw a torus with given radius and tube radius

DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus.

Question 25

beginContour() & endContour()

Answer 25

beginContour()
endCountour()

Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter ‘O’. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must “wind” in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.

These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within.

Question 26

beginShape()
&
endShape()

Answer 26

beginShape([kind])
Constant: either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS (Optional)

Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.

The parameters available for beginShape() are:

POINTS Draw a series of points

LINES Draw a series of unconnected line segments (individual lines)

TRIANGLES Draw a series of separate triangles

TRIANGLE_FAN Draw a series of connected triangles sharing the first vertex in a fan-like fashion

TRIANGLE_STRIP Draw a series of connected triangles in strip fashion

QUADS Draw a series of separate quad

QUAD_STRIP Draw quad strip using adjacent edges to form the next quad

TESS (WebGl only) Handle irregular polygon for filling curve by explicit tessellation

After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.

Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape().

Question 27

vertex()

Answer 27

vertex(x, y, z)

All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions.

Question 28

model()

Answer 28

model(model)

Render a 3d model to the screen.

Question 29

loadModel()

Answer 29

loadModel(path, normalize, [successCallback], [failureCallback], [fileType])

Load a 3d model from an OBJ or STL file.

loadModel() should be placed inside of preload(). This allows the model to load fully before the rest of your code is run.

One of the limitations of the OBJ and STL format is that it doesn’t have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn’t displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function.

Also, the support for colored STL files is not present. STL files with color will be rendered without color properties.

Question 30

normal()

Answer 30

normal(vector)
normal(x, y, z)

Sets the 3d vertex normal to use for subsequent vertices drawn with vertex(). A normal is a vector that is generally nearly perpendicular to a shape’s surface which controls how much light will be reflected from that part of the surface.

Question 31

preload()

Answer 31

preload()

Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. If asynchronous loading is preferred, the load methods can instead be called in setup() or anywhere else with the use of a callback parameter.

By default the text “loading…” will be displayed. To make your own loading page, include an HTML element with id “p5_loading” in your page.