p5/types/shape/2d_primitives.d.ts

[](https://www.npmjs.com/package/p5)

// This file is auto-generated from JSDoc documentation

import p5 from 'p5';
import { Vector } from '../math/p5.Vector';

declare module 'p5' {
/**
 * This function does 3 things:
 *
 */
function _normalizeArcAngles(start: any, stop: any, width: any, height: any, correctForScaling: any): void;

/**
 * Draws an arc.An arc is a section of an ellipse defined by the `x`, `y`, `w`, and
 * `h` parameters. `x` and `y` set the location of the arc's center. `w` and
 * `h` set the arc's width and height. See
 * ellipse() and
 * ellipseMode() for more details.The fifth and sixth parameters, `start` and `stop`, set the angles
 * between which to draw the arc. Arcs are always drawn clockwise from
 * `start` to `stop`. Angles are always given in radians.The seventh parameter, `mode`, is optional. It determines the arc's fill
 * style. The fill modes are a semi-circle (`OPEN`), a closed semi-circle
 * (`CHORD`), or a closed pie segment (`PIE`).The eighth parameter, `detail`, is also optional. It determines how many
 * vertices are used to draw the arc in WebGL mode. The default value is 25.
 *
 * @param x-coordinate of the arc's ellipse.
 * @param y-coordinate of the arc's ellipse.
 * @param width of the arc's ellipse by default.
 * @param height of the arc's ellipse by default.
 * @param angle to start the arc, specified in radians.
 * @param angle to stop the arc, specified in radians.
 * @param optional parameter to determine the way of drawing
 * the arc. either CHORD, PIE, or OPEN.
 * @param optional parameter for WebGL mode only. This is to
 * specify the number of vertices that makes up the
 * perimeter of the arc. Default value is 25. Won't
 * draw a stroke for a detail of more than 50.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * arc(50, 50, 80, 80, 0, PI + HALF_PI);
 * 
 * describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * arc(50, 50, 80, 40, 0, PI + HALF_PI);
 * 
 * describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Bottom-right.
 * arc(50, 55, 50, 50, 0, HALF_PI);
 * 
 * noFill();
 * 
 * // Bottom-left.
 * arc(50, 55, 60, 60, HALF_PI, PI);
 * 
 * // Top-left.
 * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
 * 
 * // Top-right.
 * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
 * 
 * describe(
 * 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Default fill mode.
 * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
 * 
 * describe('A white circle with the top-right third missing. The bottom is outlined in black.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // OPEN fill mode.
 * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
 * 
 * describe(
 * 'A white circle missing a section from the top-right. The bottom is outlined in black.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // CHORD fill mode.
 * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
 * 
 * describe('A white circle with a black outline missing a section from the top-right.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // PIE fill mode.
 * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
 * 
 * describe('A white circle with a black outline. The top-right third is missing.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * // PIE fill mode.
 * arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);
 * 
 * describe('A white circle with a black outline. The top-right third is missing.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * // PIE fill mode with 5 vertices.
 * arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);
 * 
 * describe('A white circle with a black outline. The top-right third is missing.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A yellow circle on a black background. The circle opens and closes its mouth.');
 * }
 * 
 * function draw() {
 * background(0);
 * 
 * // Style the arc.
 * noStroke();
 * fill(255, 255, 0);
 * 
 * // Update start and stop angles.
 * let biteSize = PI / 16;
 * let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
 * let endAngle = TWO_PI - startAngle;
 * 
 * // Draw the arc.
 * arc(50, 50, 80, 80, startAngle, endAngle, PIE);
 * }
 * </code>
 * </div>
 */
function arc(x: number, y: number, w: number, h: number, start: number, stop: number, mode?: CHORD | PIE | OPEN, detail?: number): void;

/**
 * Draws an ellipse (oval).An ellipse is a round shape defined by the `x`, `y`, `w`, and
 * `h` parameters. `x` and `y` set the location of its center. `w` and
 * `h` set its width and height. See
 * ellipseMode() for other ways to set
 * its position.If no height is set, the value of width is used for both the width and
 * height. If a negative height or width is specified, the absolute value is
 * taken.The fifth parameter, `detail`, is also optional. It determines how many
 * vertices are used to draw the ellipse in WebGL mode. The default value is
 * 25.
 *
 * @param x-coordinate of the center of the ellipse.
 * @param y-coordinate of the center of the ellipse.
 * @param width of the ellipse.
 * @param height of the ellipse.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * ellipse(50, 50, 80, 80);
 * 
 * describe('A white circle on a gray canvas.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * ellipse(50, 50, 80);
 * 
 * describe('A white circle on a gray canvas.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * ellipse(50, 50, 80, 40);
 * 
 * describe('A white ellipse on a gray canvas.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * ellipse(0, 0, 80, 40);
 * 
 * describe('A white ellipse on a gray canvas.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * // Use 6 vertices.
 * ellipse(0, 0, 80, 40, 6);
 * 
 * describe('A white hexagon on a gray canvas.');
 * }
 * </code>
 * </div>
 */
function ellipse(x: number, y: number, w: number, h?: number): void;

/**
 * @param optional parameter for WebGL mode only. This is to
 * specify the number of vertices that makes up the
 * perimeter of the ellipse. Default value is 25. Won't
 * draw a stroke for a detail of more than 50.
 */
function ellipse(x: number, y: number, w: number, h: number, detail?: number): void;

/**
 * Draws a circle.A circle is a round shape defined by the `x`, `y`, and `d` parameters.
 * `x` and `y` set the location of its center. `d` sets its width and height (diameter).
 * Every point on the circle's edge is the same distance, `0.5 * d`, from its center.
 * `0.5 * d` (half the diameter) is the circle's radius.
 * See ellipseMode() for other ways to set its position.
 *
 * @param x-coordinate of the center of the circle.
 * @param y-coordinate of the center of the circle.
 * @param diameter of the circle.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * circle(50, 50, 25);
 * 
 * describe('A white circle with black outline in the middle of a gray canvas.');
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * circle(0, 0, 25);
 * 
 * describe('A white circle with black outline in the middle of a gray canvas.');
 * }
 * </code>
 * </div>
 */
function circle(x: number, y: number, d: number): void;

/**
 * Draws a straight line between two points.A line's default width is one pixel. The version of `line()` with four
 * parameters draws the line in 2D. To color a line, use the
 * stroke() function. To change its width, use the
 * strokeWeight() function. A line
 * can't be filled, so the fill() function won't
 * affect the line's color.The version of `line()` with six parameters allows the line to be drawn in
 * 3D space. Doing so requires adding the `WEBGL` argument to
 * createCanvas().
 *
 * @param the x-coordinate of the first point.
 * @param the y-coordinate of the first point.
 * @param the x-coordinate of the second point.
 * @param the y-coordinate of the second point.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * line(30, 20, 85, 75);
 * 
 * describe(
 * 'A black line on a gray canvas running from top-center to bottom-right.'
 * );
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Style the line.
 * stroke('magenta');
 * strokeWeight(5);
 * 
 * line(30, 20, 85, 75);
 * 
 * describe(
 * 'A thick, magenta line on a gray canvas running from top-center to bottom-right.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top.
 * line(30, 20, 85, 20);
 * 
 * // Right.
 * stroke(126);
 * line(85, 20, 85, 75);
 * 
 * // Bottom.
 * stroke(255);
 * line(85, 75, 30, 75);
 * 
 * describe(
 * 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
 * );
 * }
 * </code>
 * </div>
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * line(-20, -30, 35, 25);
 * 
 * describe(
 * 'A black line on a gray canvas running from top-center to bottom-right.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('A black line connecting two spheres. The scene spins slowly.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Rotate around the y-axis.
 * rotateY(frameCount * 0.01);
 * 
 * // Draw a line.
 * line(0, 0, 0, 30, 20, -10);
 * 
 * // Draw the center sphere.
 * sphere(10);
 * 
 * // Translate to the second point.
 * translate(30, 20, -10);
 * 
 * // Draw the bottom-right sphere.
 * sphere(10);
 * }
 * </code>
 * </div>
 */
function line(x1: number, y1: number, x2: number, y2: number): void;

/**
 * @param the z-coordinate of the first point.
 * @param the z-coordinate of the second point.
 */
function line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): void;

/**
 * Draws a single point in space.A point's default width is one pixel. To color a point, use the
 * stroke() function. To change its width, use the
 * strokeWeight() function. A point
 * can't be filled, so the fill() function won't
 * affect the point's color.The version of `point()` with two parameters allows the point's location to
 * be set with its x- and y-coordinates, as in `point(10, 20)`.The version of `point()` with three parameters allows the point to be drawn
 * in 3D space with x-, y-, and z-coordinates, as in `point(10, 20, 30)`.
 * Doing so requires adding the `WEBGL` argument to
 * createCanvas().The version of `point()` with one parameter allows the point's location to
 * be set with a p5.Vector object.
 *
 * @param the x-coordinate.
 * @param the y-coordinate.
 * @param the z-coordinate (for WebGL mode).
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top-left.
 * point(30, 20);
 * 
 * // Top-right.
 * point(85, 20);
 * 
 * // Bottom-right.
 * point(85, 75);
 * 
 * // Bottom-left.
 * point(30, 75);
 * 
 * describe(
 * 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top-left.
 * point(30, 20);
 * 
 * // Top-right.
 * point(70, 20);
 * 
 * // Style the next points.
 * stroke('purple');
 * strokeWeight(10);
 * 
 * // Bottom-right.
 * point(70, 80);
 * 
 * // Bottom-left.
 * point(30, 80);
 * 
 * describe(
 * 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top-left.
 * let a = createVector(30, 20);
 * point(a);
 * 
 * // Top-right.
 * let b = createVector(70, 20);
 * point(b);
 * 
 * // Bottom-right.
 * let c = createVector(70, 80);
 * point(c);
 * 
 * // Bottom-left.
 * let d = createVector(30, 80);
 * point(d);
 * 
 * describe(
 * 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('Two purple points drawn on a gray canvas.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Style the points.
 * stroke('purple');
 * strokeWeight(10);
 * 
 * // Top-left.
 * point(-20, -30);
 * 
 * // Bottom-right.
 * point(20, 30);
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('Two purple points drawn on a gray canvas. The scene spins slowly.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Rotate around the y-axis.
 * rotateY(frameCount * 0.01);
 * 
 * // Style the points.
 * stroke('purple');
 * strokeWeight(10);
 * 
 * // Top-left.
 * point(-20, -30, 0);
 * 
 * // Bottom-right.
 * point(20, 30, -50);
 * }
 * </code>
 * </div>
 */
function point(x: number, y: number, z?: number): void;

/**
 * @param the coordinate vector.
 */
function point(coordinateVector: p5.Vector): void;

/**
 * Draws a quadrilateral (four-sided shape).Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
 * first pair of parameters `(x1, y1)` sets the quad's first point. The next
 * three pairs of parameters set the coordinates for its next three points
 * `(x2, y2)`, `(x3, y3)`, and `(x4, y4)`. Points should be added in either
 * clockwise or counter-clockwise order.The version of `quad()` with twelve parameters allows the quad to be drawn
 * in 3D space. Doing so requires adding the `WEBGL` argument to
 * createCanvas().The thirteenth and fourteenth parameters are optional. In WebGL mode, they
 * set the number of segments used to draw the quadrilateral in the x- and
 * y-directions. They're both 2 by default.
 *
 * @param the x-coordinate of the first point.
 * @param the y-coordinate of the first point.
 * @param the x-coordinate of the second point.
 * @param the y-coordinate of the second point.
 * @param the x-coordinate of the third point.
 * @param the y-coordinate of the third point.
 * @param the x-coordinate of the fourth point.
 * @param the y-coordinate of the fourth point.
 * @param number of segments in the x-direction.
 * @param number of segments in the y-direction.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * quad(20, 20, 80, 20, 80, 80, 20, 80);
 * 
 * describe('A white square with a black outline drawn on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * quad(20, 30, 80, 30, 80, 70, 20, 70);
 * 
 * describe('A white rectangle with a black outline drawn on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * quad(50, 62, 86, 50, 50, 38, 14, 50);
 * 
 * describe('A white rhombus with a black outline drawn on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * quad(20, 50, 80, 30, 80, 70, 20, 70);
 * 
 * describe('A white trapezoid with a black outline drawn on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * quad(-30, -30, 30, -30, 30, 30, -30, 30);
 * 
 * describe('A white square with a black outline drawn on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('A wavy white surface spins around on gray canvas.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Rotate around the y-axis.
 * rotateY(frameCount * 0.01);
 * 
 * // Draw the quad.
 * quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);
 * }
 * </code>
 * </div>
 */
function quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, detailX?: number, detailY?: number): void;

/**
 * @param the z-coordinate of the first point.
 * @param the z-coordinate of the second point.
 * @param the z-coordinate of the third point.
 * @param the z-coordinate of the fourth point.
 */
function quad(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number, detailX?: number, detailY?: number): void;

/**
 * Draws a rectangle.A rectangle is a four-sided shape defined by the `x`, `y`, `w`, and `h`
 * parameters. `x` and `y` set the location of its top-left corner. `w` sets
 * its width and `h` sets its height. Every angle in the rectangle measures
 * 90˚. See rectMode() for other ways to define
 * rectangles.The version of `rect()` with five parameters creates a rounded rectangle. The
 * fifth parameter sets the radius for all four corners.The version of `rect()` with eight parameters also creates a rounded
 * rectangle. Each of the last four parameters set the radius of a corner. The
 * radii start with the top-left corner and move clockwise around the
 * rectangle. If any of these parameters are omitted, they are set to the
 * value of the last radius that was set.
 *
 * @param x-coordinate of the rectangle.
 * @param y-coordinate of the rectangle.
 * @param width of the rectangle.
 * @param height of the rectangle.
 * @param optional radius of top-left corner.
 * @param optional radius of top-right corner.
 * @param optional radius of bottom-right corner.
 * @param optional radius of bottom-left corner.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * rect(30, 20, 55, 55);
 * 
 * describe('A white square with a black outline on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * rect(30, 20, 55, 40);
 * 
 * describe('A white rectangle with a black outline on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Give all corners a radius of 20.
 * rect(30, 20, 55, 50, 20);
 * 
 * describe('A white rectangle with a black outline and round edges on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Give each corner a unique radius.
 * rect(30, 20, 55, 50, 20, 15, 10, 5);
 * 
 * describe('A white rectangle with a black outline and round edges of different radii.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * rect(-20, -30, 55, 55);
 * 
 * describe('A white square with a black outline on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('A white square spins around on gray canvas.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Rotate around the y-axis.
 * rotateY(frameCount * 0.01);
 * 
 * // Draw the rectangle.
 * rect(-20, -30, 55, 55);
 * }
 * </code>
 * </div>
 */
function rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): void;

/**
 * @param number of segments in the x-direction (for WebGL mode).
 * @param number of segments in the y-direction (for WebGL mode).
 */
function rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): void;

/**
 * Draws a square.A square is a four-sided shape defined by the `x`, `y`, and `s`
 * parameters. `x` and `y` set the location of its top-left corner. `s` sets
 * its width and height. Every angle in the square measures 90˚ and all its
 * sides are the same length. See rectMode() for
 * other ways to define squares.The version of `square()` with four parameters creates a rounded square.
 * The fourth parameter sets the radius for all four corners.The version of `square()` with seven parameters also creates a rounded
 * square. Each of the last four parameters set the radius of a corner. The
 * radii start with the top-left corner and move clockwise around the
 * square. If any of these parameters are omitted, they are set to the
 * value of the last radius that was set.
 *
 * @param x-coordinate of the square.
 * @param y-coordinate of the square.
 * @param side size of the square.
 * @param optional radius of top-left corner.
 * @param optional radius of top-right corner.
 * @param optional radius of bottom-right corner.
 * @param optional radius of bottom-left corner.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * square(30, 20, 55);
 * 
 * describe('A white square with a black outline in on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Give all corners a radius of 20.
 * square(30, 20, 55, 20);
 * 
 * describe(
 * 'A white square with a black outline and round edges on a gray canvas.'
 * );
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Give each corner a unique radius.
 * square(30, 20, 55, 20, 15, 10, 5);
 * 
 * describe('A white square with a black outline and round edges of different radii.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * square(-20, -30, 55);
 * 
 * describe('A white square with a black outline in on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('A white square spins around on gray canvas.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Rotate around the y-axis.
 * rotateY(frameCount * 0.01);
 * 
 * // Draw the square.
 * square(-20, -30, 55);
 * }
 * </code>
 * </div>
 */
function square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): void;

/**
 * Draws a triangle.A triangle is a three-sided shape defined by three points. The
 * first two parameters specify the triangle's first point `(x1, y1)`. The
 * middle two parameters specify its second point `(x2, y2)`. And the last two
 * parameters specify its third point `(x3, y3)`.
 *
 * @param x-coordinate of the first point.
 * @param y-coordinate of the first point.
 * @param x-coordinate of the second point.
 * @param y-coordinate of the second point.
 * @param x-coordinate of the third point.
 * @param y-coordinate of the third point.
 * @example <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * triangle(30, 75, 58, 20, 86, 75);
 * 
 * describe('A white triangle with a black outline on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * background(200);
 * 
 * triangle(-20, 25, 8, -30, 36, 25);
 * 
 * describe('A white triangle with a black outline on a gray canvas.');
 * }
 * </code>
 * </div>
 * 
 * <div>
 * <code>
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('A white triangle spins around on a gray canvas.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Rotate around the y-axis.
 * rotateY(frameCount * 0.01);
 * 
 * // Draw the triangle.
 * triangle(-20, 25, 8, -30, 36, 25);
 * }
 * </code>
 * </div>
 */
function triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;

}

export default function 2d_primitives(p5: any, fn: any): void;