npm - @viji-dev/core - Versions diffs - 0.3.32 → 0.3.34 - Mend

@viji-dev/core 0.3.32 → 0.3.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/artist-dts-p5.js CHANGED Viewed

	@@ -1 +1 @@
1	- export const artistDtsP5 = "// Viji Artist API - Global Type Definitions\n// All types are placed inside declare global {} because this file uses export {}\n// for top-level await support, which makes it a module (where top-level declarations\n// would otherwise be module-scoped, not global).\n\ndeclare global {\n interface AudioAPI {\r\n isConnected: boolean;\r\n volume: {\r\n current: number;\r\n peak: number;\r\n smoothed: number;\r\n };\r\n bands: {\r\n low: number;\r\n lowMid: number;\r\n mid: number;\r\n highMid: number;\r\n high: number;\r\n lowSmoothed: number;\r\n lowMidSmoothed: number;\r\n midSmoothed: number;\r\n highMidSmoothed: number;\r\n highSmoothed: number;\r\n };\r\n beat: {\r\n kick: number;\r\n snare: number;\r\n hat: number;\r\n any: number;\r\n kickSmoothed: number;\r\n snareSmoothed: number;\r\n hatSmoothed: number;\r\n anySmoothed: number;\r\n triggers: {\r\n any: boolean;\r\n kick: boolean;\r\n snare: boolean;\r\n hat: boolean;\r\n };\r\n events: Array<{\r\n type: 'kick' \| 'snare' \| 'hat';\r\n time: number;\r\n strength: number;\r\n }>;\r\n bpm: number;\r\n confidence: number;\r\n isLocked: boolean;\r\n };\r\n spectral: {\r\n brightness: number;\r\n flatness: number;\r\n };\r\n getFrequencyData: () => Uint8Array;\r\n getWaveform: () => Float32Array;\r\n }\r\n\n interface AudioStreamAPI {\r\n isConnected: boolean;\r\n volume: {\r\n current: number;\r\n peak: number;\r\n smoothed: number;\r\n };\r\n bands: {\r\n low: number;\r\n lowMid: number;\r\n mid: number;\r\n highMid: number;\r\n high: number;\r\n lowSmoothed: number;\r\n lowMidSmoothed: number;\r\n midSmoothed: number;\r\n highMidSmoothed: number;\r\n highSmoothed: number;\r\n };\r\n spectral: {\r\n brightness: number;\r\n flatness: number;\r\n };\r\n getFrequencyData: () => Uint8Array;\r\n getWaveform: () => Float32Array;\r\n }\r\n\n interface ButtonConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ButtonParameter {\r\n value: boolean;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface CaptureFrameOptions {\r\n /** Output format: 'blob' for encoded image, 'bitmap' for GPU-friendly ImageBitmap /\r\n format?: 'blob' \| 'bitmap';\r\n /* MIME type for blob output (ignored for bitmap), e.g., 'image/png', 'image/jpeg', 'image/webp' /\r\n type?: string;\r\n /\r\n Target resolution.\r\n * - number: scale factor relative to current canvas size (e.g., 0.5 = 50%)\r\n * - { width, height }: exact output size; if aspect ratio differs from canvas,\r\n * the source is center-cropped to match the target aspect ratio before scaling\r\n /\r\n resolution?: number \| {\r\n width: number;\r\n height: number;\r\n };\r\n }\r\n\n interface ColorConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ColorParameter {\r\n value: string;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n type CVFeature = 'faceDetection' \| 'faceMesh' \| 'handTracking' \| 'poseDetection' \| 'bodySegmentation' \| 'emotionDetection';\r\n\n type CVFrameRateMode = 'full' \| 'half' \| 'quarter' \| 'eighth';\r\n\n interface DeviceMotionData {\r\n /* Acceleration without gravity (m/s²) /\r\n acceleration: {\r\n x: number \| null;\r\n y: number \| null;\r\n z: number \| null;\r\n } \| null;\r\n /* Acceleration including gravity (m/s²) /\r\n accelerationIncludingGravity: {\r\n x: number \| null;\r\n y: number \| null;\r\n z: number \| null;\r\n } \| null;\r\n /* Rotation rate (degrees/second) /\r\n rotationRate: {\r\n alpha: number \| null;\r\n beta: number \| null;\r\n gamma: number \| null;\r\n } \| null;\r\n /* Interval between updates (milliseconds) /\r\n interval: number;\r\n }\r\n\n interface DeviceOrientationData {\r\n /* Rotation around Z-axis (0-360 degrees, compass heading) /\r\n alpha: number \| null;\r\n /* Rotation around X-axis (-180 to 180 degrees, front-to-back tilt) /\r\n beta: number \| null;\r\n /* Rotation around Y-axis (-90 to 90 degrees, left-to-right tilt) /\r\n gamma: number \| null;\r\n /* True if using magnetometer (compass) for absolute orientation /\r\n absolute: boolean;\r\n }\r\n\n interface DeviceSensorState {\r\n motion: DeviceMotionData \| null;\r\n orientation: DeviceOrientationData \| null;\r\n }\r\n\n interface DeviceState extends DeviceSensorState {\r\n /* Unique device identifier /\r\n id: string;\r\n /* User-friendly device name /\r\n name: string;\r\n /* Device camera video (null if not available) /\r\n video: VideoAPI \| null;\r\n /* Device audio stream (null if not available) /\r\n audio: AudioStreamAPI \| null;\r\n }\r\n\n interface FaceBlendshapes {\r\n browDownLeft: number;\r\n browDownRight: number;\r\n browInnerUp: number;\r\n browOuterUpLeft: number;\r\n browOuterUpRight: number;\r\n cheekPuff: number;\r\n cheekSquintLeft: number;\r\n cheekSquintRight: number;\r\n eyeBlinkLeft: number;\r\n eyeBlinkRight: number;\r\n eyeLookDownLeft: number;\r\n eyeLookDownRight: number;\r\n eyeLookInLeft: number;\r\n eyeLookInRight: number;\r\n eyeLookOutLeft: number;\r\n eyeLookOutRight: number;\r\n eyeLookUpLeft: number;\r\n eyeLookUpRight: number;\r\n eyeSquintLeft: number;\r\n eyeSquintRight: number;\r\n eyeWideLeft: number;\r\n eyeWideRight: number;\r\n jawForward: number;\r\n jawLeft: number;\r\n jawOpen: number;\r\n jawRight: number;\r\n mouthClose: number;\r\n mouthDimpleLeft: number;\r\n mouthDimpleRight: number;\r\n mouthFrownLeft: number;\r\n mouthFrownRight: number;\r\n mouthFunnel: number;\r\n mouthLeft: number;\r\n mouthLowerDownLeft: number;\r\n mouthLowerDownRight: number;\r\n mouthPressLeft: number;\r\n mouthPressRight: number;\r\n mouthPucker: number;\r\n mouthRight: number;\r\n mouthRollLower: number;\r\n mouthRollUpper: number;\r\n mouthShrugLower: number;\r\n mouthShrugUpper: number;\r\n mouthSmileLeft: number;\r\n mouthSmileRight: number;\r\n mouthStretchLeft: number;\r\n mouthStretchRight: number;\r\n mouthUpperUpLeft: number;\r\n mouthUpperUpRight: number;\r\n noseSneerLeft: number;\r\n noseSneerRight: number;\r\n tongueOut: number;\r\n }\r\n\n interface FaceData {\r\n id: number;\r\n bounds: {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n };\r\n center: {\r\n x: number;\r\n y: number;\r\n };\r\n confidence: number;\r\n landmarks: {\r\n x: number;\r\n y: number;\r\n z?: number;\r\n }[];\r\n expressions: {\r\n neutral: number;\r\n happy: number;\r\n sad: number;\r\n angry: number;\r\n surprised: number;\r\n disgusted: number;\r\n fearful: number;\r\n };\r\n headPose: {\r\n pitch: number;\r\n yaw: number;\r\n roll: number;\r\n };\r\n blendshapes: FaceBlendshapes;\r\n }\r\n\n type FrameRateMode = 'full' \| 'half';\r\n\n interface FrequencyBand {\r\n name: string;\r\n min: number;\r\n max: number;\r\n }\r\n\n interface HandData {\r\n id: number;\r\n handedness: 'left' \| 'right';\r\n confidence: number;\r\n bounds: {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n };\r\n landmarks: {\r\n x: number;\r\n y: number;\r\n z: number;\r\n }[];\r\n palm: {\r\n x: number;\r\n y: number;\r\n z: number;\r\n };\r\n gestures: {\r\n fist: number;\r\n openPalm: number;\r\n peace: number;\r\n thumbsUp: number;\r\n thumbsDown: number;\r\n pointing: number;\r\n iLoveYou: number;\r\n };\r\n }\r\n\n interface ImageConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ImageParameter {\r\n value: ImageBitmap \| null;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n /\n P5-compatible image object (lazy-loaded, auto-converted from .value)\n * Only available in P5 renderer mode. Use with p5.image() function.\n * Example: p5.image(myImage.p5, x, y)\n /\n p5?: {\n canvas: OffscreenCanvas; // P5.js looks for img.canvas \|\| img.elt\n elt: OffscreenCanvas; // Fallback for compatibility\n width: number; // Logical width\n height: number; // Logical height\n };\n }\r\n\n interface KeyboardAPI {\r\n isPressed(key: string): boolean;\r\n wasPressed(key: string): boolean;\r\n wasReleased(key: string): boolean;\r\n activeKeys: Set<string>;\r\n pressedThisFrame: Set<string>;\r\n releasedThisFrame: Set<string>;\r\n lastKeyPressed: string;\r\n lastKeyReleased: string;\r\n shift: boolean;\r\n ctrl: boolean;\r\n alt: boolean;\r\n meta: boolean;\r\n textureData: Uint8Array;\r\n }\r\n\n interface MouseAPI {\r\n x: number;\r\n y: number;\r\n isInCanvas: boolean;\r\n isPressed: boolean;\r\n leftButton: boolean;\r\n rightButton: boolean;\r\n middleButton: boolean;\r\n deltaX: number;\r\n deltaY: number;\r\n wheelDelta: number;\r\n wheelX: number;\r\n wheelY: number;\r\n wasPressed: boolean;\r\n wasReleased: boolean;\r\n wasMoved: boolean;\r\n }\r\n\n interface NumberConfig {\r\n min?: number;\r\n max?: number;\r\n step?: number;\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface NumberParameter {\r\n value: number;\r\n min: number;\r\n max: number;\r\n step: number;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n type ParameterCategory = 'audio' \| 'video' \| 'interaction' \| 'general';\r\n\n interface PointerAPI {\r\n x: number;\r\n y: number;\r\n deltaX: number;\r\n deltaY: number;\r\n isDown: boolean;\r\n wasPressed: boolean;\r\n wasReleased: boolean;\r\n isInCanvas: boolean;\r\n type: 'mouse' \| 'touch' \| 'none';\r\n }\r\n\n interface PoseData {\r\n confidence: number;\r\n landmarks: {\r\n x: number;\r\n y: number;\r\n z: number;\r\n visibility: number;\r\n }[];\r\n face: {\r\n x: number;\r\n y: number;\r\n }[];\r\n torso: {\r\n x: number;\r\n y: number;\r\n }[];\r\n leftArm: {\r\n x: number;\r\n y: number;\r\n }[];\r\n rightArm: {\r\n x: number;\r\n y: number;\r\n }[];\r\n leftLeg: {\r\n x: number;\r\n y: number;\r\n }[];\r\n rightLeg: {\r\n x: number;\r\n y: number;\r\n }[];\r\n }\r\n\n type Resolution = {\r\n width: number;\r\n height: number;\r\n };\r\n\n interface SegmentationData {\r\n mask: Uint8Array;\r\n width: number;\r\n height: number;\r\n }\r\n\n interface SelectConfig {\r\n options: string[] \| number[];\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface SelectParameter {\r\n value: string \| number;\r\n options: string[] \| number[];\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface SliderConfig {\r\n min?: number;\r\n max?: number;\r\n step?: number;\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface SliderParameter {\r\n value: number;\r\n min: number;\r\n max: number;\r\n step: number;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface TextConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n maxLength?: number;\r\n }\r\n\n interface TextParameter {\r\n value: string;\r\n maxLength?: number;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface ToggleConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ToggleParameter {\r\n value: boolean;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface TouchAPI {\r\n points: TouchPoint[];\r\n count: number;\r\n started: TouchPoint[];\r\n moved: TouchPoint[];\r\n ended: TouchPoint[];\r\n primary: TouchPoint \| null;\r\n }\r\n\n interface TouchPoint {\r\n id: number;\r\n x: number;\r\n y: number;\r\n pressure: number;\r\n radius: number;\r\n radiusX: number;\r\n radiusY: number;\r\n rotationAngle: number;\r\n force: number;\r\n isInCanvas: boolean;\r\n deltaX: number;\r\n deltaY: number;\r\n velocity: {\r\n x: number;\r\n y: number;\r\n };\r\n isNew: boolean;\r\n isActive: boolean;\r\n isEnding: boolean;\r\n }\r\n\n const VERSION = \"0.3.31\";\r\n\n interface VideoAPI {\r\n isConnected: boolean;\r\n currentFrame: OffscreenCanvas \| ImageBitmap \| null;\r\n frameWidth: number;\r\n frameHeight: number;\r\n frameRate: number;\r\n getFrameData: () => ImageData \| null;\r\n faces: FaceData[];\r\n hands: HandData[];\r\n pose: PoseData \| null;\r\n segmentation: SegmentationData \| null;\r\n cv: {\r\n enableFaceDetection(enabled: boolean): Promise<void>;\r\n enableFaceMesh(enabled: boolean): Promise<void>;\r\n enableEmotionDetection(enabled: boolean): Promise<void>;\r\n enableHandTracking(enabled: boolean): Promise<void>;\r\n enablePoseDetection(enabled: boolean): Promise<void>;\r\n enableBodySegmentation(enabled: boolean): Promise<void>;\r\n getActiveFeatures(): CVFeature[];\r\n isProcessing(): boolean;\r\n };\r\n }\r\n\n interface VijiAPI {\r\n canvas: OffscreenCanvas;\r\n ctx?: OffscreenCanvasRenderingContext2D;\r\n gl?: WebGLRenderingContext \| WebGL2RenderingContext;\r\n width: number;\r\n height: number;\r\n time: number;\r\n deltaTime: number;\r\n frameCount: number;\r\n fps: number;\r\n audio: AudioAPI;\r\n video: VideoAPI;\r\n videoStreams: VideoAPI[];\r\n audioStreams: AudioStreamAPI[];\r\n mouse: MouseAPI;\r\n keyboard: KeyboardAPI;\r\n touches: TouchAPI;\r\n pointer: PointerAPI;\r\n device: DeviceSensorState;\r\n devices: DeviceState[];\r\n slider: (defaultValue: number, config: SliderConfig) => SliderParameter;\r\n color: (defaultValue: string, config: ColorConfig) => ColorParameter;\r\n toggle: (defaultValue: boolean, config: ToggleConfig) => ToggleParameter;\r\n select: (defaultValue: string \| number, config: SelectConfig) => SelectParameter;\r\n text: (defaultValue: string, config: TextConfig) => TextParameter;\r\n number: (defaultValue: number, config: NumberConfig) => NumberParameter;\r\n image: (defaultValue: null, config: ImageConfig) => ImageParameter;\r\n button: (config: ButtonConfig) => ButtonParameter;\r\n useContext(type: '2d'): OffscreenCanvasRenderingContext2D;\r\n useContext(type: 'webgl'): WebGLRenderingContext;\r\n useContext(type: 'webgl2'): WebGL2RenderingContext;\r\n }\r\n\n // Runtime global - the main viji object\n const viji: VijiAPI;\n \n // Function type aliases (artists define their own render/setup functions)\n type Render = (viji: VijiAPI) => void;\n type Setup = (viji: VijiAPI) => void;\n}\n\n// Module marker (enables top-level await in artist code)\nexport {};\n\n\n// ============================================================\n// VIJI + P5.JS HYBRID MODE\n// ============================================================\n// In Viji's P5 renderer, you don't use standard P5 patterns.\n// Instead, you define these Viji-specific functions:\n\n// P5-specific globals (augments the base declare global block)\ndeclare global {\n // Type aliases for P5 function signatures (artists define their own functions)\n /\n P5 render function signature - called every frame\n * @param viji - Viji API (canvas, audio, video, parameters, etc.)\n * @param p5 - P5.js instance with all P5 methods\n /\n type P5Render = (viji: VijiAPI, p5: p5) => void;\n \n /\n P5 setup function signature - called once at initialization\n * @param viji - Viji API (canvas, audio, video, parameters, etc.)\n * @param p5 - P5.js instance with all P5 methods\n /\n type P5Setup = (viji: VijiAPI, p5: p5) => void;\n}\n\n// ============================================================\n// IMPORTANT NOTES\n// ============================================================\n// - Don't use: new p5(), preload(), draw(), or P5's setup()\n// - Viji manages the P5 instance lifecycle (including createCanvas — never call it)\n// - Optional WEBGL: use // @renderer p5 webgl as the first line (default is 2D: // @renderer p5)\n// - Access P5 methods through the 'p5' parameter: p5.rect(), p5.fill(), etc.\n// - Access Viji features through the 'viji' parameter: viji.audio, viji.mouse, etc.\n// - Define parameters at the top level (before setup/render functions)\n\n// ============================================================\n// P5.JS TYPES (instance methods and namespace types — inlined)\n// ============================================================\ninterface p5 {\n/\n Creates a screen reader accessible description for\n * the canvas. The first parameter should be a string\n * with a description of the canvas. The second\n * parameter is optional. If specified, it determines\n * how the description is displayed. describe(text,\n * LABEL) displays the description to all users as a\n * tombstone or exhibit label/caption in a div\n * adjacent to the canvas. You can style it as you\n * wish in your CSS.\n \n describe(text, FALLBACK) makes the description\n * accessible to screen-reader users only, in a sub\n * DOM inside the canvas element. If a second\n * parameter is not specified, by default, the\n * description will only be available to\n * screen-reader users.\n * @param text description of the canvas\n * @param [display] either LABEL or FALLBACK\n /\n describe(text: string, display?: DESCRIBE_DISPLAY): void;\n\n /\n This function creates a screen-reader accessible\n * description for elements —shapes or groups of\n * shapes that create meaning together— in the\n * canvas. The first paramater should be the name of\n * the element. The second parameter should be a\n * string with a description of the element. The\n * third parameter is optional. If specified, it\n * determines how the element description is\n * displayed. describeElement(name, text, LABEL)\n * displays the element description to all users as a\n * tombstone or exhibit label/caption in a div\n * adjacent to the canvas. You can style it as you\n * wish in your CSS.\n \n describeElement(name, text, FALLBACK) makes the\n * element description accessible to screen-reader\n * users only, in a sub DOM inside the canvas\n * element. If a second parameter is not specified,\n * by default, the element description will only be\n * available to screen-reader users.\n * @param name name of the element\n * @param text description of the element\n * @param [display] either LABEL or FALLBACK\n /\n describeElement(name: string, text: string, display?: DESCRIBE_DISPLAY): void;\n\n/\n textOutput() creates a screenreader accessible\n * output that describes the shapes present on the\n * canvas. The general description of the canvas\n * includes canvas size, canvas color, and number of\n * elements in the canvas (example: 'Your output is\n * a, 400 by 400 pixels, lavender blue canvas\n * containing the following 4 shapes:'). This\n * description is followed by a list of shapes where\n * the color, position, and area of each shape are\n * described (example: \"orange ellipse at top left\n * covering 1% of the canvas\"). Each element can be\n * selected to get more details. A table of elements\n * is also provided. In this table, shape, color,\n * location, coordinates and area are described\n * (example: \"orange ellipse location=top left\n * area=2\"). textOutput() and textOutput(FALLBACK)\n * make the output available in a sub DOM inside the\n * canvas element which is accessible to screen\n * readers. textOutput(LABEL) creates an additional\n * div with the output adjacent to the canvas, this\n * is useful for non-screen reader users that might\n * want to display the output outside of the canvas'\n * sub DOM as they code. However, using LABEL will\n * create unnecessary redundancy for screen reader\n * users. We recommend using LABEL only as part of\n * the development process of a sketch and removing\n * it before publishing or sharing with screen reader\n * users.\n * @param [display] either FALLBACK or LABEL\n /\n textOutput(display?: TEXT_DISPLAY): void;\n\n /\n gridOutput() lays out the content of the canvas in\n * the form of a grid (html table) based on the\n * spatial location of each shape. A brief\n * description of the canvas is available before the\n * table output. This description includes: color of\n * the background, size of the canvas, number of\n * objects, and object types (example: \"lavender blue\n * canvas is 200 by 200 and contains 4 objects - 3\n * ellipses 1 rectangle\"). The grid describes the\n * content spatially, each element is placed on a\n * cell of the table depending on its position.\n * Within each cell an element the color and type of\n * shape of that element are available (example:\n * \"orange ellipse\"). These descriptions can be\n * selected individually to get more details. A list\n * of elements where shape, color, location, and area\n * are described (example: \"orange ellipse\n * location=top left area=1%\") is also available.\n * gridOutput() and gridOutput(FALLBACK) make the\n * output available in a sub DOM inside the canvas\n * element which is accessible to screen readers.\n * gridOutput(LABEL) creates an additional div with\n * the output adjacent to the canvas, this is useful\n * for non-screen reader users that might want to\n * display the output outside of the canvas' sub DOM\n * as they code. However, using LABEL will create\n * unnecessary redundancy for screen reader users. We\n * recommend using LABEL only as part of the\n * development process of a sketch and removing it\n * before publishing or sharing with screen reader\n * users.\n * @param [display] either FALLBACK or LABEL\n /\n gridOutput(display?: GRID_DISPLAY): void;\n\n/\n Extracts the alpha (transparency) value from a\n * p5.Color object, array of color components, or CSS\n * color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the alpha value.\n /\n alpha(color: Color \| number[] \| string): number;\n\n /\n Extracts the blue value from a p5.Color object,\n * array of color components, or CSS color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the blue value.\n /\n blue(color: Color \| number[] \| string): number;\n\n /\n Extracts the HSB brightness value from a p5.Color\n * object, array of color components, or CSS color\n * string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the brightness value.\n /\n brightness(color: Color \| number[] \| string): number;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param gray number specifying value between white\n * and black.\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255).\n * @return resulting color.\n /\n color(gray: number, alpha?: number): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param v1 red or hue value relative to the current\n * color range.\n * @param v2 green or saturation value relative to\n * the current color range.\n * @param v3 blue or brightness value relative to the\n * current color range.\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255).\n /\n color(v1: number, v2: number, v3: number, alpha?: number): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param value a color string.\n /\n color(value: string): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param values an array containing the red, green,\n * blue, and alpha components of the color.\n /\n color(values: number[]): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n /\n color(color: Color): Color;\n\n /\n Extracts the green value from a p5.Color object,\n * array of color components, or CSS color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the green value.\n /\n green(color: Color \| number[] \| string): number;\n\n /\n Extracts the hue value from a p5.Color object,\n * array of color components, or CSS color string.\n * Hue exists in both HSB and HSL. It describes a\n * color's position on the color wheel. By default,\n * this function returns the HSL-normalized hue. If\n * the colorMode() is set to HSB, it returns the\n * HSB-normalized hue.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the hue\n /\n hue(color: Color \| number[] \| string): number;\n\n /\n Blends two colors to find a third color between\n * them. The amt parameter specifies the amount to\n * interpolate between the two values. 0 is equal to\n * the first color, 0.1 is very near the first color,\n * 0.5 is halfway between the two colors, and so on.\n * Negative numbers are set to 0. Numbers greater\n * than 1 are set to 1. This differs from the\n * behavior of lerp. It's necessary because numbers\n * outside of the interval [0, 1] will produce\n * strange and unexpected colors. The way that colors\n * are interpolated depends on the current\n * colorMode().\n * @param c1 interpolate from this color.\n * @param c2 interpolate to this color.\n * @param amt number between 0 and 1.\n * @return interpolated color.\n /\n lerpColor(c1: Color, c2: Color, amt: number): Color;\n\n /\n Extracts the HSL lightness value from a p5.Color\n * object, array of color components, or CSS color\n * string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the lightness\n /\n lightness(color: Color \| number[] \| string): number;\n\n /\n Extracts the red value from a p5.Color object,\n * array of color components, or CSS color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the red value.\n /\n red(color: Color \| number[] \| string): number;\n\n /\n Extracts the saturation value from a p5.Color\n * object, array of color components, or CSS color\n * string. Saturation is scaled differently in HSB\n * and HSL. By default, this function returns the HSL\n * saturation. If the colorMode() is set to HSB, it\n * returns the HSB saturation.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the saturation value\n /\n saturation(color: Color \| number[] \| string): number;\n\n/\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param color any value created by the color()\n * function\n * @chainable\n /\n background(color: Color): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param colorstring color string, possible formats\n * include: integer rgb() or rgba(), percentage rgb()\n * or rgba(), 3-digit hex, 6-digit hex.\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(colorstring: string, a?: number): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param gray specifies a value between white and\n * black.\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(gray: number, a?: number): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param v1 red value if color mode is RGB, or hue\n * value if color mode is HSB.\n * @param v2 green value if color mode is RGB, or\n * saturation value if color mode is HSB.\n * @param v3 blue value if color mode is RGB, or\n * brightness value if color mode is HSB.\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(v1: number, v2: number, v3: number, a?: number): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param values an array containing the red, green,\n * blue and alpha components of the color.\n * @chainable\n /\n background(values: number[]): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param image image created with loadImage() or\n * createImage(), to set as background. (must be same\n * size as the sketch window).\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(image: Image, a?: number): p5;\n\n /\n Clears the pixels on the canvas. This function\n * makes every pixel 100% transparent. Calling\n * clear() doesn't clear objects created by createX()\n * functions such as createGraphics(), createVideo(),\n * and createImg(). These objects will remain\n * unchanged after calling clear() and can be\n * redrawn. In WebGL mode, this function can clear\n * the screen to a specific color. It interprets four\n * numeric parameters as normalized RGBA color\n * values. It also clears the depth buffer. If you\n * are not using the WebGL renderer, these parameters\n * will have no effect.\n * @param r normalized red value.\n * @param g normalized green value.\n * @param b normalized blue value.\n * @param a normalized alpha value.\n * @chainable\n /\n clear(r: number, g: number, b: number, a: number): p5;\n\n /\n Clears the pixels on the canvas. This function\n * makes every pixel 100% transparent. Calling\n * clear() doesn't clear objects created by createX()\n * functions such as createGraphics(), createVideo(),\n * and createImg(). These objects will remain\n * unchanged after calling clear() and can be\n * redrawn. In WebGL mode, this function can clear\n * the screen to a specific color. It interprets four\n * numeric parameters as normalized RGBA color\n * values. It also clears the depth buffer. If you\n * are not using the WebGL renderer, these parameters\n * will have no effect.\n * @chainable\n /\n clear(): p5;\n\n /\n Changes the way p5.js interprets color data. By\n * default, the numeric parameters for fill(),\n * stroke(), background(), and color() are defined by\n * values between 0 and 255 using the RGB color\n * model. This is equivalent to calling\n * colorMode(RGB, 255). Pure red is color(255, 0, 0)\n * in this model. Calling colorMode(RGB, 100) sets\n * colors to be interpreted as RGB color values\n * between 0 and 100. Pure red is color(100, 0, 0) in\n * this model.\n \n Calling colorMode(HSB) or colorMode(HSL) changes\n * to HSB or HSL system instead of RGB.\n \n p5.Color objects remember the mode that they were\n * created in. Changing modes doesn't affect their\n * appearance.\n * @param mode either RGB, HSB or HSL, corresponding\n * to Red/Green/Blue and Hue/Saturation/Brightness\n * (or Lightness).\n * @param [max] range for all values.\n * @chainable\n /\n colorMode(mode: COLOR_MODE, max?: number): p5;\n\n /\n Changes the way p5.js interprets color data. By\n * default, the numeric parameters for fill(),\n * stroke(), background(), and color() are defined by\n * values between 0 and 255 using the RGB color\n * model. This is equivalent to calling\n * colorMode(RGB, 255). Pure red is color(255, 0, 0)\n * in this model. Calling colorMode(RGB, 100) sets\n * colors to be interpreted as RGB color values\n * between 0 and 100. Pure red is color(100, 0, 0) in\n * this model.\n \n Calling colorMode(HSB) or colorMode(HSL) changes\n * to HSB or HSL system instead of RGB.\n \n p5.Color objects remember the mode that they were\n * created in. Changing modes doesn't affect their\n * appearance.\n * @param mode either RGB, HSB or HSL, corresponding\n * to Red/Green/Blue and Hue/Saturation/Brightness\n * (or Lightness).\n * @param max1 range for the red or hue depending on\n * the current color mode.\n * @param max2 range for the green or saturation\n * depending on the current color mode.\n * @param max3 range for the blue or\n * brightness/lightness depending on the current\n * color mode.\n * @param [maxA] range for the alpha.\n * @chainable\n /\n colorMode(mode: UNKNOWN_P5_CONSTANT, max1: number, max2: number, max3: number, maxA?: number): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param v1 red value if color mode is RGB or hue\n * value if color mode is HSB.\n * @param v2 green value if color mode is RGB or\n * saturation value if color mode is HSB.\n * @param v3 blue value if color mode is RGB or\n * brightness value if color mode is HSB.\n * @chainable\n /\n fill(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param value a color string.\n * @chainable\n /\n fill(value: string): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param gray a grayscale value.\n * @chainable\n /\n fill(gray: number, alpha?: number): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param values an array containing the red, green,\n * blue & and alpha components of the color.\n * @chainable\n /\n fill(values: number[]): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param color the fill color.\n * @chainable\n /\n fill(color: Color): p5;\n\n /\n Disables setting the interior color of shapes.\n * This is the same as making the fill completely\n * transparent. If both noStroke() and noFill() are\n * called, nothing will be drawn to the screen.\n * @chainable\n /\n noFill(): p5;\n\n /\n Disables drawing the stroke (outline). If both\n * noStroke() and noFill() are called, nothing will\n * be drawn to the screen.\n * @chainable\n /\n noStroke(): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param v1 red value if color mode is RGB or hue\n * value if color mode is HSB.\n * @param v2 green value if color mode is RGB or\n * saturation value if color mode is HSB.\n * @param v3 blue value if color mode is RGB or\n * brightness value if color mode is HSB.\n * @chainable\n /\n stroke(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param value a color string.\n * @chainable\n /\n stroke(value: string): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param gray a grayscale value.\n * @chainable\n /\n stroke(gray: number, alpha?: number): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param values an array containing the red, green,\n * blue, and alpha components of the color.\n * @chainable\n /\n stroke(values: number[]): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param color the stroke color.\n * @chainable\n /\n stroke(color: Color): p5;\n\n /\n All drawing that follows erase() will subtract\n * from the canvas, revealing the web page\n * underneath. The erased areas will become\n * transparent, allowing the content behind the\n * canvas to show through. The fill(), stroke(), and\n * blendMode() have no effect once erase() is called.\n * The erase() function has two optional parameters.\n * The first parameter sets the strength of erasing\n * by the shape's interior. A value of 0 means that\n * no erasing will occur. A value of 255 means that\n * the shape's interior will fully erase the content\n * underneath. The default value is 255 (full\n * strength).\n \n The second parameter sets the strength of erasing\n * by the shape's edge. A value of 0 means that no\n * erasing will occur. A value of 255 means that the\n * shape's edge will fully erase the content\n * underneath. The default value is 255 (full\n * strength).\n \n To cancel the erasing effect, use the noErase()\n * function.\n \n erase() has no effect on drawing done with the\n * image() and background() functions.\n * @param [strengthFill] a number (0-255) for the\n * strength of erasing under a shape's interior.\n * Defaults to 255, which is full strength.\n * @param [strengthStroke] a number (0-255) for the\n * strength of erasing under a shape's edge. Defaults\n * to 255, which is full strength.\n * @chainable\n /\n erase(strengthFill?: number, strengthStroke?: number): p5;\n\n /\n Ends erasing that was started with erase(). The\n * fill(), stroke(), and blendMode() settings will\n * return to what they were prior to calling erase().\n * @chainable\n /\n noErase(): p5;\n\n/\n Draws an arc to the canvas. Arcs are drawn along\n * the outer edge of an ellipse (oval) defined by the\n * x, y, w, and h parameters. Use the start and stop\n * parameters to specify the angles (in radians) at\n * which to draw the arc. Arcs are always drawn\n * clockwise from start to stop. The origin of the\n * arc's ellipse may be changed with the\n * ellipseMode() function. The optional mode\n * parameter determines the arc's fill style. The\n * fill modes are a semi-circle (OPEN), a closed\n * semi-circle (CHORD), or a closed pie segment\n * (PIE).\n * @param x x-coordinate of the arc's ellipse.\n * @param y y-coordinate of the arc's ellipse.\n * @param w width of the arc's ellipse by default.\n * @param h height of the arc's ellipse by default.\n * @param start angle to start the arc, specified in\n * radians.\n * @param stop angle to stop the arc, specified in\n * radians.\n * @param [mode] optional parameter to determine the\n * way of drawing the arc. either CHORD, PIE, or\n * OPEN.\n * @param [detail] optional parameter for WebGL mode\n * only. This is to specify the number of vertices\n * that makes up the perimeter of the arc. Default\n * value is 25. Won't draw a stroke for a detail of\n * more than 50.\n * @chainable\n /\n arc(\n x: number,\n y: number,\n w: number,\n h: number,\n start: number,\n stop: number,\n mode?: ARC_MODE,\n detail?: number\n ): p5;\n\n /\n Draws an ellipse (oval) to the canvas. An ellipse\n * with equal width and height is a circle. By\n * default, the first two parameters set the location\n * of the center of the ellipse. The third and fourth\n * parameters set the shape's width and height,\n * respectively. The origin may be changed with the\n * ellipseMode() function. If no height is specified,\n * the value of width is used for both the width and\n * height. If a negative height or width is\n * specified, the absolute value is taken.\n * @param x x-coordinate of the center of the\n * ellipse.\n * @param y y-coordinate of the center of the\n * ellipse.\n * @param w width of the ellipse.\n * @param [h] height of the ellipse.\n * @chainable\n /\n ellipse(x: number, y: number, w: number, h?: number): p5;\n\n /\n Draws an ellipse (oval) to the canvas. An ellipse\n * with equal width and height is a circle. By\n * default, the first two parameters set the location\n * of the center of the ellipse. The third and fourth\n * parameters set the shape's width and height,\n * respectively. The origin may be changed with the\n * ellipseMode() function. If no height is specified,\n * the value of width is used for both the width and\n * height. If a negative height or width is\n * specified, the absolute value is taken.\n * @param x x-coordinate of the center of the\n * ellipse.\n * @param y y-coordinate of the center of the\n * ellipse.\n * @param w width of the ellipse.\n * @param h height of the ellipse.\n * @param [detail] optional parameter for WebGL mode\n * only. This is to specify the number of vertices\n * that makes up the perimeter of the ellipse.\n * Default value is 25. Won't draw a stroke for a\n * detail of more than 50.\n /\n ellipse(x: number, y: number, w: number, h: number, detail?: number): void;\n\n /\n Draws a circle to the canvas. A circle is a round\n * shape. Every point on the edge of a circle is the\n * same distance from its center. By default, the\n * first two parameters set the location of the\n * center of the circle. The third parameter sets the\n * shape's width and height (diameter). The origin\n * may be changed with the ellipseMode() function.\n * @param x x-coordinate of the center of the circle.\n * @param y y-coordinate of the center of the circle.\n * @param d diameter of the circle.\n * @chainable\n /\n circle(x: number, y: number, d: number): p5;\n\n /\n Draws a line, a straight path between two points.\n * Its default width is one pixel. The version of\n * line() with four parameters draws the line in 2D.\n * To color a line, use the stroke() function. To\n * change its width, use the strokeWeight() function.\n * A line can't be filled, so the fill() function\n * won't affect the color of a line. The version of\n * line() with six parameters allows the line to be\n * drawn in 3D space. Doing so requires adding the\n * WEBGL argument to createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @chainable\n /\n line(x1: number, y1: number, x2: number, y2: number): p5;\n\n /\n Draws a line, a straight path between two points.\n * Its default width is one pixel. The version of\n * line() with four parameters draws the line in 2D.\n * To color a line, use the stroke() function. To\n * change its width, use the strokeWeight() function.\n * A line can't be filled, so the fill() function\n * won't affect the color of a line. The version of\n * line() with six parameters allows the line to be\n * drawn in 3D space. Doing so requires adding the\n * WEBGL argument to createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param z1 the z-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @param z2 the z-coordinate of the second point.\n * @chainable\n /\n line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): p5;\n\n /\n Draws a point, a single coordinate in space. Its\n * default size is one pixel. The first two\n * parameters are the point's x- and y-coordinates,\n * respectively. To color a point, use the stroke()\n * function. To change its size, use the\n * strokeWeight() function. The version of point()\n * with three parameters allows the point to be drawn\n * in 3D space. Doing so requires adding the WEBGL\n * argument to createCanvas().\n \n The version of point() with one parameter allows\n * the point's location to be set with a p5.Vector\n * object.\n * @param x the x-coordinate.\n * @param y the y-coordinate.\n * @param [z] the z-coordinate (for WebGL mode).\n * @chainable\n /\n point(x: number, y: number, z?: number): p5;\n\n /\n Draws a point, a single coordinate in space. Its\n * default size is one pixel. The first two\n * parameters are the point's x- and y-coordinates,\n * respectively. To color a point, use the stroke()\n * function. To change its size, use the\n * strokeWeight() function. The version of point()\n * with three parameters allows the point to be drawn\n * in 3D space. Doing so requires adding the WEBGL\n * argument to createCanvas().\n \n The version of point() with one parameter allows\n * the point's location to be set with a p5.Vector\n * object.\n * @param coordinateVector the coordinate vector.\n * @chainable\n /\n point(coordinateVector: Vector): p5;\n\n /\n Draws a quad to the canvas. A quad is a\n * quadrilateral, a four-sided polygon. Some examples\n * of quads include rectangles, squares, rhombuses,\n * and trapezoids. The first pair of parameters\n * (x1,y1) sets the quad's first point. The following\n * pairs of parameters set the coordinates for its\n * next three points. Parameters should proceed\n * clockwise or counter-clockwise around the shape.\n * The version of quad() with twelve parameters\n * allows the quad to be drawn in 3D space. Doing so\n * requires adding the WEBGL argument to\n * createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @param x3 the x-coordinate of the third point.\n * @param y3 the y-coordinate of the third point.\n * @param x4 the x-coordinate of the fourth point.\n * @param y4 the y-coordinate of the fourth point.\n * @param [detailX] number of segments in the\n * x-direction.\n * @param [detailY] number of segments in the\n * y-direction.\n * @chainable\n /\n quad(\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n x3: number,\n y3: number,\n x4: number,\n y4: number,\n detailX?: number,\n detailY?: number\n ): p5;\n\n /\n Draws a quad to the canvas. A quad is a\n * quadrilateral, a four-sided polygon. Some examples\n * of quads include rectangles, squares, rhombuses,\n * and trapezoids. The first pair of parameters\n * (x1,y1) sets the quad's first point. The following\n * pairs of parameters set the coordinates for its\n * next three points. Parameters should proceed\n * clockwise or counter-clockwise around the shape.\n * The version of quad() with twelve parameters\n * allows the quad to be drawn in 3D space. Doing so\n * requires adding the WEBGL argument to\n * createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param z1 the z-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @param z2 the z-coordinate of the second point.\n * @param x3 the x-coordinate of the third point.\n * @param y3 the y-coordinate of the third point.\n * @param z3 the z-coordinate of the third point.\n * @param x4 the x-coordinate of the fourth point.\n * @param y4 the y-coordinate of the fourth point.\n * @param z4 the z-coordinate of the fourth point.\n * @param [detailX] number of segments in the\n * x-direction.\n * @param [detailY] number of segments in the\n * y-direction.\n * @chainable\n /\n quad(\n x1: number,\n y1: number,\n z1: number,\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number,\n detailX?: number,\n detailY?: number\n ): p5;\n\n /\n Draws a rectangle to the canvas. A rectangle is a\n * four-sided polygon with every angle at ninety\n * degrees. By default, the first two parameters set\n * the location of the rectangle's upper-left corner.\n * The third and fourth set the shape's the width and\n * height, respectively. The way these parameters are\n * interpreted may be changed with the rectMode()\n * function. The version of rect() with five\n * parameters creates a rounded rectangle. The fifth\n * parameter is used as the radius value for all four\n * corners.\n \n The version of rect() with eight parameters also\n * creates a rounded rectangle. When using eight\n * parameters, the latter four set the radius of the\n * arc at each corner separately. The radii start\n * with the top-left corner and move clockwise around\n * the rectangle. If any of these parameters are\n * omitted, they are set to the value of the last\n * specified corner radius.\n * @param x x-coordinate of the rectangle.\n * @param y y-coordinate of the rectangle.\n * @param w width of the rectangle.\n * @param [h] height of the rectangle.\n * @param [tl] optional radius of top-left corner.\n * @param [tr] optional radius of top-right corner.\n * @param [br] optional radius of bottom-right\n * corner.\n * @param [bl] optional radius of bottom-left corner.\n * @chainable\n /\n rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): p5;\n\n /\n Draws a rectangle to the canvas. A rectangle is a\n * four-sided polygon with every angle at ninety\n * degrees. By default, the first two parameters set\n * the location of the rectangle's upper-left corner.\n * The third and fourth set the shape's the width and\n * height, respectively. The way these parameters are\n * interpreted may be changed with the rectMode()\n * function. The version of rect() with five\n * parameters creates a rounded rectangle. The fifth\n * parameter is used as the radius value for all four\n * corners.\n \n The version of rect() with eight parameters also\n * creates a rounded rectangle. When using eight\n * parameters, the latter four set the radius of the\n * arc at each corner separately. The radii start\n * with the top-left corner and move clockwise around\n * the rectangle. If any of these parameters are\n * omitted, they are set to the value of the last\n * specified corner radius.\n * @param x x-coordinate of the rectangle.\n * @param y y-coordinate of the rectangle.\n * @param w width of the rectangle.\n * @param h height of the rectangle.\n * @param [detailX] number of segments in the\n * x-direction (for WebGL mode).\n * @param [detailY] number of segments in the\n * y-direction (for WebGL mode).\n * @chainable\n /\n rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): p5;\n\n /\n Draws a square to the canvas. A square is a\n * four-sided polygon with every angle at ninety\n * degrees and equal side lengths. By default, the\n * first two parameters set the location of the\n * square's upper-left corner. The third parameter\n * sets its side size. The way these parameters are\n * interpreted may be changed with the rectMode()\n * function. The version of square() with four\n * parameters creates a rounded square. The fourth\n * parameter is used as the radius value for all four\n * corners.\n \n The version of square() with seven parameters also\n * creates a rounded square. When using seven\n * parameters, the latter four set the radius of the\n * arc at each corner separately. The radii start\n * with the top-left corner and move clockwise around\n * the square. If any of these parameters are\n * omitted, they are set to the value of the last\n * specified corner radius.\n * @param x x-coordinate of the square.\n * @param y y-coordinate of the square.\n * @param s side size of the square.\n * @param [tl] optional radius of top-left corner.\n * @param [tr] optional radius of top-right corner.\n * @param [br] optional radius of bottom-right\n * corner.\n * @param [bl] optional radius of bottom-left corner.\n * @chainable\n /\n square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): p5;\n\n /\n Draws a triangle to the canvas. A triangle is a\n * three-sided polygon. The first two parameters\n * specify the triangle's first point (x1,y1). The\n * middle two parameters specify its second point\n * (x2,y2). And the last two parameters specify its\n * third point (x3, y3).\n * @param x1 x-coordinate of the first point.\n * @param y1 y-coordinate of the first point.\n * @param x2 x-coordinate of the second point.\n * @param y2 y-coordinate of the second point.\n * @param x3 x-coordinate of the third point.\n * @param y3 y-coordinate of the third point.\n * @chainable\n /\n triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): p5;\n\n/\n Modifies the location from which ellipses,\n * circles, and arcs are drawn. By default, the first\n * two parameters are the x- and y-coordinates of the\n * shape's center. The next parameters are its width\n * and height. This is equivalent to calling\n * ellipseMode(CENTER). ellipseMode(RADIUS) also uses\n * the first two parameters to set the x- and\n * y-coordinates of the shape's center. The next\n * parameters are half of the shapes's width and\n * height. Calling ellipse(0, 0, 10, 15) draws a\n * shape with a width of 20 and height of 30.\n \n ellipseMode(CORNER) uses the first two parameters\n * as the upper-left corner of the shape. The next\n * parameters are its width and height.\n \n ellipseMode(CORNERS) uses the first two parameters\n * as the location of one corner of the ellipse's\n * bounding box. The third and fourth parameters are\n * the location of the opposite corner.\n \n The argument passed to ellipseMode() must be\n * written in ALL CAPS because the constants CENTER,\n * RADIUS, CORNER, and CORNERS are defined this way.\n * JavaScript is a case-sensitive language.\n * @param mode either CENTER, RADIUS, CORNER, or\n * CORNERS\n * @chainable\n /\n ellipseMode(mode: ELLIPSE_MODE): p5;\n\n /\n Draws all geometry with jagged (aliased) edges.\n * smooth() is active by default in 2D mode. It's\n * necessary to call noSmooth() to disable smoothing\n * of geometry, images, and fonts.\n \n In WebGL mode, noSmooth() is active by default.\n * It's necessary to call smooth() to draw smooth\n * (antialiased) edges.\n * @chainable\n /\n noSmooth(): p5;\n\n /\n Modifies the location from which rectangles and\n * squares are drawn. By default, the first two\n * parameters are the x- and y-coordinates of the\n * shape's upper-left corner. The next parameters are\n * its width and height. This is equivalent to\n * calling rectMode(CORNER). rectMode(CORNERS) also\n * uses the first two parameters as the location of\n * one of the corners. The third and fourth\n * parameters are the location of the opposite\n * corner.\n \n rectMode(CENTER) uses the first two parameters as\n * the x- and y-coordinates of the shape's center.\n * The next parameters are its width and height.\n \n rectMode(RADIUS) also uses the first two\n * parameters as the x- and y-coordinates of the\n * shape's center. The next parameters are half of\n * the shape's width and height.\n \n The argument passed to rectMode() must be written\n * in ALL CAPS because the constants CENTER, RADIUS,\n * CORNER, and CORNERS are defined this way.\n * JavaScript is a case-sensitive language.\n * @param mode either CORNER, CORNERS, CENTER, or\n * RADIUS\n * @chainable\n /\n rectMode(mode: RECT_MODE): p5;\n\n /\n Draws all geometry with smooth (anti-aliased)\n * edges. smooth() will also improve image quality of\n * resized images. smooth() is active by default in\n * 2D mode. It's necessary to call noSmooth() to\n * disable smoothing of geometry, images, and fonts.\n \n In WebGL mode, noSmooth() is active by default.\n * It's necessary to call smooth() to draw smooth\n * (antialiased) edges.\n * @chainable\n /\n smooth(): p5;\n\n /\n Sets the style for rendering line endings. These\n * ends are either rounded (ROUND), squared (SQUARE),\n * or extended (PROJECT). The default cap is ROUND.\n * The argument passed to strokeCap() must be written\n * in ALL CAPS because the constants ROUND, SQUARE,\n * and PROJECT are defined this way. JavaScript is a\n * case-sensitive language.\n * @param cap either ROUND, SQUARE, or PROJECT\n * @chainable\n /\n strokeCap(cap: STROKE_CAP): p5;\n\n /\n Sets the style of the joints which connect line\n * segments. These joints are either mitered (MITER),\n * beveled (BEVEL), or rounded (ROUND). The default\n * joint is MITER in 2D mode and ROUND in WebGL mode.\n * The argument passed to strokeJoin() must be\n * written in ALL CAPS because the constants MITER,\n * BEVEL, and ROUND are defined this way. JavaScript\n * is a case-sensitive language.\n * @param join either MITER, BEVEL, or ROUND\n * @chainable\n /\n strokeJoin(join: STROKE_JOIN): p5;\n\n /\n Sets the width of the stroke used for lines,\n * points, and the border around shapes. All widths\n * are set in units of pixels. Note that\n * strokeWeight() is affected by any transformation\n * or scaling that has been applied previously.\n * @param weight the weight of the stroke (in\n * pixels).\n * @chainable\n /\n strokeWeight(weight: number): p5;\n\n/\n Draws a cubic Bezier curve on the screen. These\n * curves are defined by a series of anchor and\n * control points. The first two parameters specify\n * the first anchor point and the last two parameters\n * specify the other anchor point, which become the\n * first and last points on the curve. The middle\n * parameters specify the two control points which\n * define the shape of the curve. Approximately\n * speaking, control points \"pull\" the curve towards\n * them. Bezier curves were developed by French\n * automotive engineer Pierre Bezier, and are\n * commonly used in computer graphics to define\n * gently sloping curves. See also curve().\n * @param x1 x-coordinate for the first anchor point\n * @param y1 y-coordinate for the first anchor point\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param x4 x-coordinate for the second anchor point\n * @param y4 y-coordinate for the second anchor point\n * @chainable\n /\n bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;\n\n /\n Draws a cubic Bezier curve on the screen. These\n * curves are defined by a series of anchor and\n * control points. The first two parameters specify\n * the first anchor point and the last two parameters\n * specify the other anchor point, which become the\n * first and last points on the curve. The middle\n * parameters specify the two control points which\n * define the shape of the curve. Approximately\n * speaking, control points \"pull\" the curve towards\n * them. Bezier curves were developed by French\n * automotive engineer Pierre Bezier, and are\n * commonly used in computer graphics to define\n * gently sloping curves. See also curve().\n * @param x1 x-coordinate for the first anchor point\n * @param y1 y-coordinate for the first anchor point\n * @param z1 z-coordinate for the first anchor point\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param z2 z-coordinate for the first control point\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param z3 z-coordinate for the second control\n * point\n * @param x4 x-coordinate for the second anchor point\n * @param y4 y-coordinate for the second anchor point\n * @param z4 z-coordinate for the second anchor point\n * @chainable\n /\n bezier(\n x1: number,\n y1: number,\n z1: number,\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number\n ): p5;\n\n /\n Sets the resolution at which Bezier's curve is\n * displayed. The default value is 20. Note, This\n * function is only useful when using the WEBGL\n * renderer as the default canvas renderer does not\n * use this information.\n * @param detail resolution of the curves\n * @chainable\n /\n bezierDetail(detail: number): p5;\n\n /\n Given the x or y co-ordinate values of control and\n * anchor points of a bezier curve, it evaluates the\n * x or y coordinate of the bezier at position t. The\n * parameters a and d are the x or y coordinates of\n * first and last points on the curve while b and c\n * are of the control points.The final parameter t is\n * the position of the resultant point which is given\n * between 0 and 1. This can be done once with the x\n * coordinates and a second time with the y\n * coordinates to get the location of a bezier curve\n * at t.\n * @param a coordinate of first point on the curve\n * @param b coordinate of first control point\n * @param c coordinate of second control point\n * @param d coordinate of second point on the curve\n * @param t value between 0 and 1\n * @return the value of the Bezier at position t\n /\n bezierPoint(a: number, b: number, c: number, d: number, t: number): number;\n\n /\n Evaluates the tangent to the Bezier at position t\n * for points a, b, c, d. The parameters a and d are\n * the first and last points on the curve, and b and\n * c are the control points. The final parameter t\n * varies between 0 and 1.\n * @param a coordinate of first point on the curve\n * @param b coordinate of first control point\n * @param c coordinate of second control point\n * @param d coordinate of second point on the curve\n * @param t value between 0 and 1\n * @return the tangent at position t\n /\n bezierTangent(a: number, b: number, c: number, d: number, t: number): number;\n\n /\n Draws a curved line on the screen between two\n * points, given as the middle four parameters. The\n * first two parameters are a control point, as if\n * the curve came from this point even though it's\n * not drawn. The last two parameters similarly\n * describe the other control point. Longer curves\n * can be created by putting a series of curve()\n * functions together or using curveVertex(). An\n * additional function called curveTightness()\n * provides control for the visual quality of the\n * curve. The curve() function is an implementation\n * of Catmull-Rom splines.\n * @param x1 x-coordinate for the beginning control\n * point\n * @param y1 y-coordinate for the beginning control\n * point\n * @param x2 x-coordinate for the first point\n * @param y2 y-coordinate for the first point\n * @param x3 x-coordinate for the second point\n * @param y3 y-coordinate for the second point\n * @param x4 x-coordinate for the ending control\n * point\n * @param y4 y-coordinate for the ending control\n * point\n * @chainable\n /\n curve(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;\n\n /\n Draws a curved line on the screen between two\n * points, given as the middle four parameters. The\n * first two parameters are a control point, as if\n * the curve came from this point even though it's\n * not drawn. The last two parameters similarly\n * describe the other control point. Longer curves\n * can be created by putting a series of curve()\n * functions together or using curveVertex(). An\n * additional function called curveTightness()\n * provides control for the visual quality of the\n * curve. The curve() function is an implementation\n * of Catmull-Rom splines.\n * @param x1 x-coordinate for the beginning control\n * point\n * @param y1 y-coordinate for the beginning control\n * point\n * @param z1 z-coordinate for the beginning control\n * point\n * @param x2 x-coordinate for the first point\n * @param y2 y-coordinate for the first point\n * @param z2 z-coordinate for the first point\n * @param x3 x-coordinate for the second point\n * @param y3 y-coordinate for the second point\n * @param z3 z-coordinate for the second point\n * @param x4 x-coordinate for the ending control\n * point\n * @param y4 y-coordinate for the ending control\n * point\n * @param z4 z-coordinate for the ending control\n * point\n * @chainable\n /\n curve(\n x1: number,\n y1: number,\n z1: number,\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number\n ): p5;\n\n /\n Sets the resolution at which curves display. The\n * default value is 20 while the minimum value is 3.\n * This function is only useful when using the WEBGL\n * renderer as the default canvas renderer does not\n * use this information.\n * @param resolution resolution of the curves\n * @chainable\n /\n curveDetail(resolution: number): p5;\n\n /\n Modifies the quality of forms created with curve()\n * and curveVertex().The parameter tightness\n * determines how the curve fits to the vertex\n * points. The value 0.0 is the default value for\n * tightness (this value defines the curves to be\n * Catmull-Rom splines) and the value 1.0 connects\n * all the points with straight lines. Values within\n * the range -5.0 and 5.0 will deform the curves but\n * will leave them recognizable and as values\n * increase in magnitude, they will continue to\n * deform.\n * @param amount amount of deformation from the\n * original vertices\n * @chainable\n /\n curveTightness(amount: number): p5;\n\n /\n Evaluates the curve at position t for points a, b,\n * c, d. The parameter t varies between 0 and 1, a\n * and d are control points of the curve, and b and c\n * are the start and end points of the curve. This\n * can be done once with the x coordinates and a\n * second time with the y coordinates to get the\n * location of a curve at t.\n * @param a coordinate of first control point of the\n * curve\n * @param b coordinate of first point\n * @param c coordinate of second point\n * @param d coordinate of second control point\n * @param t value between 0 and 1\n * @return Curve value at position t\n /\n curvePoint(a: number, b: number, c: number, d: number, t: number): number;\n\n /\n Evaluates the tangent to the curve at position t\n * for points a, b, c, d. The parameter t varies\n * between 0 and 1, a and d are points on the curve,\n * and b and c are the control points.\n * @param a coordinate of first control point\n * @param b coordinate of first point on the curve\n * @param c coordinate of second point on the curve\n * @param d coordinate of second conrol point\n * @param t value between 0 and 1\n * @return the tangent at position t\n /\n curveTangent(a: number, b: number, c: number, d: number, t: number): number;\n\n/\n Use the beginContour() and endContour() functions\n * to create negative shapes within shapes such as\n * the center of the letter 'O'. beginContour()\n * begins recording vertices for the shape and\n * endContour() stops recording. The vertices that\n * define a negative shape must \"wind\" in the\n * opposite direction from the exterior shape. First\n * draw vertices for the exterior clockwise order,\n * then for internal shapes, draw vertices shape in\n * counter-clockwise. These functions can only be\n * used within a beginShape()/endShape() pair and\n * transformations such as translate(), rotate(), and\n * scale() do not work within a\n * beginContour()/endContour() pair. It is also not\n * possible to use other shapes, such as ellipse() or\n * rect() within.\n * @chainable\n /\n beginContour(): p5;\n\n /\n Using the beginShape() and endShape() functions\n * allow creating more complex forms. beginShape()\n * begins recording vertices for a shape and\n * endShape() stops recording. The value of the kind\n * parameter tells it which types of shapes to create\n * from the provided vertices. With no mode\n * specified, the shape can be any irregular polygon.\n * The parameters available for beginShape() are:\n \n POINTS Draw a series of points\n \n LINES Draw a series of unconnected line segments\n * (individual lines)\n \n TRIANGLES Draw a series of separate triangles\n \n TRIANGLE_FAN Draw a series of connected triangles\n * sharing the first vertex in a fan-like fashion\n \n TRIANGLE_STRIP Draw a series of connected\n * triangles in strip fashion\n \n QUADS Draw a series of separate quads\n \n QUAD_STRIP Draw quad strip using adjacent edges to\n * form the next quad\n \n TESS (WEBGL only) Handle irregular polygon for\n * filling curve by explicit tessellation\n \n After calling the beginShape() function, a series\n * of vertex() commands must follow. To stop drawing\n * the shape, call endShape(). Each shape will be\n * outlined with the current stroke color and filled\n * with the fill color.\n \n Transformations such as translate(), rotate(), and\n * scale() do not work within beginShape(). It is\n * also not possible to use other shapes, such as\n * ellipse() or rect() within beginShape().\n * @param [kind] either POINTS, LINES, TRIANGLES,\n * TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or\n * TESS\n * @chainable\n /\n beginShape(kind?: BEGIN_KIND): p5;\n\n /\n Specifies vertex coordinates for Bezier curves.\n * Each call to bezierVertex() defines the position\n * of two control points and one anchor point of a\n * Bezier curve, adding a new segment to a line or\n * shape. For WebGL mode bezierVertex() can be used\n * in 2D as well as 3D mode. 2D mode expects 6\n * parameters, while 3D mode expects 9 parameters\n * (including z coordinates). The first time\n * bezierVertex() is used within a beginShape() call,\n * it must be prefaced with a call to vertex() to set\n * the first anchor point. This function must be used\n * between beginShape() and endShape() and only when\n * there is no MODE or POINTS parameter specified to\n * beginShape().\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param x4 x-coordinate for the anchor point\n * @param y4 y-coordinate for the anchor point\n * @chainable\n /\n bezierVertex(x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;\n\n /\n Specifies vertex coordinates for Bezier curves.\n * Each call to bezierVertex() defines the position\n * of two control points and one anchor point of a\n * Bezier curve, adding a new segment to a line or\n * shape. For WebGL mode bezierVertex() can be used\n * in 2D as well as 3D mode. 2D mode expects 6\n * parameters, while 3D mode expects 9 parameters\n * (including z coordinates). The first time\n * bezierVertex() is used within a beginShape() call,\n * it must be prefaced with a call to vertex() to set\n * the first anchor point. This function must be used\n * between beginShape() and endShape() and only when\n * there is no MODE or POINTS parameter specified to\n * beginShape().\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param z2 z-coordinate for the first control point\n * (for WebGL mode)\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param z3 z-coordinate for the second control\n * point (for WebGL mode)\n * @param x4 x-coordinate for the anchor point\n * @param y4 y-coordinate for the anchor point\n * @param z4 z-coordinate for the anchor point (for\n * WebGL mode)\n * @chainable\n /\n bezierVertex(\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number\n ): p5;\n\n /\n Specifies vertex coordinates for curves. This\n * function may only be used between beginShape() and\n * endShape() and only when there is no MODE\n * parameter specified to beginShape(). For WebGL\n * mode curveVertex() can be used in 2D as well as 3D\n * mode. 2D mode expects 2 parameters, while 3D mode\n * expects 3 parameters. The first and last points in\n * a series of curveVertex() lines will be used to\n * guide the beginning and end of the curve. A\n * minimum of four points is required to draw a tiny\n * curve between the second and third points. Adding\n * a fifth point with curveVertex() will draw the\n * curve between the second, third, and fourth\n * points. The curveVertex() function is an\n * implementation of Catmull-Rom splines.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @chainable\n /\n curveVertex(x: number, y: number): p5;\n\n /\n Specifies vertex coordinates for curves. This\n * function may only be used between beginShape() and\n * endShape() and only when there is no MODE\n * parameter specified to beginShape(). For WebGL\n * mode curveVertex() can be used in 2D as well as 3D\n * mode. 2D mode expects 2 parameters, while 3D mode\n * expects 3 parameters. The first and last points in\n * a series of curveVertex() lines will be used to\n * guide the beginning and end of the curve. A\n * minimum of four points is required to draw a tiny\n * curve between the second and third points. Adding\n * a fifth point with curveVertex() will draw the\n * curve between the second, third, and fourth\n * points. The curveVertex() function is an\n * implementation of Catmull-Rom splines.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @param [z] z-coordinate of the vertex (for WebGL\n * mode)\n * @chainable\n /\n curveVertex(x: number, y: number, z?: number): p5;\n\n /\n Use the beginContour() and endContour() functions\n * to create negative shapes within shapes such as\n * the center of the letter 'O'. beginContour()\n * begins recording vertices for the shape and\n * endContour() stops recording. The vertices that\n * define a negative shape must \"wind\" in the\n * opposite direction from the exterior shape. First\n * draw vertices for the exterior clockwise order,\n * then for internal shapes, draw vertices shape in\n * counter-clockwise. These functions can only be\n * used within a beginShape()/endShape() pair and\n * transformations such as translate(), rotate(), and\n * scale() do not work within a\n * beginContour()/endContour() pair. It is also not\n * possible to use other shapes, such as ellipse() or\n * rect() within.\n * @chainable\n /\n endContour(): p5;\n\n /\n The endShape() function is the companion to\n * beginShape() and may only be called after\n * beginShape(). When endShape() is called, all of\n * the image data defined since the previous call to\n * beginShape() is written into the image buffer. The\n * constant CLOSE as the value for the mode parameter\n * to close the shape (to connect the beginning and\n * the end).\n * @param [mode] use CLOSE to close the shape\n * @chainable\n /\n endShape(mode?: END_MODE): p5;\n\n /\n Specifies vertex coordinates for quadratic Bezier\n * curves. Each call to quadraticVertex() defines the\n * position of one control points and one anchor\n * point of a Bezier curve, adding a new segment to a\n * line or shape. The first time quadraticVertex() is\n * used within a beginShape() call, it must be\n * prefaced with a call to vertex() to set the first\n * anchor point. For WebGL mode quadraticVertex() can\n * be used in 2D as well as 3D mode. 2D mode expects\n * 4 parameters, while 3D mode expects 6 parameters\n * (including z coordinates). This function must be\n * used between beginShape() and endShape() and only\n * when there is no MODE or POINTS parameter\n * specified to beginShape().\n * @param cx x-coordinate for the control point\n * @param cy y-coordinate for the control point\n * @param x3 x-coordinate for the anchor point\n * @param y3 y-coordinate for the anchor point\n * @chainable\n /\n quadraticVertex(cx: number, cy: number, x3: number, y3: number): p5;\n\n /\n Specifies vertex coordinates for quadratic Bezier\n * curves. Each call to quadraticVertex() defines the\n * position of one control points and one anchor\n * point of a Bezier curve, adding a new segment to a\n * line or shape. The first time quadraticVertex() is\n * used within a beginShape() call, it must be\n * prefaced with a call to vertex() to set the first\n * anchor point. For WebGL mode quadraticVertex() can\n * be used in 2D as well as 3D mode. 2D mode expects\n * 4 parameters, while 3D mode expects 6 parameters\n * (including z coordinates). This function must be\n * used between beginShape() and endShape() and only\n * when there is no MODE or POINTS parameter\n * specified to beginShape().\n * @param cx x-coordinate for the control point\n * @param cy y-coordinate for the control point\n * @param cz z-coordinate for the control point (for\n * WebGL mode)\n * @param x3 x-coordinate for the anchor point\n * @param y3 y-coordinate for the anchor point\n * @param z3 z-coordinate for the anchor point (for\n * WebGL mode)\n * @chainable\n /\n quadraticVertex(cx: number, cy: number, cz: number, x3: number, y3: number, z3: number): p5;\n\n /\n All shapes are constructed by connecting a series\n * of vertices. vertex() is used to specify the\n * vertex coordinates for points, lines, triangles,\n * quads, and polygons. It is used exclusively within\n * the beginShape() and endShape() functions.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @chainable\n /\n vertex(x: number, y: number): p5;\n\n /\n All shapes are constructed by connecting a series\n * of vertices. vertex() is used to specify the\n * vertex coordinates for points, lines, triangles,\n * quads, and polygons. It is used exclusively within\n * the beginShape() and endShape() functions.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @param [z] z-coordinate of the vertex. Defaults to\n * 0 if not specified.\n * @chainable\n /\n vertex(x: number, y: number, z?: number): p5;\n\n /\n All shapes are constructed by connecting a series\n * of vertices. vertex() is used to specify the\n * vertex coordinates for points, lines, triangles,\n * quads, and polygons. It is used exclusively within\n * the beginShape() and endShape() functions.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @param [z] z-coordinate of the vertex. Defaults to\n * 0 if not specified.\n * @param [u] the vertex's texture u-coordinate\n * @param [v] the vertex's texture v-coordinate\n * @chainable\n /\n vertex(x: number, y: number, z?: number, u?: number, v?: number): p5;\n\n /\n Sets the 3d vertex normal to use for subsequent\n * vertices drawn with vertex(). A normal is a vector\n * that is generally nearly perpendicular to a\n * shape's surface which controls how much light will\n * be reflected from that part of the surface.\n * @param vector A p5.Vector representing the vertex\n * normal.\n * @chainable\n /\n normal(vector: Vector): p5;\n\n /\n Sets the 3d vertex normal to use for subsequent\n * vertices drawn with vertex(). A normal is a vector\n * that is generally nearly perpendicular to a\n * shape's surface which controls how much light will\n * be reflected from that part of the surface.\n * @param x The x component of the vertex normal.\n * @param y The y component of the vertex normal.\n * @param z The z component of the vertex normal.\n * @chainable\n /\n normal(x: number, y: number, z: number): p5;\n\n/\n Version of this p5.js.\n /\n readonly VERSION: VERSION;\n\n /\n The default, two-dimensional renderer.\n /\n readonly P2D: P2D;\n\n /\n One of the two render modes in p5.js, used for\n * computationally intensive tasks like 3D rendering\n * and shaders. WEBGL differs from the default P2D\n * renderer in the following ways:\n \n - Coordinate System - When drawing in WEBGL mode,\n * the origin point (0,0,0) is located at the center\n * of the screen, not the top-left corner. See the\n * learn page about coordinates and transformations.\n * - 3D Shapes - WEBGL mode can be used to draw\n * 3-dimensional shapes like box(), sphere(), cone(),\n * and more. See the learn page about custom geometry\n * to make more complex objects.\n * - Shape Detail - When drawing in WEBGL mode, you\n * can specify how smooth curves should be drawn by\n * using a detail parameter. See the wiki section\n * about shapes for a more information and an\n * example.\n * - Textures - A texture is like a skin that wraps\n * onto a shape. See the wiki section about textures\n * for examples of mapping images onto surfaces with\n * textures.\n * - Materials and Lighting - WEBGL offers different\n * types of lights like ambientLight() to place\n * around a scene. Materials like specularMaterial()\n * reflect the lighting to convey shape and depth.\n * See the learn page for styling and appearance to\n * experiment with different combinations.\n * - Camera - The viewport of a WEBGL sketch can be\n * adjusted by changing camera attributes. See the\n * learn page section about cameras for an\n * explanation of camera controls.\n * - Text - WEBGL requires opentype/truetype font\n * files to be preloaded using loadFont(). See the\n * wiki section about text for details, along with a\n * workaround.\n * - Shaders - Shaders are hardware accelerated\n * programs that can be used for a variety of effects\n * and graphics. See the introduction to shaders to\n * get started with shaders in p5.js.\n * - Graphics Acceleration - WEBGL mode uses the\n * graphics card instead of the CPU, so it may help\n * boost the performance of your sketch (example:\n * drawing more shapes on the screen at once).\n \n To learn more about WEBGL mode, check out all the\n * interactive WEBGL tutorials in the \"Learn\" section\n * of this website, or read the wiki article \"Getting\n * started with WebGL in p5\".\n /\n readonly WEBGL: WEBGL;\n\n /\n One of the two possible values of a WebGL canvas\n * (either WEBGL or WEBGL2), which can be used to\n * determine what capabilities the rendering\n * environment has.\n /\n readonly WEBGL2: WEBGL2;\n readonly ARROW: ARROW;\n readonly CROSS: CROSS;\n readonly HAND: HAND;\n readonly MOVE: MOVE;\n readonly TEXT: TEXT;\n readonly WAIT: WAIT;\n\n /\n HALF_PI is a mathematical constant with the value\n * 1.57079632679489661923. It is half the ratio of\n * the circumference of a circle to its diameter. It\n * is useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly HALF_PI: number;\n\n /\n PI is a mathematical constant with the value\n * 3.14159265358979323846. It is the ratio of the\n * circumference of a circle to its diameter. It is\n * useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly PI: number;\n\n /\n QUARTER_PI is a mathematical constant with the\n * value 0.7853982. It is one quarter the ratio of\n * the circumference of a circle to its diameter. It\n * is useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly QUARTER_PI: number;\n\n /\n TAU is an alias for TWO_PI, a mathematical\n * constant with the value 6.28318530717958647693. It\n * is twice the ratio of the circumference of a\n * circle to its diameter. It is useful in\n * combination with the trigonometric functions sin()\n * and cos().\n /\n readonly TAU: number;\n\n /\n TWO_PI is a mathematical constant with the value\n * 6.28318530717958647693. It is twice the ratio of\n * the circumference of a circle to its diameter. It\n * is useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly TWO_PI: number;\n\n /\n Constant to be used with the angleMode() function,\n * to set the mode in which p5.js interprets and\n * calculates angles (either DEGREES or RADIANS).\n /\n readonly DEGREES: DEGREES;\n\n /\n Constant to be used with the angleMode() function,\n * to set the mode in which p5.js interprets and\n * calculates angles (either RADIANS or DEGREES).\n /\n readonly RADIANS: RADIANS;\n readonly CORNER: CORNER;\n readonly CORNERS: CORNERS;\n readonly RADIUS: RADIUS;\n readonly RIGHT: RIGHT;\n readonly LEFT: LEFT;\n readonly CENTER: CENTER;\n readonly TOP: TOP;\n readonly BOTTOM: BOTTOM;\n readonly BASELINE: BASELINE;\n readonly POINTS: POINTS;\n readonly LINES: LINES;\n readonly LINE_STRIP: LINE_STRIP;\n readonly LINE_LOOP: LINE_LOOP;\n readonly TRIANGLES: TRIANGLES;\n readonly TRIANGLE_FAN: TRIANGLE_FAN;\n readonly TRIANGLE_STRIP: TRIANGLE_STRIP;\n readonly QUADS: QUADS;\n readonly QUAD_STRIP: QUAD_STRIP;\n readonly TESS: TESS;\n readonly CLOSE: CLOSE;\n readonly OPEN: OPEN;\n readonly CHORD: CHORD;\n readonly PIE: PIE;\n readonly PROJECT: PROJECT;\n readonly SQUARE: SQUARE;\n readonly ROUND: ROUND;\n readonly BEVEL: BEVEL;\n readonly MITER: MITER;\n readonly RGB: RGB;\n\n /\n HSB (hue, saturation, brightness) is a type of\n * color model. You can learn more about it at HSB.\n /\n readonly HSB: HSB;\n readonly HSL: HSL;\n\n /\n AUTO allows us to automatically set the width or\n * height of an element (but not both), based on the\n * current height and width of the element. Only one\n * parameter can be passed to the size function as\n * AUTO, at a time.\n /\n readonly AUTO: AUTO;\n readonly ALT: number;\n readonly BACKSPACE: number;\n readonly CONTROL: number;\n readonly DELETE: number;\n readonly DOWN_ARROW: number;\n readonly ENTER: number;\n readonly ESCAPE: number;\n readonly LEFT_ARROW: number;\n readonly OPTION: number;\n readonly RETURN: number;\n readonly RIGHT_ARROW: number;\n readonly SHIFT: number;\n readonly TAB: number;\n readonly UP_ARROW: number;\n readonly BLEND: BLEND;\n readonly REMOVE: REMOVE;\n readonly ADD: ADD;\n readonly DARKEST: DARKEST;\n readonly LIGHTEST: LIGHTEST;\n readonly DIFFERENCE: DIFFERENCE;\n readonly SUBTRACT: SUBTRACT;\n readonly EXCLUSION: EXCLUSION;\n readonly MULTIPLY: MULTIPLY;\n readonly SCREEN: SCREEN;\n readonly REPLACE: REPLACE;\n readonly OVERLAY: OVERLAY;\n readonly HARD_LIGHT: HARD_LIGHT;\n readonly SOFT_LIGHT: SOFT_LIGHT;\n readonly DODGE: DODGE;\n readonly BURN: BURN;\n readonly THRESHOLD: THRESHOLD;\n readonly GRAY: GRAY;\n readonly OPAQUE: OPAQUE;\n readonly INVERT: INVERT;\n readonly POSTERIZE: POSTERIZE;\n readonly DILATE: DILATE;\n readonly ERODE: ERODE;\n readonly BLUR: BLUR;\n readonly NORMAL: NORMAL;\n readonly ITALIC: ITALIC;\n readonly BOLD: BOLD;\n readonly BOLDITALIC: BOLDITALIC;\n readonly CHAR: CHAR;\n readonly WORD: WORD;\n readonly LINEAR: LINEAR;\n readonly QUADRATIC: QUADRATIC;\n readonly BEZIER: BEZIER;\n readonly CURVE: CURVE;\n readonly STROKE: STROKE;\n readonly FILL: FILL;\n readonly TEXTURE: TEXTURE;\n readonly IMMEDIATE: IMMEDIATE;\n readonly IMAGE: IMAGE;\n readonly NEAREST: NEAREST;\n readonly REPEAT: REPEAT;\n readonly CLAMP: CLAMP;\n readonly MIRROR: MIRROR;\n readonly LANDSCAPE: LANDSCAPE;\n readonly PORTRAIT: PORTRAIT;\n readonly GRID: GRID;\n readonly AXES: AXES;\n readonly LABEL: LABEL;\n readonly FALLBACK: FALLBACK;\n readonly CONTAIN: CONTAIN;\n readonly COVER: COVER;\n readonly UNSIGNED_BYTE: UNSIGNED_BYTE;\n readonly UNSIGNED_INT: UNSIGNED_INT;\n readonly HALF_FLOAT: HALF_FLOAT;\n readonly FLOAT: FLOAT;\n readonly RGBA: RGBA;\n\n/\n The print() function writes to the console area of\n * your browser. This function is often helpful for\n * looking at the data a program is producing. This\n * function creates a new line of text for each call\n * to the function. Individual elements can be\n * separated with quotes (\"\") and joined with the\n * addition operator (+). Note that calling print()\n * without any arguments invokes the window.print()\n * function which opens the browser's print dialog.\n * To print a blank line to console you can write\n * print('\\n').\n * @param contents any combination of Number, String,\n * Object, Boolean, Array to print\n /\n print(contents: any): void;\n\n /\n Sets the cursor to a predefined symbol or an\n * image, or makes it visible if already hidden. If\n * you are trying to set an image as the cursor, the\n * recommended size is 16×16 or 32×32 pixels. The\n * values for parameters x and y must be less than\n * the dimensions of the image.\n * @param type Built-In: either ARROW, CROSS, HAND,\n * MOVE, TEXT and WAIT Native CSS properties: 'grab',\n * 'progress', 'cell' etc. External: path for\n * cursor's images (Allowed File extensions: .cur,\n * .gif, .jpg, .jpeg, .png) For more information on\n * Native CSS cursors and url visit:\n * https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\n * @param [x] the horizontal active spot of the\n * cursor (must be less than 32)\n * @param [y] the vertical active spot of the cursor\n * (must be less than 32)\n /\n cursor(type: string \| CURSOR_TYPE, x?: number, y?: number): void;\n\n /\n Specifies the number of frames to be displayed\n * every second. For example, the function call\n * frameRate(30) will attempt to refresh 30 times a\n * second. If the processor is not fast enough to\n * maintain the specified rate, the frame rate will\n * not be achieved. Setting the frame rate within\n * setup() is recommended. The default frame rate is\n * based on the frame rate of the display (here also\n * called \"refresh rate\"), which is set to 60 frames\n * per second on most computers. A frame rate of 24\n * frames per second (usual for movies) or above will\n * be enough for smooth animations. This is the same\n * as setFrameRate(val). Calling frameRate() with no\n * arguments returns the current framerate. The draw\n * function must run at least once before it will\n * return a value. This is the same as\n * getFrameRate().\n \n Calling frameRate() with arguments that are not of\n * the type Number or are non-positive also returns\n * current framerate.\n * @param fps number of frames to be displayed every\n * second\n * @chainable\n /\n frameRate(fps: number): p5;\n\n /\n Specifies the number of frames to be displayed\n * every second. For example, the function call\n * frameRate(30) will attempt to refresh 30 times a\n * second. If the processor is not fast enough to\n * maintain the specified rate, the frame rate will\n * not be achieved. Setting the frame rate within\n * setup() is recommended. The default frame rate is\n * based on the frame rate of the display (here also\n * called \"refresh rate\"), which is set to 60 frames\n * per second on most computers. A frame rate of 24\n * frames per second (usual for movies) or above will\n * be enough for smooth animations. This is the same\n * as setFrameRate(val). Calling frameRate() with no\n * arguments returns the current framerate. The draw\n * function must run at least once before it will\n * return a value. This is the same as\n * getFrameRate().\n \n Calling frameRate() with arguments that are not of\n * the type Number or are non-positive also returns\n * current framerate.\n * @return current frameRate\n /\n frameRate(): number;\n\n /\n Returns _targetFrameRate variable. The default\n * _targetFrameRate is set to 60. This could be\n * changed by calling frameRate() and setting it to\n * the desired value. When getTargetFrameRate() is\n * called, it should return the value that was set.\n * @return _targetFrameRate\n /\n getTargetFrameRate(): number;\n\n /\n Hides the cursor from view.\n /\n noCursor(): void;\n\n /\n The windowResized() function is called once every\n * time the browser window is resized. This is a good\n * place to resize the canvas or do any other\n * adjustments to accommodate the new window size.\n * @param [event] optional Event callback argument.\n /\n windowResized(event?: object): void;\n\n /\n If argument is given, sets the sketch to\n * fullscreen or not based on the value of the\n * argument. If no argument is given, returns the\n * current fullscreen state. Note that due to browser\n * restrictions this can only be called on user\n * input, for example, on mouse press like the\n * example below.\n * @param [val] whether the sketch should be in\n * fullscreen mode or not\n * @return current fullscreen state\n /\n fullscreen(val?: boolean): boolean;\n\n /\n Sets the pixel scaling for high pixel density\n * displays. By default pixel density is set to match\n * display density, call pixelDensity(1) to turn this\n * off. Calling pixelDensity() with no arguments\n * returns the current pixel density of the sketch.\n * @param val whether or how much the sketch should\n * scale\n * @chainable\n /\n pixelDensity(val: number): p5;\n\n /\n Sets the pixel scaling for high pixel density\n * displays. By default pixel density is set to match\n * display density, call pixelDensity(1) to turn this\n * off. Calling pixelDensity() with no arguments\n * returns the current pixel density of the sketch.\n * @return current pixel density of the sketch\n /\n pixelDensity(): number;\n\n /\n Returns the pixel density of the current display\n * the sketch is running on.\n * @return current pixel density of the display\n /\n displayDensity(): number;\n\n /\n Gets the current URL. Note: when using the p5\n * Editor, this will return an empty object because\n * the sketch is embedded in an iframe. It will work\n * correctly if you view the sketch using the\n * editor's present or share URLs.\n * @return url\n /\n getURL(): string;\n\n /\n Gets the current URL path as an array. Note: when\n * using the p5 Editor, this will return an empty\n * object because the sketch is embedded in an\n * iframe. It will work correctly if you view the\n * sketch using the editor's present or share URLs.\n * @return path components\n /\n getURLPath(): string[];\n\n /\n Gets the current URL params as an Object. Note:\n * when using the p5 Editor, this will return an\n * empty object because the sketch is embedded in an\n * iframe. It will work correctly if you view the\n * sketch using the editor's present or share URLs.\n * @return URL params\n /\n getURLParams(): object;\n\n /\n The system variable frameCount contains the number\n * of frames that have been displayed since the\n * program started. Inside setup() the value is 0,\n * after the first iteration of draw() it is 1, etc.\n /\n frameCount: number;\n\n /\n The system variable deltaTime contains the time\n * difference between the beginning of the previous\n * frame and the beginning of the current frame in\n * milliseconds. This variable is useful for creating\n * time sensitive animation or physics calculation\n * that should stay constant regardless of frame\n * rate.\n /\n deltaTime: number;\n\n /\n Confirms if the window a p5.js program is in is\n * \"focused,\" meaning that the sketch will accept\n * mouse or keyboard input. This variable is \"true\"\n * if the window is focused and \"false\" if not.\n /\n focused: boolean;\n\n /\n If the sketch was created in WebGL mode, then\n * weglVersion will indicate which version of WebGL\n * it is using. It will try to create a WebGL2 canvas\n * unless you have requested WebGL1 via\n * setAttributes({ version: 1 }), and will fall back\n * to WebGL1 if WebGL2 is not available. webglVersion\n * will always be either WEBGL2, WEBGL, or P2D if not\n * in WebGL mode.\n /\n webglVersion: string;\n\n /\n System variable that stores the width of the\n * screen display according to The default\n * pixelDensity. This is used to run a full-screen\n * program on any display size. To return actual\n * screen size, multiply this by pixelDensity.\n /\n displayWidth: number;\n\n /\n System variable that stores the height of the\n * screen display according to The default\n * pixelDensity. This is used to run a full-screen\n * program on any display size. To return actual\n * screen size, multiply this by pixelDensity.\n /\n displayHeight: number;\n\n /\n System variable that stores the width of the inner\n * window, it maps to window.innerWidth.\n /\n windowWidth: number;\n\n /\n System variable that stores the height of the\n * inner window, it maps to window.innerHeight.\n /\n windowHeight: number;\n\n /\n System variable that stores the width of the\n * drawing canvas. This value is set by the first\n * parameter of the createCanvas() function. For\n * example, the function call createCanvas(320, 240)\n * sets the width variable to the value 320. The\n * value of width defaults to 100 if createCanvas()\n * is not used in a program.\n /\n width: number;\n\n /\n System variable that stores the height of the\n * drawing canvas. This value is set by the second\n * parameter of the createCanvas() function. For\n * example, the function call createCanvas(320, 240)\n * sets the height variable to the value 240. The\n * value of height defaults to 100 if createCanvas()\n * is not used in a program.\n /\n height: number;\n\n/\n Creates a canvas element in the document and sets\n * its dimensions in pixels. This method should be\n * called only once at the start of setup(). Calling\n * createCanvas more than once in a sketch will\n * result in very unpredictable behavior. If you want\n * more than one drawing canvas you could use\n * createGraphics() (hidden by default but it can be\n * shown). Important note: in 2D mode (i.e. when\n * p5.Renderer is not set) the origin (0,0) is\n * positioned at the top left of the screen. In 3D\n * mode (i.e. when p5.Renderer is set to WEBGL), the\n * origin is positioned at the center of the canvas.\n * See this issue for more information.\n \n A WebGL canvas will use a WebGL2 context if it is\n * supported by the browser. Check the webglVersion\n * property to check what version is being used, or\n * call setAttributes({ version: 1 }) to create a\n * WebGL1 context.\n \n The system variables width and height are set by\n * the parameters passed to this function. If\n * createCanvas() is not used, the window will be\n * given a default size of 100×100 pixels.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). If\n * specified, avoid using setAttributes() afterwards,\n * as this will remove and recreate the existing\n * canvas.\n \n For more ways to position the canvas, see the\n * positioning the canvas wiki page.\n * @param w width of the canvas\n * @param h height of the canvas\n * @param [renderer] either P2D or WEBGL\n * @param [canvas] existing html canvas element\n * @return pointer to p5.Renderer holding canvas\n /\n createCanvas(w: number, h: number, renderer?: RENDERER, canvas?: object): Renderer;\n\n /\n Creates a canvas element in the document and sets\n * its dimensions in pixels. This method should be\n * called only once at the start of setup(). Calling\n * createCanvas more than once in a sketch will\n * result in very unpredictable behavior. If you want\n * more than one drawing canvas you could use\n * createGraphics() (hidden by default but it can be\n * shown). Important note: in 2D mode (i.e. when\n * p5.Renderer is not set) the origin (0,0) is\n * positioned at the top left of the screen. In 3D\n * mode (i.e. when p5.Renderer is set to WEBGL), the\n * origin is positioned at the center of the canvas.\n * See this issue for more information.\n \n A WebGL canvas will use a WebGL2 context if it is\n * supported by the browser. Check the webglVersion\n * property to check what version is being used, or\n * call setAttributes({ version: 1 }) to create a\n * WebGL1 context.\n \n The system variables width and height are set by\n * the parameters passed to this function. If\n * createCanvas() is not used, the window will be\n * given a default size of 100×100 pixels.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). If\n * specified, avoid using setAttributes() afterwards,\n * as this will remove and recreate the existing\n * canvas.\n \n For more ways to position the canvas, see the\n * positioning the canvas wiki page.\n * @param w width of the canvas\n * @param h height of the canvas\n * @param [canvas] existing html canvas element\n * @return pointer to p5.Renderer holding canvas\n /\n createCanvas(w: number, h: number, canvas?: object): Renderer;\n\n /\n Resizes the canvas to given width and height. The\n * canvas will be cleared and draw will be called\n * immediately, allowing the sketch to re-render\n * itself in the resized canvas.\n * @param w width of the canvas\n * @param h height of the canvas\n * @param [noRedraw] don't redraw the canvas\n * immediately\n /\n resizeCanvas(w: number, h: number, noRedraw?: boolean): void;\n\n /\n Removes the default canvas for a p5 sketch that\n * doesn't require a canvas\n /\n noCanvas(): void;\n\n /\n Creates and returns a new p5.Graphics object. Use\n * this class if you need to draw into an off-screen\n * graphics buffer. The two parameters define the\n * width and height in pixels. A WebGL p5.Graphics\n * will use a WebGL2 context if it is supported by\n * the browser. Check the pg.webglVersion property of\n * the renderer to check what version is being used,\n * or call pg.setAttributes({ version: 1 }) to create\n * a WebGL1 context.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). By\n * default this canvas will be hidden (offscreen\n * buffer), to make visible, set element's style to\n * display:block;\n * @param w width of the offscreen graphics buffer\n * @param h height of the offscreen graphics buffer\n * @param [renderer] either P2D or WEBGL undefined\n * defaults to p2d\n * @param [canvas] existing html canvas element\n * @return offscreen graphics buffer\n /\n createGraphics(w: number, h: number, renderer?: RENDERER, canvas?: object): Graphics;\n\n /\n Creates and returns a new p5.Graphics object. Use\n * this class if you need to draw into an off-screen\n * graphics buffer. The two parameters define the\n * width and height in pixels. A WebGL p5.Graphics\n * will use a WebGL2 context if it is supported by\n * the browser. Check the pg.webglVersion property of\n * the renderer to check what version is being used,\n * or call pg.setAttributes({ version: 1 }) to create\n * a WebGL1 context.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). By\n * default this canvas will be hidden (offscreen\n * buffer), to make visible, set element's style to\n * display:block;\n * @param w width of the offscreen graphics buffer\n * @param h height of the offscreen graphics buffer\n * @param [canvas] existing html canvas element\n * @return offscreen graphics buffer\n /\n createGraphics(w: number, h: number, canvas?: object): Graphics;\n\n /\n Creates and returns a new p5.Framebuffer, a\n * high-performance WebGL object that you can draw to\n * and then use as a texture. Options can include:\n \n - format: The data format of the texture, either\n * UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. The default\n * is UNSIGNED_BYTE.\n * - channels: What color channels to store, either\n * RGB or RGBA. The default is to match the channels\n * in the main canvas (with alpha unless disabled\n * with setAttributes.)\n * - depth: A boolean, whether or not to include a\n * depth buffer. Defaults to true.\n * - depthFormat: The data format for depth\n * information, either UNSIGNED_INT or FLOAT. The\n * default is FLOAT if available, or UNSIGNED_INT\n * otherwise.\n * - antialias: Boolean or Number, whether or not to\n * render with antialiased edges, and if so,\n * optionally the number of samples to use. Defaults\n * to whether or not the main canvas is antialiased,\n * using a default of 2 samples if so. Antialiasing\n * is only supported when WebGL 2 is available.\n * - width: The width of the texture. Defaults to\n * matching the main canvas.\n * - height: The height of the texture. Defaults to\n * matching the main canvas.\n * - density: The pixel density of the texture.\n * Defaults to the pixel density of the main canvas.\n * - textureFiltering: Either LINEAR (nearby pixels\n * will be interpolated when reading values from the\n * color texture) or NEAREST (no interpolation.)\n * Generally, use LINEAR when using the texture as an\n * image, and use NEAREST if reading the texture as\n * data. Defaults to LINEAR.\n \n If width, height, or density are specified, then\n * the framebuffer will keep that size until manually\n * changed. Otherwise, it will be autosized, and it\n * will update to match the main canvas's size and\n * density when the main canvas changes.\n * @param [options] An optional object with\n * configuration\n /\n createFramebuffer(options?: object): void;\n\n /\n Blends the pixels in the display window according\n * to the defined mode. There is a choice of the\n * following modes to blend the source pixels (A)\n * with the ones of pixels already in the display\n * window (B): - BLEND - linear interpolation of\n * colours: C = Afactor + B. This is the default\n blending mode.\n * - ADD - sum of A and B\n * - DARKEST - only the darkest colour succeeds: C =\n * min(Afactor, B).\n - LIGHTEST - only the lightest colour succeeds: C\n * = max(Afactor, B).\n - DIFFERENCE - subtract colors from underlying\n * image. (2D)\n * - EXCLUSION - similar to DIFFERENCE, but less\n * extreme.\n * - MULTIPLY - multiply the colors, result will\n * always be darker.\n * - SCREEN - opposite multiply, uses inverse values\n * of the colors.\n * - REPLACE - the pixels entirely replace the others\n * and don't utilize alpha (transparency) values.\n * - REMOVE - removes pixels from B with the alpha\n * strength of A.\n * - OVERLAY - mix of MULTIPLY and SCREEN .\n * Multiplies dark values, and screens light values.\n * (2D)\n * - HARD_LIGHT - SCREEN when greater than 50% gray,\n * MULTIPLY when lower. (2D)\n * - SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works\n * like OVERLAY, but not as harsh. (2D)\n * - DODGE - lightens light tones and increases\n * contrast, ignores darks. (2D)\n * - BURN - darker areas are applied, increasing\n * contrast, ignores lights. (2D)\n * - SUBTRACT - remainder of A and B (3D)\n \n (2D) indicates that this blend mode only works in\n * the 2D renderer.\n \n (3D) indicates that this blend mode only works in\n * the WEBGL renderer.\n * @param mode blend mode to set for canvas. either\n * BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT\n /\n blendMode(mode: BLEND_MODE): void;\n\n /\n The p5.js API provides a lot of functionality for\n * creating graphics, but there is some native HTML5\n * Canvas functionality that is not exposed by p5.\n * You can still call it directly using the variable\n * drawingContext, as in the example shown. This is\n * the equivalent of calling canvas.getContext('2d');\n * or canvas.getContext('webgl');. See this\n * reference for the native canvas API for possible\n * drawing functions you can call.\n /\n drawingContext: any;\n\n/\n Stops p5.js from continuously executing the code\n * within draw(). If loop() is called, the code in\n * draw() begins to run continuously again. If using\n * noLoop() in setup(), it should be the last line\n * inside the block. When noLoop() is used, it's not\n * possible to manipulate or access the screen inside\n * event handling functions such as mousePressed() or\n * keyPressed(). Instead, use those functions to call\n * redraw() or loop(), which will run draw(), which\n * can update the screen properly. This means that\n * when noLoop() has been called, no drawing can\n * happen, and functions like saveFrames() or\n * loadPixels() may not be used.\n \n Note that if the sketch is resized, redraw() will\n * be called to update the sketch, even after\n * noLoop() has been specified. Otherwise, the sketch\n * would enter an odd state until loop() was called.\n \n Use isLooping() to check the current state of\n * loop().\n /\n noLoop(): void;\n\n /\n By default, p5.js loops through draw()\n * continuously, executing the code within it.\n * However, the draw() loop may be stopped by calling\n * noLoop(). In that case, the draw() loop can be\n * resumed with loop(). Avoid calling loop() from\n * inside setup().\n \n Use isLooping() to check the current state of\n * loop().\n /\n loop(): void;\n\n /\n By default, p5.js loops through draw()\n * continuously, executing the code within it. If the\n * sketch is stopped with noLoop() or resumed with\n * loop(), isLooping() returns the current state for\n * use within custom event handlers.\n /\n isLooping(): boolean;\n\n /\n The push() function saves the current drawing\n * style settings and transformations, while pop()\n * restores these settings. Note that these functions\n * are always used together. They allow you to change\n * the style and transformation settings and later\n * return to what you had. When a new state is\n * started with push(), it builds on the current\n * style and transform information. The push() and\n * pop() functions can be embedded to provide more\n * control. (See the second example for a\n * demonstration.) push() stores information related\n * to the current transformation state and style\n * settings controlled by the following functions:\n * fill(), noFill(), noStroke(), stroke(), tint(),\n * noTint(), strokeWeight(), strokeCap(),\n * strokeJoin(), imageMode(), rectMode(),\n * ellipseMode(), colorMode(), textAlign(),\n * textFont(), textSize(), textLeading(),\n * applyMatrix(), resetMatrix(), rotate(), scale(),\n * shearX(), shearY(), translate(), noiseSeed().\n \n In WEBGL mode additional style settings are\n * stored. These are controlled by the following\n * functions: setCamera(), ambientLight(),\n * directionalLight(), pointLight(), texture(),\n * specularMaterial(), shininess(), normalMaterial()\n * and shader().\n /\n push(): void;\n\n /\n The push() function saves the current drawing\n * style settings and transformations, while pop()\n * restores these settings. Note that these functions\n * are always used together. They allow you to change\n * the style and transformation settings and later\n * return to what you had. When a new state is\n * started with push(), it builds on the current\n * style and transform information. The push() and\n * pop() functions can be embedded to provide more\n * control. (See the second example for a\n * demonstration.) push() stores information related\n * to the current transformation state and style\n * settings controlled by the following functions:\n * fill(), noFill(), noStroke(), stroke(), tint(),\n * noTint(), strokeWeight(), strokeCap(),\n * strokeJoin(), imageMode(), rectMode(),\n * ellipseMode(), colorMode(), textAlign(),\n * textFont(), textSize(), textLeading(),\n * applyMatrix(), resetMatrix(), rotate(), scale(),\n * shearX(), shearY(), translate(), noiseSeed().\n \n In WEBGL mode additional style settings are\n * stored. These are controlled by the following\n * functions: setCamera(), ambientLight(),\n * directionalLight(), pointLight(), texture(),\n * specularMaterial(), shininess(), normalMaterial()\n * and shader().\n /\n pop(): void;\n\n /\n Executes the code within draw() one time. This\n * function allows the program to update the display\n * window only when necessary, for example when an\n * event registered by mousePressed() or keyPressed()\n * occurs. In structuring a program, it only makes\n * sense to call redraw() within events such as\n * mousePressed(). This is because redraw() does not\n * run draw() immediately (it only sets a flag that\n * indicates an update is needed).\n \n The redraw() function does not work properly when\n * called inside draw().To enable/disable animations,\n * use loop() and noLoop().\n \n In addition you can set the number of redraws per\n * method call. Just add an integer as single\n * parameter for the number of redraws.\n * @param [n] Redraw for n-times. The default value\n * is 1.\n /\n redraw(n?: number): void;\n\n /\n The p5() constructor enables you to activate\n * \"instance mode\" instead of normal \"global mode\".\n * This is an advanced topic. A short description and\n * example is included below. Please see Dan\n * Shiffman's Coding Train video tutorial or this\n * tutorial page for more info. By default, all p5.js\n * functions are in the global namespace (i.e. bound\n * to the window object), meaning you can call them\n * simply ellipse(), fill(), etc. However, this might\n * be inconvenient if you are mixing with other JS\n * libraries (synchronously or asynchronously) or\n * writing long programs of your own. p5.js currently\n * supports a way around this problem called\n * \"instance mode\". In instance mode, all p5\n * functions are bound up in a single variable\n * instead of polluting your global namespace.\n \n Optionally, you can specify a default container\n * for the canvas and any other elements to append to\n * with a second argument. You can give the ID of an\n * element in your html, or an html node itself.\n \n Note that creating instances like this also allows\n * you to have more than one p5 sketch on a single\n * web page, as they will each be wrapped up with\n * their own set up variables. Of course, you could\n * also use iframes to have multiple sketches in\n * global mode.\n * @param sketch a function containing a p5.js sketch\n * @param node ID or pointer to HTML DOM node to\n * contain sketch in\n /\n p5(sketch: object, node: string \| object): void;\n\n/\n Multiplies the current matrix by the one specified\n * through the parameters. This is a powerful\n * operation that can perform the equivalent of\n * translate, scale, shear and rotate all at once.\n * You can learn more about transformation matrices\n * on Wikipedia. The naming of the arguments here\n * follows the naming of the WHATWG specification\n * and corresponds to a transformation matrix of the\n * form:\n * @param arr an array of numbers - should be 6 or 16\n * length (2×3 or 4×4 matrix values)\n * @chainable\n /\n applyMatrix(arr: any[]): p5;\n\n /\n Multiplies the current matrix by the one specified\n * through the parameters. This is a powerful\n * operation that can perform the equivalent of\n * translate, scale, shear and rotate all at once.\n * You can learn more about transformation matrices\n * on Wikipedia. The naming of the arguments here\n * follows the naming of the WHATWG specification\n * and corresponds to a transformation matrix of the\n * form:\n * @param a numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param b numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param c numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param d numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param e numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param f numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @chainable\n /\n applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): p5;\n\n /\n Multiplies the current matrix by the one specified\n * through the parameters. This is a powerful\n * operation that can perform the equivalent of\n * translate, scale, shear and rotate all at once.\n * You can learn more about transformation matrices\n * on Wikipedia. The naming of the arguments here\n * follows the naming of the WHATWG specification\n * and corresponds to a transformation matrix of the\n * form:\n * @param a numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param b numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param c numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param d numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param e numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param f numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param g numbers which define the 4×4 matrix to be\n * multiplied\n * @param h numbers which define the 4×4 matrix to be\n * multiplied\n * @param i numbers which define the 4×4 matrix to be\n * multiplied\n * @param j numbers which define the 4×4 matrix to be\n * multiplied\n * @param k numbers which define the 4×4 matrix to be\n * multiplied\n * @param l numbers which define the 4×4 matrix to be\n * multiplied\n * @param m numbers which define the 4×4 matrix to be\n * multiplied\n * @param n numbers which define the 4×4 matrix to be\n * multiplied\n * @param o numbers which define the 4×4 matrix to be\n * multiplied\n * @param p numbers which define the 4×4 matrix to be\n * multiplied\n * @chainable\n /\n applyMatrix(\n a: number,\n b: number,\n c: number,\n d: number,\n e: number,\n f: number,\n g: number,\n h: number,\n i: number,\n j: number,\n k: number,\n l: number,\n m: number,\n n: number,\n o: number,\n p: number\n ): p5;\n\n /\n Replaces the current matrix with the identity\n * matrix.\n * @chainable\n /\n resetMatrix(): p5;\n\n /\n Rotates a shape by the amount specified by the\n * angle parameter. This function accounts for\n * angleMode, so angles can be entered in either\n * RADIANS or DEGREES. Objects are always rotated\n * around their relative position to the origin and\n * positive numbers rotate objects in a clockwise\n * direction. Transformations apply to everything\n * that happens after and subsequent calls to the\n * function accumulate the effect. For example,\n * calling rotate(HALF_PI) and then rotate(HALF_PI)\n * is the same as rotate(PI). All transformations are\n * reset when draw() begins again.\n \n Technically, rotate() multiplies the current\n * transformation matrix by a rotation matrix. This\n * function can be further controlled by push() and\n * pop().\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @param [axis] (in 3d) the axis to rotate around\n * @chainable\n /\n rotate(angle: number, axis?: Vector \| number[]): p5;\n\n /\n Rotates a shape around X axis by the amount\n * specified in angle parameter. The angles can be\n * entered in either RADIANS or DEGREES. Objects are\n * always rotated around their relative position to\n * the origin and positive numbers rotate objects in\n * a clockwise direction. All transformations are\n * reset when draw() begins again.\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @chainable\n /\n rotateX(angle: number): p5;\n\n /\n Rotates a shape around Y axis by the amount\n * specified in angle parameter. The angles can be\n * entered in either RADIANS or DEGREES. Objects are\n * always rotated around their relative position to\n * the origin and positive numbers rotate objects in\n * a clockwise direction. All transformations are\n * reset when draw() begins again.\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @chainable\n /\n rotateY(angle: number): p5;\n\n /\n Rotates a shape around Z axis by the amount\n * specified in angle parameter. The angles can be\n * entered in either RADIANS or DEGREES. This method\n * works in WEBGL mode only.\n \n Objects are always rotated around their relative\n * position to the origin and positive numbers rotate\n * objects in a clockwise direction. All\n * transformations are reset when draw() begins\n * again.\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @chainable\n /\n rotateZ(angle: number): p5;\n\n /\n Increases or decreases the size of a shape by\n * expanding or contracting vertices. Objects always\n * scale from their relative origin to the coordinate\n * system. Scale values are specified as decimal\n * percentages. For example, the function call\n * scale(2.0) increases the dimension of a shape by\n * 200%. Transformations apply to everything that\n * happens after and subsequent calls to the function\n * multiply the effect. For example, calling\n * scale(2.0) and then scale(1.5) is the same as\n * scale(3.0). If scale() is called within draw(),\n * the transformation is reset when the loop begins\n * again.\n \n Using this function with the z parameter is only\n * available in WEBGL mode. This function can be\n * further controlled with push() and pop().\n * @param s percent to scale the object, or\n * percentage to scale the object in the x-axis if\n * multiple arguments are given\n * @param [y] percent to scale the object in the\n * y-axis\n * @param [z] percent to scale the object in the\n * z-axis (webgl only)\n * @chainable\n /\n scale(s: number \| Vector \| number[], y?: number, z?: number): p5;\n\n /\n Increases or decreases the size of a shape by\n * expanding or contracting vertices. Objects always\n * scale from their relative origin to the coordinate\n * system. Scale values are specified as decimal\n * percentages. For example, the function call\n * scale(2.0) increases the dimension of a shape by\n * 200%. Transformations apply to everything that\n * happens after and subsequent calls to the function\n * multiply the effect. For example, calling\n * scale(2.0) and then scale(1.5) is the same as\n * scale(3.0). If scale() is called within draw(),\n * the transformation is reset when the loop begins\n * again.\n \n Using this function with the z parameter is only\n * available in WEBGL mode. This function can be\n * further controlled with push() and pop().\n * @param scales per-axis percents to scale the\n * object\n * @chainable\n /\n scale(scales: Vector \| number[]): p5;\n\n /\n Shears a shape around the x-axis by the amount\n * specified by the angle parameter. Angles should be\n * specified in the current angleMode. Objects are\n * always sheared around their relative position to\n * the origin and positive numbers shear objects in a\n * clockwise direction. Transformations apply to\n * everything that happens after and subsequent calls\n * to the function accumulates the effect. For\n * example, calling shearX(PI/2) and then\n * shearX(PI/2) is the same as shearX(PI). If\n * shearX() is called within the draw(), the\n * transformation is reset when the loop begins\n * again.\n \n Technically, shearX() multiplies the current\n * transformation matrix by a rotation matrix. This\n * function can be further controlled by the push()\n * and pop() functions.\n * @param angle angle of shear specified in radians\n * or degrees, depending on current angleMode\n * @chainable\n /\n shearX(angle: number): p5;\n\n /\n Shears a shape around the y-axis the amount\n * specified by the angle parameter. Angles should be\n * specified in the current angleMode. Objects are\n * always sheared around their relative position to\n * the origin and positive numbers shear objects in a\n * clockwise direction. Transformations apply to\n * everything that happens after and subsequent calls\n * to the function accumulates the effect. For\n * example, calling shearY(PI/2) and then\n * shearY(PI/2) is the same as shearY(PI). If\n * shearY() is called within the draw(), the\n * transformation is reset when the loop begins\n * again.\n \n Technically, shearY() multiplies the current\n * transformation matrix by a rotation matrix. This\n * function can be further controlled by the push()\n * and pop() functions.\n * @param angle angle of shear specified in radians\n * or degrees, depending on current angleMode\n * @chainable\n /\n shearY(angle: number): p5;\n\n /\n Specifies an amount to displace objects within the\n * display window. The x parameter specifies\n * left/right translation, the y parameter specifies\n * up/down translation. Transformations are\n * cumulative and apply to everything that happens\n * after and subsequent calls to the function\n * accumulates the effect. For example, calling\n * translate(50, 0) and then translate(20, 0) is the\n * same as translate(70, 0). If translate() is called\n * within draw(), the transformation is reset when\n * the loop begins again. This function can be\n * further controlled by using push() and pop().\n * @param x left/right translation\n * @param y up/down translation\n * @param [z] forward/backward translation (WEBGL\n * only)\n * @chainable\n /\n translate(x: number, y: number, z?: number): p5;\n\n /\n Specifies an amount to displace objects within the\n * display window. The x parameter specifies\n * left/right translation, the y parameter specifies\n * up/down translation. Transformations are\n * cumulative and apply to everything that happens\n * after and subsequent calls to the function\n * accumulates the effect. For example, calling\n * translate(50, 0) and then translate(20, 0) is the\n * same as translate(70, 0). If translate() is called\n * within draw(), the transformation is reset when\n * the loop begins again. This function can be\n * further controlled by using push() and pop().\n * @param vector the vector to translate by\n * @chainable\n /\n translate(vector: Vector): p5;\n\n/\n Stores a value in local storage under the key\n * name. Local storage is saved in the browser and\n * persists between browsing sessions and page\n * reloads. The key can be the name of the variable\n * but doesn't have to be. To retrieve stored items\n * see getItem. Sensitive data such as passwords or\n * personal information should not be stored in local\n * storage.\n /\n storeItem(key: string, value: string \| number \| object \| boolean \| Color \| Vector): void;\n\n /\n Returns the value of an item that was stored in\n * local storage using storeItem()\n * @param key name that you wish to use to store in\n * local storage\n * @return Value of stored item\n /\n getItem(key: string): number \| object \| string \| boolean \| Color \| Vector;\n\n /\n Clears all local storage items set with\n * storeItem() for the current domain.\n /\n clearStorage(): void;\n\n /\n Removes an item that was stored with storeItem()\n /\n removeItem(key: string): void;\n\n/\n Creates a new instance of p5.StringDict using the\n * key-value pair or the object you provide.\n /\n createStringDict(key: string, value: string): StringDict;\n\n /\n Creates a new instance of p5.StringDict using the\n * key-value pair or the object you provide.\n * @param object object\n /\n createStringDict(object: object): StringDict;\n\n /\n Creates a new instance of p5.NumberDict using the\n * key-value pair or object you provide.\n /\n createNumberDict(key: number, value: number): NumberDict;\n\n /\n Creates a new instance of p5.NumberDict using the\n * key-value pair or object you provide.\n * @param object object\n /\n createNumberDict(object: object): NumberDict;\n\n/\n Searches the page for the first element that\n * matches the given CSS selector string (can be an\n * ID, class, tag name or a combination) and returns\n * it as a p5.Element. The DOM node itself can be\n * accessed with .elt. Returns null if none found.\n * You can also specify a container to search within.\n * @param selectors CSS selector string of element to\n * search for\n * @param [container] CSS selector string,\n * p5.Element, or HTML element to search within\n * @return p5.Element containing node found\n /\n select(selectors: string, container?: string \| Element \| HTMLElement): Element \| null;\n\n /\n Searches the page for elements that match the\n * given CSS selector string (can be an ID a class,\n * tag name or a combination) and returns them as\n * p5.Elements in an array. The DOM node itself can\n * be accessed with .elt. Returns an empty array if\n * none found. You can also specify a container to\n * search within.\n * @param selectors CSS selector string of elements\n * to search for\n * @param [container] CSS selector string, p5.Element\n * , or HTML element to search within\n * @return Array of p5.Elements containing nodes\n * found\n /\n selectAll(selectors: string, container?: string \| Element \| HTMLElement): Element[];\n\n /\n Removes all elements created by p5, except any\n * canvas / graphics elements created by createCanvas\n * or createGraphics. Event handlers are removed, and\n * element is removed from the DOM.\n /\n removeElements(): void;\n\n /\n The .changed() function is called when the value\n * of an element changes. This can be used to attach\n * an element specific event listener.\n * @param fxn function to be fired when the value of\n * an element changes. if false is passed instead,\n * the previously firing function will no longer\n * fire.\n * @chainable\n /\n changed(fxn: ((...args: any[]) => any) \| boolean): p5;\n\n /\n The .input() function is called when any user\n * input is detected with an element. The input event\n * is often used to detect keystrokes in a input\n * element, or changes on a slider element. This can\n * be used to attach an element specific event\n * listener.\n * @param fxn function to be fired when any user\n * input is detected within the element. if false is\n * passed instead, the previously firing function\n * will no longer fire.\n * @chainable\n /\n input(fxn: ((...args: any[]) => any) \| boolean): p5;\n\n /\n Creates a <div></div> element in the DOM with\n * given inner HTML.\n * @param [html] inner HTML for element created\n * @return pointer to p5.Element holding created node\n /\n createDiv(html?: string): Element;\n\n /\n Creates a <p></p> element in the DOM with given\n * inner HTML. Used for paragraph length text.\n * @param [html] inner HTML for element created\n * @return pointer to p5.Element holding created node\n /\n createP(html?: string): Element;\n\n /\n Creates a <span></span> element in the DOM with\n * given inner HTML.\n * @param [html] inner HTML for element created\n * @return pointer to p5.Element holding created node\n /\n createSpan(html?: string): Element;\n\n /\n Creates an <img> element in the DOM with given src\n * and alternate text.\n * @param src src path or url for image\n * @param alt alternate text to be used if image does\n * not load. You can use also an empty string (\"\") if\n * that an image is not intended to be viewed.\n * @return pointer to p5.Element holding created node\n /\n createImg(src: string, alt: string): Element;\n\n /\n Creates an <img> element in the DOM with given src\n * and alternate text.\n * @param src src path or url for image\n * @param alt alternate text to be used if image does\n * not load. You can use also an empty string (\"\") if\n * that an image is not intended to be viewed.\n * @param crossOrigin crossOrigin property of the img\n * element; use either 'anonymous' or\n * 'use-credentials' to retrieve the image with\n * cross-origin access (for later use with canvas. if\n * an empty string(\"\") is passed, CORS is not used\n * @param [successCallback] callback to be called\n * once image data is loaded with the p5.Element as\n * argument\n * @return pointer to p5.Element holding created node\n /\n createImg(src: string, alt: string, crossOrigin: string, successCallback?: (...args: any[]) => any): Element;\n\n /\n Creates an <a></a> element in the DOM for\n * including a hyperlink.\n * @param href url of page to link to\n * @param html inner html of link element to display\n * @param [target] target where new link should open,\n * could be _blank, _self, _parent, _top.\n * @return pointer to p5.Element holding created node\n /\n createA(href: string, html: string, target?: string): Element;\n\n /\n Creates a slider <input></input> element in the\n * DOM. Use .size() to set the display length of the\n * slider.\n * @param min minimum value of the slider\n * @param max maximum value of the slider\n * @param [value] default value of the slider\n * @param [step] step size for each tick of the\n * slider (if step is set to 0, the slider will move\n * continuously from the minimum to the maximum\n * value)\n * @return pointer to p5.Element holding the created\n * node\n /\n createSlider(min: number, max: number, value?: number, step?: number): Element;\n\n /\n Creates a <button></button> element in the DOM.\n * Use .size() to set the display size of the button.\n * Use .mousePressed() to specify behavior on press.\n * @param label label displayed on the button\n * @param [value] value of the button\n * @return pointer to p5.Element holding created node\n /\n createButton(label: string, value?: string): Element;\n\n /\n Creates a checkbox <input></input> element in the\n * DOM. Calling .checked() on a checkbox returns a\n * boolean indicating whether it is checked or not.\n * @param [label] label displayed after checkbox\n * @param [value] value of the checkbox; checked is\n * true, unchecked is false\n * @return pointer to p5.Element holding created node\n /\n createCheckbox(label?: string, value?: boolean): Element;\n\n /\n Creates a dropdown menu <select></select> element\n * in the DOM. It also assigns select-related methods\n * to p5.Element when selecting an existing select\n * box. Options in the menu are unique by name (the\n * display text). - .option(name, [value]) can be\n * used to add an option with name (the display text)\n * and value to the select element. If an option with\n * name already exists within the select element,\n * this method will change its value to value.\n * - .value() will return the currently selected\n * option.\n * - .selected() will return the current dropdown\n * element which is an instance of p5.Element.\n * - .selected(value) can be used to make given\n * option selected by default when the page first\n * loads.\n * - .disable() marks the whole dropdown element as\n * disabled.\n * - .disable(value) marks a given option as\n * disabled.\n * - .enable() marks the whole dropdown element as\n * enabled if whole dropdown element is disabled\n * intially.\n * - .enable(value) marks a given option as enable if\n * the initial option is disabled.\n * @param [multiple] true if dropdown should support\n * multiple selections\n * @return pointer to p5.Element holding created node\n /\n createSelect(multiple?: boolean): Element;\n\n /\n Creates a dropdown menu <select></select> element\n * in the DOM. It also assigns select-related methods\n * to p5.Element when selecting an existing select\n * box. Options in the menu are unique by name (the\n * display text). - .option(name, [value]) can be\n * used to add an option with name (the display text)\n * and value to the select element. If an option with\n * name already exists within the select element,\n * this method will change its value to value.\n * - .value() will return the currently selected\n * option.\n * - .selected() will return the current dropdown\n * element which is an instance of p5.Element.\n * - .selected(value) can be used to make given\n * option selected by default when the page first\n * loads.\n * - .disable() marks the whole dropdown element as\n * disabled.\n * - .disable(value) marks a given option as\n * disabled.\n * - .enable() marks the whole dropdown element as\n * enabled if whole dropdown element is disabled\n * intially.\n * - .enable(value) marks a given option as enable if\n * the initial option is disabled.\n * @param existing DOM select element\n /\n createSelect(existing: object): Element;\n\n /\n Creates a radio button element in the DOM. It also\n * helps existing radio buttons assign methods of\n * p5.Element. - .option(value, [label]) can be used\n * to create a new option for the element. If an\n * option with a value already exists, it will be\n * returned. It is recommended to use string values\n * as input for value. Optionally, a label can be\n * provided as second argument for the option.\n * - .remove(value) can be used to remove an option\n * for the element. String values recommended as\n * input for value.\n * - .value() method will return the currently\n * selected value.\n * - .selected() method will return the currently\n * selected input element.\n * - .selected(value) method will select the option\n * and return it. String values recommended as input\n * for value.\n * - .disable(Boolean) method will enable/disable the\n * whole radio button element.\n * @param containerElement A container HTML Element,\n * either a div or span, inside which all existing\n * radio inputs will be considered as options.\n * @param [name] A name parameter for each Input\n * Element.\n * @return pointer to p5.Element holding created node\n /\n createRadio(containerElement: object, name?: string): Element;\n\n /\n Creates a radio button element in the DOM. It also\n * helps existing radio buttons assign methods of\n * p5.Element. - .option(value, [label]) can be used\n * to create a new option for the element. If an\n * option with a value already exists, it will be\n * returned. It is recommended to use string values\n * as input for value. Optionally, a label can be\n * provided as second argument for the option.\n * - .remove(value) can be used to remove an option\n * for the element. String values recommended as\n * input for value.\n * - .value() method will return the currently\n * selected value.\n * - .selected() method will return the currently\n * selected input element.\n * - .selected(value) method will select the option\n * and return it. String values recommended as input\n * for value.\n * - .disable(Boolean) method will enable/disable the\n * whole radio button element.\n * @param name A name parameter for each Input\n * Element.\n * @return pointer to p5.Element holding created node\n /\n createRadio(name: string): Element;\n\n /\n Creates a radio button element in the DOM. It also\n * helps existing radio buttons assign methods of\n * p5.Element. - .option(value, [label]) can be used\n * to create a new option for the element. If an\n * option with a value already exists, it will be\n * returned. It is recommended to use string values\n * as input for value. Optionally, a label can be\n * provided as second argument for the option.\n * - .remove(value) can be used to remove an option\n * for the element. String values recommended as\n * input for value.\n * - .value() method will return the currently\n * selected value.\n * - .selected() method will return the currently\n * selected input element.\n * - .selected(value) method will select the option\n * and return it. String values recommended as input\n * for value.\n * - .disable(Boolean) method will enable/disable the\n * whole radio button element.\n * @return pointer to p5.Element holding created node\n /\n createRadio(): Element;\n\n /\n Creates a colorPicker element in the DOM for color\n * input. The .value() method will return a hex\n * string (#rrggbb) of the color. The .color() method\n * will return a p5.Color object with the current\n * chosen color.\n * @param [value] default color of element\n * @return pointer to p5.Element holding created node\n /\n createColorPicker(value?: string \| Color): Element;\n\n /\n Creates an <input></input> element in the DOM for\n * text input. Use .size() to set the display length\n * of the box.\n * @param value default value of the input box\n * @param [type] type of text, ie text, password etc.\n * Defaults to text. Needs a value to be specified\n * first.\n * @return pointer to p5.Element holding created node\n /\n createInput(value: string, type?: string): Element;\n\n /\n Creates an <input></input> element in the DOM for\n * text input. Use .size() to set the display length\n * of the box.\n * @param [value] default value of the input box\n /\n createInput(value?: string): Element;\n\n /\n Creates an <input></input> element in the DOM of\n * type 'file'. This allows users to select local\n * files for use in a sketch.\n * @param callback callback function for when a file\n * is loaded\n * @param [multiple] optional, to allow multiple\n * files to be selected\n * @return pointer to p5.Element holding created DOM\n * element\n /\n createFileInput(callback: (...args: any[]) => any, multiple?: boolean): Element;\n\n /\n Creates an HTML5 <video> element in the DOM for\n * simple playback of audio/video. Shown by default,\n * can be hidden with .hide() and drawn into canvas\n * using image(). The first parameter can be either a\n * single string path to a video file, or an array of\n * string paths to different formats of the same\n * video. This is useful for ensuring that your video\n * can play across different browsers, as each\n * supports different formats. See this page for\n * further information about supported formats.\n * @param src path to a video file, or array of paths\n * for supporting different browsers\n * @param [callback] callback function to be called\n * upon 'canplaythrough' event fire, that is, when\n * the browser can play the media, and estimates that\n * enough data has been loaded to play the media up\n * to its end without having to stop for further\n * buffering of content\n * @return pointer to video p5.MediaElement\n /\n createVideo(src: string \| string[], callback?: (...args: any[]) => any): MediaElement;\n\n /\n Creates a hidden HTML5 <audio> element in the DOM\n * for simple audio playback. The first parameter can\n * be either a single string path to a audio file, or\n * an array of string paths to different formats of\n * the same audio. This is useful for ensuring that\n * your audio can play across different browsers, as\n * each supports different formats. See this page for\n * further information about supported formats.\n * @param [src] path to an audio file, or array of\n * paths for supporting different browsers\n * @param [callback] callback function to be called\n * upon 'canplaythrough' event fire, that is, when\n * the browser can play the media, and estimates that\n * enough data has been loaded to play the media up\n * to its end without having to stop for further\n * buffering of content\n * @return pointer to audio p5.MediaElement\n /\n createAudio(src?: string \| string[], callback?: (...args: any[]) => any): MediaElement;\n\n /\n Creates a new HTML5 <video> element that contains\n * the audio/video feed from a webcam. The element is\n * separate from the canvas and is displayed by\n * default. The element can be hidden using .hide().\n * The feed can be drawn onto the canvas using\n * image(). The loadedmetadata property can be used\n * to detect when the element has fully loaded (see\n * second example). More specific properties of the\n * feed can be passing in a Constraints object. See\n * the W3C spec for possible properties. Note that\n * not all of these are supported by all browsers.\n \n Security note: A new browser security\n * specification requires that getUserMedia, which is\n * behind createCapture(), only works when you're\n * running the code locally, or on HTTPS. Learn more\n * here and here.\n * @param type type of capture, either VIDEO or AUDIO\n * if none specified, default both, or a Constraints\n * object\n * @param [callback] function to be called once\n * stream has loaded\n * @return capture video p5.Element\n /\n createCapture(type: string \| TYPE \| object, callback?: (...args: any[]) => any): Element;\n\n /\n Creates element with given tag in the DOM with\n * given content.\n * @param tag tag for the new element\n * @param [content] html content to be inserted into\n * the element\n * @return pointer to p5.Element holding created node\n /\n createElement(tag: string, content?: string): Element;\n\n/\n The setMoveThreshold() function is used to set the\n * movement threshold for the deviceMoved() function.\n * The default threshold is set to 0.5.\n * @param value The threshold value\n /\n setMoveThreshold(value: number): void;\n\n /\n The setShakeThreshold() function is used to set\n * the movement threshold for the deviceShaken()\n * function. The default threshold is set to 30.\n * @param value The threshold value\n /\n setShakeThreshold(value: number): void;\n\n /\n The deviceMoved() function is called when the\n * device is moved by more than the threshold value\n * along X, Y or Z axis. The default threshold is set\n * to 0.5. The threshold value can be changed using\n * setMoveThreshold().\n /\n deviceMoved(): void;\n\n /\n The deviceTurned() function is called when the\n * device rotates by more than 90 degrees\n * continuously. The axis that triggers the\n * deviceTurned() method is stored in the turnAxis\n * variable. The deviceTurned() method can be locked\n * to trigger on any axis: X, Y or Z by comparing the\n * turnAxis variable to 'X', 'Y' or 'Z'.\n /\n deviceTurned(): void;\n\n /\n The deviceShaken() function is called when the\n * device total acceleration changes of accelerationX\n * and accelerationY values is more than the\n * threshold value. The default threshold is set to\n * 30. The threshold value can be changed using\n * setShakeThreshold().\n /\n deviceShaken(): void;\n\n /\n The system variable deviceOrientation always\n * contains the orientation of the device. The value\n * of this variable will either be set 'landscape' or\n * 'portrait'. If no data is available it will be set\n * to 'undefined'. either LANDSCAPE or PORTRAIT.\n /\n deviceOrientation: UNKNOWN_P5_CONSTANT;\n\n /\n The system variable accelerationX always contains\n * the acceleration of the device along the x axis.\n * Value is represented as meters per second squared.\n /\n accelerationX: number;\n\n /\n The system variable accelerationY always contains\n * the acceleration of the device along the y axis.\n * Value is represented as meters per second squared.\n /\n accelerationY: number;\n\n /\n The system variable accelerationZ always contains\n * the acceleration of the device along the z axis.\n * Value is represented as meters per second squared.\n /\n accelerationZ: number;\n\n /\n The system variable pAccelerationX always contains\n * the acceleration of the device along the x axis in\n * the frame previous to the current frame. Value is\n * represented as meters per second squared.\n /\n pAccelerationX: number;\n\n /\n The system variable pAccelerationY always contains\n * the acceleration of the device along the y axis in\n * the frame previous to the current frame. Value is\n * represented as meters per second squared.\n /\n pAccelerationY: number;\n\n /\n The system variable pAccelerationZ always contains\n * the acceleration of the device along the z axis in\n * the frame previous to the current frame. Value is\n * represented as meters per second squared.\n /\n pAccelerationZ: number;\n\n /\n The system variable rotationX always contains the\n * rotation of the device along the x axis. If the\n * sketch angleMode() is set to DEGREES, the value\n * will be -180 to 180. If it is set to RADIANS, the\n * value will be -PI to PI. Note: The order the\n * rotations are called is important, ie. if used\n * together, it must be called in the order Z-X-Y or\n * there might be unexpected behaviour.\n /\n rotationX: number;\n\n /\n The system variable rotationY always contains the\n * rotation of the device along the y axis. If the\n * sketch angleMode() is set to DEGREES, the value\n * will be -90 to 90. If it is set to RADIANS, the\n * value will be -PI/2 to PI/2. Note: The order the\n * rotations are called is important, ie. if used\n * together, it must be called in the order Z-X-Y or\n * there might be unexpected behaviour.\n /\n rotationY: number;\n\n /\n The system variable rotationZ always contains the\n * rotation of the device along the z axis. If the\n * sketch angleMode() is set to DEGREES, the value\n * will be 0 to 360. If it is set to RADIANS, the\n * value will be 0 to 2PI. Unlike rotationX and\n rotationY, this variable is available for devices\n * with a built-in compass only.\n \n Note: The order the rotations are called is\n * important, ie. if used together, it must be called\n * in the order Z-X-Y or there might be unexpected\n * behaviour.\n /\n rotationZ: number;\n\n /\n The system variable pRotationX always contains the\n * rotation of the device along the x axis in the\n * frame previous to the current frame. If the sketch\n * angleMode() is set to DEGREES, the value will be\n * -180 to 180. If it is set to RADIANS, the value\n * will be -PI to PI. pRotationX can also be used\n * with rotationX to determine the rotate direction\n * of the device along the X-axis.\n /\n pRotationX: number;\n\n /\n The system variable pRotationY always contains the\n * rotation of the device along the y axis in the\n * frame previous to the current frame. If the sketch\n * angleMode() is set to DEGREES, the value will be\n * -90 to 90. If it is set to RADIANS, the value will\n * be -PI/2 to PI/2. pRotationY can also be used with\n * rotationY to determine the rotate direction of the\n * device along the Y-axis.\n /\n pRotationY: number;\n\n /\n The system variable pRotationZ always contains the\n * rotation of the device along the z axis in the\n * frame previous to the current frame. If the sketch\n * angleMode() is set to DEGREES, the value will be 0\n * to 360. If it is set to RADIANS, the value will be\n * 0 to 2PI. pRotationZ can also be used with\n rotationZ to determine the rotate direction of the\n * device along the Z-axis.\n /\n pRotationZ: number;\n\n /\n When a device is rotated, the axis that triggers\n * the deviceTurned() method is stored in the\n * turnAxis variable. The turnAxis variable is only\n * defined within the scope of deviceTurned().\n /\n turnAxis: string;\n\n/\n The keyPressed() function is called once every\n * time a key is pressed. The keyCode for the key\n * that was pressed is stored in the keyCode\n * variable. For non-ASCII keys, use the keyCode\n * variable. You can check if the keyCode equals\n * BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE,\n * SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW,\n * LEFT_ARROW, RIGHT_ARROW.\n \n For ASCII keys, the key that was pressed is stored\n * in the key variable. However, it does not\n * distinguish between uppercase and lowercase. For\n * this reason, it is recommended to use keyTyped()\n * to read the key variable, in which the case of the\n * variable will be distinguished.\n \n Because of how operating systems handle key\n * repeats, holding down a key may cause multiple\n * calls to keyTyped() (and keyReleased() as well).\n * The rate of repeat is set by the operating system\n * and how each computer is configured.\n \n \n * Browsers may have different default behaviors\n * attached to various key events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the method.\n * @param [event] optional KeyboardEvent callback\n * argument.\n /\n keyPressed(event?: object): void;\n\n /\n The keyReleased() function is called once every\n * time a key is released. See key and keyCode for\n * more information. Browsers may have different\n * default behaviors attached to various key events.\n * To prevent any default behavior for this event,\n * add \"return false\" to the end of the function.\n * @param [event] optional KeyboardEvent callback\n * argument.\n /\n keyReleased(event?: object): void;\n\n /\n The keyTyped() function is called once every time\n * a key is pressed, but action keys such as\n * Backspace, Delete, Ctrl, Shift, and Alt are\n * ignored. If you are trying to detect a keyCode for\n * one of these keys, use the keyPressed() function\n * instead. The most recent key typed will be stored\n * in the key variable. Because of how operating\n * systems handle key repeats, holding down a key\n * will cause multiple calls to keyTyped() (and\n * keyReleased() as well). The rate of repeat is set\n * by the operating system and how each computer is\n * configured.\n \n \n * Browsers may have different default behaviors\n * attached to various key events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the function.\n * @param [event] optional KeyboardEvent callback\n * argument.\n /\n keyTyped(event?: object): void;\n\n /\n The keyIsDown() function checks if the key is\n * currently down, i.e. pressed. It can be used if\n * you have an object that moves, and you want\n * several keys to be able to affect its behaviour\n * simultaneously, such as moving a sprite\n * diagonally. You can put in any number representing\n * the keyCode of the key, or use any of the variable\n * keyCode names listed here.\n * @param code The key to check for.\n * @return whether key is down or not\n /\n keyIsDown(code: number): boolean;\n\n /\n The boolean system variable keyIsPressed is true\n * if any key is pressed and false if no keys are\n * pressed.\n /\n keyIsPressed: boolean;\n\n /\n The system variable key always contains the value\n * of the most recent key on the keyboard that was\n * typed. To get the proper capitalization, it is\n * best to use it within keyTyped(). For non-ASCII\n * keys, use the keyCode variable.\n /\n key: string;\n\n /\n The variable keyCode is used to detect special\n * keys such as BACKSPACE, DELETE, ENTER, RETURN,\n * TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT,\n * UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You\n * can also check for custom keys by looking up the\n * keyCode of any key on a site like this:\n * keycode.info.\n /\n keyCode: number;\n\n/\n The mouseMoved() function is called every time the\n * mouse moves and a mouse button is not pressed.\n * Browsers may have different default behaviors\n * attached to various mouse events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the method.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseMoved(event?: object): void;\n\n /\n The mouseDragged() function is called once every\n * time the mouse moves and a mouse button is\n * pressed. If no mouseDragged() function is defined,\n * the touchMoved() function will be called instead\n * if it is defined. Browsers may have different\n * default behaviors attached to various mouse\n * events. To prevent any default behavior for this\n * event, add \"return false\" to the end of the\n * function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseDragged(event?: object): void;\n\n /\n The mousePressed() function is called once after\n * every time a mouse button is pressed. The\n * mouseButton variable (see the related reference\n * entry) can be used to determine which button has\n * been pressed. If no mousePressed() function is\n * defined, the touchStarted() function will be\n * called instead if it is defined. Browsers may have\n * different default behaviors attached to various\n * mouse events. To prevent any default behavior for\n * this event, add \"return false\" to the end of the\n * function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mousePressed(event?: object): void;\n\n /\n The mouseReleased() function is called every time\n * a mouse button is released. If no mouseReleased()\n * function is defined, the touchEnded() function\n * will be called instead if it is defined. Browsers\n * may have different default behaviors attached to\n * various mouse events. To prevent any default\n * behavior for this event, add \"return false\" to the\n * end of the function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseReleased(event?: object): void;\n\n /\n The mouseClicked() function is called once after a\n * mouse button has been pressed and then released.\n * Browsers handle clicks differently, so this\n * function is only guaranteed to be run when the\n * left mouse button is clicked. To handle other\n * mouse buttons being pressed or released, see\n * mousePressed() or mouseReleased().\n \n \n * Browsers may have different default behaviors\n * attached to various mouse events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseClicked(event?: object): void;\n\n /\n The doubleClicked() function is executed every\n * time a event listener has detected a dblclick\n * event which is a part of the DOM L3 specification.\n * The doubleClicked event is fired when a pointing\n * device button (usually a mouse's primary button)\n * is clicked twice on a single element. For more\n * info on the dblclick event refer to mozilla's\n * documentation here:\n * https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\n * @param [event] optional MouseEvent callback\n * argument.\n /\n doubleClicked(event?: object): void;\n\n /\n The function mouseWheel() is executed every time a\n * vertical mouse wheel event is detected either\n * triggered by an actual mouse wheel or by a\n * touchpad. The event.delta property returns the\n * amount the mouse wheel have scrolled. The values\n * can be positive or negative depending on the\n * scroll direction (on macOS with \"natural\"\n * scrolling enabled, the signs are inverted).\n \n \n * Browsers may have different default behaviors\n * attached to various mouse events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the method.\n \n \n * Due to the current support of the \"wheel\" event on\n * Safari, the function may only work as expected if\n * \"return false\" is included while using Safari.\n * @param [event] optional WheelEvent callback\n * argument.\n /\n mouseWheel(event?: object): void;\n\n /\n The function requestPointerLock() locks the\n * pointer to its current position and makes it\n * invisible. Use movedX and movedY to get the\n * difference the mouse was moved since the last call\n * of draw. Note that not all browsers support this\n * feature. This enables you to create experiences\n * that aren't limited by the mouse moving out of the\n * screen even if it is repeatedly moved into one\n * direction. For example, a first person perspective\n * experience.\n /\n requestPointerLock(): void;\n\n /\n The function exitPointerLock() exits a previously\n * triggered pointer Lock for example to make ui\n * elements usable etc\n /\n exitPointerLock(): void;\n\n /\n The variable movedX contains the horizontal\n * movement of the mouse since the last frame\n /\n movedX: number;\n\n /\n The variable movedY contains the vertical movement\n * of the mouse since the last frame\n /\n movedY: number;\n\n /\n The system variable mouseX always contains the\n * current horizontal position of the mouse, relative\n * to (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. If touch is used instead of mouse\n * input, mouseX will hold the x value of the most\n * recent touch point.\n /\n mouseX: number;\n\n /\n The system variable mouseY always contains the\n * current vertical position of the mouse, relative\n * to (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. If touch is used instead of mouse\n * input, mouseY will hold the y value of the most\n * recent touch point.\n /\n mouseY: number;\n\n /\n The system variable pmouseX always contains the\n * horizontal position of the mouse or finger in the\n * frame previous to the current frame, relative to\n * (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. Note: pmouseX will be reset to the\n * current mouseX value at the start of each touch\n * event.\n /\n pmouseX: number;\n\n /\n The system variable pmouseY always contains the\n * vertical position of the mouse or finger in the\n * frame previous to the current frame, relative to\n * (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. Note: pmouseY will be reset to the\n * current mouseY value at the start of each touch\n * event.\n /\n pmouseY: number;\n\n /\n The system variable winMouseX always contains the\n * current horizontal position of the mouse, relative\n * to (0, 0) of the window.\n /\n winMouseX: number;\n\n /\n The system variable winMouseY always contains the\n * current vertical position of the mouse, relative\n * to (0, 0) of the window.\n /\n winMouseY: number;\n\n /\n The system variable pwinMouseX always contains the\n * horizontal position of the mouse in the frame\n * previous to the current frame, relative to (0, 0)\n * of the window. Note: pwinMouseX will be reset to\n * the current winMouseX value at the start of each\n * touch event.\n /\n pwinMouseX: number;\n\n /\n The system variable pwinMouseY always contains the\n * vertical position of the mouse in the frame\n * previous to the current frame, relative to (0, 0)\n * of the window. Note: pwinMouseY will be reset to\n * the current winMouseY value at the start of each\n * touch event.\n /\n pwinMouseY: number;\n\n /\n p5 automatically tracks if the mouse button is\n * pressed and which button is pressed. The value of\n * the system variable mouseButton is either LEFT,\n * RIGHT, or CENTER depending on which button was\n * pressed last. Warning: different browsers may\n * track mouseButton differently.\n /\n mouseButton: UNKNOWN_P5_CONSTANT;\n\n /\n The boolean system variable mouseIsPressed is true\n * if the mouse is pressed and false if not.\n /\n mouseIsPressed: boolean;\n\n/\n The touchStarted() function is called once after\n * every time a touch is registered. If no\n * touchStarted() function is defined, the\n * mousePressed() function will be called instead if\n * it is defined. Browsers may have different default\n * behaviors attached to various touch events. To\n * prevent any default behavior for this event, add\n * \"return false\" to the end of the method.\n * @param [event] optional TouchEvent callback\n * argument.\n /\n touchStarted(event?: object): void;\n\n /\n The touchMoved() function is called every time a\n * touch move is registered. If no touchMoved()\n * function is defined, the mouseDragged() function\n * will be called instead if it is defined. Browsers\n * may have different default behaviors attached to\n * various touch events. To prevent any default\n * behavior for this event, add \"return false\" to the\n * end of the method.\n * @param [event] optional TouchEvent callback\n * argument.\n /\n touchMoved(event?: object): void;\n\n /\n The touchEnded() function is called every time a\n * touch ends. If no touchEnded() function is\n * defined, the mouseReleased() function will be\n * called instead if it is defined. Browsers may have\n * different default behaviors attached to various\n * touch events. To prevent any default behavior for\n * this event, add \"return false\" to the end of the\n * method.\n * @param [event] optional TouchEvent callback\n * argument.\n /\n touchEnded(event?: object): void;\n\n /\n The system variable touches[] contains an array of\n * the positions of all current touch points,\n * relative to (0, 0) of the canvas, and IDs\n * identifying a unique touch as it moves. Each\n * element in the array is an object with x, y, and\n * id properties. The touches[] array is not\n * supported on Safari and IE on touch-based desktops\n * (laptops).\n /\n touches: object[];\n\n/\n Creates a new p5.Image (the datatype for storing\n * images). This provides a fresh buffer of pixels to\n * play with. Set the size of the buffer with the\n * width and height parameters. .pixels gives access\n * to an array containing the values for all the\n * pixels in the display window. These values are\n * numbers. This array is the size (including an\n * appropriate factor for the pixelDensity) of the\n * display window x4, representing the R, G, B, A\n * values in order for each pixel, moving from left\n * to right across each row, then down each column.\n * See .pixels for more info. It may also be simpler\n * to use set() or get().\n \n Before accessing the pixels of an image, the data\n * must loaded with the loadPixels() function. After\n * the array data has been modified, the\n * updatePixels() function must be run to update the\n * changes.\n * @param width width in pixels\n * @param height height in pixels\n * @return the p5.Image object\n /\n createImage(width: number, height: number): Image;\n\n /\n Save the current canvas as an image. The browser\n * will either save the file immediately, or prompt\n * the user with a dialogue window.\n * @param selectedCanvas a variable representing a\n * specific html5 canvas (optional)\n * @param [extension] 'jpg' or 'png'\n /\n saveCanvas(selectedCanvas: Element \| HTMLCanvasElement, filename?: string, extension?: string): void;\n\n /\n Save the current canvas as an image. The browser\n * will either save the file immediately, or prompt\n * the user with a dialogue window.\n * @param [extension] 'jpg' or 'png'\n /\n saveCanvas(filename?: string, extension?: string): void;\n\n /\n Capture a sequence of frames that can be used to\n * create a movie. Accepts a callback. For example,\n * you may wish to send the frames to a server where\n * they can be stored or converted into a movie. If\n * no callback is provided, the browser will pop up\n * save dialogues in an attempt to download all of\n * the images that have just been created. With the\n * callback provided the image data isn't saved by\n * default but instead passed as an argument to the\n * callback function as an array of objects, with the\n * size of array equal to the total number of frames.\n * The arguments duration and framerate are\n * constrained to be less or equal to 15 and 22,\n * respectively, which means you can only download a\n * maximum of 15 seconds worth of frames at 22 frames\n * per second, adding up to 330 frames. This is done\n * in order to avoid memory problems since a large\n * enough canvas can fill up the memory in your\n * computer very easily and crash your program or\n * even your browser.\n \n To export longer animations, you might look into a\n * library like ccapture.js.\n * @param extension 'jpg' or 'png'\n * @param duration Duration in seconds to save the\n * frames for. This parameter will be constrained to\n * be less or equal to 15.\n * @param framerate Framerate to save the frames in.\n * This parameter will be constrained to be less or\n * equal to 22.\n * @param [callback] A callback function that will be\n * executed to handle the image data. This function\n * should accept an array as argument. The array will\n * contain the specified number of frames of objects.\n * Each object has three properties: imageData - an\n * image/octet-stream, filename and extension.\n /\n saveFrames(\n filename: string,\n extension: string,\n duration: number,\n framerate: number,\n callback?: (p1: any[]) => any\n ): void;\n\n/\n Loads an image from a path and creates a p5.Image\n * from it. The image may not be immediately\n * available for rendering. If you want to ensure\n * that the image is ready before doing anything with\n * it, place the loadImage() call in preload(). You\n * may also supply a callback function to handle the\n * image when it's ready.\n \n The path to the image should be relative to the\n * HTML file that links in your sketch. Loading an\n * image from a URL or other remote location may be\n * blocked due to your browser's built-in security.\n \n You can also pass in a string of a base64 encoded\n * image as an alternative to the file path. Remember\n * to add \"data:image/png;base64,\" in front of the\n * string.\n * @param path Path of the image to be loaded\n * @param [successCallback] Function to be called\n * once the image is loaded. Will be passed the\n * p5.Image.\n * @param [failureCallback] called with event error\n * if the image fails to load.\n * @return the p5.Image object\n /\n loadImage(path: string, successCallback?: (p1: Image) => any, failureCallback?: (p1: Event) => any): Image;\n\n /\n Generates a gif of your current animation and\n * downloads it to your computer! The duration\n * argument specifies how many seconds you want to\n * record from your animation. This value is then\n * converted to the necessary number of frames to\n * generate it, depending on the value of units. More\n * on that on the next paragraph.\n \n An optional object that can contain two more\n * arguments: delay (number) and units (string).\n \n delay, specifying how much time we should wait\n * before recording\n \n units, a string that can be either 'seconds' or\n * 'frames'. By default it's 'seconds'.\n \n units specifies how the duration and delay\n * arguments will behave. If 'seconds', these\n * arguments will correspond to seconds, meaning that\n * 3 seconds worth of animation will be created. If\n * 'frames', the arguments now correspond to the\n * number of frames you want your animation to be, if\n * you are very sure of this number.\n \n This may be called in setup, or, like in the\n * example below, inside an event function, like\n * keyPressed or mousePressed.\n * @param filename File name of your gif\n * @param duration Duration in seconds that you wish\n * to capture from your sketch\n * @param options An optional object that can contain\n * five more arguments: delay, specifying how much\n * time we should wait before recording; units, a\n * string that can be either 'seconds' or 'frames'.\n * By default it's 'seconds’; silent, a boolean that\n * defines presence of progress notifications. By\n * default it’s false; notificationDuration, a number\n * that defines how long in seconds the final\n * notification will live. 0, the default value,\n * means that the notification will never be removed;\n * notificationID, a string that specifies the\n * notification DOM element id. By default it’s\n * 'progressBar’.\n /\n saveGif(filename: string, duration: number, options: object): void;\n\n /\n Draw an image to the p5.js canvas. This function\n * can be used with different numbers of parameters.\n * The simplest use requires only three parameters:\n * img, x, and y—where (x, y) is the position of the\n * image. Two more parameters can optionally be added\n * to specify the width and height of the image.\n \n This function can also be used with eight Number\n * parameters. To differentiate between all these\n * parameters, p5.js uses the language of\n * \"destination rectangle\" (which corresponds to\n * \"dx\", \"dy\", etc.) and \"source image\" (which\n * corresponds to \"sx\", \"sy\", etc.) below. Specifying\n * the \"source image\" dimensions can be useful when\n * you want to display a subsection of the source\n * image instead of the whole thing. Here's a diagram\n * to explain further:\n \n This function can also be used to draw images\n * without distorting the orginal aspect ratio, by\n * adding 9th parameter, fit, which can either be\n * COVER or CONTAIN. CONTAIN, as the name suggests,\n * contains the whole image within the specified\n * destination box without distorting the image\n * ratio. COVER covers the entire destination box.\n * @param img the image to display\n * @param x the x-coordinate of the top-left corner\n * of the image\n * @param y the y-coordinate of the top-left corner\n * of the image\n * @param [width] the width to draw the image\n * @param [height] the height to draw the image\n /\n image(img: Image \| Element \| Framebuffer, x: number, y: number, width?: number, height?: number): void;\n\n /\n Draw an image to the p5.js canvas. This function\n * can be used with different numbers of parameters.\n * The simplest use requires only three parameters:\n * img, x, and y—where (x, y) is the position of the\n * image. Two more parameters can optionally be added\n * to specify the width and height of the image.\n \n This function can also be used with eight Number\n * parameters. To differentiate between all these\n * parameters, p5.js uses the language of\n * \"destination rectangle\" (which corresponds to\n * \"dx\", \"dy\", etc.) and \"source image\" (which\n * corresponds to \"sx\", \"sy\", etc.) below. Specifying\n * the \"source image\" dimensions can be useful when\n * you want to display a subsection of the source\n * image instead of the whole thing. Here's a diagram\n * to explain further:\n \n This function can also be used to draw images\n * without distorting the orginal aspect ratio, by\n * adding 9th parameter, fit, which can either be\n * COVER or CONTAIN. CONTAIN, as the name suggests,\n * contains the whole image within the specified\n * destination box without distorting the image\n * ratio. COVER covers the entire destination box.\n * @param img the image to display\n * @param dx the x-coordinate of the destination\n * rectangle in which to draw the source image\n * @param dy the y-coordinate of the destination\n * rectangle in which to draw the source image\n * @param dWidth the width of the destination\n * rectangle\n * @param dHeight the height of the destination\n * rectangle\n * @param sx the x-coordinate of the subsection of\n * the source image to draw into the destination\n * rectangle\n * @param sy the y-coordinate of the subsection of\n * the source image to draw into the destination\n * rectangle\n * @param [sWidth] the width of the subsection of the\n * source image to draw into the destination\n * rectangle\n * @param [sHeight] the height of the subsection of\n * the source image to draw into the destination\n * rectangle\n * @param [fit] either CONTAIN or COVER\n * @param [xAlign] either LEFT, RIGHT or CENTER\n * default is CENTER\n * @param [yAlign] either TOP, BOTTOM or CENTER\n * default is CENTER\n /\n image(\n img: Image \| Element \| Framebuffer,\n dx: number,\n dy: number,\n dWidth: number,\n dHeight: number,\n sx: number,\n sy: number,\n sWidth?: number,\n sHeight?: number,\n fit?: IMAGE_FIT,\n xAlign?: X_ALIGN,\n yAlign?: Y_ALIGN\n ): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n /\n tint(v1: number, v2: number, v3: number, alpha?: number): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param value a color string\n /\n tint(value: string): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param gray a gray value\n /\n tint(gray: number, alpha?: number): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param values an array containing the\n * red,green,blue & and alpha components of the color\n /\n tint(values: number[]): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param color the tint color\n /\n tint(color: Color): void;\n\n /\n Removes the current fill value for displaying\n * images and reverts to displaying images with their\n * original hues.\n /\n noTint(): void;\n\n /\n Set image mode. Modifies the location from which\n * images are drawn by changing the way in which\n * parameters given to image() are interpreted. The\n * default mode is imageMode(CORNER), which\n * interprets the second and third parameters of\n * image() as the upper-left corner of the image. If\n * two additional parameters are specified, they are\n * used to set the image's width and height.\n * imageMode(CORNERS) interprets the second and third\n * parameters of image() as the location of one\n * corner, and the fourth and fifth parameters as the\n * opposite corner.\n \n imageMode(CENTER) interprets the second and third\n * parameters of image() as the image's center point.\n * If two additional parameters are specified, they\n * are used to set the image's width and height.\n * @param mode either CORNER, CORNERS, or CENTER\n /\n imageMode(mode: IMAGE_MODE): void;\n\n/\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n /\n blend(\n srcImage: Image,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: BLEND_MODE\n ): void;\n\n /\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n /\n blend(\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: UNKNOWN_P5_CONSTANT\n ): void;\n\n /\n Copies a region of the canvas to another region of\n * the canvas and copies a region of pixels from an\n * image used as the srcImg parameter into the canvas\n * srcImage is specified this is used as the source.\n * If the source and destination regions aren't the\n * same size, it will automatically resize source\n * pixels to fit the specified target region.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(\n srcImage: Image \| Element,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number\n ): void;\n\n /\n Copies a region of the canvas to another region of\n * the canvas and copies a region of pixels from an\n * image used as the srcImg parameter into the canvas\n * srcImage is specified this is used as the source.\n * If the source and destination regions aren't the\n * same size, it will automatically resize source\n * pixels to fit the specified target region.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;\n\n /\n Applies a filter to the canvas. The presets\n * options are: THRESHOLD Converts the image to black\n * and white pixels depending if they are above or\n * below the threshold defined by the level\n * parameter. The parameter must be between 0.0\n * (black) and 1.0 (white). If no level is specified,\n * 0.5 is used.\n \n GRAY Converts any colors in the image to grayscale\n * equivalents. No parameter is used.\n \n OPAQUE Sets the alpha channel to entirely opaque.\n * No parameter is used.\n \n INVERT Sets each pixel to its inverse value. No\n * parameter is used.\n \n POSTERIZE Limits each channel of the image to the\n * number of colors specified as the parameter. The\n * parameter can be set to values between 2 and 255,\n * but results are most noticeable in the lower\n * ranges.\n \n BLUR Executes a Gaussian blur with the level\n * parameter specifying the extent of the blurring.\n * If no parameter is used, the blur is equivalent to\n * Gaussian blur of radius 1. Larger values increase\n * the blur.\n \n ERODE Reduces the light areas. No parameter is\n * used.\n \n DILATE Increases the light areas. No parameter is\n * used.\n \n filter() does not work in WEBGL mode. A similar\n * effect can be achieved in WEBGL mode using custom\n * shaders. Adam Ferriss has written a selection of\n * shader examples that contains many of the effects\n * present in the filter examples.\n * @param filterType either THRESHOLD, GRAY, OPAQUE,\n * INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n * See Filters.js for docs on each available filter\n * @param [filterParam] an optional parameter unique\n * to each filter, see above\n /\n filter(filterType: FILTER_TYPE, filterParam?: number): void;\n\n /\n Get a region of pixels, or a single pixel, from\n * the canvas. Returns an array of [R,G,B,A] values\n * for any pixel or grabs a section of an image. If\n * no parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n \n Getting the color of a single pixel with get(x, y)\n * is easy, but not as fast as grabbing the data\n * directly from pixels[]. The equivalent statement\n * to get(x, y) using pixels[] with pixel density d\n * is\n \n let x, y, d; // set these to the coordinates let\n * off = (y * width + x) * d * 4; let components = [\n * pixels[off], pixels[off + 1], pixels[off + 2],\n * pixels[off + 3] ]; print(components);\n \n See the reference for pixels[] for more\n * information.\n \n If you want to extract an array of colors or a\n * subimage from an p5.Image object, take a look at\n * p5.Image.get()\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param w width of the section to be returned\n * @param h height of the section to be returned\n * @return the rectangle p5.Image\n /\n get(x: number, y: number, w: number, h: number): Image;\n\n /\n Get a region of pixels, or a single pixel, from\n * the canvas. Returns an array of [R,G,B,A] values\n * for any pixel or grabs a section of an image. If\n * no parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n \n Getting the color of a single pixel with get(x, y)\n * is easy, but not as fast as grabbing the data\n * directly from pixels[]. The equivalent statement\n * to get(x, y) using pixels[] with pixel density d\n * is\n \n let x, y, d; // set these to the coordinates let\n * off = (y * width + x) * d * 4; let components = [\n * pixels[off], pixels[off + 1], pixels[off + 2],\n * pixels[off + 3] ]; print(components);\n \n See the reference for pixels[] for more\n * information.\n \n If you want to extract an array of colors or a\n * subimage from an p5.Image object, take a look at\n * p5.Image.get()\n * @return the whole p5.Image\n /\n get(): Image;\n\n /\n Get a region of pixels, or a single pixel, from\n * the canvas. Returns an array of [R,G,B,A] values\n * for any pixel or grabs a section of an image. If\n * no parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n \n Getting the color of a single pixel with get(x, y)\n * is easy, but not as fast as grabbing the data\n * directly from pixels[]. The equivalent statement\n * to get(x, y) using pixels[] with pixel density d\n * is\n \n let x, y, d; // set these to the coordinates let\n * off = (y * width + x) * d * 4; let components = [\n * pixels[off], pixels[off + 1], pixels[off + 2],\n * pixels[off + 3] ]; print(components);\n \n See the reference for pixels[] for more\n * information.\n \n If you want to extract an array of colors or a\n * subimage from an p5.Image object, take a look at\n * p5.Image.get()\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @return color of pixel at x,y in array format [R,\n * G, B, A]\n /\n get(x: number, y: number): number[];\n\n /\n Loads the pixel data for the display window into\n * the pixels[] array. This function must always be\n * called before reading from or writing to pixels[].\n * Note that only changes made with set() or direct\n * manipulation of pixels[] will occur.\n /\n loadPixels(): void;\n\n /\n Changes the color of any pixel, or writes an image\n * directly to the display window. The x and y\n * parameters specify the pixel to change and the c\n * parameter specifies the color value. This can be a\n * p5.Color object, or [R, G, B, A] pixel array. It\n * can also be a single grayscale value. When setting\n * an image, the x and y parameters define the\n * coordinates for the upper-left corner of the\n * image, regardless of the current imageMode().\n * After using set(), you must call updatePixels()\n * for your changes to appear. This should be called\n * once all pixels have been set, and must be called\n * before calling .get() or drawing the image.\n \n Setting the color of a single pixel with set(x, y)\n * is easy, but not as fast as putting the data\n * directly into pixels[]. Setting the pixels[]\n * values directly may be complicated when working\n * with a retina display, but will perform better\n * when lots of pixels need to be set directly on\n * every loop. See the reference for pixels[] for\n * more information.\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param c insert a grayscale value \| a pixel array\n * \| a p5.Color object \| a p5.Image to copy\n /\n set(x: number, y: number, c: number \| number[] \| object): void;\n\n /\n Updates the display window with the data in the\n * pixels[] array. Use in conjunction with\n * loadPixels(). If you're only reading pixels from\n * the array, there's no need to call updatePixels()\n * — updating is only necessary to apply changes.\n * updatePixels() should be called anytime the pixels\n * array is manipulated or set() is called, and only\n * changes made with set() or direct changes to\n * pixels[] will occur.\n * @param [x] x-coordinate of the upper-left corner\n * of region to update\n * @param [y] y-coordinate of the upper-left corner\n * of region to update\n * @param [w] width of region to update\n * @param [h] height of region to update\n /\n updatePixels(x?: number, y?: number, w?: number, h?: number): void;\n\n /\n Uint8ClampedArray containing the values for all\n * the pixels in the display window. These values are\n * numbers. This array is the size (include an\n * appropriate factor for pixelDensity) of the\n * display window x4, representing the R, G, B, A\n * values in order for each pixel, moving from left\n * to right across each row, then down each column.\n * Retina and other high density displays will have\n * more pixels[] (by a factor of pixelDensity^2). For\n * example, if the image is 100×100 pixels, there\n * will be 40,000. On a retina display, there will be\n * 160,000. The first four values (indices 0-3) in\n * the array will be the R, G, B, A values of the\n * pixel at (0, 0). The second four values (indices\n * 4-7) will contain the R, G, B, A values of the\n * pixel at (1, 0). More generally, to set values for\n * a pixel at (x, y):\n \n let d = pixelDensity(); for (let i = 0; i < d;\n * i++) { for (let j = 0; j < d; j++) { // loop over\n * index = 4 * ((y * d + j) * width * d + (x * d +\n * i)); pixels[index] = r; pixels[index+1] = g;\n * pixels[index+2] = b; pixels[index+3] = a; } }\n \n While the above method is complex, it is flexible\n * enough to work with any pixelDensity. Note that\n * set() will automatically take care of setting all\n * the appropriate values in pixels[] for a given (x,\n * y) at any pixelDensity, but the performance may\n * not be as fast when lots of modifications are made\n * to the pixel array.\n \n Before accessing this array, the data must loaded\n * with the loadPixels() function. After the array\n * data has been modified, the updatePixels()\n * function must be run to update the changes.\n \n Note that this is not a standard javascript array.\n * This means that standard javascript functions such\n * as slice() or arrayCopy() do not work.\n /\n pixels: number[];\n\n/\n Loads a JSON file from a file or a URL, and\n * returns an Object. Note that even if the JSON file\n * contains an Array, an Object will be returned with\n * index numbers as keys. This method is\n * asynchronous, meaning it may not finish before the\n * next line in your sketch is executed. JSONP is\n * supported via a polyfill and you can pass in as\n * the second argument an object with definitions of\n * the json callback following the syntax specified\n * here.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param path name of the file or url to load\n * @param [jsonpOptions] options object for jsonp\n * related settings\n * @param [datatype] \"json\" or \"jsonp\"\n * @param [callback] function to be executed after\n * loadJSON() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return JSON data\n /\n loadJSON(\n path: string,\n jsonpOptions?: object,\n datatype?: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object \| any[];\n\n /\n Loads a JSON file from a file or a URL, and\n * returns an Object. Note that even if the JSON file\n * contains an Array, an Object will be returned with\n * index numbers as keys. This method is\n * asynchronous, meaning it may not finish before the\n * next line in your sketch is executed. JSONP is\n * supported via a polyfill and you can pass in as\n * the second argument an object with definitions of\n * the json callback following the syntax specified\n * here.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param path name of the file or url to load\n * @param datatype \"json\" or \"jsonp\"\n * @param [callback] function to be executed after\n * loadJSON() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n loadJSON(\n path: string,\n datatype: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object \| any[];\n\n /\n Loads a JSON file from a file or a URL, and\n * returns an Object. Note that even if the JSON file\n * contains an Array, an Object will be returned with\n * index numbers as keys. This method is\n * asynchronous, meaning it may not finish before the\n * next line in your sketch is executed. JSONP is\n * supported via a polyfill and you can pass in as\n * the second argument an object with definitions of\n * the json callback following the syntax specified\n * here.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param path name of the file or url to load\n * @param callback function to be executed after\n * loadJSON() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n loadJSON(\n path: string,\n callback: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object \| any[];\n\n /\n Reads the contents of a file and creates a String\n * array of its individual lines. If the name of the\n * file is used as the parameter, as in the above\n * example, the file must be located in the sketch\n * directory/folder. Alternatively, the file may be\n * loaded from anywhere on the local computer using\n * an absolute path (something that starts with / on\n * Unix and Linux, or a drive letter on Windows), or\n * the filename parameter can be a URL for a file\n * found on a network.\n \n This method is asynchronous, meaning it may not\n * finish before the next line in your sketch is\n * executed.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param filename name of the file or url to load\n * @param [callback] function to be executed after\n * loadStrings() completes, Array is passed in as\n * first argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return Array of Strings\n /\n loadStrings(\n filename: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): string[];\n\n /\n Reads the contents of a file or URL and creates a\n * p5.Table object with its values. If a file is\n * specified, it must be located in the sketch's\n * \"data\" folder. The filename parameter can also be\n * a URL to a file found online. By default, the file\n * is assumed to be comma-separated (in CSV format).\n * Table only looks for a header row if the 'header'\n * option is included. This method is asynchronous,\n * meaning it may not finish before the next line in\n * your sketch is executed. Calling loadTable()\n * inside preload() guarantees to complete the\n * operation before setup() and draw() are called.\n * Outside of preload(), you may supply a callback\n * function to handle the object:\n \n All files loaded and saved use UTF-8 encoding.\n * This method is suitable for fetching files up to\n * size of 64MB.\n * @param filename name of the file or URL to load\n * @param [extension] parse the table by\n * comma-separated values \"csv\", semicolon-separated\n * values \"ssv\", or tab-separated values \"tsv\"\n * @param [header] \"header\" to indicate table has\n * header row\n * @param [callback] function to be executed after\n * loadTable() completes. On success, the Table\n * object is passed in as the first argument.\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return Table object containing data\n /\n loadTable(\n filename: string,\n extension?: string,\n header?: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object;\n\n /\n Reads the contents of a file and creates an XML\n * object with its values. If the name of the file is\n * used as the parameter, as in the above example,\n * the file must be located in the sketch\n * directory/folder. Alternatively, the file maybe be\n * loaded from anywhere on the local computer using\n * an absolute path (something that starts with / on\n * Unix and Linux, or a drive letter on Windows), or\n * the filename parameter can be a URL for a file\n * found on a network.\n \n This method is asynchronous, meaning it may not\n * finish before the next line in your sketch is\n * executed. Calling loadXML() inside preload()\n * guarantees to complete the operation before\n * setup() and draw() are called.\n \n Outside of preload(), you may supply a callback\n * function to handle the object.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param filename name of the file or URL to load\n * @param [callback] function to be executed after\n * loadXML() completes, XML object is passed in as\n * first argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return XML object containing data\n /\n loadXML(filename: string, callback?: (...args: any[]) => any, errorCallback?: (...args: any[]) => any): object;\n\n /\n This method is suitable for fetching files up to\n * size of 64MB.\n * @param file name of the file or URL to load\n * @param [callback] function to be executed after\n * loadBytes() completes\n * @param [errorCallback] function to be executed if\n * there is an error\n * @return an object whose 'bytes' property will be\n * the loaded buffer\n /\n loadBytes(file: string, callback?: (...args: any[]) => any, errorCallback?: (...args: any[]) => any): object;\n\n /\n Method for executing an HTTP GET request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'GET'). The 'binary'\n * datatype will return a Blob object, and the\n * 'arrayBuffer' datatype will return an ArrayBuffer\n * which can be used to initialize typed arrays (such\n * as Uint8Array).\n * @param path name of the file or url to load\n * @param [datatype] \"json\", \"jsonp\", \"binary\",\n * \"arrayBuffer\", \"xml\", or \"text\"\n * @param [data] param data passed sent with request\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return A promise that resolves with the data when\n * the operation completes successfully or rejects\n * with the error after one occurs.\n /\n httpGet(\n path: string,\n datatype?: string,\n data?: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP GET request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'GET'). The 'binary'\n * datatype will return a Blob object, and the\n * 'arrayBuffer' datatype will return an ArrayBuffer\n * which can be used to initialize typed arrays (such\n * as Uint8Array).\n * @param path name of the file or url to load\n * @param data param data passed sent with request\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpGet(\n path: string,\n data: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP GET request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'GET'). The 'binary'\n * datatype will return a Blob object, and the\n * 'arrayBuffer' datatype will return an ArrayBuffer\n * which can be used to initialize typed arrays (such\n * as Uint8Array).\n * @param path name of the file or url to load\n * @param callback function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpGet(path: string, callback: (...args: any[]) => any, errorCallback?: (...args: any[]) => any): Promise<any>;\n\n /\n Method for executing an HTTP POST request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'POST').\n * @param path name of the file or url to load\n * @param [datatype] \"json\", \"jsonp\", \"xml\", or\n * \"text\". If omitted, httpPost() will guess.\n * @param [data] param data passed sent with request\n * @param [callback] function to be executed after\n * httpPost() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return A promise that resolves with the data when\n * the operation completes successfully or rejects\n * with the error after one occurs.\n /\n httpPost(\n path: string,\n datatype?: string,\n data?: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP POST request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'POST').\n * @param path name of the file or url to load\n * @param data param data passed sent with request\n * @param [callback] function to be executed after\n * httpPost() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpPost(\n path: string,\n data: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP POST request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'POST').\n * @param path name of the file or url to load\n * @param callback function to be executed after\n * httpPost() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpPost(\n path: string,\n callback: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP request. If data type\n * is not specified, p5 will try to guess based on\n * the URL, defaulting to text. For more advanced\n * use, you may also pass in the path as the first\n * argument and a object as the second argument, the\n * signature follows the one specified in the Fetch\n * API specification. This method is suitable for\n * fetching files up to size of 64MB when \"GET\" is\n * used.\n * @param path name of the file or url to load\n * @param [method] either \"GET\", \"POST\", or \"PUT\",\n * defaults to \"GET\"\n * @param [datatype] \"json\", \"jsonp\", \"xml\", or\n * \"text\"\n * @param [data] param data passed sent with request\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return A promise that resolves with the data when\n * the operation completes successfully or rejects\n * with the error after one occurs.\n /\n httpDo(\n path: string,\n method?: string,\n datatype?: string,\n data?: object,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP request. If data type\n * is not specified, p5 will try to guess based on\n * the URL, defaulting to text. For more advanced\n * use, you may also pass in the path as the first\n * argument and a object as the second argument, the\n * signature follows the one specified in the Fetch\n * API specification. This method is suitable for\n * fetching files up to size of 64MB when \"GET\" is\n * used.\n * @param path name of the file or url to load\n * @param options Request object options as\n * documented in the \"fetch\" API reference\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpDo(\n path: string,\n options: object,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n createWriter(name: string, extension?: string): PrintWriter;\n\n /\n Saves a given element(image, text, json, csv, wav,\n * or html) to the client's computer. The first\n * parameter can be a pointer to element we want to\n * save. The element can be one of p5.Element,an\n * Array of Strings, an Array of JSON, a JSON object,\n * a p5.Table , a p5.Image, or a p5.SoundFile\n * (requires p5.sound). The second parameter is a\n * filename (including extension).The third parameter\n * is for options specific to this type of object.\n * This method will save a file that fits the given\n * parameters. If it is called without specifying an\n * element, by default it will save the whole canvas\n * as an image file. You can optionally specify a\n * filename as the first parameter in such a case.\n * Note that it is not recommended to call this\n * method within draw, as it will open a new save\n * dialog on every render.\n * @param [objectOrFilename] If filename is provided,\n * will save canvas as an image with either png or\n * jpg extension depending on the filename. If object\n * is provided, will save depending on the object and\n * filename (see examples above).\n * @param [filename] If an object is provided as the\n * first parameter, then the second parameter\n * indicates the filename, and should include an\n * appropriate file extension (see examples above).\n * @param [options] Additional options depend on\n * filetype. For example, when saving JSON, true\n * indicates that the output will be optimized for\n * filesize, rather than readability.\n /\n save(objectOrFilename?: object \| string, filename?: string, options?: boolean \| string): void;\n\n /\n Writes the contents of an Array or a JSON object\n * to a .json file. The file saving process and\n * location of the saved file will vary between web\n * browsers.\n * @param [optimize] If true, removes line breaks and\n * spaces from the output file to optimize filesize\n * (but not readability).\n /\n saveJSON(json: any[] \| object, filename: string, optimize?: boolean): void;\n\n /\n Writes an array of Strings to a text file, one\n * line per String. The file saving process and\n * location of the saved file will vary between web\n * browsers.\n * @param list string array to be written\n * @param filename filename for output\n * @param [extension] the filename's extension\n * @param [isCRLF] if true, change line-break to CRLF\n /\n saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;\n\n /\n Writes the contents of a Table object to a file.\n * Defaults to a text file with\n * comma-separated-values ('csv') but can also use\n * tab separation ('tsv'), or generate an HTML table\n * ('html'). The file saving process and location of\n * the saved file will vary between web browsers.\n * @param Table the Table object to save to a file\n * @param filename the filename to which the Table\n * should be saved\n * @param [options] can be one of \"tsv\", \"csv\", or\n * \"html\"\n /\n saveTable(Table: Table, filename: string, options?: string): void;\n\n/\n Calculates the absolute value (magnitude) of a\n * number. Maps to Math.abs(). The absolute value of\n * a number is always positive.\n * @param n number to compute\n * @return absolute value of given number\n /\n abs(n: number): number;\n\n /\n Calculates the closest int value that is greater\n * than or equal to the value of the parameter. Maps\n * to Math.ceil(). For example, ceil(9.03) returns\n * the value 10.\n * @param n number to round up\n * @return rounded up number\n /\n ceil(n: number): number;\n\n /\n Constrains a value between a minimum and maximum\n * value.\n * @param n number to constrain\n * @param low minimum limit\n * @param high maximum limit\n * @return constrained number\n /\n constrain(n: number, low: number, high: number): number;\n\n /\n Calculates the distance between two points, in\n * either two or three dimensions. If you looking for\n * distance between two vectors see p5.Vector.dist()\n * @param x1 x-coordinate of the first point\n * @param y1 y-coordinate of the first point\n * @param x2 x-coordinate of the second point\n * @param y2 y-coordinate of the second point\n * @return distance between the two points\n /\n dist(x1: number, y1: number, x2: number, y2: number): number;\n\n /\n Calculates the distance between two points, in\n * either two or three dimensions. If you looking for\n * distance between two vectors see p5.Vector.dist()\n * @param x1 x-coordinate of the first point\n * @param y1 y-coordinate of the first point\n * @param z1 z-coordinate of the first point\n * @param x2 x-coordinate of the second point\n * @param y2 y-coordinate of the second point\n * @param z2 z-coordinate of the second point\n * @return distance between the two points\n /\n dist(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): number;\n\n /\n Returns Euler's number e (2.71828...) raised to\n * the power of the n parameter. Maps to Math.exp().\n * @param n exponent to raise\n * @return e^n\n /\n exp(n: number): number;\n\n /\n Calculates the closest int value that is less than\n * or equal to the value of the parameter. Maps to\n * Math.floor().\n * @param n number to round down\n * @return rounded down number\n /\n floor(n: number): number;\n\n /\n Calculates a number between two numbers at a\n * specific increment. The amt parameter is the\n * amount to interpolate between the two values where\n * 0.0 is equal to the first point, 0.1 is very near\n * the first point, 0.5 is half-way in between, and\n * 1.0 is equal to the second point. If the value of\n * amt is more than 1.0 or less than 0.0, the number\n * will be calculated accordingly in the ratio of the\n * two given numbers. The lerp() function is\n * convenient for creating motion along a straight\n * path and for drawing dotted lines.\n * @param start first value\n * @param stop second value\n * @param amt number\n * @return lerped value\n /\n lerp(start: number, stop: number, amt: number): number;\n\n /\n Calculates the natural logarithm (the base-e\n * logarithm) of a number. This function expects the\n * n parameter to be a value greater than 0.0. Maps\n * to Math.log().\n * @param n number greater than 0\n * @return natural logarithm of n\n /\n log(n: number): number;\n\n /\n Calculates the magnitude (or length) of a vector.\n * A vector is a direction in space commonly used in\n * computer graphics and linear algebra. Because it\n * has no \"start\" position, the magnitude of a vector\n * can be thought of as the distance from the\n * coordinate 0,0 to its x,y value. Therefore, mag()\n * is a shortcut for writing dist(0, 0, x, y).\n * @param a first value\n * @param b second value\n * @return magnitude of vector from (0,0) to (a,b)\n /\n mag(a: number, b: number): number;\n\n /\n Re-maps a number from one range to another. In the\n * first example above, the number 25 is converted\n * from a value in the range of 0 to 100 into a value\n * that ranges from the left edge of the window (0)\n * to the right edge (width).\n * @param value the incoming value to be converted\n * @param start1 lower bound of the value's current\n * range\n * @param stop1 upper bound of the value's current\n * range\n * @param start2 lower bound of the value's target\n * range\n * @param stop2 upper bound of the value's target\n * range\n * @param [withinBounds] constrain the value to the\n * newly mapped range\n * @return remapped number\n /\n map(\n value: number,\n start1: number,\n stop1: number,\n start2: number,\n stop2: number,\n withinBounds?: boolean\n ): number;\n\n /\n Determines the largest value in a sequence of\n * numbers, and then returns that value. max()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param n0 Number to compare\n * @param n1 Number to compare\n * @return maximum Number\n /\n max(n0: number, n1: number): number;\n\n /\n Determines the largest value in a sequence of\n * numbers, and then returns that value. max()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param nums Numbers to compare\n /\n max(nums: number[]): number;\n\n /\n Determines the smallest value in a sequence of\n * numbers, and then returns that value. min()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param n0 Number to compare\n * @param n1 Number to compare\n * @return minimum Number\n /\n min(n0: number, n1: number): number;\n\n /\n Determines the smallest value in a sequence of\n * numbers, and then returns that value. min()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param nums Numbers to compare\n /\n min(nums: number[]): number;\n\n /\n Normalizes a number from another range into a\n * value between 0 and 1. Identical to map(value,\n * low, high, 0, 1). Numbers outside of the range are\n * not clamped to 0 and 1, because out-of-range\n * values are often intentional and useful. (See the\n * example above.)\n * @param value incoming value to be normalized\n * @param start lower bound of the value's current\n * range\n * @param stop upper bound of the value's current\n * range\n * @return normalized number\n /\n norm(value: number, start: number, stop: number): number;\n\n /\n Facilitates exponential expressions. The pow()\n * function is an efficient way of multiplying\n * numbers by themselves (or their reciprocals) in\n * large quantities. For example, pow(3, 5) is\n * equivalent to the expression 3 × 3 × 3 × 3 × 3 and\n * pow(3, -5) is equivalent to 1 / 3 × 3 × 3 × 3 × 3.\n * Maps to Math.pow().\n * @param n base of the exponential expression\n * @param e power by which to raise the base\n * @return n^e\n /\n pow(n: number, e: number): number;\n\n /\n Calculates the integer closest to the n parameter.\n * For example, round(133.8) returns the value 134.\n * Maps to Math.round().\n * @param n number to round\n * @param [decimals] number of decimal places to\n * round to, default is 0\n * @return rounded number\n /\n round(n: number, decimals?: number): number;\n\n /\n Squares a number (multiplies a number by itself).\n * The result is always a positive number, as\n * multiplying two negative numbers always yields a\n * positive result. For example, -1 * -1 = 1.\n * @param n number to square\n * @return squared number\n /\n sq(n: number): number;\n\n /\n Calculates the square root of a number. The square\n * root of a number is always positive, even though\n * there may be a valid negative root. The square\n * root s of number a is such that ss = a. It is the\n opposite of squaring. Maps to Math.sqrt().\n * @param n non-negative number to square root\n * @return square root of number\n /\n sqrt(n: number): number;\n\n /\n Calculates the fractional part of a number.\n * @param num Number whose fractional part needs to\n * be found out\n * @return fractional part of x, i.e, {x}\n /\n fract(num: number): number;\n\n/\n Creates a new p5.Vector (the datatype for storing\n * vectors). This provides a two or three-dimensional\n * vector, specifically a Euclidean (also known as\n * geometric) vector. A vector is an entity that has\n * both magnitude and direction.\n * @param [x] x component of the vector\n * @param [y] y component of the vector\n * @param [z] z component of the vector\n /\n createVector(x?: number, y?: number, z?: number): Vector;\n\n/\n Returns the Perlin noise value at specified\n * coordinates. Perlin noise is a random sequence\n * generator producing a more naturally ordered,\n * harmonic succession of numbers compared to the\n * standard random() function. It was invented by Ken\n * Perlin in the 1980s and been used since in\n * graphical applications to produce procedural\n * textures, natural motion, shapes, terrains etc.\n * The main difference to the random() function is\n * that Perlin noise is defined in an infinite\n * n-dimensional space where each pair of coordinates\n * corresponds to a fixed semi-random value (fixed\n * only for the lifespan of the program; see the\n * noiseSeed() function). p5.js can compute 1D, 2D\n * and 3D noise, depending on the number of\n * coordinates given. The resulting value will always\n * be between 0.0 and 1.0. The noise value can be\n * animated by moving through the noise space as\n * demonstrated in the example above. The 2nd and 3rd\n * dimensions can also be interpreted as time.\n \n The actual noise is structured similar to an audio\n * signal, in respect to the function's use of\n * frequencies. Similar to the concept of harmonics\n * in physics, Perlin noise is computed over several\n * octaves which are added together for the final\n * result.\n \n Another way to adjust the character of the\n * resulting sequence is the scale of the input\n * coordinates. As the function works within an\n * infinite space the value of the coordinates\n * doesn't matter as such, only the distance between\n * successive coordinates does (eg. when using\n * noise() within a loop). As a general rule the\n * smaller the difference between coordinates, the\n * smoother the resulting noise sequence will be.\n * Steps of 0.005-0.03 work best for most\n * applications, but this will differ depending on\n * use.\n * @param x x-coordinate in noise space\n * @param [y] y-coordinate in noise space\n * @param [z] z-coordinate in noise space\n * @return Perlin noise value (between 0 and 1) at\n * specified coordinates\n /\n noise(x: number, y?: number, z?: number): number;\n\n /\n Adjusts the character and level of detail produced\n * by the Perlin noise function. Similar to harmonics\n * in physics, noise is computed over several\n * octaves. Lower octaves contribute more to the\n * output signal and as such define the overall\n * intensity of the noise, whereas higher octaves\n * create finer-grained details in the noise\n * sequence. By default, noise is computed over 4\n * octaves with each octave contributing exactly half\n * as much as its predecessor, starting at 50%\n * strength for the 1st octave. This falloff amount\n * can be changed by adding an additional function\n * parameter. Eg. a falloff factor of 0.75 means each\n * octave will now have 75% impact (25% less) of the\n * previous lower octave. Any value between 0.0 and\n * 1.0 is valid, however, note that values greater\n * than 0.5 might result in greater than 1.0 values\n * returned by noise(). By changing these parameters,\n * the signal created by the noise() function can be\n * adapted to fit very specific needs and\n * characteristics.\n * @param lod number of octaves to be used by the\n * noise\n * @param falloff falloff factor for each octave\n /\n noiseDetail(lod: number, falloff: number): void;\n\n /\n Sets the seed value for noise(). By default,\n * noise() produces different results each time the\n * program is run. Set the seed parameter to a\n * constant to return the same pseudo-random numbers\n * each time the software is run.\n * @param seed the seed value\n /\n noiseSeed(seed: number): void;\n\n/\n Sets the seed value for random(). By default,\n * random() produces different results each time the\n * program is run. Set the seed parameter to a\n * constant to return the same pseudo-random numbers\n * each time the software is run.\n * @param seed the seed value\n /\n randomSeed(seed: number): void;\n\n /\n Return a random floating-point number. Takes\n * either 0, 1 or 2 arguments.\n \n If no argument is given, returns a random number\n * from 0 up to (but not including) 1.\n \n If one argument is given and it is a number,\n * returns a random number from 0 up to (but not\n * including) the number.\n \n If one argument is given and it is an array,\n * returns a random element from that array.\n \n If two arguments are given, returns a random\n * number from the first argument up to (but not\n * including) the second argument.\n * @param [min] the lower bound (inclusive)\n * @param [max] the upper bound (exclusive)\n * @return the random number\n /\n random(min?: number, max?: number): number;\n\n /\n Return a random floating-point number. Takes\n * either 0, 1 or 2 arguments.\n \n If no argument is given, returns a random number\n * from 0 up to (but not including) 1.\n \n If one argument is given and it is a number,\n * returns a random number from 0 up to (but not\n * including) the number.\n \n If one argument is given and it is an array,\n * returns a random element from that array.\n \n If two arguments are given, returns a random\n * number from the first argument up to (but not\n * including) the second argument.\n * @param choices the array to choose from\n * @return the random element from the array\n /\n random(choices: any[]): any;\n\n /\n Returns a random number fitting a Gaussian, or\n * normal, distribution. There is theoretically no\n * minimum or maximum value that randomGaussian()\n * might return. Rather, there is just a very low\n * probability that values far from the mean will be\n * returned; and a higher probability that numbers\n * near the mean will be returned. Takes either 0, 1\n * or 2 arguments. If no args, the mean is 0 and the\n * standard deviation is 1.\n \n If one arg, that arg is the mean and the standard\n * deviation is 1.\n \n If two args, the first arg is the mean and the\n * second is the standard deviation.\n * @param [mean] the mean\n * @param [sd] the standard deviation\n * @return the random number\n /\n randomGaussian(mean?: number, sd?: number): number;\n\n/\n The inverse of cos(), returns the arc cosine of a\n * value. This function expects the values in the\n * range of -1 to 1 and values are returned in the\n * range 0 to PI (3.1415927) if the angleMode() is\n * RADIANS or 0 to 180 if the angleMode() is DEGREES.\n * @param value the value whose arc cosine is to be\n * returned\n * @return the arc cosine of the given value\n /\n acos(value: number): number;\n\n /\n The inverse of sin(), returns the arc sine of a\n * value. This function expects the values in the\n * range of -1 to 1 and values are returned in the\n * range -PI/2 to PI/2 if the angleMode is RADIANS or\n * -90 to 90 if the angle mode is DEGREES.\n * @param value the value whose arc sine is to be\n * returned\n * @return the arc sine of the given value\n /\n asin(value: number): number;\n\n /\n The inverse of tan(), returns the arc tangent of a\n * value. This function expects the values in the\n * range of -Infinity to Infinity (exclusive) and\n * values are returned in the range -PI/2 to PI/2 if\n * the angleMode is RADIANS or -90 to 90 if the angle\n * mode is DEGREES.\n * @param value the value whose arc tangent is to be\n * returned\n * @return the arc tangent of the given value\n /\n atan(value: number): number;\n\n /\n Calculates the angle (in radians) from a specified\n * point to the coordinate origin as measured from\n * the positive x-axis. Values are returned as a\n * float in the range from PI to -PI if the\n * angleMode() is RADIANS or 180 to -180 if the\n * angleMode() is DEGREES. The atan2() function is\n * most often used for orienting geometry to the\n * position of the cursor. Note: The y-coordinate of\n * the point is the first parameter, and the\n * x-coordinate is the second parameter, due to the\n * structure of calculating the tangent.\n * @param y y-coordinate of the point\n * @param x x-coordinate of the point\n * @return the arc tangent of the given point\n /\n atan2(y: number, x: number): number;\n\n /\n Calculates the cosine of an angle. This function\n * takes into account the current angleMode. Values\n * are returned in the range -1 to 1.\n * @param angle the angle\n * @return the cosine of the angle\n /\n cos(angle: number): number;\n\n /\n Calculates the sine of an angle. This function\n * takes into account the current angleMode. Values\n * are returned in the range -1 to 1.\n * @param angle the angle\n * @return the sine of the angle\n /\n sin(angle: number): number;\n\n /\n Calculates the tangent of an angle. This function\n * takes into account the current angleMode. Values\n * are returned in the range of all real numbers.\n * @param angle the angle\n * @return the tangent of the angle\n /\n tan(angle: number): number;\n\n /\n Converts a radian measurement to its corresponding\n * value in degrees. Radians and degrees are two ways\n * of measuring the same thing. There are 360 degrees\n * in a circle and 2PI radians in a circle. For\n example, 90° = PI/2 = 1.5707964. This function\n * does not take into account the current\n * angleMode().\n * @param radians the radians value to convert to\n * degrees\n * @return the converted angle\n /\n degrees(radians: number): number;\n\n /\n Converts a degree measurement to its corresponding\n * value in radians. Radians and degrees are two ways\n * of measuring the same thing. There are 360 degrees\n * in a circle and 2PI radians in a circle. For\n example, 90° = PI/2 = 1.5707964. This function\n * does not take into account the current angleMode.\n * @param degrees the degree value to convert to\n * radians\n * @return the converted angle\n /\n radians(degrees: number): number;\n\n /\n Sets the current mode of p5 to the given mode.\n * Default mode is RADIANS. Calling angleMode() with\n * no arguments returns current anglemode.\n * @param mode either RADIANS or DEGREES\n /\n angleMode(mode: ANGLE_MODE): void;\n\n /\n Sets the current mode of p5 to the given mode.\n * Default mode is RADIANS. Calling angleMode() with\n * no arguments returns current anglemode.\n * @return mode either RADIANS or DEGREES\n /\n angleMode(): UNKNOWN_P5_CONSTANT;\n\n/\n Sets the current alignment for drawing text.\n * Accepts two arguments: horizAlign (LEFT, CENTER,\n * or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or\n * BASELINE). The horizAlign parameter is in\n * reference to the x value of the text() function,\n * while the vertAlign parameter is in reference to\n * the y value.\n \n So if you write textAlign(LEFT), you are aligning\n * the left edge of your text to the x value you give\n * in text(). If you write textAlign(RIGHT, TOP), you\n * are aligning the right edge of your text to the x\n * value and the top edge of the text to the y value.\n * @param horizAlign horizontal alignment, either\n * LEFT, CENTER, or RIGHT\n * @param [vertAlign] vertical alignment, either TOP,\n * BOTTOM, CENTER, or BASELINE\n * @chainable\n /\n textAlign(horizAlign: HORIZ_ALIGN, vertAlign?: VERT_ALIGN): p5;\n\n /\n Sets the current alignment for drawing text.\n * Accepts two arguments: horizAlign (LEFT, CENTER,\n * or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or\n * BASELINE). The horizAlign parameter is in\n * reference to the x value of the text() function,\n * while the vertAlign parameter is in reference to\n * the y value.\n \n So if you write textAlign(LEFT), you are aligning\n * the left edge of your text to the x value you give\n * in text(). If you write textAlign(RIGHT, TOP), you\n * are aligning the right edge of your text to the x\n * value and the top edge of the text to the y value.\n /\n textAlign(): object;\n\n /\n Sets/gets the spacing, in pixels, between lines of\n * text. This setting will be used in all subsequent\n * calls to the text() function.\n * @param leading the size in pixels for spacing\n * between lines\n * @chainable\n /\n textLeading(leading: number): p5;\n\n /\n Sets/gets the spacing, in pixels, between lines of\n * text. This setting will be used in all subsequent\n * calls to the text() function.\n /\n textLeading(): number;\n\n /\n Sets/gets the current font size. This size will be\n * used in all subsequent calls to the text()\n * function. Font size is measured in pixels.\n * @param theSize the size of the letters in units of\n * pixels\n * @chainable\n /\n textSize(theSize: number): p5;\n\n /\n Sets/gets the current font size. This size will be\n * used in all subsequent calls to the text()\n * function. Font size is measured in pixels.\n /\n textSize(): number;\n\n /\n Sets/gets the style of the text for system fonts\n * to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this\n * may be is overridden by CSS styling. For\n * non-system fonts (opentype, truetype, etc.) please\n * load styled fonts instead.\n * @param theStyle styling for text, either NORMAL,\n * ITALIC, BOLD or BOLDITALIC\n * @chainable\n /\n textStyle(theStyle: THE_STYLE): p5;\n\n /\n Sets/gets the style of the text for system fonts\n * to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this\n * may be is overridden by CSS styling. For\n * non-system fonts (opentype, truetype, etc.) please\n * load styled fonts instead.\n /\n textStyle(): string;\n\n /\n Calculates and returns the width of any character\n * or text string.\n * @param theText the String of characters to measure\n * @return the calculated width\n /\n textWidth(theText: string): number;\n\n /\n Returns the ascent of the current font at its\n * current size. The ascent represents the distance,\n * in pixels, of the tallest character above the\n * baseline.\n /\n textAscent(): number;\n\n /\n Returns the descent of the current font at its\n * current size. The descent represents the distance,\n * in pixels, of the character with the longest\n * descender below the baseline.\n /\n textDescent(): number;\n\n /\n Specifies how lines of text are wrapped within a\n * text box. This requires a max-width set on the\n * text area, specified in text() as parameter x2.\n * WORD wrap style only breaks lines at spaces. A\n * single string without spaces that exceeds the\n * boundaries of the canvas or text area is not\n * truncated, and will overflow the desired area,\n * disappearing at the canvas edge.\n \n CHAR wrap style breaks lines wherever needed to\n * stay within the text box.\n \n WORD is the default wrap style, and both styles\n * will still break lines at any line breaks (\\n)\n * specified in the original text. The text area\n * max-height parameter (y2) also still applies to\n * wrapped text in both styles, lines of text that do\n * not fit within the text area will not be drawn to\n * the screen.\n * @param wrapStyle text wrapping style, either WORD\n * or CHAR\n * @return wrapStyle\n /\n textWrap(wrapStyle: WRAP_STYLE): string;\n\n/\n Loads an opentype font file (.otf, .ttf) from a\n * file or a URL, and returns a p5.Font object. This\n * function is asynchronous, meaning it may not\n * finish before the next line in your sketch is\n * executed. The path to the font should be relative\n * to the HTML file that links in your sketch.\n * Loading fonts from a URL or other remote location\n * may be blocked due to your browser's built-in\n * security.\n * @param path name of the file or url to load\n * @param [callback] function to be executed after\n * loadFont() completes\n * @param [onError] function to be executed if an\n * error occurs\n * @return p5.Font object\n /\n loadFont(path: string, callback?: (...args: any[]) => any, onError?: (...args: any[]) => any): Font;\n\n /\n Draws text to the screen. Displays the information\n * specified in the first parameter on the screen in\n * the position specified by the additional\n * parameters. A default font will be used unless a\n * font is set with the textFont() function and a\n * default size will be used unless a font is set\n * with textSize(). Change the color of the text with\n * the fill() function. Change the outline of the\n * text with the stroke() and strokeWeight()\n * functions. The text displays in relation to the\n * textAlign() function, which gives the option to\n * draw to the left, right, and center of the\n * coordinates.\n \n The x2 and y2 parameters define a rectangular area\n * to display within and may only be used with string\n * data. When these parameters are specified, they\n * are interpreted based on the current rectMode()\n * setting. Text that does not fit completely within\n * the rectangle specified will not be drawn to the\n * screen. If x2 and y2 are not specified, the\n * baseline alignment is the default, which means\n * that the text will be drawn upwards from x and y.\n \n WEBGL: Only opentype/truetype fonts are supported.\n * You must load a font using the loadFont() method\n * (see the example above). stroke() currently has no\n * effect in webgl mode. Learn more about working\n * with text in webgl mode on the wiki.\n * @param str the alphanumeric symbols to be\n * displayed\n * @param x x-coordinate of text\n * @param y y-coordinate of text\n * @param [x2] by default, the width of the text box,\n * see rectMode() for more info\n * @param [y2] by default, the height of the text\n * box, see rectMode() for more info\n * @chainable\n /\n text(str: string \| object \| any[] \| number \| boolean, x: number, y: number, x2?: number, y2?: number): p5;\n\n /\n Sets the current font that will be drawn with the\n * text() function. If textFont() is called without\n * any argument, it will return the current font if\n * one has been set already. If not, it will return\n * the name of the default font as a string. If\n * textFont() is called with a font to use, it will\n * return the p5 object. WEBGL: Only fonts loaded via\n * loadFont() are supported.\n * @return the current font / p5 Object\n /\n textFont(): object;\n\n /\n Sets the current font that will be drawn with the\n * text() function. If textFont() is called without\n * any argument, it will return the current font if\n * one has been set already. If not, it will return\n * the name of the default font as a string. If\n * textFont() is called with a font to use, it will\n * return the p5 object. WEBGL: Only fonts loaded via\n * loadFont() are supported.\n * @param font a font loaded via loadFont(), or a\n * String representing a web safe font (a font that\n * is generally available across all systems)\n * @param [size] the font size to use\n * @chainable\n /\n textFont(font: object \| string, size?: number): p5;\n\n/\n Adds a value to the end of an array. Extends the\n * length of the array by one. Maps to Array.push().\n * @param array Array to append\n * @param value to be added to the Array\n * @return the array that was appended to\n /\n append(array: any[], value: any): any[];\n\n /\n Copies an array (or part of an array) to another\n * array. The src array is copied to the dst array,\n * beginning at the position specified by srcPosition\n * and into the position specified by dstPosition.\n * The number of elements to copy is determined by\n * length. Note that copying values overwrites\n * existing values in the destination array. To\n * append values instead of overwriting them, use\n * concat(). The simplified version with only two\n * arguments, arrayCopy(src, dst), copies an entire\n * array to another of the same size. It is\n * equivalent to arrayCopy(src, 0, dst, 0,\n * src.length).\n \n Using this function is far more efficient for\n * copying array data than iterating through a for()\n * loop and copying each element individually.\n * @param src the source Array\n * @param srcPosition starting position in the source\n * Array\n * @param dst the destination Array\n * @param dstPosition starting position in the\n * destination Array\n * @param length number of Array elements to be\n * copied\n /\n arrayCopy(src: any[], srcPosition: number, dst: any[], dstPosition: number, length: number): void;\n\n /\n Copies an array (or part of an array) to another\n * array. The src array is copied to the dst array,\n * beginning at the position specified by srcPosition\n * and into the position specified by dstPosition.\n * The number of elements to copy is determined by\n * length. Note that copying values overwrites\n * existing values in the destination array. To\n * append values instead of overwriting them, use\n * concat(). The simplified version with only two\n * arguments, arrayCopy(src, dst), copies an entire\n * array to another of the same size. It is\n * equivalent to arrayCopy(src, 0, dst, 0,\n * src.length).\n \n Using this function is far more efficient for\n * copying array data than iterating through a for()\n * loop and copying each element individually.\n * @param src the source Array\n * @param dst the destination Array\n * @param [length] number of Array elements to be\n * copied\n /\n arrayCopy(src: any[], dst: any[], length?: number): void;\n\n /\n Concatenates two arrays, maps to Array.concat().\n * Does not modify the input arrays.\n * @param a first Array to concatenate\n * @param b second Array to concatenate\n * @return concatenated array\n /\n concat(a: any[], b: any[]): any[];\n\n /\n Reverses the order of an array, maps to\n * Array.reverse()\n * @param list Array to reverse\n * @return the reversed list\n /\n reverse(list: any[]): any[];\n\n /\n Decreases an array by one element and returns the\n * shortened array, maps to Array.pop().\n * @param list Array to shorten\n * @return shortened Array\n /\n shorten(list: any[]): any[];\n\n /\n Randomizes the order of the elements of an array.\n * Implements Fisher-Yates Shuffle Algorithm.\n * @param array Array to shuffle\n * @param [bool] modify passed array\n * @return shuffled Array\n /\n shuffle(array: any[], bool?: boolean): any[];\n\n /\n Sorts an array of numbers from smallest to\n * largest, or puts an array of words in alphabetical\n * order. The original array is not modified; a\n * re-ordered array is returned. The count parameter\n * states the number of elements to sort. For\n * example, if there are 12 elements in an array and\n * count is set to 5, only the first 5 elements in\n * the array will be sorted.\n * @param list Array to sort\n * @param [count] number of elements to sort,\n * starting from 0\n * @return the sorted list\n /\n sort(list: any[], count?: number): any[];\n\n /\n Inserts a value or an array of values into an\n * existing array. The first parameter specifies the\n * initial array to be modified, and the second\n * parameter defines the data to be inserted. The\n * third parameter is an index value which specifies\n * the array position from which to insert data.\n * (Remember that array index numbering starts at\n * zero, so the first position is 0, the second\n * position is 1, and so on.)\n * @param list Array to splice into\n * @param value value to be spliced in\n * @param position in the array from which to insert\n * data\n * @return the list\n /\n splice(list: any[], value: any, position: number): any[];\n\n /\n Extracts an array of elements from an existing\n * array. The list parameter defines the array from\n * which the elements will be copied, and the start\n * and count parameters specify which elements to\n * extract. If no count is given, elements will be\n * extracted from the start to the end of the array.\n * When specifying the start, remember that the first\n * array element is 0. This function does not change\n * the source array.\n * @param list Array to extract from\n * @param start position to begin\n * @param [count] number of values to extract\n * @return Array of extracted elements\n /\n subset(list: any[], start: number, count?: number): any[];\n\n/\n Converts a string to its floating point\n * representation. The contents of a string must\n * resemble a number, or NaN (not a number) will be\n * returned. For example, float(\"1234.56\") evaluates\n * to 1234.56, but float(\"giraffe\") will return NaN.\n * When an array of values is passed in, then an\n * array of floats of the same length is returned.\n * @param str float string to parse\n * @return floating point representation of string\n /\n float(str: string): number;\n\n /\n Converts a boolean, string, or float to its\n * integer representation. When an array of values is\n * passed in, then an int array of the same length is\n * returned.\n * @param n value to parse\n * @param [radix] the radix to convert to (default:\n * 10)\n * @return integer representation of value\n /\n int(n: string \| boolean \| number, radix?: number): number;\n\n /\n Converts a boolean, string, or float to its\n * integer representation. When an array of values is\n * passed in, then an int array of the same length is\n * returned.\n * @param ns values to parse\n * @param [radix] the radix to convert to (default:\n * 10)\n * @return integer representation of values\n /\n int(ns: any[], radix?: number): number[];\n\n /\n Converts a boolean, string or number to its string\n * representation. When an array of values is passed\n * in, then an array of strings of the same length is\n * returned.\n * @param n value to parse\n * @return string representation of value\n /\n str(n: string \| boolean \| number \| any[]): string;\n\n /\n Converts a number or string to its boolean\n * representation. For a number, any non-zero value\n * (positive or negative) evaluates to true, while\n * zero evaluates to false. For a string, the value\n * \"true\" evaluates to true, while any other value\n * evaluates to false. When an array of number or\n * string values is passed in, then a array of\n * booleans of the same length is returned.\n * @param n value to parse\n * @return boolean representation of value\n /\n boolean(n: string \| boolean \| number \| any[]): boolean;\n\n /\n Converts a number, string representation of a\n * number, or boolean to its byte representation. A\n * byte can be only a whole number between -128 and\n * 127, so when a value outside of this range is\n * converted, it wraps around to the corresponding\n * byte representation. When an array of number,\n * string or boolean values is passed in, then an\n * array of bytes the same length is returned.\n * @param n value to parse\n * @return byte representation of value\n /\n byte(n: string \| boolean \| number): number;\n\n /\n Converts a number, string representation of a\n * number, or boolean to its byte representation. A\n * byte can be only a whole number between -128 and\n * 127, so when a value outside of this range is\n * converted, it wraps around to the corresponding\n * byte representation. When an array of number,\n * string or boolean values is passed in, then an\n * array of bytes the same length is returned.\n * @param ns values to parse\n * @return array of byte representation of values\n /\n byte(ns: any[]): number[];\n\n /\n Converts a number or string to its corresponding\n * single-character string representation. If a\n * string parameter is provided, it is first parsed\n * as an integer and then translated into a\n * single-character string. When an array of number\n * or string values is passed in, then an array of\n * single-character strings of the same length is\n * returned.\n * @param n value to parse\n * @return string representation of value\n /\n char(n: string \| number): string;\n\n /\n Converts a number or string to its corresponding\n * single-character string representation. If a\n * string parameter is provided, it is first parsed\n * as an integer and then translated into a\n * single-character string. When an array of number\n * or string values is passed in, then an array of\n * single-character strings of the same length is\n * returned.\n * @param ns values to parse\n * @return array of string representation of values\n /\n char(ns: any[]): string[];\n\n /\n Converts a single-character string to its\n * corresponding integer representation. When an\n * array of single-character string values is passed\n * in, then an array of integers of the same length\n * is returned.\n * @param n value to parse\n * @return integer representation of value\n /\n unchar(n: string): number;\n\n /\n Converts a single-character string to its\n * corresponding integer representation. When an\n * array of single-character string values is passed\n * in, then an array of integers of the same length\n * is returned.\n * @param ns values to parse\n * @return integer representation of values\n /\n unchar(ns: any[]): number[];\n\n /\n Converts a number to a string in its equivalent\n * hexadecimal notation. If a second parameter is\n * passed, it is used to set the number of characters\n * to generate in the hexadecimal notation. When an\n * array is passed in, an array of strings in\n * hexadecimal notation of the same length is\n * returned.\n * @param n value to parse\n * @return hexadecimal string representation of value\n /\n hex(n: number, digits?: number): string;\n\n /\n Converts a number to a string in its equivalent\n * hexadecimal notation. If a second parameter is\n * passed, it is used to set the number of characters\n * to generate in the hexadecimal notation. When an\n * array is passed in, an array of strings in\n * hexadecimal notation of the same length is\n * returned.\n * @param ns array of values to parse\n * @return hexadecimal string representation of\n * values\n /\n hex(ns: number[], digits?: number): string[];\n\n /\n Converts a string representation of a hexadecimal\n * number to its equivalent integer value. When an\n * array of strings in hexadecimal notation is passed\n * in, an array of integers of the same length is\n * returned.\n * @param n value to parse\n * @return integer representation of hexadecimal\n * value\n /\n unhex(n: string): number;\n\n /\n Converts a string representation of a hexadecimal\n * number to its equivalent integer value. When an\n * array of strings in hexadecimal notation is passed\n * in, an array of integers of the same length is\n * returned.\n * @param ns values to parse\n * @return integer representations of hexadecimal\n * value\n /\n unhex(ns: any[]): number[];\n\n/\n Combines an array of Strings into one String, each\n * separated by the character(s) used for the\n * separator parameter. To join arrays of ints or\n * floats, it's necessary to first convert them to\n * Strings using nf() or nfs().\n * @param list array of Strings to be joined\n * @param separator String to be placed between each\n * item\n * @return joined String\n /\n join(list: any[], separator: string): string;\n\n /\n This function is used to apply a regular\n * expression to a piece of text, and return matching\n * groups (elements found inside parentheses) as a\n * String array. If there are no matches, a null\n * value will be returned. If no groups are specified\n * in the regular expression, but the sequence\n * matches, an array of length 1 (with the matched\n * text as the first element of the array) will be\n * returned. To use the function, first check to see\n * if the result is null. If the result is null, then\n * the sequence did not match at all. If the sequence\n * did match, an array is returned.\n \n If there are groups (specified by sets of\n * parentheses) in the regular expression, then the\n * contents of each will be returned in the array.\n * Element [0] of a regular expression match returns\n * the entire matching string, and the match groups\n * start at element [1] (the first group is [1], the\n * second [2], and so on).\n * @param str the String to be searched\n * @param regexp the regexp to be used for matching\n * @return Array of Strings found\n /\n match(str: string, regexp: string): string[];\n\n /\n This function is used to apply a regular\n * expression to a piece of text, and return a list\n * of matching groups (elements found inside\n * parentheses) as a two-dimensional String array. If\n * there are no matches, a null value will be\n * returned. If no groups are specified in the\n * regular expression, but the sequence matches, a\n * two dimensional array is still returned, but the\n * second dimension is only of length one. To use the\n * function, first check to see if the result is\n * null. If the result is null, then the sequence did\n * not match at all. If the sequence did match, a 2D\n * array is returned.\n \n If there are groups (specified by sets of\n * parentheses) in the regular expression, then the\n * contents of each will be returned in the array.\n * Assuming a loop with counter variable i, element\n * [i][0] of a regular expression match returns the\n * entire matching string, and the match groups start\n * at element [i][1] (the first group is [i][1], the\n * second [i][2], and so on).\n * @param str the String to be searched\n * @param regexp the regexp to be used for matching\n * @return 2d Array of Strings found\n /\n matchAll(str: string, regexp: string): string[];\n\n /\n Utility function for formatting numbers into\n * strings. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param num the Number to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nf(num: number \| string, left?: number \| string, right?: number \| string): string;\n\n /\n Utility function for formatting numbers into\n * strings. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param nums the Numbers to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nf(nums: any[], left?: number \| string, right?: number \| string): string[];\n\n /\n Utility function for formatting numbers into\n * strings and placing appropriate commas to mark\n * units of 1000. There are two versions: one for\n * formatting ints, and one for formatting an array\n * of ints. The value for the right parameter should\n * always be a positive integer.\n * @param num the Number to format\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nfc(num: number \| string, right?: number \| string): string;\n\n /\n Utility function for formatting numbers into\n * strings and placing appropriate commas to mark\n * units of 1000. There are two versions: one for\n * formatting ints, and one for formatting an array\n * of ints. The value for the right parameter should\n * always be a positive integer.\n * @param nums the Numbers to format\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nfc(nums: any[], right?: number \| string): string[];\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts a \"+\" in front\n * of positive numbers and a \"-\" in front of negative\n * numbers. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for left, and right parameters should\n * always be positive integers.\n * @param num the Number to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nfp(num: number, left?: number, right?: number): string;\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts a \"+\" in front\n * of positive numbers and a \"-\" in front of negative\n * numbers. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for left, and right parameters should\n * always be positive integers.\n * @param nums the Numbers to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nfp(nums: number[], left?: number, right?: number): string[];\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts an additional\n * \"_\" (space) in front of positive numbers just in\n * case to align it with negative numbers which\n * includes \"-\" (minus) sign. The main usecase of\n * nfs() can be seen when one wants to align the\n * digits (place values) of a non-negative number\n * with some negative number (See the example to get\n * a clear picture). There are two versions: one for\n * formatting float, and one for formatting int.\n \n The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (IMP): The result on the canvas basically the\n * expected alignment can vary based on the typeface\n * you are using.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param num the Number to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nfs(num: number, left?: number, right?: number): string;\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts an additional\n * \"_\" (space) in front of positive numbers just in\n * case to align it with negative numbers which\n * includes \"-\" (minus) sign. The main usecase of\n * nfs() can be seen when one wants to align the\n * digits (place values) of a non-negative number\n * with some negative number (See the example to get\n * a clear picture). There are two versions: one for\n * formatting float, and one for formatting int.\n \n The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (IMP): The result on the canvas basically the\n * expected alignment can vary based on the typeface\n * you are using.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param nums the Numbers to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nfs(nums: any[], left?: number, right?: number): string[];\n\n /\n The split() function maps to String.split(), it\n * breaks a String into pieces using a character or\n * string as the delimiter. The delim parameter\n * specifies the character or characters that mark\n * the boundaries between each piece. A String[]\n * array is returned that contains each of the\n * pieces. The splitTokens() function works in a\n * similar fashion, except that it splits using a\n * range of characters instead of a specific\n * character or sequence.\n * @param value the String to be split\n * @param delim the String used to separate the data\n * @return Array of Strings\n /\n split(value: string, delim: string): string[];\n\n /\n The splitTokens() function splits a String at one\n * or many character delimiters or \"tokens.\" The\n * delim parameter specifies the character or\n * characters to be used as a boundary. If no delim\n * characters are specified, any whitespace character\n * is used to split. Whitespace characters include\n * tab (\\t), line feed (\\n), carriage return (\\r),\n * form feed (\\f), and space.\n * @param value the String to be split\n * @param [delim] list of individual Strings that\n * will be used as separators\n * @return Array of Strings\n /\n splitTokens(value: string, delim?: string): string[];\n\n /\n Removes whitespace characters from the beginning\n * and end of a String. In addition to standard\n * whitespace characters such as space, carriage\n * return, and tab, this function also removes the\n * Unicode \"nbsp\" character.\n * @param str a String to be trimmed\n * @return a trimmed String\n /\n trim(str: string): string;\n\n /\n Removes whitespace characters from the beginning\n * and end of a String. In addition to standard\n * whitespace characters such as space, carriage\n * return, and tab, this function also removes the\n * Unicode \"nbsp\" character.\n * @param strs an Array of Strings to be trimmed\n * @return an Array of trimmed Strings\n /\n trim(strs: any[]): string[];\n\n/\n p5.js communicates with the clock on your\n * computer. The day() function returns the current\n * day as a value from 1 - 31.\n * @return the current day\n /\n day(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The hour() function returns the current\n * hour as a value from 0 - 23.\n * @return the current hour\n /\n hour(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The minute() function returns the\n * current minute as a value from 0 - 59.\n * @return the current minute\n /\n minute(): number;\n\n /\n Returns the number of milliseconds (thousandths of\n * a second) since starting the sketch (when setup()\n * is called). This information is often used for\n * timing events and animation sequences.\n * @return the number of milliseconds since starting\n * the sketch\n /\n millis(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The month() function returns the current\n * month as a value from 1 - 12.\n * @return the current month\n /\n month(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The second() function returns the\n * current second as a value from 0 - 59.\n * @return the current second\n /\n second(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The year() function returns the current\n * year as an integer (2014, 2015, 2016, etc).\n * @return the current year\n /\n year(): number;\n\n/\n Draw a plane with given a width and height\n * @param [width] width of the plane\n * @param [height] height of the plane\n * @param [detailX] Optional number of triangle\n * subdivisions in x-dimension\n * @param [detailY] Optional number of triangle\n * subdivisions in y-dimension\n * @chainable\n /\n plane(width?: number, height?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a box with given width, height and depth\n * @param [width] width of the box\n * @param [height] height of the box\n * @param [depth] depth of the box\n * @param [detailX] Optional number of triangle\n * subdivisions in x-dimension\n * @param [detailY] Optional number of triangle\n * subdivisions in y-dimension\n * @chainable\n /\n box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a sphere with given radius. DetailX and\n * detailY determines the number of subdivisions in\n * the x-dimension and the y-dimension of a sphere.\n * More subdivisions make the sphere seem smoother.\n * The recommended maximum values are both 24. Using\n * a value greater than 24 may cause a warning or\n * slow down the browser.\n * @param [radius] radius of circle\n * @param [detailX] optional number of subdivisions\n * in x-dimension\n * @param [detailY] optional number of subdivisions\n * in y-dimension\n * @chainable\n /\n sphere(radius?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a cylinder with given radius and height\n * DetailX and detailY determines the number of\n * subdivisions in the x-dimension and the\n * y-dimension of a cylinder. More subdivisions make\n * the cylinder seem smoother. The recommended\n * maximum value for detailX is 24. Using a value\n * greater than 24 may cause a warning or slow down\n * the browser.\n * @param [radius] radius of the surface\n * @param [height] height of the cylinder\n * @param [detailX] number of subdivisions in\n * x-dimension; default is 24\n * @param [detailY] number of subdivisions in\n * y-dimension; default is 1\n * @param [bottomCap] whether to draw the bottom of\n * the cylinder\n * @param [topCap] whether to draw the top of the\n * cylinder\n * @chainable\n /\n cylinder(\n radius?: number,\n height?: number,\n detailX?: number,\n detailY?: number,\n bottomCap?: boolean,\n topCap?: boolean\n ): p5;\n\n /\n Draw a cone with given radius and height DetailX\n * and detailY determine the number of subdivisions\n * in the x-dimension and the y-dimension of a cone.\n * More subdivisions make the cone seem smoother. The\n * recommended maximum value for detailX is 24. Using\n * a value greater than 24 may cause a warning or\n * slow down the browser.\n * @param [radius] radius of the bottom surface\n * @param [height] height of the cone\n * @param [detailX] number of segments, the more\n * segments the smoother geometry default is 24\n * @param [detailY] number of segments, the more\n * segments the smoother geometry default is 1\n * @param [cap] whether to draw the base of the cone\n * @chainable\n /\n cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): p5;\n\n /\n Draw an ellipsoid with given radius DetailX and\n * detailY determine the number of subdivisions in\n * the x-dimension and the y-dimension of a cone.\n * More subdivisions make the ellipsoid appear to be\n * smoother. Avoid detail number above 150, it may\n * crash the browser.\n * @param [radiusx] x-radius of ellipsoid\n * @param [radiusy] y-radius of ellipsoid\n * @param [radiusz] z-radius of ellipsoid\n * @param [detailX] number of segments, the more\n * segments the smoother geometry default is 24.\n * Avoid detail number above 150, it may crash the\n * browser.\n * @param [detailY] number of segments, the more\n * segments the smoother geometry default is 16.\n * Avoid detail number above 150, it may crash the\n * browser.\n * @chainable\n /\n ellipsoid(radiusx?: number, radiusy?: number, radiusz?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a torus with given radius and tube radius\n * DetailX and detailY determine the number of\n * subdivisions in the x-dimension and the\n * y-dimension of a torus. More subdivisions make the\n * torus appear to be smoother. The default and\n * maximum values for detailX and detailY are 24 and\n * 16, respectively. Setting them to relatively small\n * values like 4 and 6 allows you to create new\n * shapes other than a torus.\n * @param [radius] radius of the whole ring\n * @param [tubeRadius] radius of the tube\n * @param [detailX] number of segments in\n * x-dimension, the more segments the smoother\n * geometry default is 24\n * @param [detailY] number of segments in\n * y-dimension, the more segments the smoother\n * geometry default is 16\n * @chainable\n /\n torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): p5;\n\n/\n Allows movement around a 3D sketch using a mouse\n * or trackpad or touch. Left-clicking and dragging\n * or swipe motion will rotate the camera position\n * about the center of the sketch, right-clicking and\n * dragging or multi-swipe will pan the camera\n * position without rotation, and using the mouse\n * wheel (scrolling) or pinch in/out will move the\n * camera further or closer from the center of the\n * sketch. This function can be called with\n * parameters dictating sensitivity to mouse/touch\n * movement along the X and Y axes. Calling this\n * function without parameters is equivalent to\n * calling orbitControl(1,1). To reverse direction of\n * movement in either axis, enter a negative number\n * for sensitivity.\n * @param [sensitivityX] sensitivity to mouse\n * movement along X axis\n * @param [sensitivityY] sensitivity to mouse\n * movement along Y axis\n * @param [sensitivityZ] sensitivity to scroll\n * movement along Z axis\n * @param [options] An optional object that can\n * contain additional settings, disableTouchActions -\n * Boolean, default value is true. Setting this to\n * true makes mobile interactions smoother by\n * preventing accidental interactions with the page\n * while orbiting. But if you're already doing it via\n * css or want the default touch actions, consider\n * setting it to false. freeRotation - Boolean,\n * default value is false. By default, horizontal\n * movement of the mouse or touch pointer rotates the\n * camera around the y-axis, and vertical movement\n * rotates the camera around the x-axis. But if\n * setting this option to true, the camera always\n * rotates in the direction the pointer is moving.\n * For zoom and move, the behavior is the same\n * regardless of true/false.\n * @chainable\n /\n orbitControl(sensitivityX?: number, sensitivityY?: number, sensitivityZ?: number, options?: object): p5;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n /\n debugMode(): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param mode either GRID or AXES\n /\n debugMode(mode: DEBUG_MODE): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param mode either GRID or AXES\n * @param [gridSize] size of one side of the grid\n * @param [gridDivisions] number of divisions in the\n * grid\n * @param [xOff] X axis offset from origin (0,0,0)\n * @param [yOff] Y axis offset from origin (0,0,0)\n * @param [zOff] Z axis offset from origin (0,0,0)\n /\n debugMode(\n mode: UNKNOWN_P5_CONSTANT,\n gridSize?: number,\n gridDivisions?: number,\n xOff?: number,\n yOff?: number,\n zOff?: number\n ): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param mode either GRID or AXES\n * @param [axesSize] size of axes icon\n * @param [xOff] X axis offset from origin (0,0,0)\n * @param [yOff] Y axis offset from origin (0,0,0)\n * @param [zOff] Z axis offset from origin (0,0,0)\n /\n debugMode(mode: UNKNOWN_P5_CONSTANT, axesSize?: number, xOff?: number, yOff?: number, zOff?: number): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param [gridSize] size of one side of the grid\n * @param [gridDivisions] number of divisions in the\n * grid\n * @param [axesSize] size of axes icon\n /\n debugMode(\n gridSize?: number,\n gridDivisions?: number,\n gridXOff?: number,\n gridYOff?: number,\n gridZOff?: number,\n axesSize?: number,\n axesXOff?: number,\n axesYOff?: number,\n axesZOff?: number\n ): void;\n\n /\n Turns off debugMode() in a 3D sketch.\n /\n noDebugMode(): void;\n\n/\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n ambientLight(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param gray number specifying value between white\n * and black\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n ambientLight(gray: number, alpha?: number): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param value a color string\n * @chainable\n /\n ambientLight(value: string): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param values an array containing the\n * red,green,blue & and alpha components of the color\n * @chainable\n /\n ambientLight(values: number[]): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color\n * @chainable\n /\n ambientLight(color: Color): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @chainable\n /\n specularColor(v1: number, v2: number, v3: number): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param gray number specifying value between white\n * and black\n * @chainable\n /\n specularColor(gray: number): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param value color as a CSS string\n * @chainable\n /\n specularColor(value: string): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param values color as an array containing the\n * red, green, and blue components\n * @chainable\n /\n specularColor(values: number[]): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param color color as a p5.Color\n * @chainable\n /\n specularColor(color: Color): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of direction (inclusive range\n * of -1 to 1)\n * @param y y component of direction (inclusive range\n * of -1 to 1)\n * @param z z component of direction (inclusive range\n * of -1 to 1)\n * @chainable\n /\n directionalLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param direction direction of light as a p5.Vector\n * @chainable\n /\n directionalLight(v1: number, v2: number, v3: number, direction: Vector): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of direction (inclusive range\n * of -1 to 1)\n * @param y y component of direction (inclusive range\n * of -1 to 1)\n * @param z z component of direction (inclusive range\n * of -1 to 1)\n * @chainable\n /\n directionalLight(color: Color \| number[] \| string, x: number, y: number, z: number): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param direction direction of light as a p5.Vector\n * @chainable\n /\n directionalLight(color: Color \| number[] \| string, direction: Vector): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @chainable\n /\n pointLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param position of light as a p5.Vector\n * @chainable\n /\n pointLight(v1: number, v2: number, v3: number, position: Vector): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @chainable\n /\n pointLight(color: Color \| number[] \| string, x: number, y: number, z: number): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param position of light as a p5.Vector\n * @chainable\n /\n pointLight(color: Color \| number[] \| string, position: Vector): p5;\n\n /\n Places an ambient and directional light in the\n * scene. The lights are set to ambientLight(128,\n * 128, 128) and directionalLight(128, 128, 128, 0,\n * 0, -1). Note: lights need to be called (whether\n * directly or indirectly) within draw() to remain\n * persistent in a looping program. Placing them in\n * setup() will cause them to only have an effect the\n * first time through the loop.\n * @chainable\n /\n lights(): p5;\n\n /\n Sets the falloff rate for pointLight() and\n * spotLight(). lightFalloff() affects only the\n * lights which are created after it in the code.\n \n The constant, linear, an quadratic parameters are\n * used to calculate falloff as follows:\n \n d = distance from light position to vertex\n * position\n \n falloff = 1 / (CONSTANT + d * LINEAR + (d * d) \n QUADRATIC)\n * @param constant CONSTANT value for determining\n * falloff\n * @param linear LINEAR value for determining falloff\n * @param quadratic QUADRATIC value for determining\n * falloff\n * @chainable\n /\n lightFalloff(constant: number, linear: number, quadratic: number): p5;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n * @chainable\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n x: number,\n y: number,\n z: number,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): p5;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param position position of light as a p5.Vector\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n position: Vector,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param position position of light as a p5.Vector\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n position: Vector,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n x: number,\n y: number,\n z: number,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param position position of light as a p5.Vector\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n position: Vector,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n x: number,\n y: number,\n z: number,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param position position of light as a p5.Vector\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n position: Vector,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n x: number,\n y: number,\n z: number,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Removes all lights present in a sketch. All\n * subsequent geometry is rendered without lighting\n * (until a new light is created with a call to one\n * of the lighting functions (lights(),\n * ambientLight(), directionalLight(), pointLight(),\n * spotLight()).\n * @chainable\n /\n noLights(): p5;\n\n/\n Load a 3d model from an OBJ or STL file.\n * loadModel() should be placed inside of preload().\n * This allows the model to load fully before the\n * rest of your code is run.\n \n One of the limitations of the OBJ and STL format\n * is that it doesn't have a built-in sense of scale.\n * This means that models exported from different\n * programs might be very different sizes. If your\n * model isn't displaying, try calling loadModel()\n * with the normalized parameter set to true. This\n * will resize the model to a scale appropriate for\n * p5. You can also make additional changes to the\n * final size of your model with the scale()\n * function.\n \n Also, the support for colored STL files is not\n * present. STL files with color will be rendered\n * without color properties.\n * @param path Path of the model to be loaded\n * @param normalize If true, scale the model to a\n * standardized size when loading\n * @param [successCallback] Function to be called\n * once the model is loaded. Will be passed the 3D\n * model object.\n * @param [failureCallback] called with event error\n * if the model fails to load.\n * @param [fileType] The file extension of the model\n * (.stl, .obj).\n * @return the p5.Geometry object\n /\n loadModel(\n path: string,\n normalize: boolean,\n successCallback?: (p1: Geometry) => any,\n failureCallback?: (p1: Event) => any,\n fileType?: string\n ): Geometry;\n\n /\n Load a 3d model from an OBJ or STL file.\n * loadModel() should be placed inside of preload().\n * This allows the model to load fully before the\n * rest of your code is run.\n \n One of the limitations of the OBJ and STL format\n * is that it doesn't have a built-in sense of scale.\n * This means that models exported from different\n * programs might be very different sizes. If your\n * model isn't displaying, try calling loadModel()\n * with the normalized parameter set to true. This\n * will resize the model to a scale appropriate for\n * p5. You can also make additional changes to the\n * final size of your model with the scale()\n * function.\n \n Also, the support for colored STL files is not\n * present. STL files with color will be rendered\n * without color properties.\n * @param path Path of the model to be loaded\n * @param [successCallback] Function to be called\n * once the model is loaded. Will be passed the 3D\n * model object.\n * @param [failureCallback] called with event error\n * if the model fails to load.\n * @param [fileType] The file extension of the model\n * (.stl, .obj).\n * @return the p5.Geometry object\n /\n loadModel(\n path: string,\n successCallback?: (p1: Geometry) => any,\n failureCallback?: (p1: Event) => any,\n fileType?: string\n ): Geometry;\n\n /\n Render a 3d model to the screen.\n * @param model Loaded 3d model to be rendered\n /\n model(model: Geometry): void;\n\n/\n Creates a new p5.Shader object from the provided\n * vertex and fragment shader files. The shader files\n * are loaded asynchronously in the background, so\n * this method should be used in preload().\n \n Note, shaders can only be used in WEBGL mode.\n * @param vertFilename path to file containing vertex\n * shader source code\n * @param fragFilename path to file containing\n * fragment shader source code\n * @param [callback] callback to be executed after\n * loadShader completes. On success, the p5.Shader\n * object is passed as the first argument.\n * @param [errorCallback] callback to be executed\n * when an error occurs inside loadShader. On error,\n * the error is passed as the first argument.\n * @return a shader object created from the provided\n * vertex and fragment shader files.\n /\n loadShader(\n vertFilename: string,\n fragFilename: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Shader;\n\n /\n Creates a new p5.Shader object from the provided\n * vertex and fragment shader code. Note, shaders can\n * only be used in WEBGL mode.\n * @param vertSrc source code for the vertex shader\n * @param fragSrc source code for the fragment shader\n * @return a shader object created from the provided\n * vertex and fragment shaders.\n /\n createShader(vertSrc: string, fragSrc: string): Shader;\n\n /\n Sets the p5.Shader object to be used to render\n * subsequent shapes. Custom shaders can be created\n * using the createShader() and loadShader()\n * functions.\n \n Use resetShader() to restore the default shaders.\n \n Note, shaders can only be used in WEBGL mode.\n * @param s the p5.Shader object to use for rendering\n * shapes.\n * @chainable\n /\n shader(s: Shader): p5;\n\n /\n Restores the default shaders. Code that runs after\n * resetShader() will not be affected by the shader\n * previously set by shader()\n * @chainable\n /\n resetShader(): p5;\n\n /\n Sets the texture that will be used to render\n * subsequent shapes. A texture is like a \"skin\" that\n * wraps around a 3D geometry. Currently supported\n * textures are images, video, and offscreen renders.\n \n To texture a geometry created with beginShape(),\n * you will need to specify uv coordinates in\n * vertex().\n \n Note, texture() can only be used in WEBGL mode.\n \n You can view more materials in this example.\n * @param tex image to use as texture\n * @chainable\n /\n texture(tex: Image \| MediaElement \| Graphics \| Framebuffer): p5;\n\n /\n Sets the coordinate space for texture mapping. The\n * default mode is IMAGE which refers to the actual\n * coordinates of the image. NORMAL refers to a\n * normalized space of values ranging from 0 to 1.\n * With IMAGE, if an image is 100×200 pixels, mapping\n * the image onto the entire size of a quad would\n * require the points (0,0) (100, 0) (100,200)\n * (0,200). The same mapping in NORMAL is (0,0) (1,0)\n * (1,1) (0,1).\n * @param mode either IMAGE or NORMAL\n /\n textureMode(mode: TEXTURE_MODE): void;\n\n /\n Sets the global texture wrapping mode. This\n * controls how textures behave when their uv's go\n * outside of the 0 to 1 range. There are three\n * options: CLAMP, REPEAT, and MIRROR. CLAMP causes\n * the pixels at the edge of the texture to extend to\n * the bounds. REPEAT causes the texture to tile\n * repeatedly until reaching the bounds. MIRROR works\n * similarly to REPEAT but it flips the texture with\n * every new tile.\n \n REPEAT & MIRROR are only available if the texture\n * is a power of two size (128, 256, 512, 1024,\n * etc.).\n \n This method will affect all textures in your\n * sketch until a subsequent textureWrap() call is\n * made.\n \n If only one argument is provided, it will be\n * applied to both the horizontal and vertical axes.\n * @param wrapX either CLAMP, REPEAT, or MIRROR\n * @param [wrapY] either CLAMP, REPEAT, or MIRROR\n /\n textureWrap(wrapX: WRAP_X, wrapY?: WRAP_Y): void;\n\n /\n Sets the current material as a normal material. A\n * normal material is not affected by light. It is\n * often used as a placeholder material when\n * debugging.\n \n Surfaces facing the X-axis become red, those\n * facing the Y-axis become green, and those facing\n * the Z-axis become blue.\n \n You can view more materials in this example.\n * @chainable\n /\n normalMaterial(): p5;\n\n /\n Sets the ambient color of the material. The\n * ambientMaterial() color represents the components\n * of the ambientLight() color that the object\n * reflects.\n \n Consider an ambientMaterial() with the color\n * yellow (255, 255, 0). If the ambientLight() emits\n * the color white (255, 255, 255), then the object\n * will appear yellow as it will reflect the red and\n * green components of the light. If the\n * ambientLight() emits the color red (255, 0, 0),\n * then the object will appear red as it will reflect\n * the red component of the light. If the\n * ambientLight() emits the color blue (0, 0, 255),\n * then the object will appear black, as there is no\n * component of the light that it can reflect.\n \n You can view more materials in this example.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @chainable\n /\n ambientMaterial(v1: number, v2: number, v3: number): p5;\n\n /\n Sets the ambient color of the material. The\n * ambientMaterial() color represents the components\n * of the ambientLight() color that the object\n * reflects.\n \n Consider an ambientMaterial() with the color\n * yellow (255, 255, 0). If the ambientLight() emits\n * the color white (255, 255, 255), then the object\n * will appear yellow as it will reflect the red and\n * green components of the light. If the\n * ambientLight() emits the color red (255, 0, 0),\n * then the object will appear red as it will reflect\n * the red component of the light. If the\n * ambientLight() emits the color blue (0, 0, 255),\n * then the object will appear black, as there is no\n * component of the light that it can reflect.\n \n You can view more materials in this example.\n * @param gray number specifying value between white\n * and black\n * @chainable\n /\n ambientMaterial(gray: number): p5;\n\n /\n Sets the ambient color of the material. The\n * ambientMaterial() color represents the components\n * of the ambientLight() color that the object\n * reflects.\n \n Consider an ambientMaterial() with the color\n * yellow (255, 255, 0). If the ambientLight() emits\n * the color white (255, 255, 255), then the object\n * will appear yellow as it will reflect the red and\n * green components of the light. If the\n * ambientLight() emits the color red (255, 0, 0),\n * then the object will appear red as it will reflect\n * the red component of the light. If the\n * ambientLight() emits the color blue (0, 0, 255),\n * then the object will appear black, as there is no\n * component of the light that it can reflect.\n \n You can view more materials in this example.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @chainable\n /\n ambientMaterial(color: Color \| number[] \| string): p5;\n\n /\n Sets the emissive color of the material. An\n * emissive material will display the emissive color\n * at full strength regardless of lighting. This can\n * give the appearance that the object is glowing.\n \n Note, \"emissive\" is a misnomer in the sense that\n * the material does not actually emit light that\n * will affect surrounding objects.\n \n You can view more materials in this example.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n emissiveMaterial(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the emissive color of the material. An\n * emissive material will display the emissive color\n * at full strength regardless of lighting. This can\n * give the appearance that the object is glowing.\n \n Note, \"emissive\" is a misnomer in the sense that\n * the material does not actually emit light that\n * will affect surrounding objects.\n \n You can view more materials in this example.\n * @param gray number specifying value between white\n * and black\n * @chainable\n /\n emissiveMaterial(gray: number): p5;\n\n /\n Sets the emissive color of the material. An\n * emissive material will display the emissive color\n * at full strength regardless of lighting. This can\n * give the appearance that the object is glowing.\n \n Note, \"emissive\" is a misnomer in the sense that\n * the material does not actually emit light that\n * will affect surrounding objects.\n \n You can view more materials in this example.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @chainable\n /\n emissiveMaterial(color: Color \| number[] \| string): p5;\n\n /\n Sets the specular color of the material. A\n * specular material is reflective (shiny). The\n * shininess can be controlled by the shininess()\n * function.\n \n Like ambientMaterial(), the specularMaterial()\n * color is the color the object will reflect under\n * ambientLight(). However unlike ambientMaterial(),\n * for all other types of lights (directionalLight(),\n * pointLight(), spotLight()), a specular material\n * will reflect the color of the light source. This\n * is what gives it its \"shiny\" appearance.\n \n You can view more materials in this example.\n * @param gray number specifying value between white\n * and black.\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n specularMaterial(gray: number, alpha?: number): p5;\n\n /\n Sets the specular color of the material. A\n * specular material is reflective (shiny). The\n * shininess can be controlled by the shininess()\n * function.\n \n Like ambientMaterial(), the specularMaterial()\n * color is the color the object will reflect under\n * ambientLight(). However unlike ambientMaterial(),\n * for all other types of lights (directionalLight(),\n * pointLight(), spotLight()), a specular material\n * will reflect the color of the light source. This\n * is what gives it its \"shiny\" appearance.\n \n You can view more materials in this example.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n specularMaterial(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the specular color of the material. A\n * specular material is reflective (shiny). The\n * shininess can be controlled by the shininess()\n * function.\n \n Like ambientMaterial(), the specularMaterial()\n * color is the color the object will reflect under\n * ambientLight(). However unlike ambientMaterial(),\n * for all other types of lights (directionalLight(),\n * pointLight(), spotLight()), a specular material\n * will reflect the color of the light source. This\n * is what gives it its \"shiny\" appearance.\n \n You can view more materials in this example.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @chainable\n /\n specularMaterial(color: Color \| number[] \| string): p5;\n\n /\n Sets the amount of gloss (\"shininess\") of a\n * specularMaterial(). The default and minimum value\n * is 1.\n * @param shine degree of shininess\n * @chainable\n /\n shininess(shine: number): p5;\n\n/\n Sets the position of the current camera in a 3D\n * sketch. Parameters for this function define the\n * camera's position, the center of the sketch (where\n * the camera is pointing), and an up direction (the\n * orientation of the camera). This function\n * simulates the movements of the camera, allowing\n * objects to be viewed from various angles.\n * Remember, it does not move the objects themselves\n * but the camera instead. For example when the\n * centerX value is positive, and the camera is\n * rotating to the right side of the sketch, the\n * object will seem like it's moving to the left.\n \n See this example to view the position of your\n * camera.\n \n If no parameters are given, the following default\n * is used: camera(0, 0, (height/2) / tan(PI/6), 0,\n * 0, 0, 0, 1, 0)\n * @param [x] camera position value on x axis\n * @param [y] camera position value on y axis\n * @param [z] camera position value on z axis\n * @param [centerX] x coordinate representing center\n * of the sketch\n * @param [centerY] y coordinate representing center\n * of the sketch\n * @param [centerZ] z coordinate representing center\n * of the sketch\n * @param [upX] x component of direction 'up' from\n * camera\n * @param [upY] y component of direction 'up' from\n * camera\n * @param [upZ] z component of direction 'up' from\n * camera\n * @chainable\n /\n camera(\n x?: number,\n y?: number,\n z?: number,\n centerX?: number,\n centerY?: number,\n centerZ?: number,\n upX?: number,\n upY?: number,\n upZ?: number\n ): p5;\n\n /\n Sets a perspective projection for the current\n * camera in a 3D sketch. This projection represents\n * depth through foreshortening: objects that are\n * close to the camera appear their actual size while\n * those that are further away from the camera appear\n * smaller. The parameters to this function define\n * the viewing frustum (the truncated pyramid within\n * which objects are seen by the camera) through\n * vertical field of view, aspect ratio (usually\n * width/height), and near and far clipping planes.\n \n If no parameters are given, the following default\n * is used: perspective(PI/3, width/height, eyeZ/10,\n * eyeZ10), where eyeZ is equal to ((height/2) /\n tan(PI/6)).\n * @param [fovy] camera frustum vertical field of\n * view, from bottom to top of view, in angleMode\n * units\n * @param [aspect] camera frustum aspect ratio\n * @param [near] frustum near plane length\n * @param [far] frustum far plane length\n * @chainable\n /\n perspective(fovy?: number, aspect?: number, near?: number, far?: number): p5;\n\n /\n Sets an orthographic projection for the current\n * camera in a 3D sketch and defines a box-shaped\n * viewing frustum within which objects are seen. In\n * this projection, all objects with the same\n * dimension appear the same size, regardless of\n * whether they are near or far from the camera. The\n * parameters to this function specify the viewing\n * frustum where left and right are the minimum and\n * maximum x values, top and bottom are the minimum\n * and maximum y values, and near and far are the\n * minimum and maximum z values.\n \n If no parameters are given, the following default\n * is used: ortho(-width/2, width/2, -height/2,\n * height/2).\n * @param [left] camera frustum left plane\n * @param [right] camera frustum right plane\n * @param [bottom] camera frustum bottom plane\n * @param [top] camera frustum top plane\n * @param [near] camera frustum near plane\n * @param [far] camera frustum far plane\n * @chainable\n /\n ortho(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): p5;\n\n /\n Sets the frustum of the current camera as defined\n * by the parameters. A frustum is a geometric form:\n * a pyramid with its top cut off. With the viewer's\n * eye at the imaginary top of the pyramid, the six\n * planes of the frustum act as clipping planes when\n * rendering a 3D view. Thus, any form inside the\n * clipping planes is visible; anything outside those\n * planes is not visible.\n \n Setting the frustum changes the perspective of the\n * scene being rendered. This can be achieved more\n * simply in many cases by using perspective().\n \n If no parameters are given, the following default\n * is used: frustum(-width/20, width/20, height/20,\n * -height/20, eyeZ/10, eyeZ10), where eyeZ is equal\n to ((height/2) / tan(PI/6)).\n * @param [left] camera frustum left plane\n * @param [right] camera frustum right plane\n * @param [bottom] camera frustum bottom plane\n * @param [top] camera frustum top plane\n * @param [near] camera frustum near plane\n * @param [far] camera frustum far plane\n * @chainable\n /\n frustum(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): p5;\n\n /\n Creates a new p5.Camera object and sets it as the\n * current (active) camera. The new camera is\n * initialized with a default position (see camera())\n * and a default perspective projection (see\n * perspective()). Its properties can be controlled\n * with the p5.Camera methods.\n \n Note: Every 3D sketch starts with a default camera\n * initialized. This camera can be controlled with\n * the global methods camera(), perspective(),\n * ortho(), and frustum() if it is the only camera in\n * the scene.\n * @return The newly created camera object.\n /\n createCamera(): Camera;\n\n /\n Sets the current (active) camera of a 3D sketch.\n * Allows for switching between multiple cameras.\n * @param cam p5.Camera object\n /\n setCamera(cam: Camera): void;\n\n/\n Sets the normal to use for subsequent vertices.\n * @chainable\n /\n vertexNormal(x: number, y: number, z: number, v: Vector): p5;\n\n/\n Set attributes for the WebGL Drawing context. This\n * is a way of adjusting how the WebGL renderer works\n * to fine-tune the display and performance. Note\n * that this will reinitialize the drawing context if\n * called after the WebGL canvas is made.\n \n If an object is passed as the parameter, all\n * attributes not declared in the object will be set\n * to defaults.\n \n The available attributes are:\n \n alpha - indicates if the canvas contains an alpha\n * buffer default is true\n \n depth - indicates whether the drawing buffer has a\n * depth buffer of at least 16 bits - default is true\n \n stencil - indicates whether the drawing buffer has\n * a stencil buffer of at least 8 bits\n \n antialias - indicates whether or not to perform\n * anti-aliasing default is false (true in Safari)\n \n premultipliedAlpha - indicates that the page\n * compositor will assume the drawing buffer contains\n * colors with pre-multiplied alpha default is true\n \n preserveDrawingBuffer - if true the buffers will\n * not be cleared and and will preserve their values\n * until cleared or overwritten by author (note that\n * p5 clears automatically on draw loop) default is\n * true\n \n perPixelLighting - if true, per-pixel lighting\n * will be used in the lighting shader otherwise\n * per-vertex lighting is used. default is true.\n \n version - either 1 or 2, to specify which WebGL\n * version to ask for. By default, WebGL 2 will be\n * requested. If WebGL2 is not available, it will\n * fall back to WebGL 1. You can check what version\n * is used with by looking at the global webglVersion\n * property.\n * @param key Name of attribute\n * @param value New value of named attribute\n /\n setAttributes(key: string, value: boolean): void;\n\n /\n Set attributes for the WebGL Drawing context. This\n * is a way of adjusting how the WebGL renderer works\n * to fine-tune the display and performance. Note\n * that this will reinitialize the drawing context if\n * called after the WebGL canvas is made.\n \n If an object is passed as the parameter, all\n * attributes not declared in the object will be set\n * to defaults.\n \n The available attributes are:\n \n alpha - indicates if the canvas contains an alpha\n * buffer default is true\n \n depth - indicates whether the drawing buffer has a\n * depth buffer of at least 16 bits - default is true\n \n stencil - indicates whether the drawing buffer has\n * a stencil buffer of at least 8 bits\n \n antialias - indicates whether or not to perform\n * anti-aliasing default is false (true in Safari)\n \n premultipliedAlpha - indicates that the page\n * compositor will assume the drawing buffer contains\n * colors with pre-multiplied alpha default is true\n \n preserveDrawingBuffer - if true the buffers will\n * not be cleared and and will preserve their values\n * until cleared or overwritten by author (note that\n * p5 clears automatically on draw loop) default is\n * true\n \n perPixelLighting - if true, per-pixel lighting\n * will be used in the lighting shader otherwise\n * per-vertex lighting is used. default is true.\n \n version - either 1 or 2, to specify which WebGL\n * version to ask for. By default, WebGL 2 will be\n * requested. If WebGL2 is not available, it will\n * fall back to WebGL 1. You can check what version\n * is used with by looking at the global webglVersion\n * property.\n * @param obj object with key-value pairs\n /\n setAttributes(obj: object): void;\n}\n\ndeclare namespace p5 {\n type UNKNOWN_P5_CONSTANT = any;\nclass Color {\n // TODO: Fix p5.Color() errors in src/color/p5.Color.js, line 318:\n //\n // required param \"vals\" follows an optional param\n //\n // constructor(pInst?: p5, vals: number[]\|string);\n\n /\n Returns the color formatted as a string. Doing so\n * can be useful for debugging, or for using p5.js\n * with other libraries.\n * @param [format] how the color string will be\n * formatted. Leaving this empty formats the string\n * as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and\n * '#rrggbbaa' format as hexadecimal color codes.\n * 'rgb' 'hsb' and 'hsl' return the color formatted\n * in the specified color mode. 'rgba' 'hsba' and\n * 'hsla' are the same as above but with alpha\n * channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and\n * 'hsla%' format as percentages.\n * @return the formatted string.\n /\n toString(format?: string): string;\n\n /\n Sets the red component of a color. The range\n * depends on the colorMode(). In the default RGB\n * mode it's between 0 and 255.\n * @param red the new red value.\n /\n setRed(red: number): void;\n\n /\n Sets the green component of a color. The range\n * depends on the colorMode(). In the default RGB\n * mode it's between 0 and 255.\n * @param green the new green value.\n /\n setGreen(green: number): void;\n\n /\n Sets the blue component of a color. The range\n * depends on the colorMode(). In the default RGB\n * mode it's between 0 and 255.\n * @param blue the new blue value.\n /\n setBlue(blue: number): void;\n\n /\n Sets the alpha (transparency) value of a color.\n * The range depends on the colorMode(). In the\n * default RGB mode it's between 0 and 255.\n * @param alpha the new alpha value.\n /\n setAlpha(alpha: number): void;\n }\n\nclass Element {\n /\n Base class for all elements added to a sketch,\n * including canvas, graphics buffers, and other HTML\n * elements. It is not called directly, but\n * p5.Element objects are created by calling\n * createCanvas(), createGraphics(), createDiv(),\n * createImg(), createInput(), etc.\n \n @param elt DOM node that is wrapped\n * @param [pInst] pointer to p5 instance\n /\n constructor(elt: HTMLElement, pInst?: p5);\n\n /\n Attaches the element to the parent specified. A\n * way of setting the container for the element.\n * Accepts either a string ID, DOM node, or\n * p5.Element. If no arguments are given, parent node\n * is returned. For more ways to position the canvas,\n * see the positioning the canvas wiki page.\n * @param parent the ID, DOM node, or p5.Element of\n * desired parent element\n * @chainable\n /\n parent(parent: string \| Element \| object): Element;\n\n /\n Attaches the element to the parent specified. A\n * way of setting the container for the element.\n * Accepts either a string ID, DOM node, or\n * p5.Element. If no arguments are given, parent node\n * is returned. For more ways to position the canvas,\n * see the positioning the canvas wiki page.\n /\n parent(): Element;\n\n /\n Sets the ID of the element. If no ID argument is\n * passed in, it instead returns the current ID of\n * the element. Note that only one element can have a\n * particular id in a page. The class() method can be\n * used to identify multiple elements with the same\n * class name.\n * @param id ID of the element\n * @chainable\n /\n id(id: string): Element;\n\n /\n Sets the ID of the element. If no ID argument is\n * passed in, it instead returns the current ID of\n * the element. Note that only one element can have a\n * particular id in a page. The class() method can be\n * used to identify multiple elements with the same\n * class name.\n * @return the id of the element\n /\n id(): string;\n\n /\n Adds given class to the element. If no class\n * argument is passed in, it instead returns a string\n * containing the current class(es) of the element.\n * @param class class to add\n * @chainable\n /\n class(theClass: string): Element;\n\n /\n Adds given class to the element. If no class\n * argument is passed in, it instead returns a string\n * containing the current class(es) of the element.\n * @return the class of the element\n /\n class(): string;\n\n /\n The mousePressed() method is called once after\n * every time a mouse button is pressed over the\n * element. Some mobile browsers may also trigger\n * this event on a touch screen, if the user performs\n * a quick tap. This can be used to attach\n * element-specific event listeners.\n * @param fxn function to be fired when mouse is\n * pressed over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mousePressed(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The doubleClicked() method is called once after\n * every time a mouse button is pressed twice over\n * the element. This can be used to attach element\n * and action-specific event listeners.\n * @param fxn function to be fired when mouse is\n * double clicked over the element. if false is\n * passed instead, the previously firing function\n * will no longer fire.\n * @chainable\n /\n doubleClicked(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseWheel() method is called once after every\n * time a mouse wheel is scrolled over the element.\n * This can be used to attach element-specific event\n * listeners. The method accepts a callback function\n * as argument which will be executed when the wheel\n * event is triggered on the element, the callback\n * function is passed one argument event. The\n * event.deltaY property returns negative values if\n * the mouse wheel is rotated up or away from the\n * user and positive in the other direction. The\n * event.deltaX does the same as event.deltaY except\n * it reads the horizontal wheel scroll of the mouse\n * wheel.\n \n On macOS with \"natural\" scrolling enabled, the\n * event.deltaY values are reversed.\n * @param fxn function to be fired when mouse is\n * scrolled over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mouseWheel(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseReleased() method is called once after\n * every time a mouse button is released over the\n * element. Some mobile browsers may also trigger\n * this event on a touch screen, if the user performs\n * a quick tap. This can be used to attach\n * element-specific event listeners.\n * @param fxn function to be fired when mouse is\n * released over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mouseReleased(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseClicked() method is called once after a\n * mouse button is pressed and released over the\n * element. Some mobile browsers may also trigger\n * this event on a touch screen, if the user performs\n * a quick tap. This can be used to attach\n * element-specific event listeners.\n * @param fxn function to be fired when mouse is\n * clicked over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mouseClicked(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseMoved() method is called once every time\n * a mouse moves over the element. This can be used\n * to attach an element-specific event listener.\n * @param fxn function to be fired when a mouse moves\n * over the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n mouseMoved(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseOver() method is called once after every\n * time a mouse moves onto the element. This can be\n * used to attach an element-specific event listener.\n * @param fxn function to be fired when a mouse moves\n * onto the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n mouseOver(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseOut() method is called once after every\n * time a mouse moves off the element. This can be\n * used to attach an element-specific event listener.\n * @param fxn function to be fired when a mouse moves\n * off of an element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n mouseOut(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The touchStarted() method is called once after\n * every time a touch is registered. This can be used\n * to attach element-specific event listeners.\n * @param fxn function to be fired when a touch\n * starts over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n touchStarted(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The touchMoved() method is called once after every\n * time a touch move is registered. This can be used\n * to attach element-specific event listeners.\n * @param fxn function to be fired when a touch moves\n * over the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n touchMoved(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The touchEnded() method is called once after every\n * time a touch is registered. This can be used to\n * attach element-specific event listeners.\n * @param fxn function to be fired when a touch ends\n * over the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n touchEnded(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The dragOver() method is called once after every\n * time a file is dragged over the element. This can\n * be used to attach an element-specific event\n * listener.\n * @param fxn function to be fired when a file is\n * dragged over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n dragOver(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The dragLeave() method is called once after every\n * time a dragged file leaves the element area. This\n * can be used to attach an element-specific event\n * listener.\n * @param fxn function to be fired when a file is\n * dragged off the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n dragLeave(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n Underlying HTML element. All normal HTML methods\n * can be called on this.\n /\n elt: any;\n width: any;\n height: any;\n }\n\n// Work-around for p5.Graphics inheriting from both p5 and p5.Element\n class __Graphics__ extends Element {\n /\n Thin wrapper around a renderer, to be used for\n * creating a graphics buffer object. Use this class\n * if you need to draw into an off-screen graphics\n * buffer. The two parameters define the width and\n * height in pixels. The fields and methods for this\n * class are extensive, but mirror the normal drawing\n * API for p5.\n \n @param w width\n * @param h height\n * @param renderer the renderer to use, either P2D or\n * WEBGL\n * @param [pInst] pointer to p5 instance\n * @param [canvas] existing html canvas element\n /\n constructor(w: number, h: number, renderer: GRAPHICS_RENDERER, pInst?: p5, canvas?: object);\n\n /\n Resets certain values such as those modified by\n * functions in the Transform category and in the\n * Lights category that are not automatically reset\n * with graphics buffer objects. Calling this in\n * draw() will copy the behavior of the standard\n * canvas.\n /\n reset(): void;\n\n /\n Removes a Graphics object from the page and frees\n * any resources associated with it.\n /\n remove(): void;\n\n /\n Creates and returns a new p5.Framebuffer inside a\n * p5.Graphics WebGL context. This takes the same\n * parameters as the global createFramebuffer\n * function.\n /\n createFramebuffer(): void;\n }\n // Work-around for p5.Graphics inheriting from both p5 and p5.Element\n type Graphics = __Graphics__ & p5;\n\nclass Image {\n /\n Creates a new p5.Image. A p5.Image is a canvas\n * backed representation of an image. p5 can display\n * .gif, .jpg and .png images. Images may be\n * displayed in 2D and 3D space. Before an image is\n * used, it must be loaded with the loadImage()\n * function. The p5.Image class contains fields for\n * the width and height of the image, as well as an\n * array called pixels[] that contains the values for\n * every pixel in the image.\n \n The methods described below allow easy access to\n * the image's pixels and alpha channel and simplify\n * the process of compositing.\n \n Before using the pixels[] array, be sure to use\n * the loadPixels() method on the image to make sure\n * that the pixel data is properly loaded.\n \n /\n constructor(width: number, height: number);\n\n /*\n Loads the pixels data for this image into the\n * [pixels] attribute.\n /\n loadPixels(): void;\n\n /\n Updates the backing canvas for this image with the\n * contents of the [pixels] array. If this image is\n * an animated GIF then the pixels will be updated in\n * the frame that is currently displayed.\n * @param x x-offset of the target update area for\n * the underlying canvas\n * @param y y-offset of the target update area for\n * the underlying canvas\n * @param w width of the target update area for the\n * underlying canvas\n * @param h height of the target update area for the\n * underlying canvas\n /\n updatePixels(x: number, y: number, w: number, h: number): void;\n\n /\n Updates the backing canvas for this image with the\n * contents of the [pixels] array. If this image is\n * an animated GIF then the pixels will be updated in\n * the frame that is currently displayed.\n /\n updatePixels(): void;\n\n /\n Get a region of pixels from an image. If no params\n * are passed, the whole image is returned. If x and\n * y are the only params passed a single pixel is\n * extracted. If all params are passed a rectangle\n * region is extracted and a p5.Image is returned.\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param w width\n * @param h height\n * @return the rectangle p5.Image\n /\n get(x: number, y: number, w: number, h: number): Image;\n\n /\n Get a region of pixels from an image. If no params\n * are passed, the whole image is returned. If x and\n * y are the only params passed a single pixel is\n * extracted. If all params are passed a rectangle\n * region is extracted and a p5.Image is returned.\n * @return the whole p5.Image\n /\n get(): Image;\n\n /\n Get a region of pixels from an image. If no params\n * are passed, the whole image is returned. If x and\n * y are the only params passed a single pixel is\n * extracted. If all params are passed a rectangle\n * region is extracted and a p5.Image is returned.\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @return color of pixel at x,y in array format [R,\n * G, B, A]\n /\n get(x: number, y: number): number[];\n\n /\n Set the color of a single pixel or write an image\n * into this p5.Image. Note that for a large number\n * of pixels this will be slower than directly\n * manipulating the pixels array and then calling\n * updatePixels().\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param a grayscale value \| pixel array \| a\n * p5.Color \| image to copy\n /\n set(x: number, y: number, a: number \| number[] \| object): void;\n\n /\n Resize the image to a new width and height. To\n * make the image scale proportionally, use 0 as the\n * value for the wide or high parameter. For\n * instance, to make the width of an image 150\n * pixels, and change the height using the same\n * proportion, use resize(150, 0).\n * @param width the resized image width\n * @param height the resized image height\n /\n resize(width: number, height: number): void;\n\n /\n Copies a region of pixels from one image to\n * another. If no srcImage is specified this is used\n * as the source. If the source and destination\n * regions aren't the same size, it will\n * automatically resize source pixels to fit the\n * specified target region.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(\n srcImage: Image \| Element,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number\n ): void;\n\n /\n Copies a region of pixels from one image to\n * another. If no srcImage is specified this is used\n * as the source. If the source and destination\n * regions aren't the same size, it will\n * automatically resize source pixels to fit the\n * specified target region.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;\n\n /\n Masks part of an image from displaying by loading\n * another image and using its alpha channel as an\n * alpha channel for this image. Masks are\n * cumulative, once applied to an image object, they\n * cannot be removed.\n * @param srcImage source image\n /\n mask(srcImage: Image): void;\n\n /\n Applies an image filter to a p5.Image THRESHOLD\n * Converts the image to black and white pixels\n * depending if they are above or below the threshold\n * defined by the level parameter. The parameter must\n * be between 0.0 (black) and 1.0 (white). If no\n * level is specified, 0.5 is used.\n \n GRAY Converts any colors in the image to grayscale\n * equivalents. No parameter is used.\n \n OPAQUE Sets the alpha channel to entirely opaque.\n * No parameter is used.\n \n INVERT Sets each pixel to its inverse value. No\n * parameter is used.\n \n POSTERIZE Limits each channel of the image to the\n * number of colors specified as the parameter. The\n * parameter can be set to values between 2 and 255,\n * but results are most noticeable in the lower\n * ranges.\n \n BLUR Executes a Gaussian blur with the level\n * parameter specifying the extent of the blurring.\n * If no parameter is used, the blur is equivalent to\n * Gaussian blur of radius 1. Larger values increase\n * the blur.\n \n ERODE Reduces the light areas. No parameter is\n * used.\n \n DILATE Increases the light areas. No parameter is\n * used.\n \n filter() does not work in WEBGL mode. A similar\n * effect can be achieved in WEBGL mode using custom\n * shaders. Adam Ferriss has written a selection of\n * shader examples that contains many of the effects\n * present in the filter examples.\n * @param filterType either THRESHOLD, GRAY, OPAQUE,\n * INVERT, POSTERIZE, ERODE, DILATE or BLUR. See\n * Filters.js for docs on each available filter\n * @param [filterParam] an optional parameter unique\n * to each filter, see above\n /\n filter(filterType: FILTER_TYPE, filterParam?: number): void;\n\n /\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n \n Available blend modes are: normal \| multiply \|\n * screen \| overlay \| darken \| lighten \| color-dodge\n * \| color-burn \| hard-light \| soft-light \|\n * difference \| exclusion \| hue \| saturation \| color\n * \| luminosity\n \n http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\n /\n blend(\n srcImage: Image,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: BLEND_MODE\n ): void;\n\n /\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n \n Available blend modes are: normal \| multiply \|\n * screen \| overlay \| darken \| lighten \| color-dodge\n * \| color-burn \| hard-light \| soft-light \|\n * difference \| exclusion \| hue \| saturation \| color\n * \| luminosity\n \n http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\n /\n blend(\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: UNKNOWN_P5_CONSTANT\n ): void;\n\n /\n Saves the image to a file and force the browser to\n * download it. Accepts two strings for filename and\n * file extension Supports png (default), jpg, and\n * gif Note that the file will only be downloaded as\n * an animated GIF if the p5.Image was loaded from a\n * GIF file.\n * @param filename give your file a name\n * @param extension 'png' or 'jpg'\n /\n save(filename: string, extension: string): void;\n\n /\n Starts an animated GIF over at the beginning\n * state.\n /\n reset(): void;\n\n /\n Gets the index for the frame that is currently\n * visible in an animated GIF.\n * @return The index for the currently displaying\n * frame in animated GIF\n /\n getCurrentFrame(): number;\n\n /\n Sets the index of the frame that is currently\n * visible in an animated GIF\n * @param index the index for the frame that should\n * be displayed\n /\n setFrame(index: number): void;\n\n /\n Returns the number of frames in an animated GIF\n /\n numFrames(): number;\n\n /\n Plays an animated GIF that was paused with pause()\n /\n play(): void;\n\n /\n Pauses an animated GIF.\n /\n pause(): void;\n\n /\n Changes the delay between frames in an animated\n * GIF. There is an optional second parameter that\n * indicates an index for a specific frame that\n * should have its delay modified. If no index is\n * given, all frames will have the new delay.\n * @param d the amount in milliseconds to delay\n * between switching frames\n * @param [index] the index of the frame that should\n * have the new delay value {optional}\n /\n delay(d: number, index?: number): void;\n\n /\n Image width.\n /\n width: number;\n\n /\n Image height.\n /\n height: number;\n\n /\n Array containing the values for all the pixels in\n * the display window. These values are numbers. This\n * array is the size (include an appropriate factor\n * for pixelDensity) of the display window x4,\n * representing the R, G, B, A values in order for\n * each pixel, moving from left to right across each\n * row, then down each column. Retina and other high\n * density displays may have more pixels (by a factor\n * of pixelDensity^2). For example, if the image is\n * 100×100 pixels, there will be 40,000. With\n * pixelDensity = 2, there will be 160,000. The first\n * four values (indices 0-3) in the array will be the\n * R, G, B, A values of the pixel at (0, 0). The\n * second four values (indices 4-7) will contain the\n * R, G, B, A values of the pixel at (1, 0). More\n * generally, to set values for a pixel at (x, y):\n * let d = pixelDensity(); for (let i = 0; i < d;\n * i++) { for (let j = 0; j < d; j++) { // loop over\n * index = 4 * ((y * d + j) * width * d + (x * d +\n * i)); pixels[index] = r; pixels[index+1] = g;\n * pixels[index+2] = b; pixels[index+3] = a; } }\n \n Before accessing this array, the data must loaded\n * with the loadPixels() function. After the array\n * data has been modified, the updatePixels()\n * function must be run to update the changes.\n /\n pixels: number[];\n }\n\nclass Table {\n /\n Table objects store data with multiple rows and\n * columns, much like in a traditional spreadsheet.\n * Tables can be generated from scratch, dynamically,\n * or using data from an existing file.\n \n @param [rows] An array of p5.TableRow objects\n /\n constructor(rows?: TableRow[]);\n\n /\n Use addRow() to add a new row of data to a\n * p5.Table object. By default, an empty row is\n * created. Typically, you would store a reference to\n * the new row in a TableRow object (see newRow in\n * the example above), and then set individual values\n * using set(). If a p5.TableRow object is included\n * as a parameter, then that row is duplicated and\n * added to the table.\n * @param [row] row to be added to the table\n * @return the row that was added\n /\n addRow(row?: TableRow): TableRow;\n\n /\n Removes a row from the table object.\n * @param id ID number of the row to remove\n /\n removeRow(id: number): void;\n\n /\n Returns a reference to the specified p5.TableRow.\n * The reference can then be used to get and set\n * values of the selected row.\n * @param rowID ID number of the row to get\n * @return p5.TableRow object\n /\n getRow(rowID: number): TableRow;\n\n /\n Gets all rows from the table. Returns an array of\n * p5.TableRows.\n * @return Array of p5.TableRows\n /\n getRows(): TableRow[];\n\n /\n Finds the first row in the Table that contains the\n * value provided, and returns a reference to that\n * row. Even if multiple rows are possible matches,\n * only the first matching row is returned. The\n * column to search may be specified by either its ID\n * or title.\n * @param value The value to match\n * @param column ID number or title of the column to\n * search\n /\n findRow(value: string, column: number \| string): TableRow;\n\n /\n Finds the rows in the Table that contain the value\n * provided, and returns references to those rows.\n * Returns an Array, so for must be used to iterate\n * through all the rows, as shown in the example\n * above. The column to search may be specified by\n * either its ID or title.\n * @param value The value to match\n * @param column ID number or title of the column to\n * search\n * @return An Array of TableRow objects\n /\n findRows(value: string, column: number \| string): TableRow[];\n\n /\n Finds the first row in the Table that matches the\n * regular expression provided, and returns a\n * reference to that row. Even if multiple rows are\n * possible matches, only the first matching row is\n * returned. The column to search may be specified by\n * either its ID or title.\n * @param regexp The regular expression to match\n * @param column The column ID (number) or title\n * (string)\n * @return TableRow object\n /\n matchRow(regexp: string \| RegExp, column: string \| number): TableRow;\n\n /\n Finds the rows in the Table that match the regular\n * expression provided, and returns references to\n * those rows. Returns an array, so for must be used\n * to iterate through all the rows, as shown in the\n * example. The column to search may be specified by\n * either its ID or title.\n * @param regexp The regular expression to match\n * @param [column] The column ID (number) or title\n * (string)\n * @return An Array of TableRow objects\n /\n matchRows(regexp: string, column?: string \| number): TableRow[];\n\n /\n Retrieves all values in the specified column, and\n * returns them as an array. The column may be\n * specified by either its ID or title.\n * @param column String or Number of the column to\n * return\n * @return Array of column values\n /\n getColumn(column: string \| number): any[];\n\n /\n Removes all rows from a Table. While all rows are\n * removed, columns and column titles are maintained.\n /\n clearRows(): void;\n\n /\n Use addColumn() to add a new column to a Table\n * object. Typically, you will want to specify a\n * title, so the column may be easily referenced\n * later by name. (If no title is specified, the new\n * column's title will be null.)\n * @param [title] title of the given column\n /\n addColumn(title?: string): void;\n\n /\n Returns the total number of columns in a Table.\n * @return Number of columns in this table\n /\n getColumnCount(): number;\n\n /\n Returns the total number of rows in a Table.\n * @return Number of rows in this table\n /\n getRowCount(): number;\n\n /\n Removes any of the specified characters (or\n * \"tokens\"). If no column is specified, then the\n * values in all columns and rows are processed. A\n * specific column may be referenced by either its ID\n * or title.\n * @param chars String listing characters to be\n * removed\n * @param [column] Column ID (number) or name\n * (string)\n /\n removeTokens(chars: string, column?: string \| number): void;\n\n /\n Trims leading and trailing whitespace, such as\n * spaces and tabs, from String table values. If no\n * column is specified, then the values in all\n * columns and rows are trimmed. A specific column\n * may be referenced by either its ID or title.\n * @param [column] Column ID (number) or name\n * (string)\n /\n trim(column?: string \| number): void;\n\n /\n Use removeColumn() to remove an existing column\n * from a Table object. The column to be removed may\n * be identified by either its title (a String) or\n * its index value (an int). removeColumn(0) would\n * remove the first column, removeColumn(1) would\n * remove the second column, and so on.\n * @param column columnName (string) or ID (number)\n /\n removeColumn(column: string \| number): void;\n\n /\n Stores a value in the Table's specified row and\n * column. The row is specified by its ID, while the\n * column may be specified by either its ID or title.\n * @param row row ID\n * @param column column ID (Number) or title (String)\n * @param value value to assign\n /\n set(row: number, column: string \| number, value: string \| number): void;\n\n /\n Stores a Float value in the Table's specified row\n * and column. The row is specified by its ID, while\n * the column may be specified by either its ID or\n * title.\n * @param row row ID\n * @param column column ID (Number) or title (String)\n * @param value value to assign\n /\n setNum(row: number, column: string \| number, value: number): void;\n\n /\n Stores a String value in the Table's specified row\n * and column. The row is specified by its ID, while\n * the column may be specified by either its ID or\n * title.\n * @param row row ID\n * @param column column ID (Number) or title (String)\n * @param value value to assign\n /\n setString(row: number, column: string \| number, value: string): void;\n\n /\n Retrieves a value from the Table's specified row\n * and column. The row is specified by its ID, while\n * the column may be specified by either its ID or\n * title.\n * @param row row ID\n * @param column columnName (string) or ID (number)\n /\n get(row: number, column: string \| number): string \| number;\n\n /\n Retrieves a Float value from the Table's specified\n * row and column. The row is specified by its ID,\n * while the column may be specified by either its ID\n * or title.\n * @param row row ID\n * @param column columnName (string) or ID (number)\n /\n getNum(row: number, column: string \| number): number;\n\n /\n Retrieves a String value from the Table's\n * specified row and column. The row is specified by\n * its ID, while the column may be specified by\n * either its ID or title.\n * @param row row ID\n * @param column columnName (string) or ID (number)\n /\n getString(row: number, column: string \| number): string;\n\n /\n Retrieves all table data and returns as an object.\n * If a column name is passed in, each row object\n * will be stored with that attribute as its title.\n * @param [headerColumn] Name of the column which\n * should be used to title each row object (optional)\n /\n getObject(headerColumn?: string): object;\n\n /\n Retrieves all table data and returns it as a\n * multidimensional array.\n /\n getArray(): any[];\n\n /\n An array containing the names of the columns in\n * the table, if the \"header\" the table is loaded\n * with the \"header\" parameter.\n /\n columns: string[];\n\n /\n An array containing the p5.TableRow objects that\n * make up the rows of the table. The same result as\n * calling getRows()\n /\n rows: TableRow[];\n }\n\nclass TableRow {\n /\n A TableRow object represents a single row of data\n * values, stored in columns, from a table. A Table\n * Row contains both an ordered array, and an\n * unordered JSON object.\n \n @param [str] optional: populate the row with a\n * string of values, separated by the separator\n * @param [separator] comma separated values (csv) by\n * default\n /\n constructor(str?: string, separator?: string);\n\n /\n Stores a value in the TableRow's specified column.\n * The column may be specified by either its ID or\n * title.\n * @param column Column ID (Number) or Title (String)\n * @param value The value to be stored\n /\n set(column: string \| number, value: string \| number): void;\n\n /\n Stores a Float value in the TableRow's specified\n * column. The column may be specified by either its\n * ID or title.\n * @param column Column ID (Number) or Title (String)\n * @param value The value to be stored as a Float\n /\n setNum(column: string \| number, value: number \| string): void;\n\n /\n Stores a String value in the TableRow's specified\n * column. The column may be specified by either its\n * ID or title.\n * @param column Column ID (Number) or Title (String)\n * @param value The value to be stored as a String\n /\n setString(column: string \| number, value: string \| number \| boolean \| object): void;\n\n /\n Retrieves a value from the TableRow's specified\n * column. The column may be specified by either its\n * ID or title.\n * @param column columnName (string) or ID (number)\n /\n get(column: string \| number): string \| number;\n\n /\n Retrieves a Float value from the TableRow's\n * specified column. The column may be specified by\n * either its ID or title.\n * @param column columnName (string) or ID (number)\n * @return Float Floating point number\n /\n getNum(column: string \| number): number;\n\n /\n Retrieves an String value from the TableRow's\n * specified column. The column may be specified by\n * either its ID or title.\n * @param column columnName (string) or ID (number)\n * @return String\n /\n getString(column: string \| number): string;\n }\n\nclass XML {\n /\n XML is a representation of an XML object, able to\n * parse XML code. Use loadXML() to load external XML\n * files and create XML objects.\n \n /\n constructor();\n\n /*\n Gets a copy of the element's parent. Returns the\n * parent as another p5.XML object.\n * @return element parent\n /\n getParent(): XML;\n\n /\n Gets the element's full name, which is returned as\n * a String.\n * @return the name of the node\n /\n getName(): string;\n\n /\n Sets the element's name, which is specified as a\n * String.\n * @param the new name of the node\n /\n setName(the: string): void;\n\n /\n Checks whether or not the element has any\n * children, and returns the result as a boolean.\n /\n hasChildren(): boolean;\n\n /\n Get the names of all of the element's children,\n * and returns the names as an array of Strings. This\n * is the same as looping through and calling\n * getName() on each child element individually.\n * @return names of the children of the element\n /\n listChildren(): string[];\n\n /\n Returns all of the element's children as an array\n * of p5.XML objects. When the name parameter is\n * specified, then it will return all children that\n * match that name.\n * @param [name] element name\n * @return children of the element\n /\n getChildren(name?: string): XML[];\n\n /\n Returns the first of the element's children that\n * matches the name parameter or the child of the\n * given index.It returns undefined if no matching\n * child is found.\n * @param name element name or index\n /\n getChild(name: string \| number): XML;\n\n /\n Appends a new child to the element. The child can\n * be specified with either a String, which will be\n * used as the new tag's name, or as a reference to\n * an existing p5.XML object. A reference to the\n * newly created child is returned as an p5.XML\n * object.\n * @param node a p5.XML Object which will be the\n * child to be added\n /\n addChild(node: XML): void;\n\n /\n Removes the element specified by name or index.\n * @param name element name or index\n /\n removeChild(name: string \| number): void;\n\n /\n Counts the specified element's number of\n * attributes, returned as an Number.\n /\n getAttributeCount(): number;\n\n /\n Gets all of the specified element's attributes,\n * and returns them as an array of Strings.\n * @return an array of strings containing the names\n * of attributes\n /\n listAttributes(): string[];\n\n /\n Checks whether or not an element has the specified\n * attribute.\n * @param the attribute to be checked\n * @return true if attribute found else false\n /\n hasAttribute(the: string): boolean;\n\n /\n Returns an attribute value of the element as an\n * Number. If the defaultValue parameter is specified\n * and the attribute doesn't exist, then defaultValue\n * is returned. If no defaultValue is specified and\n * the attribute doesn't exist, the value 0 is\n * returned.\n * @param name the non-null full name of the\n * attribute\n * @param [defaultValue] the default value of the\n * attribute\n /\n getNum(name: string, defaultValue?: number): number;\n\n /\n Returns an attribute value of the element as an\n * String. If the defaultValue parameter is specified\n * and the attribute doesn't exist, then defaultValue\n * is returned. If no defaultValue is specified and\n * the attribute doesn't exist, null is returned.\n * @param name the non-null full name of the\n * attribute\n * @param [defaultValue] the default value of the\n * attribute\n /\n getString(name: string, defaultValue?: number): string;\n\n /\n Sets the content of an element's attribute. The\n * first parameter specifies the attribute name,\n * while the second specifies the new content.\n * @param name the full name of the attribute\n * @param value the value of the attribute\n /\n setAttribute(name: string, value: number \| string \| boolean): void;\n\n /\n Returns the content of an element. If there is no\n * such content, defaultValue is returned if\n * specified, otherwise null is returned.\n * @param [defaultValue] value returned if no content\n * is found\n /\n getContent(defaultValue?: string): string;\n\n /\n Sets the element's content.\n * @param text the new content\n /\n setContent(text: string): void;\n\n /\n Serializes the element into a string. This\n * function is useful for preparing the content to be\n * sent over a http request or saved to file.\n * @return Serialized string of the element\n /\n serialize(): string;\n }\n\nclass Vector {\n /\n A class to describe a two or three-dimensional\n * vector, specifically a Euclidean (also known as\n * geometric) vector. A vector is an entity that has\n * both magnitude and direction. The datatype,\n * however, stores the components of the vector (x, y\n * for 2D; or x, y, z for 3D). The magnitude and\n * direction can be accessed via the methods\n * p5.Vector.mag() and heading(). In many of the\n * p5.js examples, you will see p5.Vector used to\n * describe a position, velocity, or acceleration.\n * For example, if you consider a rectangle moving\n * across the screen, at any given instant it has a\n * position (a vector that points from the origin to\n * its location), a velocity (the rate at which the\n * object's position changes per time unit, expressed\n * as a vector), and acceleration (the rate at which\n * the object's velocity changes per time unit,\n * expressed as a vector).\n \n Since vectors represent groupings of values, we\n * cannot simply use traditional\n * addition/multiplication/etc. Instead, we'll need\n * to do some \"vector\" math, which is made easy by\n * the methods inside the p5.Vector class.\n \n @param [x] x component of the vector\n * @param [y] y component of the vector\n * @param [z] z component of the vector\n /\n constructor(x?: number, y?: number, z?: number);\n\n /\n Gets a copy of the vector, returns a p5.Vector\n * object.\n * @param v the p5.Vector to create a copy of\n * @return the copy of the p5.Vector object\n /\n static copy(v: Vector): Vector;\n\n /\n Adds x, y, and z components to a vector, adds one\n * vector to another, or adds two independent vectors\n * together. The version of the method that adds two\n * vectors together is a static method and returns a\n * p5.Vector, the others act directly on the vector.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param v1 A p5.Vector to add\n * @param v2 A p5.Vector to add\n * @param [target] The vector to receive the result\n * @return The resulting p5.Vector\n /\n static add(v1: Vector, v2: Vector, target?: Vector): Vector;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param v1 The dividend p5.Vector\n * @param v2 The divisor p5.Vector\n /\n static rem(v1: Vector, v2: Vector): void;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param v1 The dividend p5.Vector\n * @param v2 The divisor p5.Vector\n * @return The resulting p5.Vector\n /\n static rem(v1: Vector, v2: Vector): Vector;\n\n /\n Subtracts x, y, and z components from a vector,\n * subtracts one vector from another, or subtracts\n * two independent vectors. The version of the method\n * that subtracts two vectors is a static method and\n * returns a p5.Vector, the others act directly on\n * the vector. Additionally, you may provide\n * arguments to this method as an array. See the\n * examples for more context.\n * @param v1 A p5.Vector to subtract from\n * @param v2 A p5.Vector to subtract\n * @param [target] The vector to receive the result\n * @return The resulting p5.Vector\n /\n static sub(v1: Vector, v2: Vector, target?: Vector): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param x The number to multiply with the x\n * component of the vector\n * @param y The number to multiply with the y\n * component of the vector\n * @param [z] The number to multiply with the z\n * component of the vector\n * @return The resulting new p5.Vector\n /\n static mult(x: number, y: number, z?: number): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param v The vector to multiply with the\n * components of the original vector\n * @param n The number to multiply with the vector\n * @param [target] the vector to receive the result\n /\n static mult(v: Vector, n: number, target?: Vector): void;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param [target] the vector to receive the result\n /\n static mult(v0: Vector, v1: Vector, target?: Vector): void;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param arr The array to multiply with the\n * components of the vector\n * @param [target] the vector to receive the result\n /\n static mult(v0: Vector, arr: number[], target?: Vector): void;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param x The number to divide with the x component\n * of the vector\n * @param y The number to divide with the y component\n * of the vector\n * @param [z] The number to divide with the z\n * component of the vector\n * @return The resulting new p5.Vector\n /\n static div(x: number, y: number, z?: number): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param v The vector to divide the components of\n * the original vector by\n * @param n The number to divide the vector by\n * @param [target] The vector to receive the result\n /\n static div(v: Vector, n: number, target?: Vector): void;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param [target] The vector to receive the result\n /\n static div(v0: Vector, v1: Vector, target?: Vector): void;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param arr The array to divide the components of\n * the vector by\n * @param [target] The vector to receive the result\n /\n static div(v0: Vector, arr: number[], target?: Vector): void;\n\n /\n Calculates the magnitude (length) of the vector\n * and returns the result as a float. (This is simply\n * the equation sqrt(xx + yy + zz).)\n @param vecT The vector to return the magnitude of\n * @return The magnitude of vecT\n /\n static mag(vecT: Vector): number;\n\n /\n Calculates the squared magnitude of the vector and\n * returns the result as a float. (This is simply the\n * equation xx + yy + zz.) Faster if the real\n length is not required in the case of comparing\n * vectors, etc.\n * @param vecT the vector to return the squared\n * magnitude of\n * @return the squared magnitude of vecT\n /\n static magSq(vecT: Vector): number;\n\n /\n Calculates the dot product of two vectors. The\n * version of the method that computes the dot\n * product of two independent vectors is a static\n * method. See the examples for more context.\n * @param v1 The first p5.Vector\n * @param v2 The second p5.Vector\n * @return The dot product\n /\n static dot(v1: Vector, v2: Vector): number;\n\n /\n Calculates and returns a vector composed of the\n * cross product between two vectors. Both the static\n * and non-static methods return a new p5.Vector. See\n * the examples for more context.\n * @param v1 The first p5.Vector\n * @param v2 The second p5.Vector\n * @return The cross product\n /\n static cross(v1: Vector, v2: Vector): number;\n\n /\n Calculates the Euclidean distance between two\n * points (considering a point as a vector object).\n * If you are looking to calculate distance between 2\n * points see dist()\n * @param v1 The first p5.Vector\n * @param v2 The second p5.Vector\n * @return The distance\n /\n static dist(v1: Vector, v2: Vector): number;\n\n /\n Normalize the vector to length 1 (make it a unit\n * vector).\n * @param v The vector to normalize\n * @param [target] The vector to receive the result\n * @return The vector v, normalized to a length of 1\n /\n static normalize(v: Vector, target?: Vector): Vector;\n\n /\n Limit the magnitude of this vector to the value\n * used for the max parameter.\n * @param v the vector to limit\n * @param max The maximum magnitude for the vector\n * @param [target] the vector to receive the result\n * (Optional)\n * @return v with a magnitude limited to max\n /\n static limit(v: Vector, max: number, target?: Vector): Vector;\n\n /\n Set the magnitude of this vector to the value used\n * for the len parameter.\n * @param v the vector to set the magnitude of\n * @param len The new length for this vector\n * @param [target] the vector to receive the result\n * (Optional)\n * @return v with a magnitude set to len\n /\n static setMag(v: Vector, len: number, target?: Vector): Vector;\n\n /\n Calculate the angle of rotation for this vector\n * (only 2D vectors). p5.Vectors created using\n * createVector() will take the current angleMode()\n * into consideration, and give the angle in radians\n * or degrees accordingly.\n * @param v the vector to find the angle of\n * @return the angle of rotation\n /\n static heading(v: Vector): number;\n\n /\n Rotate the vector by an angle (only 2D vectors);\n * magnitude remains the same.\n * @param angle The angle of rotation\n * @param [target] The vector to receive the result\n /\n static rotate(v: Vector, angle: number, target?: Vector): void;\n\n /\n Calculates and returns the angle between two\n * vectors. This method will take the current\n * angleMode into consideration, and give the angle\n * in radians or degrees accordingly.\n * @param v1 the first vector\n * @param v2 the second vector\n * @return the angle between the two vectors\n /\n static angleBetween(v1: Vector, v2: Vector): number;\n\n /\n Linear interpolate the vector to another vector.\n * @param amt The amount of interpolation; some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @param [target] The vector to receive the result\n * @return The lerped value\n /\n static lerp(v1: Vector, v2: Vector, amt: number, target?: Vector): Vector;\n\n /\n Performs spherical linear interpolation with the\n * other vector and returns the resulting vector.\n * This works in both 3D and 2D. As for 2D, the\n * result of slerping between 2D vectors is always a\n * 2D vector.\n * @param v1 old vector\n * @param v2 new vectpr\n * @param amt The amount of interpolation. some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @param [target] The vector to receive the result\n * @return slerped vector between v1 and v2\n /\n static slerp(v1: Vector, v2: Vector, amt: number, target?: Vector): Vector;\n\n /\n Reflect a vector about a normal to a line in 2D,\n * or about a normal to a plane in 3D.\n * @param incidentVector vector to be reflected\n * @param surfaceNormal the p5.Vector to reflect\n * about.\n * @param [target] the vector to receive the result\n * (Optional)\n * @return the reflected vector\n /\n static reflect(incidentVector: Vector, surfaceNormal: Vector, target?: Vector): Vector;\n\n /\n Return a representation of this vector as a float\n * array. This is only for temporary use. If used in\n * any other fashion, the contents should be copied\n * by using the p5.Vector.copy() method to copy into\n * your own vector.\n * @param v the vector to convert to an array\n * @return an Array with the 3 values\n /\n static array(v: Vector): number[];\n\n /\n Equality check against a p5.Vector.\n * @param v1 the first vector to compare\n * @param v2 the second vector to compare\n /\n static equals(v1: Vector \| any[], v2: Vector \| any[]): boolean;\n\n /\n Make a new 2D vector from an angle.\n * @param angle The desired angle, in radians\n * (unaffected by angleMode)\n * @param [length] The length of the new vector\n * (defaults to 1)\n * @return The new p5.Vector object\n /\n static fromAngle(angle: number, length?: number): Vector;\n\n /\n Make a new 3D vector from a pair of ISO spherical\n * angles.\n * @param theta The polar angle, in radians (zero is\n * up)\n * @param phi The azimuthal angle, in radians (zero\n * is out of the screen)\n * @param [length] The length of the new vector\n * (defaults to 1)\n * @return A new p5.Vector object\n /\n static fromAngles(theta: number, phi: number, length?: number): Vector;\n\n /\n Make a new 2D unit vector from a random angle.\n * @return A new p5.Vector object\n /\n static random2D(): Vector;\n\n /\n Make a new random 3D unit vector.\n * @return A new p5.Vector object\n /\n static random3D(): Vector;\n\n /\n Returns a string representation of a vector v by\n * calling String(v) or v.toString(). This method is\n * useful for logging vectors in the console.\n /\n toString(): string;\n\n /\n Sets the x, y, and z components of the vector\n * using two or three separate variables, the data\n * from a p5.Vector, or the values from a float\n * array.\n * @param [x] The x component of the vector\n * @param [y] The y component of the vector\n * @param [z] The z component of the vector\n * @chainable\n /\n set(x?: number, y?: number, z?: number): Vector;\n\n /\n Sets the x, y, and z components of the vector\n * using two or three separate variables, the data\n * from a p5.Vector, or the values from a float\n * array.\n * @param value The vector to set\n * @chainable\n /\n set(value: Vector \| number[]): Vector;\n\n /\n Gets a copy of the vector, returns a p5.Vector\n * object.\n * @return A copy of the p5.Vector object\n /\n copy(): Vector;\n\n /\n Adds x, y, and z components to a vector, adds one\n * vector to another, or adds two independent vectors\n * together. The version of the method that adds two\n * vectors together is a static method and returns a\n * p5.Vector, the others act directly on the vector.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param x The x component of the vector to be added\n * @param [y] The y component of the vector to be\n * added\n * @param [z] The z component of the vector to be\n * added\n * @chainable\n /\n add(x: number, y?: number, z?: number): Vector;\n\n /\n Adds x, y, and z components to a vector, adds one\n * vector to another, or adds two independent vectors\n * together. The version of the method that adds two\n * vectors together is a static method and returns a\n * p5.Vector, the others act directly on the vector.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param value The vector to add\n * @chainable\n /\n add(value: Vector \| number[]): Vector;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param x The x component of divisor vector\n * @param y The y component of divisor vector\n * @param z The z component of divisor vector\n * @chainable\n /\n rem(x: number, y: number, z: number): Vector;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param value The divisor vector\n * @chainable\n /\n rem(value: Vector \| number[]): Vector;\n\n /\n Subtracts x, y, and z components from a vector,\n * subtracts one vector from another, or subtracts\n * two independent vectors. The version of the method\n * that subtracts two vectors is a static method and\n * returns a p5.Vector, the others act directly on\n * the vector. Additionally, you may provide\n * arguments to this method as an array. See the\n * examples for more context.\n * @param x The x component of the vector to subtract\n * @param [y] The y component of the vector to\n * subtract\n * @param [z] The z component of the vector to\n * subtract\n * @chainable\n /\n sub(x: number, y?: number, z?: number): Vector;\n\n /\n Subtracts x, y, and z components from a vector,\n * subtracts one vector from another, or subtracts\n * two independent vectors. The version of the method\n * that subtracts two vectors is a static method and\n * returns a p5.Vector, the others act directly on\n * the vector. Additionally, you may provide\n * arguments to this method as an array. See the\n * examples for more context.\n * @param value the vector to subtract\n * @chainable\n /\n sub(value: Vector \| number[]): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param n The number to multiply with the vector\n * @chainable\n /\n mult(n: number): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param x The number to multiply with the x\n * component of the vector\n * @param y The number to multiply with the y\n * component of the vector\n * @param [z] The number to multiply with the z\n * component of the vector\n * @chainable\n /\n mult(x: number, y: number, z?: number): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param arr The array to multiply with the\n * components of the vector\n * @chainable\n /\n mult(arr: number[]): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param v The vector to multiply with the\n * components of the original vector\n * @chainable\n /\n mult(v: Vector): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param n The number to divide the vector by\n * @chainable\n /\n div(n: number): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param x The number to divide with the x component\n * of the vector\n * @param y The number to divide with the y component\n * of the vector\n * @param [z] The number to divide with the z\n * component of the vector\n * @chainable\n /\n div(x: number, y: number, z?: number): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param arr The array to divide the components of\n * the vector by\n * @chainable\n /\n div(arr: number[]): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param v The vector to divide the components of\n * the original vector by\n * @chainable\n /\n div(v: Vector): Vector;\n\n /\n Calculates the magnitude (length) of the vector\n * and returns the result as a float. (This is simply\n * the equation sqrt(xx + yy + zz).)\n @return The magnitude of the vector\n /\n mag(): number;\n\n /\n Calculates the squared magnitude of the vector and\n * returns the result as a float. (This is simply the\n * equation xx + yy + zz.) Faster if the real\n length is not required in the case of comparing\n * vectors, etc.\n * @return The squared magnitude of the vector\n /\n magSq(): number;\n\n /\n Calculates the dot product of two vectors. The\n * version of the method that computes the dot\n * product of two independent vectors is a static\n * method. See the examples for more context.\n * @param x The x component of the vector\n * @param [y] The y component of the vector\n * @param [z] The z component of the vector\n * @return The dot product\n /\n dot(x: number, y?: number, z?: number): number;\n\n /\n Calculates the dot product of two vectors. The\n * version of the method that computes the dot\n * product of two independent vectors is a static\n * method. See the examples for more context.\n * @param value value component of the vector or a\n * p5.Vector\n /\n dot(value: Vector): number;\n\n /\n Calculates and returns a vector composed of the\n * cross product between two vectors. Both the static\n * and non-static methods return a new p5.Vector. See\n * the examples for more context.\n * @param v p5.Vector to be crossed\n * @return p5.Vector composed of cross product\n /\n cross(v: Vector): Vector;\n\n /\n Calculates the Euclidean distance between two\n * points (considering a point as a vector object).\n * If you are looking to calculate distance between 2\n * points see dist()\n * @param v The x, y, and z coordinates of a\n * p5.Vector\n * @return The distance\n /\n dist(v: Vector): number;\n\n /\n Normalize the vector to length 1 (make it a unit\n * vector).\n * @return The normalized p5.Vector\n /\n normalize(): Vector;\n\n /\n Limit the magnitude of this vector to the value\n * used for the max parameter.\n * @param max The maximum magnitude for the vector\n * @chainable\n /\n limit(max: number): Vector;\n\n /\n Set the magnitude of this vector to the value used\n * for the len parameter.\n * @param len The new length for this vector\n * @chainable\n /\n setMag(len: number): Vector;\n\n /\n Calculate the angle of rotation for this vector\n * (only 2D vectors). p5.Vectors created using\n * createVector() will take the current angleMode()\n * into consideration, and give the angle in radians\n * or degrees accordingly.\n * @return The angle of rotation\n /\n heading(): number;\n\n /\n Rotate the vector to a specific angle (only 2D\n * vectors); magnitude remains the same.\n * @param angle The angle of rotation\n * @chainable\n /\n setHeading(angle: number): Vector;\n\n /\n Rotate the vector by an angle (only 2D vectors);\n * magnitude remains the same.\n * @param angle The angle of rotation\n * @chainable\n /\n rotate(angle: number): Vector;\n\n /\n Calculates and returns the angle between two\n * vectors. This method will take the current\n * angleMode into consideration, and give the angle\n * in radians or degrees accordingly.\n * @param value The x, y, and z components of a\n * p5.Vector\n * @return The angle between\n /\n angleBetween(value: Vector): number;\n\n /\n Linear interpolate the vector to another vector.\n * @param x The x component\n * @param y The y component\n * @param z The z component\n * @param amt The amount of interpolation; some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @chainable\n /\n lerp(x: number, y: number, z: number, amt: number): Vector;\n\n /\n Linear interpolate the vector to another vector.\n * @param v The p5.Vector to lerp to\n * @param amt The amount of interpolation; some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @chainable\n /\n lerp(v: Vector, amt: number): Vector;\n\n /\n Performs spherical linear interpolation with the\n * other vector and returns the resulting vector.\n * This works in both 3D and 2D. As for 2D, the\n * result of slerping between 2D vectors is always a\n * 2D vector.\n * @param v the p5.Vector to slerp to\n * @param amt The amount of interpolation. some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n /\n slerp(v: Vector, amt: number): Vector;\n\n /\n Reflect a vector about a normal to a line in 2D,\n * or about a normal to a plane in 3D.\n * @param surfaceNormal the p5.Vector to reflect\n * about.\n * @chainable\n /\n reflect(surfaceNormal: Vector): Vector;\n\n /\n Return a representation of this vector as a float\n * array. This is only for temporary use. If used in\n * any other fashion, the contents should be copied\n * by using the p5.Vector.copy() method to copy into\n * your own vector.\n * @return An Array with the 3 values\n /\n array(): number[];\n\n /\n Equality check against a p5.Vector.\n * @param [x] The x component of the vector\n * @param [y] The y component of the vector\n * @param [z] The z component of the vector\n * @return Whether the vectors are equal\n /\n equals(x?: number, y?: number, z?: number): boolean;\n\n /\n Equality check against a p5.Vector.\n * @param value The vector to compare\n /\n equals(value: Vector \| any[]): boolean;\n\n /\n The x component of the vector\n /\n x: number;\n\n /\n The y component of the vector\n /\n y: number;\n\n /\n The z component of the vector\n /\n z: number;\n }\n\nclass Font {\n /\n Base class for font handling\n \n @param [pInst] pointer to p5 instance\n /\n constructor(pInst?: p5);\n\n /\n Returns a tight bounding box for the given text\n * string using this font\n * @param line a line of text\n * @param x x-position\n * @param y y-position\n * @param [fontSize] font size to use (optional)\n * Default is 12.\n * @param [options] opentype options (optional)\n * opentype fonts contains alignment and baseline\n * options. Default is 'LEFT' and 'alphabetic'\n * @return a rectangle object with properties: x, y,\n * w, h\n /\n textBounds(line: string, x: number, y: number, fontSize?: number, options?: object): object;\n\n /\n Computes an array of points following the path for\n * specified text\n * @param txt a line of text\n * @param x x-position\n * @param y y-position\n * @param fontSize font size to use (optional)\n * @param [options] an (optional) object that can\n * contain:\n \n \n * sampleFactor - the ratio of path-length to number\n * of samples (default=.1); higher values yield more\n * points and are therefore more precise\n \n \n * simplifyThreshold - if set to a non-zero value,\n * collinear points will be be removed from the\n * polygon; the value represents the threshold angle\n * to use when determining whether two edges are\n * collinear\n * @return an array of points, each with x, y, alpha\n * (the path angle)\n /\n textToPoints(txt: string, x: number, y: number, fontSize: number, options?: object): any[];\n\n /\n Underlying opentype font implementation\n /\n font: any;\n }\n\nclass Framebuffer {\n /\n An object that one can draw to and then read as a\n * texture. While similar to a p5.Graphics, using a\n * p5.Framebuffer as a texture will generally run\n * much faster, as it lives within the same WebGL\n * context as the canvas it is created on. It only\n * works in WebGL mode.\n \n @param target A p5 global instance or p5.Graphics\n * @param [settings] A settings object\n /\n constructor(target: Graphics, settings?: object);\n\n /\n Resizes the framebuffer to the given width and\n * height.\n /\n resize(width: number, height: number): void;\n\n /\n Gets or sets the pixel scaling for high pixel\n * density displays. By default, the density will\n * match that of the canvas the framebuffer was\n * created on, which will match the display density.\n * Call this method with no arguments to get the\n * current density, or pass in a number to set the\n * density.\n * @param [density] A scaling factor for the number\n * of pixels per side of the framebuffer\n /\n pixelDensity(density?: number): void;\n\n /\n Gets or sets whether or not this framebuffer will\n * automatically resize along with the canvas it's\n * attached to in order to match its size. Call this\n * method with no arguments to see if it is currently\n * auto-sized, or pass in a boolean to set this\n * property.\n * @param [autoSized] Whether or not the framebuffer\n * should resize along with the canvas it's attached\n * to\n /\n autoSized(autoSized?: boolean): void;\n\n /\n Creates and returns a new p5.FramebufferCamera to\n * be used while drawing to this framebuffer. The\n * camera will be set as the currently active camera.\n * @return A new camera\n /\n createCamera(): Camera;\n\n /\n Removes the framebuffer and frees its resources.\n /\n remove(): void;\n\n /\n Begin drawing to this framebuffer. Subsequent\n * drawing functions to the canvas the framebuffer is\n * attached to will not be immediately visible, and\n * will instead be drawn to the framebuffer's\n * texture. Call end() when finished to make draw\n * functions go right to the canvas again and to be\n * able to read the contents of the framebuffer's\n * texture.\n /\n begin(): void;\n\n /\n After having previously called begin(), this\n * method stops drawing functions from going to the\n * framebuffer's texture, allowing them to go right\n * to the canvas again. After this, one can read from\n * the framebuffer's texture.\n /\n end(): void;\n\n /\n Run a function while drawing to the framebuffer\n * rather than to its canvas. This is equivalent to\n * calling framebuffer.begin(), running the function,\n * and then calling framebuffer.end(), but ensures\n * that one never accidentally forgets begin or end.\n * @param callback A function to run that draws to\n * the canvas. The function will immediately be run,\n * but it will draw to the framebuffer instead of the\n * canvas.\n /\n draw(callback: (...args: any[]) => any): void;\n\n /\n Get a region of pixels from the canvas in the form\n * of a p5.Image, or a single pixel as an array of\n * numbers. Returns an array of [R,G,B,A] values for\n * any pixel or grabs a section of an image. If the\n * Framebuffer has been set up to not store alpha\n * values, then only [R,G,B] will be returned. If no\n * parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param w width of the section to be returned\n * @param h height of the section to be returned\n * @return the rectangle p5.Image\n /\n get(x: number, y: number, w: number, h: number): Image;\n\n /\n Get a region of pixels from the canvas in the form\n * of a p5.Image, or a single pixel as an array of\n * numbers. Returns an array of [R,G,B,A] values for\n * any pixel or grabs a section of an image. If the\n * Framebuffer has been set up to not store alpha\n * values, then only [R,G,B] will be returned. If no\n * parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n * @return the whole p5.Image\n /\n get(): Image;\n\n /\n Get a region of pixels from the canvas in the form\n * of a p5.Image, or a single pixel as an array of\n * numbers. Returns an array of [R,G,B,A] values for\n * any pixel or grabs a section of an image. If the\n * Framebuffer has been set up to not store alpha\n * values, then only [R,G,B] will be returned. If no\n * parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @return color of pixel at x,y in array format [R,\n * G, B, A]\n /\n get(x: number, y: number): number[];\n\n /\n A Uint8ClampedArray containing the values for all\n * the pixels in the Framebuffer. Like the main\n * canvas pixels property, call loadPixels() before\n * reading it, and call updatePixels() afterwards to\n * update its data.\n \n Note that updating pixels via this property will\n * be slower than drawing to the framebuffer\n * directly. Consider using a shader instead of\n * looping over pixels.\n /\n pixels: number[];\n\n /\n A texture with the color information of the\n * framebuffer. Pass this (or the framebuffer itself)\n * to texture() to draw it to the canvas, or pass it\n * to a shader with setUniform() to read its data.\n * Since Framebuffers are controlled by WebGL, their\n * y coordinates are stored flipped compared to\n * images and videos. When texturing with a\n * framebuffer texture, you may want to flip\n * vertically, e.g. with plane(framebuffer.width,\n * -framebuffer.height).\n /\n color: any;\n\n /\n A texture with the depth information of the\n * framebuffer. If the framebuffer was created with {\n * depth: false } in its settings, then this property\n * will be undefined. Pass this to texture() to draw\n * it to the canvas, or pass it to a shader with\n * setUniform() to read its data. Since Framebuffers\n * are controlled by WebGL, their y coordinates are\n * stored flipped compared to images and videos. When\n * texturing with a framebuffer texture, you may want\n * to flip vertically, e.g. with\n * plane(framebuffer.width, -framebuffer.height).\n /\n depth: any;\n }\n\nclass Geometry {\n /\n p5 Geometry class\n \n @param [detailX] number of vertices along the\n * x-axis.\n * @param [detailY] number of vertices along the\n * y-axis.\n * @param [callback] function to call upon object\n * instantiation.\n /\n constructor(detailX?: number, detailY?: number, callback?: (...args: any[]) => any);\n\n /\n computes faces for geometry objects based on the\n * vertices.\n * @chainable\n /\n computeFaces(): Geometry;\n\n /\n computes smooth normals per vertex as an average\n * of each face.\n * @chainable\n /\n computeNormals(): Geometry;\n\n /\n Averages the vertex normals. Used in curved\n * surfaces\n * @chainable\n /\n averageNormals(): Geometry;\n\n /\n Averages pole normals. Used in spherical\n * primitives\n * @chainable\n /\n averagePoleNormals(): Geometry;\n\n /\n Modifies all vertices to be centered within the\n * range -100 to 100.\n * @chainable\n /\n normalize(): Geometry;\n }\n\nclass Shader {\n // TODO: Fix p5.Shader() errors in src/webgl/p5.Shader.js, line 11:\n //\n // param \"renderer\" has invalid type: p5.RendererGL\n //\n // constructor(renderer: RendererGL, vertSrc: string, fragSrc: string);\n\n /\n Used to set the uniforms of a p5.Shader object.\n * Uniforms are used as a way to provide shader\n * programs (which run on the GPU) with values from a\n * sketch (which runs on the CPU).\n * @param uniformName the name of the uniform. Must\n * correspond to the name used in the vertex and\n * fragment shaders\n * @param data the data to associate with the\n * uniform. The type can be a boolean (true/false), a\n * number, an array of numbers, or an image\n * (p5.Image, p5.Graphics, p5.MediaElement,\n * p5.Texture)\n * @chainable\n /\n setUniform(uniformName: string, data: boolean \| number \| number[] \| Image \| Graphics \| MediaElement): Shader;\n }\n\nclass Renderer extends Element {\n /\n Main graphics and rendering context, as well as\n * the base API implementation for p5.js \"core\". To\n * be used as the superclass for Renderer2D and\n * Renderer3D classes, respectively.\n \n @param elt DOM node that is wrapped\n * @param [pInst] pointer to p5 instance\n * @param [isMainCanvas] whether we're using it as\n * main canvas\n */\n constructor(elt: HTMLElement, pInst?: p5, isMainCanvas?: boolean);\n }\n\ntype ADD = 'lighter';\n type ARROW = 'arrow';\n type AUTO = 'auto';\n type AXES = 'axes';\n type BASELINE = 'alphabetic';\n type BEVEL = 'bevel';\n type BEZIER = 'bezier';\n type BLEND = 'source-over';\n type BLUR = 'blur';\n type BOLD = 'bold';\n type BOLDITALIC = 'bolditalic';\n type BOTTOM = 'bottom';\n type BURN = 'color-burn';\n type CENTER = 'center';\n type CHAR = 'char';\n type CHORD = 'chord';\n type CLAMP = 'clamp';\n type CLOSE = 'close';\n type CONTAIN = 'contain';\n type CORNER = 'corner';\n type CORNERS = 'corners';\n type COVER = 'cover';\n type CROSS = 'cross';\n type CURVE = 'curve';\n type DARKEST = 'darkest';\n type DEGREES = 'degrees';\n type DIFFERENCE = 'difference';\n type DILATE = 'dilate';\n type DODGE = 'color-dodge';\n type ERODE = 'erode';\n type EXCLUSION = 'exclusion';\n type FALLBACK = 'fallback';\n type FILL = 'fill';\n type FLOAT = 'float';\n type GRAY = 'gray';\n type GRID = 'grid';\n type HALF_FLOAT = 'half-float';\n type HAND = 'hand';\n type HARD_LIGHT = 'hard-light';\n type HSB = 'hsb';\n type HSL = 'hsl';\n type IMAGE = 'image';\n type IMMEDIATE = 'immediate';\n type INVERT = 'invert';\n type ITALIC = 'italic';\n type LABEL = 'label';\n type LANDSCAPE = 'landscape';\n type LEFT = 'left';\n type LIGHTEST = 'lighten';\n type LINE_LOOP = 0x0002;\n type LINE_STRIP = 0x0003;\n type LINEAR = 'linear';\n type LINES = 0x0001;\n type MIRROR = 'mirror';\n type MITER = 'miter';\n type MOVE = 'move';\n type MULTIPLY = 'multiply';\n type NEAREST = 'nearest';\n type NORMAL = 'normal';\n type OPAQUE = 'opaque';\n type OPEN = 'open';\n type OVERLAY = 'overlay';\n type P2D = 'p2d';\n type PIE = 'pie';\n type POINTS = 0x0000;\n type PORTRAIT = 'portrait';\n type POSTERIZE = 'posterize';\n type PROJECT = 'square';\n type QUAD_STRIP = 'quad_strip';\n type QUADRATIC = 'quadratic';\n type QUADS = 'quads';\n type RADIANS = 'radians';\n type RADIUS = 'radius';\n type REMOVE = 'destination-out';\n type REPEAT = 'repeat';\n type REPLACE = 'copy';\n type RGB = 'rgb';\n type RGBA = 'rgba';\n type RIGHT = 'right';\n type ROUND = 'round';\n type SCREEN = 'screen';\n type SOFT_LIGHT = 'soft-light';\n type SQUARE = 'butt';\n type STROKE = 'stroke';\n type SUBTRACT = 'subtract';\n type TESS = 'tess';\n type TEXT = 'text';\n type TEXTURE = 'texture';\n type THRESHOLD = 'threshold';\n type TOP = 'top';\n type TRIANGLE_FAN = 0x0006;\n type TRIANGLE_STRIP = 0x0005;\n type TRIANGLES = 0x0004;\n type UNSIGNED_BYTE = 'unsigned-byte';\n type UNSIGNED_INT = 'unsigned-int';\n type VERSION = 'version';\n type WAIT = 'wait';\n type WEBGL = 'webgl';\n type WEBGL2 = 'webgl2';\n type WORD = 'word';\n type VIDEO = 'video';\n type AUDIO = 'audio';\n\ntype ANGLE_MODE = RADIANS \| DEGREES;\n\n type ARC_MODE = CHORD \| PIE \| OPEN;\n\n type BEGIN_KIND = POINTS \| LINES \| TRIANGLES \| TRIANGLE_FAN \| TRIANGLE_STRIP \| QUADS \| QUAD_STRIP \| TESS;\n\n type BLEND_MODE =\n \| BLEND\n \| DARKEST\n \| LIGHTEST\n \| DIFFERENCE\n \| MULTIPLY\n \| EXCLUSION\n \| SCREEN\n \| REPLACE\n \| OVERLAY\n \| HARD_LIGHT\n \| SOFT_LIGHT\n \| DODGE\n \| BURN\n \| ADD\n \| NORMAL;\n\n type COLOR_MODE = RGB \| HSB \| HSL;\n\n type CURSOR_TYPE = ARROW \| CROSS \| HAND \| MOVE \| TEXT;\n\n type DEBUG_MODE = GRID \| AXES;\n\n type DESCRIBE_DISPLAY = LABEL \| FALLBACK;\n\n type ELLIPSE_MODE = CENTER \| RADIUS \| CORNER \| CORNERS;\n\n type END_MODE = CLOSE;\n\n type FILTER_TYPE = THRESHOLD \| GRAY \| OPAQUE \| INVERT \| POSTERIZE \| ERODE \| DILATE \| BLUR;\n\n type GRAPHICS_RENDERER = P2D \| WEBGL;\n\n type GRID_DISPLAY = FALLBACK \| LABEL;\n\n type HORIZ_ALIGN = LEFT \| CENTER \| RIGHT;\n\n type IMAGE_FIT = CONTAIN \| COVER;\n\n type IMAGE_MODE = CORNER \| CORNERS \| CENTER;\n\n type RECT_MODE = CORNER \| CORNERS \| CENTER \| RADIUS;\n\n type RENDERER = P2D \| WEBGL;\n\n type SIZE_H = AUTO;\n\n type SIZE_W = AUTO;\n\n type STROKE_CAP = ROUND \| SQUARE \| PROJECT;\n\n type STROKE_JOIN = MITER \| BEVEL \| ROUND;\n\n type TEXT_DISPLAY = FALLBACK \| LABEL;\n\n type TEXTURE_MODE = IMAGE \| NORMAL;\n\n type THE_STYLE = NORMAL \| ITALIC \| BOLD \| BOLDITALIC;\n\n type TYPE = VIDEO \| AUDIO;\n\n type VERT_ALIGN = TOP \| BOTTOM \| CENTER \| BASELINE;\n\n type WRAP_STYLE = WORD \| CHAR;\n\n type WRAP_X = CLAMP \| REPEAT \| MIRROR;\n\n type WRAP_Y = CLAMP \| REPEAT \| MIRROR;\n\n type X_ALIGN = LEFT \| RIGHT \| CENTER;\n\n type Y_ALIGN = TOP \| BOTTOM \| CENTER;\n}\n";
1	+ export const artistDtsP5 = "// Viji Artist API - Global Type Definitions\n// All types are placed inside declare global {} because this file uses export {}\n// for top-level await support, which makes it a module (where top-level declarations\n// would otherwise be module-scoped, not global).\n\ndeclare global {\n interface AudioAPI {\r\n isConnected: boolean;\r\n volume: {\r\n current: number;\r\n peak: number;\r\n smoothed: number;\r\n };\r\n bands: {\r\n low: number;\r\n lowMid: number;\r\n mid: number;\r\n highMid: number;\r\n high: number;\r\n lowSmoothed: number;\r\n lowMidSmoothed: number;\r\n midSmoothed: number;\r\n highMidSmoothed: number;\r\n highSmoothed: number;\r\n };\r\n beat: {\r\n kick: number;\r\n snare: number;\r\n hat: number;\r\n any: number;\r\n kickSmoothed: number;\r\n snareSmoothed: number;\r\n hatSmoothed: number;\r\n anySmoothed: number;\r\n triggers: {\r\n any: boolean;\r\n kick: boolean;\r\n snare: boolean;\r\n hat: boolean;\r\n };\r\n events: Array<{\r\n type: 'kick' \| 'snare' \| 'hat';\r\n time: number;\r\n strength: number;\r\n }>;\r\n bpm: number;\r\n confidence: number;\r\n isLocked: boolean;\r\n };\r\n spectral: {\r\n brightness: number;\r\n flatness: number;\r\n };\r\n getFrequencyData: () => Uint8Array;\r\n getWaveform: () => Float32Array;\r\n }\r\n\n interface AudioStreamAPI {\r\n isConnected: boolean;\r\n volume: {\r\n current: number;\r\n peak: number;\r\n smoothed: number;\r\n };\r\n bands: {\r\n low: number;\r\n lowMid: number;\r\n mid: number;\r\n highMid: number;\r\n high: number;\r\n lowSmoothed: number;\r\n lowMidSmoothed: number;\r\n midSmoothed: number;\r\n highMidSmoothed: number;\r\n highSmoothed: number;\r\n };\r\n spectral: {\r\n brightness: number;\r\n flatness: number;\r\n };\r\n getFrequencyData: () => Uint8Array;\r\n getWaveform: () => Float32Array;\r\n }\r\n\n interface ButtonConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ButtonParameter {\r\n value: boolean;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface CaptureFrameOptions {\r\n /** Output format: 'blob' for encoded image, 'bitmap' for GPU-friendly ImageBitmap /\r\n format?: 'blob' \| 'bitmap';\r\n /* MIME type for blob output (ignored for bitmap), e.g., 'image/png', 'image/jpeg', 'image/webp' /\r\n type?: string;\r\n /\r\n Target resolution.\r\n * - number: scale factor relative to current canvas size (e.g., 0.5 = 50%)\r\n * - { width, height }: exact output size; if aspect ratio differs from canvas,\r\n * the source is center-cropped to match the target aspect ratio before scaling\r\n /\r\n resolution?: number \| {\r\n width: number;\r\n height: number;\r\n };\r\n }\r\n\n interface ColorConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ColorParameter {\r\n value: string;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n type CVFeature = 'faceDetection' \| 'faceMesh' \| 'handTracking' \| 'poseDetection' \| 'bodySegmentation' \| 'emotionDetection';\r\n\n type CVFrameRateMode = 'full' \| 'half' \| 'quarter' \| 'eighth';\r\n\n interface DeviceMotionData {\r\n /* Acceleration without gravity (m/s²) /\r\n acceleration: {\r\n x: number \| null;\r\n y: number \| null;\r\n z: number \| null;\r\n } \| null;\r\n /* Acceleration including gravity (m/s²) /\r\n accelerationIncludingGravity: {\r\n x: number \| null;\r\n y: number \| null;\r\n z: number \| null;\r\n } \| null;\r\n /* Rotation rate (degrees/second) /\r\n rotationRate: {\r\n alpha: number \| null;\r\n beta: number \| null;\r\n gamma: number \| null;\r\n } \| null;\r\n /* Interval between updates (milliseconds) /\r\n interval: number;\r\n }\r\n\n interface DeviceOrientationData {\r\n /* Rotation around Z-axis (0-360 degrees, compass heading) /\r\n alpha: number \| null;\r\n /* Rotation around X-axis (-180 to 180 degrees, front-to-back tilt) /\r\n beta: number \| null;\r\n /* Rotation around Y-axis (-90 to 90 degrees, left-to-right tilt) /\r\n gamma: number \| null;\r\n /* True if using magnetometer (compass) for absolute orientation /\r\n absolute: boolean;\r\n }\r\n\n interface DeviceSensorState {\r\n motion: DeviceMotionData \| null;\r\n orientation: DeviceOrientationData \| null;\r\n }\r\n\n interface DeviceState extends DeviceSensorState {\r\n /* Unique device identifier /\r\n id: string;\r\n /* User-friendly device name /\r\n name: string;\r\n /* Device camera video (null if not available) /\r\n video: VideoAPI \| null;\r\n /* Device audio stream (null if not available) /\r\n audio: AudioStreamAPI \| null;\r\n }\r\n\n interface FaceBlendshapes {\r\n browDownLeft: number;\r\n browDownRight: number;\r\n browInnerUp: number;\r\n browOuterUpLeft: number;\r\n browOuterUpRight: number;\r\n cheekPuff: number;\r\n cheekSquintLeft: number;\r\n cheekSquintRight: number;\r\n eyeBlinkLeft: number;\r\n eyeBlinkRight: number;\r\n eyeLookDownLeft: number;\r\n eyeLookDownRight: number;\r\n eyeLookInLeft: number;\r\n eyeLookInRight: number;\r\n eyeLookOutLeft: number;\r\n eyeLookOutRight: number;\r\n eyeLookUpLeft: number;\r\n eyeLookUpRight: number;\r\n eyeSquintLeft: number;\r\n eyeSquintRight: number;\r\n eyeWideLeft: number;\r\n eyeWideRight: number;\r\n jawForward: number;\r\n jawLeft: number;\r\n jawOpen: number;\r\n jawRight: number;\r\n mouthClose: number;\r\n mouthDimpleLeft: number;\r\n mouthDimpleRight: number;\r\n mouthFrownLeft: number;\r\n mouthFrownRight: number;\r\n mouthFunnel: number;\r\n mouthLeft: number;\r\n mouthLowerDownLeft: number;\r\n mouthLowerDownRight: number;\r\n mouthPressLeft: number;\r\n mouthPressRight: number;\r\n mouthPucker: number;\r\n mouthRight: number;\r\n mouthRollLower: number;\r\n mouthRollUpper: number;\r\n mouthShrugLower: number;\r\n mouthShrugUpper: number;\r\n mouthSmileLeft: number;\r\n mouthSmileRight: number;\r\n mouthStretchLeft: number;\r\n mouthStretchRight: number;\r\n mouthUpperUpLeft: number;\r\n mouthUpperUpRight: number;\r\n noseSneerLeft: number;\r\n noseSneerRight: number;\r\n tongueOut: number;\r\n }\r\n\n interface FaceData {\r\n id: number;\r\n bounds: {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n };\r\n center: {\r\n x: number;\r\n y: number;\r\n };\r\n confidence: number;\r\n landmarks: {\r\n x: number;\r\n y: number;\r\n z?: number;\r\n }[];\r\n expressions: {\r\n neutral: number;\r\n happy: number;\r\n sad: number;\r\n angry: number;\r\n surprised: number;\r\n disgusted: number;\r\n fearful: number;\r\n };\r\n headPose: {\r\n pitch: number;\r\n yaw: number;\r\n roll: number;\r\n };\r\n blendshapes: FaceBlendshapes;\r\n }\r\n\n type FrameRateMode = 'full' \| 'half';\r\n\n interface FrequencyBand {\r\n name: string;\r\n min: number;\r\n max: number;\r\n }\r\n\n interface HandData {\r\n id: number;\r\n handedness: 'left' \| 'right';\r\n confidence: number;\r\n bounds: {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n };\r\n landmarks: {\r\n x: number;\r\n y: number;\r\n z: number;\r\n }[];\r\n palm: {\r\n x: number;\r\n y: number;\r\n z: number;\r\n };\r\n gestures: {\r\n fist: number;\r\n openPalm: number;\r\n peace: number;\r\n thumbsUp: number;\r\n thumbsDown: number;\r\n pointing: number;\r\n iLoveYou: number;\r\n };\r\n }\r\n\n interface ImageConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ImageParameter {\r\n value: ImageBitmap \| null;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n /\n P5-compatible image object (lazy-loaded, auto-converted from .value)\n * Only available in P5 renderer mode. Use with p5.image() function.\n * Example: p5.image(myImage.p5, x, y)\n /\n p5?: {\n canvas: OffscreenCanvas; // P5.js looks for img.canvas \|\| img.elt\n elt: OffscreenCanvas; // Fallback for compatibility\n width: number; // Logical width\n height: number; // Logical height\n };\n }\r\n\n interface KeyboardAPI {\r\n isPressed(key: string): boolean;\r\n wasPressed(key: string): boolean;\r\n wasReleased(key: string): boolean;\r\n activeKeys: Set<string>;\r\n pressedThisFrame: Set<string>;\r\n releasedThisFrame: Set<string>;\r\n lastKeyPressed: string;\r\n lastKeyReleased: string;\r\n shift: boolean;\r\n ctrl: boolean;\r\n alt: boolean;\r\n meta: boolean;\r\n textureData: Uint8Array;\r\n }\r\n\n interface MouseAPI {\r\n x: number;\r\n y: number;\r\n isInCanvas: boolean;\r\n isPressed: boolean;\r\n leftButton: boolean;\r\n rightButton: boolean;\r\n middleButton: boolean;\r\n deltaX: number;\r\n deltaY: number;\r\n wheelDelta: number;\r\n wheelX: number;\r\n wheelY: number;\r\n wasPressed: boolean;\r\n wasReleased: boolean;\r\n wasMoved: boolean;\r\n }\r\n\n interface NumberConfig {\r\n min?: number;\r\n max?: number;\r\n step?: number;\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface NumberParameter {\r\n value: number;\r\n min: number;\r\n max: number;\r\n step: number;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n type ParameterCategory = 'audio' \| 'video' \| 'interaction' \| 'general';\r\n\n interface PointerAPI {\r\n x: number;\r\n y: number;\r\n deltaX: number;\r\n deltaY: number;\r\n isDown: boolean;\r\n wasPressed: boolean;\r\n wasReleased: boolean;\r\n isInCanvas: boolean;\r\n type: 'mouse' \| 'touch' \| 'none';\r\n }\r\n\n interface PoseData {\r\n confidence: number;\r\n landmarks: {\r\n x: number;\r\n y: number;\r\n z: number;\r\n visibility: number;\r\n }[];\r\n face: {\r\n x: number;\r\n y: number;\r\n }[];\r\n torso: {\r\n x: number;\r\n y: number;\r\n }[];\r\n leftArm: {\r\n x: number;\r\n y: number;\r\n }[];\r\n rightArm: {\r\n x: number;\r\n y: number;\r\n }[];\r\n leftLeg: {\r\n x: number;\r\n y: number;\r\n }[];\r\n rightLeg: {\r\n x: number;\r\n y: number;\r\n }[];\r\n }\r\n\n type Resolution = {\r\n width: number;\r\n height: number;\r\n };\r\n\n interface SegmentationData {\r\n mask: Uint8Array;\r\n width: number;\r\n height: number;\r\n }\r\n\n interface SelectConfig {\r\n options: string[] \| number[];\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface SelectParameter {\r\n value: string \| number;\r\n options: string[] \| number[];\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface SliderConfig {\r\n min?: number;\r\n max?: number;\r\n step?: number;\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface SliderParameter {\r\n value: number;\r\n min: number;\r\n max: number;\r\n step: number;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface TextConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n maxLength?: number;\r\n }\r\n\n interface TextParameter {\r\n value: string;\r\n maxLength?: number;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface ToggleConfig {\r\n label: string;\r\n description?: string;\r\n group?: string;\r\n category?: ParameterCategory;\r\n }\r\n\n interface ToggleParameter {\r\n value: boolean;\r\n label: string;\r\n description?: string;\r\n group: string;\r\n category: ParameterCategory;\r\n }\r\n\n interface TouchAPI {\r\n points: TouchPoint[];\r\n count: number;\r\n started: TouchPoint[];\r\n moved: TouchPoint[];\r\n ended: TouchPoint[];\r\n primary: TouchPoint \| null;\r\n }\r\n\n interface TouchPoint {\r\n id: number;\r\n x: number;\r\n y: number;\r\n pressure: number;\r\n radius: number;\r\n radiusX: number;\r\n radiusY: number;\r\n rotationAngle: number;\r\n force: number;\r\n isInCanvas: boolean;\r\n deltaX: number;\r\n deltaY: number;\r\n velocity: {\r\n x: number;\r\n y: number;\r\n };\r\n isNew: boolean;\r\n isActive: boolean;\r\n isEnding: boolean;\r\n }\r\n\n const VERSION = \"0.3.33\";\r\n\n interface VideoAPI {\r\n isConnected: boolean;\r\n currentFrame: OffscreenCanvas \| ImageBitmap \| null;\r\n frameWidth: number;\r\n frameHeight: number;\r\n frameRate: number;\r\n getFrameData: () => ImageData \| null;\r\n faces: FaceData[];\r\n hands: HandData[];\r\n pose: PoseData \| null;\r\n segmentation: SegmentationData \| null;\r\n cv: {\r\n enableFaceDetection(enabled: boolean): Promise<void>;\r\n enableFaceMesh(enabled: boolean): Promise<void>;\r\n enableEmotionDetection(enabled: boolean): Promise<void>;\r\n enableHandTracking(enabled: boolean): Promise<void>;\r\n enablePoseDetection(enabled: boolean): Promise<void>;\r\n enableBodySegmentation(enabled: boolean): Promise<void>;\r\n getActiveFeatures(): CVFeature[];\r\n isProcessing(): boolean;\r\n };\r\n }\r\n\n interface VijiAPI {\r\n canvas: OffscreenCanvas;\r\n ctx?: OffscreenCanvasRenderingContext2D;\r\n gl?: WebGLRenderingContext \| WebGL2RenderingContext;\r\n width: number;\r\n height: number;\r\n time: number;\r\n deltaTime: number;\r\n frameCount: number;\r\n fps: number;\r\n audio: AudioAPI;\r\n video: VideoAPI;\r\n videoStreams: VideoAPI[];\r\n audioStreams: AudioStreamAPI[];\r\n mouse: MouseAPI;\r\n keyboard: KeyboardAPI;\r\n touches: TouchAPI;\r\n pointer: PointerAPI;\r\n device: DeviceSensorState;\r\n devices: DeviceState[];\r\n slider: (defaultValue: number, config: SliderConfig) => SliderParameter;\r\n color: (defaultValue: string, config: ColorConfig) => ColorParameter;\r\n toggle: (defaultValue: boolean, config: ToggleConfig) => ToggleParameter;\r\n select: (defaultValue: string \| number, config: SelectConfig) => SelectParameter;\r\n text: (defaultValue: string, config: TextConfig) => TextParameter;\r\n number: (defaultValue: number, config: NumberConfig) => NumberParameter;\r\n image: (defaultValue: null, config: ImageConfig) => ImageParameter;\r\n button: (config: ButtonConfig) => ButtonParameter;\r\n useContext(type: '2d'): OffscreenCanvasRenderingContext2D;\r\n useContext(type: 'webgl'): WebGLRenderingContext;\r\n useContext(type: 'webgl2'): WebGL2RenderingContext;\r\n }\r\n\n // Runtime global - the main viji object\n const viji: VijiAPI;\n \n // Function type aliases (artists define their own render/setup functions)\n type Render = (viji: VijiAPI) => void;\n type Setup = (viji: VijiAPI) => void;\n}\n\n// Module marker (enables top-level await in artist code)\nexport {};\n\n\n// ============================================================\n// VIJI + P5.JS HYBRID MODE\n// ============================================================\n// In Viji's P5 renderer, you don't use standard P5 patterns.\n// Instead, you define these Viji-specific functions:\n\n// P5-specific globals (augments the base declare global block)\ndeclare global {\n // Type aliases for P5 function signatures (artists define their own functions)\n /\n P5 render function signature - called every frame\n * @param viji - Viji API (canvas, audio, video, parameters, etc.)\n * @param p5 - P5.js instance with all P5 methods\n /\n type P5Render = (viji: VijiAPI, p5: p5) => void;\n \n /\n P5 setup function signature - called once at initialization\n * @param viji - Viji API (canvas, audio, video, parameters, etc.)\n * @param p5 - P5.js instance with all P5 methods\n /\n type P5Setup = (viji: VijiAPI, p5: p5) => void;\n}\n\n// ============================================================\n// IMPORTANT NOTES\n// ============================================================\n// - Don't use: new p5(), preload(), draw(), or P5's setup()\n// - Viji manages the P5 instance lifecycle (including createCanvas — never call it)\n// - Optional WEBGL: use // @renderer p5 webgl as the first line (default is 2D: // @renderer p5)\n// - Access P5 methods through the 'p5' parameter: p5.rect(), p5.fill(), etc.\n// - Access Viji features through the 'viji' parameter: viji.audio, viji.mouse, etc.\n// - Define parameters at the top level (before setup/render functions)\n\n// ============================================================\n// P5.JS TYPES (instance methods and namespace types — inlined)\n// ============================================================\ndeclare global {\ninterface p5 {\n/\n Creates a screen reader accessible description for\n * the canvas. The first parameter should be a string\n * with a description of the canvas. The second\n * parameter is optional. If specified, it determines\n * how the description is displayed. describe(text,\n * LABEL) displays the description to all users as a\n * tombstone or exhibit label/caption in a div\n * adjacent to the canvas. You can style it as you\n * wish in your CSS.\n \n describe(text, FALLBACK) makes the description\n * accessible to screen-reader users only, in a sub\n * DOM inside the canvas element. If a second\n * parameter is not specified, by default, the\n * description will only be available to\n * screen-reader users.\n * @param text description of the canvas\n * @param [display] either LABEL or FALLBACK\n /\n describe(text: string, display?: DESCRIBE_DISPLAY): void;\n\n /\n This function creates a screen-reader accessible\n * description for elements —shapes or groups of\n * shapes that create meaning together— in the\n * canvas. The first paramater should be the name of\n * the element. The second parameter should be a\n * string with a description of the element. The\n * third parameter is optional. If specified, it\n * determines how the element description is\n * displayed. describeElement(name, text, LABEL)\n * displays the element description to all users as a\n * tombstone or exhibit label/caption in a div\n * adjacent to the canvas. You can style it as you\n * wish in your CSS.\n \n describeElement(name, text, FALLBACK) makes the\n * element description accessible to screen-reader\n * users only, in a sub DOM inside the canvas\n * element. If a second parameter is not specified,\n * by default, the element description will only be\n * available to screen-reader users.\n * @param name name of the element\n * @param text description of the element\n * @param [display] either LABEL or FALLBACK\n /\n describeElement(name: string, text: string, display?: DESCRIBE_DISPLAY): void;\n\n/\n textOutput() creates a screenreader accessible\n * output that describes the shapes present on the\n * canvas. The general description of the canvas\n * includes canvas size, canvas color, and number of\n * elements in the canvas (example: 'Your output is\n * a, 400 by 400 pixels, lavender blue canvas\n * containing the following 4 shapes:'). This\n * description is followed by a list of shapes where\n * the color, position, and area of each shape are\n * described (example: \"orange ellipse at top left\n * covering 1% of the canvas\"). Each element can be\n * selected to get more details. A table of elements\n * is also provided. In this table, shape, color,\n * location, coordinates and area are described\n * (example: \"orange ellipse location=top left\n * area=2\"). textOutput() and textOutput(FALLBACK)\n * make the output available in a sub DOM inside the\n * canvas element which is accessible to screen\n * readers. textOutput(LABEL) creates an additional\n * div with the output adjacent to the canvas, this\n * is useful for non-screen reader users that might\n * want to display the output outside of the canvas'\n * sub DOM as they code. However, using LABEL will\n * create unnecessary redundancy for screen reader\n * users. We recommend using LABEL only as part of\n * the development process of a sketch and removing\n * it before publishing or sharing with screen reader\n * users.\n * @param [display] either FALLBACK or LABEL\n /\n textOutput(display?: TEXT_DISPLAY): void;\n\n /\n gridOutput() lays out the content of the canvas in\n * the form of a grid (html table) based on the\n * spatial location of each shape. A brief\n * description of the canvas is available before the\n * table output. This description includes: color of\n * the background, size of the canvas, number of\n * objects, and object types (example: \"lavender blue\n * canvas is 200 by 200 and contains 4 objects - 3\n * ellipses 1 rectangle\"). The grid describes the\n * content spatially, each element is placed on a\n * cell of the table depending on its position.\n * Within each cell an element the color and type of\n * shape of that element are available (example:\n * \"orange ellipse\"). These descriptions can be\n * selected individually to get more details. A list\n * of elements where shape, color, location, and area\n * are described (example: \"orange ellipse\n * location=top left area=1%\") is also available.\n * gridOutput() and gridOutput(FALLBACK) make the\n * output available in a sub DOM inside the canvas\n * element which is accessible to screen readers.\n * gridOutput(LABEL) creates an additional div with\n * the output adjacent to the canvas, this is useful\n * for non-screen reader users that might want to\n * display the output outside of the canvas' sub DOM\n * as they code. However, using LABEL will create\n * unnecessary redundancy for screen reader users. We\n * recommend using LABEL only as part of the\n * development process of a sketch and removing it\n * before publishing or sharing with screen reader\n * users.\n * @param [display] either FALLBACK or LABEL\n /\n gridOutput(display?: GRID_DISPLAY): void;\n\n/\n Extracts the alpha (transparency) value from a\n * p5.Color object, array of color components, or CSS\n * color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the alpha value.\n /\n alpha(color: Color \| number[] \| string): number;\n\n /\n Extracts the blue value from a p5.Color object,\n * array of color components, or CSS color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the blue value.\n /\n blue(color: Color \| number[] \| string): number;\n\n /\n Extracts the HSB brightness value from a p5.Color\n * object, array of color components, or CSS color\n * string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the brightness value.\n /\n brightness(color: Color \| number[] \| string): number;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param gray number specifying value between white\n * and black.\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255).\n * @return resulting color.\n /\n color(gray: number, alpha?: number): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param v1 red or hue value relative to the current\n * color range.\n * @param v2 green or saturation value relative to\n * the current color range.\n * @param v3 blue or brightness value relative to the\n * current color range.\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255).\n /\n color(v1: number, v2: number, v3: number, alpha?: number): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param value a color string.\n /\n color(value: string): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param values an array containing the red, green,\n * blue, and alpha components of the color.\n /\n color(values: number[]): Color;\n\n /\n Creates a p5.Color object. By default, the\n * parameters are interpreted as RGB values. Calling\n * color(255, 204, 0) will return a bright yellow\n * color. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of color() with one parameter interprets\n * the value one of two ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string.\n \n The version of color() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of color() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of color() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n /\n color(color: Color): Color;\n\n /\n Extracts the green value from a p5.Color object,\n * array of color components, or CSS color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the green value.\n /\n green(color: Color \| number[] \| string): number;\n\n /\n Extracts the hue value from a p5.Color object,\n * array of color components, or CSS color string.\n * Hue exists in both HSB and HSL. It describes a\n * color's position on the color wheel. By default,\n * this function returns the HSL-normalized hue. If\n * the colorMode() is set to HSB, it returns the\n * HSB-normalized hue.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the hue\n /\n hue(color: Color \| number[] \| string): number;\n\n /\n Blends two colors to find a third color between\n * them. The amt parameter specifies the amount to\n * interpolate between the two values. 0 is equal to\n * the first color, 0.1 is very near the first color,\n * 0.5 is halfway between the two colors, and so on.\n * Negative numbers are set to 0. Numbers greater\n * than 1 are set to 1. This differs from the\n * behavior of lerp. It's necessary because numbers\n * outside of the interval [0, 1] will produce\n * strange and unexpected colors. The way that colors\n * are interpolated depends on the current\n * colorMode().\n * @param c1 interpolate from this color.\n * @param c2 interpolate to this color.\n * @param amt number between 0 and 1.\n * @return interpolated color.\n /\n lerpColor(c1: Color, c2: Color, amt: number): Color;\n\n /\n Extracts the HSL lightness value from a p5.Color\n * object, array of color components, or CSS color\n * string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the lightness\n /\n lightness(color: Color \| number[] \| string): number;\n\n /\n Extracts the red value from a p5.Color object,\n * array of color components, or CSS color string.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the red value.\n /\n red(color: Color \| number[] \| string): number;\n\n /\n Extracts the saturation value from a p5.Color\n * object, array of color components, or CSS color\n * string. Saturation is scaled differently in HSB\n * and HSL. By default, this function returns the HSL\n * saturation. If the colorMode() is set to HSB, it\n * returns the HSB saturation.\n * @param color p5.Color object, array of color\n * components, or CSS color string.\n * @return the saturation value\n /\n saturation(color: Color \| number[] \| string): number;\n\n/\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param color any value created by the color()\n * function\n * @chainable\n /\n background(color: Color): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param colorstring color string, possible formats\n * include: integer rgb() or rgba(), percentage rgb()\n * or rgba(), 3-digit hex, 6-digit hex.\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(colorstring: string, a?: number): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param gray specifies a value between white and\n * black.\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(gray: number, a?: number): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param v1 red value if color mode is RGB, or hue\n * value if color mode is HSB.\n * @param v2 green value if color mode is RGB, or\n * saturation value if color mode is HSB.\n * @param v3 blue value if color mode is RGB, or\n * brightness value if color mode is HSB.\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(v1: number, v2: number, v3: number, a?: number): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param values an array containing the red, green,\n * blue and alpha components of the color.\n * @chainable\n /\n background(values: number[]): p5;\n\n /\n Sets the color used for the background of the\n * canvas. By default, the background is transparent.\n * This function is typically used within draw() to\n * clear the display window at the beginning of each\n * frame. It can also be used inside setup() to set\n * the background on the first frame of animation.\n * The version of background() with one parameter\n * interprets the value one of four ways. If the\n * parameter is a number, it's interpreted as a\n * grayscale value. If the parameter is a string,\n * it's interpreted as a CSS color string. RGB, RGBA,\n * HSL, HSLA, hex, and named color strings are\n * supported. If the parameter is a p5.Color object,\n * it will be used as the background color. If the\n * parameter is a p5.Image object, it will be used as\n * the background image.\n \n The version of background() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of background() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). By default,\n * colors are specified in RGB values. Calling\n * background(255, 204, 0) sets the background a\n * bright yellow color.\n * @param image image created with loadImage() or\n * createImage(), to set as background. (must be same\n * size as the sketch window).\n * @param [a] opacity of the background relative to\n * current color range (default is 0-255).\n * @chainable\n /\n background(image: Image, a?: number): p5;\n\n /\n Clears the pixels on the canvas. This function\n * makes every pixel 100% transparent. Calling\n * clear() doesn't clear objects created by createX()\n * functions such as createGraphics(), createVideo(),\n * and createImg(). These objects will remain\n * unchanged after calling clear() and can be\n * redrawn. In WebGL mode, this function can clear\n * the screen to a specific color. It interprets four\n * numeric parameters as normalized RGBA color\n * values. It also clears the depth buffer. If you\n * are not using the WebGL renderer, these parameters\n * will have no effect.\n * @param r normalized red value.\n * @param g normalized green value.\n * @param b normalized blue value.\n * @param a normalized alpha value.\n * @chainable\n /\n clear(r: number, g: number, b: number, a: number): p5;\n\n /\n Clears the pixels on the canvas. This function\n * makes every pixel 100% transparent. Calling\n * clear() doesn't clear objects created by createX()\n * functions such as createGraphics(), createVideo(),\n * and createImg(). These objects will remain\n * unchanged after calling clear() and can be\n * redrawn. In WebGL mode, this function can clear\n * the screen to a specific color. It interprets four\n * numeric parameters as normalized RGBA color\n * values. It also clears the depth buffer. If you\n * are not using the WebGL renderer, these parameters\n * will have no effect.\n * @chainable\n /\n clear(): p5;\n\n /\n Changes the way p5.js interprets color data. By\n * default, the numeric parameters for fill(),\n * stroke(), background(), and color() are defined by\n * values between 0 and 255 using the RGB color\n * model. This is equivalent to calling\n * colorMode(RGB, 255). Pure red is color(255, 0, 0)\n * in this model. Calling colorMode(RGB, 100) sets\n * colors to be interpreted as RGB color values\n * between 0 and 100. Pure red is color(100, 0, 0) in\n * this model.\n \n Calling colorMode(HSB) or colorMode(HSL) changes\n * to HSB or HSL system instead of RGB.\n \n p5.Color objects remember the mode that they were\n * created in. Changing modes doesn't affect their\n * appearance.\n * @param mode either RGB, HSB or HSL, corresponding\n * to Red/Green/Blue and Hue/Saturation/Brightness\n * (or Lightness).\n * @param [max] range for all values.\n * @chainable\n /\n colorMode(mode: COLOR_MODE, max?: number): p5;\n\n /\n Changes the way p5.js interprets color data. By\n * default, the numeric parameters for fill(),\n * stroke(), background(), and color() are defined by\n * values between 0 and 255 using the RGB color\n * model. This is equivalent to calling\n * colorMode(RGB, 255). Pure red is color(255, 0, 0)\n * in this model. Calling colorMode(RGB, 100) sets\n * colors to be interpreted as RGB color values\n * between 0 and 100. Pure red is color(100, 0, 0) in\n * this model.\n \n Calling colorMode(HSB) or colorMode(HSL) changes\n * to HSB or HSL system instead of RGB.\n \n p5.Color objects remember the mode that they were\n * created in. Changing modes doesn't affect their\n * appearance.\n * @param mode either RGB, HSB or HSL, corresponding\n * to Red/Green/Blue and Hue/Saturation/Brightness\n * (or Lightness).\n * @param max1 range for the red or hue depending on\n * the current color mode.\n * @param max2 range for the green or saturation\n * depending on the current color mode.\n * @param max3 range for the blue or\n * brightness/lightness depending on the current\n * color mode.\n * @param [maxA] range for the alpha.\n * @chainable\n /\n colorMode(mode: UNKNOWN_P5_CONSTANT, max1: number, max2: number, max3: number, maxA?: number): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param v1 red value if color mode is RGB or hue\n * value if color mode is HSB.\n * @param v2 green value if color mode is RGB or\n * saturation value if color mode is HSB.\n * @param v3 blue value if color mode is RGB or\n * brightness value if color mode is HSB.\n * @chainable\n /\n fill(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param value a color string.\n * @chainable\n /\n fill(value: string): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param gray a grayscale value.\n * @chainable\n /\n fill(gray: number, alpha?: number): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param values an array containing the red, green,\n * blue & and alpha components of the color.\n * @chainable\n /\n fill(values: number[]): p5;\n\n /\n Sets the color used to fill shapes. Calling\n * fill(255, 165, 0) or fill('orange') means all\n * shapes drawn after the fill command will be filled\n * with the color orange. The version of fill() with\n * one parameter interprets the value one of three\n * ways. If the parameter is a number, it's\n * interpreted as a grayscale value. If the parameter\n * is a string, it's interpreted as a CSS color\n * string. A p5.Color object can also be provided to\n * set the fill color.\n \n The version of fill() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode(). The default\n * color space is RGB, with each value in the range\n * from 0 to 255.\n * @param color the fill color.\n * @chainable\n /\n fill(color: Color): p5;\n\n /\n Disables setting the interior color of shapes.\n * This is the same as making the fill completely\n * transparent. If both noStroke() and noFill() are\n * called, nothing will be drawn to the screen.\n * @chainable\n /\n noFill(): p5;\n\n /\n Disables drawing the stroke (outline). If both\n * noStroke() and noFill() are called, nothing will\n * be drawn to the screen.\n * @chainable\n /\n noStroke(): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param v1 red value if color mode is RGB or hue\n * value if color mode is HSB.\n * @param v2 green value if color mode is RGB or\n * saturation value if color mode is HSB.\n * @param v3 blue value if color mode is RGB or\n * brightness value if color mode is HSB.\n * @chainable\n /\n stroke(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param value a color string.\n * @chainable\n /\n stroke(value: string): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param gray a grayscale value.\n * @chainable\n /\n stroke(gray: number, alpha?: number): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param values an array containing the red, green,\n * blue, and alpha components of the color.\n * @chainable\n /\n stroke(values: number[]): p5;\n\n /\n Sets the color used to draw lines and borders\n * around shapes. Calling stroke(255, 165, 0) or\n * stroke('orange') means all shapes drawn after the\n * stroke() command will be filled with the color\n * orange. The way these parameters are interpreted\n * may be changed with the colorMode() function. The\n * version of stroke() with one parameter interprets\n * the value one of three ways. If the parameter is a\n * number, it's interpreted as a grayscale value. If\n * the parameter is a string, it's interpreted as a\n * CSS color string. A p5.Color object can also be\n * provided to set the stroke color.\n \n The version of stroke() with two parameters\n * interprets the first one as a grayscale value. The\n * second parameter sets the alpha (transparency)\n * value.\n \n The version of stroke() with three parameters\n * interprets them as RGB, HSB, or HSL colors,\n * depending on the current colorMode().\n \n The version of stroke() with four parameters\n * interprets them as RGBA, HSBA, or HSLA colors,\n * depending on the current colorMode(). The last\n * parameter sets the alpha (transparency) value.\n * @param color the stroke color.\n * @chainable\n /\n stroke(color: Color): p5;\n\n /\n All drawing that follows erase() will subtract\n * from the canvas, revealing the web page\n * underneath. The erased areas will become\n * transparent, allowing the content behind the\n * canvas to show through. The fill(), stroke(), and\n * blendMode() have no effect once erase() is called.\n * The erase() function has two optional parameters.\n * The first parameter sets the strength of erasing\n * by the shape's interior. A value of 0 means that\n * no erasing will occur. A value of 255 means that\n * the shape's interior will fully erase the content\n * underneath. The default value is 255 (full\n * strength).\n \n The second parameter sets the strength of erasing\n * by the shape's edge. A value of 0 means that no\n * erasing will occur. A value of 255 means that the\n * shape's edge will fully erase the content\n * underneath. The default value is 255 (full\n * strength).\n \n To cancel the erasing effect, use the noErase()\n * function.\n \n erase() has no effect on drawing done with the\n * image() and background() functions.\n * @param [strengthFill] a number (0-255) for the\n * strength of erasing under a shape's interior.\n * Defaults to 255, which is full strength.\n * @param [strengthStroke] a number (0-255) for the\n * strength of erasing under a shape's edge. Defaults\n * to 255, which is full strength.\n * @chainable\n /\n erase(strengthFill?: number, strengthStroke?: number): p5;\n\n /\n Ends erasing that was started with erase(). The\n * fill(), stroke(), and blendMode() settings will\n * return to what they were prior to calling erase().\n * @chainable\n /\n noErase(): p5;\n\n/\n Draws an arc to the canvas. Arcs are drawn along\n * the outer edge of an ellipse (oval) defined by the\n * x, y, w, and h parameters. Use the start and stop\n * parameters to specify the angles (in radians) at\n * which to draw the arc. Arcs are always drawn\n * clockwise from start to stop. The origin of the\n * arc's ellipse may be changed with the\n * ellipseMode() function. The optional mode\n * parameter determines the arc's fill style. The\n * fill modes are a semi-circle (OPEN), a closed\n * semi-circle (CHORD), or a closed pie segment\n * (PIE).\n * @param x x-coordinate of the arc's ellipse.\n * @param y y-coordinate of the arc's ellipse.\n * @param w width of the arc's ellipse by default.\n * @param h height of the arc's ellipse by default.\n * @param start angle to start the arc, specified in\n * radians.\n * @param stop angle to stop the arc, specified in\n * radians.\n * @param [mode] optional parameter to determine the\n * way of drawing the arc. either CHORD, PIE, or\n * OPEN.\n * @param [detail] optional parameter for WebGL mode\n * only. This is to specify the number of vertices\n * that makes up the perimeter of the arc. Default\n * value is 25. Won't draw a stroke for a detail of\n * more than 50.\n * @chainable\n /\n arc(\n x: number,\n y: number,\n w: number,\n h: number,\n start: number,\n stop: number,\n mode?: ARC_MODE,\n detail?: number\n ): p5;\n\n /\n Draws an ellipse (oval) to the canvas. An ellipse\n * with equal width and height is a circle. By\n * default, the first two parameters set the location\n * of the center of the ellipse. The third and fourth\n * parameters set the shape's width and height,\n * respectively. The origin may be changed with the\n * ellipseMode() function. If no height is specified,\n * the value of width is used for both the width and\n * height. If a negative height or width is\n * specified, the absolute value is taken.\n * @param x x-coordinate of the center of the\n * ellipse.\n * @param y y-coordinate of the center of the\n * ellipse.\n * @param w width of the ellipse.\n * @param [h] height of the ellipse.\n * @chainable\n /\n ellipse(x: number, y: number, w: number, h?: number): p5;\n\n /\n Draws an ellipse (oval) to the canvas. An ellipse\n * with equal width and height is a circle. By\n * default, the first two parameters set the location\n * of the center of the ellipse. The third and fourth\n * parameters set the shape's width and height,\n * respectively. The origin may be changed with the\n * ellipseMode() function. If no height is specified,\n * the value of width is used for both the width and\n * height. If a negative height or width is\n * specified, the absolute value is taken.\n * @param x x-coordinate of the center of the\n * ellipse.\n * @param y y-coordinate of the center of the\n * ellipse.\n * @param w width of the ellipse.\n * @param h height of the ellipse.\n * @param [detail] optional parameter for WebGL mode\n * only. This is to specify the number of vertices\n * that makes up the perimeter of the ellipse.\n * Default value is 25. Won't draw a stroke for a\n * detail of more than 50.\n /\n ellipse(x: number, y: number, w: number, h: number, detail?: number): void;\n\n /\n Draws a circle to the canvas. A circle is a round\n * shape. Every point on the edge of a circle is the\n * same distance from its center. By default, the\n * first two parameters set the location of the\n * center of the circle. The third parameter sets the\n * shape's width and height (diameter). The origin\n * may be changed with the ellipseMode() function.\n * @param x x-coordinate of the center of the circle.\n * @param y y-coordinate of the center of the circle.\n * @param d diameter of the circle.\n * @chainable\n /\n circle(x: number, y: number, d: number): p5;\n\n /\n Draws a line, a straight path between two points.\n * Its default width is one pixel. The version of\n * line() with four parameters draws the line in 2D.\n * To color a line, use the stroke() function. To\n * change its width, use the strokeWeight() function.\n * A line can't be filled, so the fill() function\n * won't affect the color of a line. The version of\n * line() with six parameters allows the line to be\n * drawn in 3D space. Doing so requires adding the\n * WEBGL argument to createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @chainable\n /\n line(x1: number, y1: number, x2: number, y2: number): p5;\n\n /\n Draws a line, a straight path between two points.\n * Its default width is one pixel. The version of\n * line() with four parameters draws the line in 2D.\n * To color a line, use the stroke() function. To\n * change its width, use the strokeWeight() function.\n * A line can't be filled, so the fill() function\n * won't affect the color of a line. The version of\n * line() with six parameters allows the line to be\n * drawn in 3D space. Doing so requires adding the\n * WEBGL argument to createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param z1 the z-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @param z2 the z-coordinate of the second point.\n * @chainable\n /\n line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): p5;\n\n /\n Draws a point, a single coordinate in space. Its\n * default size is one pixel. The first two\n * parameters are the point's x- and y-coordinates,\n * respectively. To color a point, use the stroke()\n * function. To change its size, use the\n * strokeWeight() function. The version of point()\n * with three parameters allows the point to be drawn\n * in 3D space. Doing so requires adding the WEBGL\n * argument to createCanvas().\n \n The version of point() with one parameter allows\n * the point's location to be set with a p5.Vector\n * object.\n * @param x the x-coordinate.\n * @param y the y-coordinate.\n * @param [z] the z-coordinate (for WebGL mode).\n * @chainable\n /\n point(x: number, y: number, z?: number): p5;\n\n /\n Draws a point, a single coordinate in space. Its\n * default size is one pixel. The first two\n * parameters are the point's x- and y-coordinates,\n * respectively. To color a point, use the stroke()\n * function. To change its size, use the\n * strokeWeight() function. The version of point()\n * with three parameters allows the point to be drawn\n * in 3D space. Doing so requires adding the WEBGL\n * argument to createCanvas().\n \n The version of point() with one parameter allows\n * the point's location to be set with a p5.Vector\n * object.\n * @param coordinateVector the coordinate vector.\n * @chainable\n /\n point(coordinateVector: Vector): p5;\n\n /\n Draws a quad to the canvas. A quad is a\n * quadrilateral, a four-sided polygon. Some examples\n * of quads include rectangles, squares, rhombuses,\n * and trapezoids. The first pair of parameters\n * (x1,y1) sets the quad's first point. The following\n * pairs of parameters set the coordinates for its\n * next three points. Parameters should proceed\n * clockwise or counter-clockwise around the shape.\n * The version of quad() with twelve parameters\n * allows the quad to be drawn in 3D space. Doing so\n * requires adding the WEBGL argument to\n * createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @param x3 the x-coordinate of the third point.\n * @param y3 the y-coordinate of the third point.\n * @param x4 the x-coordinate of the fourth point.\n * @param y4 the y-coordinate of the fourth point.\n * @param [detailX] number of segments in the\n * x-direction.\n * @param [detailY] number of segments in the\n * y-direction.\n * @chainable\n /\n quad(\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n x3: number,\n y3: number,\n x4: number,\n y4: number,\n detailX?: number,\n detailY?: number\n ): p5;\n\n /\n Draws a quad to the canvas. A quad is a\n * quadrilateral, a four-sided polygon. Some examples\n * of quads include rectangles, squares, rhombuses,\n * and trapezoids. The first pair of parameters\n * (x1,y1) sets the quad's first point. The following\n * pairs of parameters set the coordinates for its\n * next three points. Parameters should proceed\n * clockwise or counter-clockwise around the shape.\n * The version of quad() with twelve parameters\n * allows the quad to be drawn in 3D space. Doing so\n * requires adding the WEBGL argument to\n * createCanvas().\n * @param x1 the x-coordinate of the first point.\n * @param y1 the y-coordinate of the first point.\n * @param z1 the z-coordinate of the first point.\n * @param x2 the x-coordinate of the second point.\n * @param y2 the y-coordinate of the second point.\n * @param z2 the z-coordinate of the second point.\n * @param x3 the x-coordinate of the third point.\n * @param y3 the y-coordinate of the third point.\n * @param z3 the z-coordinate of the third point.\n * @param x4 the x-coordinate of the fourth point.\n * @param y4 the y-coordinate of the fourth point.\n * @param z4 the z-coordinate of the fourth point.\n * @param [detailX] number of segments in the\n * x-direction.\n * @param [detailY] number of segments in the\n * y-direction.\n * @chainable\n /\n quad(\n x1: number,\n y1: number,\n z1: number,\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number,\n detailX?: number,\n detailY?: number\n ): p5;\n\n /\n Draws a rectangle to the canvas. A rectangle is a\n * four-sided polygon with every angle at ninety\n * degrees. By default, the first two parameters set\n * the location of the rectangle's upper-left corner.\n * The third and fourth set the shape's the width and\n * height, respectively. The way these parameters are\n * interpreted may be changed with the rectMode()\n * function. The version of rect() with five\n * parameters creates a rounded rectangle. The fifth\n * parameter is used as the radius value for all four\n * corners.\n \n The version of rect() with eight parameters also\n * creates a rounded rectangle. When using eight\n * parameters, the latter four set the radius of the\n * arc at each corner separately. The radii start\n * with the top-left corner and move clockwise around\n * the rectangle. If any of these parameters are\n * omitted, they are set to the value of the last\n * specified corner radius.\n * @param x x-coordinate of the rectangle.\n * @param y y-coordinate of the rectangle.\n * @param w width of the rectangle.\n * @param [h] height of the rectangle.\n * @param [tl] optional radius of top-left corner.\n * @param [tr] optional radius of top-right corner.\n * @param [br] optional radius of bottom-right\n * corner.\n * @param [bl] optional radius of bottom-left corner.\n * @chainable\n /\n rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): p5;\n\n /\n Draws a rectangle to the canvas. A rectangle is a\n * four-sided polygon with every angle at ninety\n * degrees. By default, the first two parameters set\n * the location of the rectangle's upper-left corner.\n * The third and fourth set the shape's the width and\n * height, respectively. The way these parameters are\n * interpreted may be changed with the rectMode()\n * function. The version of rect() with five\n * parameters creates a rounded rectangle. The fifth\n * parameter is used as the radius value for all four\n * corners.\n \n The version of rect() with eight parameters also\n * creates a rounded rectangle. When using eight\n * parameters, the latter four set the radius of the\n * arc at each corner separately. The radii start\n * with the top-left corner and move clockwise around\n * the rectangle. If any of these parameters are\n * omitted, they are set to the value of the last\n * specified corner radius.\n * @param x x-coordinate of the rectangle.\n * @param y y-coordinate of the rectangle.\n * @param w width of the rectangle.\n * @param h height of the rectangle.\n * @param [detailX] number of segments in the\n * x-direction (for WebGL mode).\n * @param [detailY] number of segments in the\n * y-direction (for WebGL mode).\n * @chainable\n /\n rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): p5;\n\n /\n Draws a square to the canvas. A square is a\n * four-sided polygon with every angle at ninety\n * degrees and equal side lengths. By default, the\n * first two parameters set the location of the\n * square's upper-left corner. The third parameter\n * sets its side size. The way these parameters are\n * interpreted may be changed with the rectMode()\n * function. The version of square() with four\n * parameters creates a rounded square. The fourth\n * parameter is used as the radius value for all four\n * corners.\n \n The version of square() with seven parameters also\n * creates a rounded square. When using seven\n * parameters, the latter four set the radius of the\n * arc at each corner separately. The radii start\n * with the top-left corner and move clockwise around\n * the square. If any of these parameters are\n * omitted, they are set to the value of the last\n * specified corner radius.\n * @param x x-coordinate of the square.\n * @param y y-coordinate of the square.\n * @param s side size of the square.\n * @param [tl] optional radius of top-left corner.\n * @param [tr] optional radius of top-right corner.\n * @param [br] optional radius of bottom-right\n * corner.\n * @param [bl] optional radius of bottom-left corner.\n * @chainable\n /\n square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): p5;\n\n /\n Draws a triangle to the canvas. A triangle is a\n * three-sided polygon. The first two parameters\n * specify the triangle's first point (x1,y1). The\n * middle two parameters specify its second point\n * (x2,y2). And the last two parameters specify its\n * third point (x3, y3).\n * @param x1 x-coordinate of the first point.\n * @param y1 y-coordinate of the first point.\n * @param x2 x-coordinate of the second point.\n * @param y2 y-coordinate of the second point.\n * @param x3 x-coordinate of the third point.\n * @param y3 y-coordinate of the third point.\n * @chainable\n /\n triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): p5;\n\n/\n Modifies the location from which ellipses,\n * circles, and arcs are drawn. By default, the first\n * two parameters are the x- and y-coordinates of the\n * shape's center. The next parameters are its width\n * and height. This is equivalent to calling\n * ellipseMode(CENTER). ellipseMode(RADIUS) also uses\n * the first two parameters to set the x- and\n * y-coordinates of the shape's center. The next\n * parameters are half of the shapes's width and\n * height. Calling ellipse(0, 0, 10, 15) draws a\n * shape with a width of 20 and height of 30.\n \n ellipseMode(CORNER) uses the first two parameters\n * as the upper-left corner of the shape. The next\n * parameters are its width and height.\n \n ellipseMode(CORNERS) uses the first two parameters\n * as the location of one corner of the ellipse's\n * bounding box. The third and fourth parameters are\n * the location of the opposite corner.\n \n The argument passed to ellipseMode() must be\n * written in ALL CAPS because the constants CENTER,\n * RADIUS, CORNER, and CORNERS are defined this way.\n * JavaScript is a case-sensitive language.\n * @param mode either CENTER, RADIUS, CORNER, or\n * CORNERS\n * @chainable\n /\n ellipseMode(mode: ELLIPSE_MODE): p5;\n\n /\n Draws all geometry with jagged (aliased) edges.\n * smooth() is active by default in 2D mode. It's\n * necessary to call noSmooth() to disable smoothing\n * of geometry, images, and fonts.\n \n In WebGL mode, noSmooth() is active by default.\n * It's necessary to call smooth() to draw smooth\n * (antialiased) edges.\n * @chainable\n /\n noSmooth(): p5;\n\n /\n Modifies the location from which rectangles and\n * squares are drawn. By default, the first two\n * parameters are the x- and y-coordinates of the\n * shape's upper-left corner. The next parameters are\n * its width and height. This is equivalent to\n * calling rectMode(CORNER). rectMode(CORNERS) also\n * uses the first two parameters as the location of\n * one of the corners. The third and fourth\n * parameters are the location of the opposite\n * corner.\n \n rectMode(CENTER) uses the first two parameters as\n * the x- and y-coordinates of the shape's center.\n * The next parameters are its width and height.\n \n rectMode(RADIUS) also uses the first two\n * parameters as the x- and y-coordinates of the\n * shape's center. The next parameters are half of\n * the shape's width and height.\n \n The argument passed to rectMode() must be written\n * in ALL CAPS because the constants CENTER, RADIUS,\n * CORNER, and CORNERS are defined this way.\n * JavaScript is a case-sensitive language.\n * @param mode either CORNER, CORNERS, CENTER, or\n * RADIUS\n * @chainable\n /\n rectMode(mode: RECT_MODE): p5;\n\n /\n Draws all geometry with smooth (anti-aliased)\n * edges. smooth() will also improve image quality of\n * resized images. smooth() is active by default in\n * 2D mode. It's necessary to call noSmooth() to\n * disable smoothing of geometry, images, and fonts.\n \n In WebGL mode, noSmooth() is active by default.\n * It's necessary to call smooth() to draw smooth\n * (antialiased) edges.\n * @chainable\n /\n smooth(): p5;\n\n /\n Sets the style for rendering line endings. These\n * ends are either rounded (ROUND), squared (SQUARE),\n * or extended (PROJECT). The default cap is ROUND.\n * The argument passed to strokeCap() must be written\n * in ALL CAPS because the constants ROUND, SQUARE,\n * and PROJECT are defined this way. JavaScript is a\n * case-sensitive language.\n * @param cap either ROUND, SQUARE, or PROJECT\n * @chainable\n /\n strokeCap(cap: STROKE_CAP): p5;\n\n /\n Sets the style of the joints which connect line\n * segments. These joints are either mitered (MITER),\n * beveled (BEVEL), or rounded (ROUND). The default\n * joint is MITER in 2D mode and ROUND in WebGL mode.\n * The argument passed to strokeJoin() must be\n * written in ALL CAPS because the constants MITER,\n * BEVEL, and ROUND are defined this way. JavaScript\n * is a case-sensitive language.\n * @param join either MITER, BEVEL, or ROUND\n * @chainable\n /\n strokeJoin(join: STROKE_JOIN): p5;\n\n /\n Sets the width of the stroke used for lines,\n * points, and the border around shapes. All widths\n * are set in units of pixels. Note that\n * strokeWeight() is affected by any transformation\n * or scaling that has been applied previously.\n * @param weight the weight of the stroke (in\n * pixels).\n * @chainable\n /\n strokeWeight(weight: number): p5;\n\n/\n Draws a cubic Bezier curve on the screen. These\n * curves are defined by a series of anchor and\n * control points. The first two parameters specify\n * the first anchor point and the last two parameters\n * specify the other anchor point, which become the\n * first and last points on the curve. The middle\n * parameters specify the two control points which\n * define the shape of the curve. Approximately\n * speaking, control points \"pull\" the curve towards\n * them. Bezier curves were developed by French\n * automotive engineer Pierre Bezier, and are\n * commonly used in computer graphics to define\n * gently sloping curves. See also curve().\n * @param x1 x-coordinate for the first anchor point\n * @param y1 y-coordinate for the first anchor point\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param x4 x-coordinate for the second anchor point\n * @param y4 y-coordinate for the second anchor point\n * @chainable\n /\n bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;\n\n /\n Draws a cubic Bezier curve on the screen. These\n * curves are defined by a series of anchor and\n * control points. The first two parameters specify\n * the first anchor point and the last two parameters\n * specify the other anchor point, which become the\n * first and last points on the curve. The middle\n * parameters specify the two control points which\n * define the shape of the curve. Approximately\n * speaking, control points \"pull\" the curve towards\n * them. Bezier curves were developed by French\n * automotive engineer Pierre Bezier, and are\n * commonly used in computer graphics to define\n * gently sloping curves. See also curve().\n * @param x1 x-coordinate for the first anchor point\n * @param y1 y-coordinate for the first anchor point\n * @param z1 z-coordinate for the first anchor point\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param z2 z-coordinate for the first control point\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param z3 z-coordinate for the second control\n * point\n * @param x4 x-coordinate for the second anchor point\n * @param y4 y-coordinate for the second anchor point\n * @param z4 z-coordinate for the second anchor point\n * @chainable\n /\n bezier(\n x1: number,\n y1: number,\n z1: number,\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number\n ): p5;\n\n /\n Sets the resolution at which Bezier's curve is\n * displayed. The default value is 20. Note, This\n * function is only useful when using the WEBGL\n * renderer as the default canvas renderer does not\n * use this information.\n * @param detail resolution of the curves\n * @chainable\n /\n bezierDetail(detail: number): p5;\n\n /\n Given the x or y co-ordinate values of control and\n * anchor points of a bezier curve, it evaluates the\n * x or y coordinate of the bezier at position t. The\n * parameters a and d are the x or y coordinates of\n * first and last points on the curve while b and c\n * are of the control points.The final parameter t is\n * the position of the resultant point which is given\n * between 0 and 1. This can be done once with the x\n * coordinates and a second time with the y\n * coordinates to get the location of a bezier curve\n * at t.\n * @param a coordinate of first point on the curve\n * @param b coordinate of first control point\n * @param c coordinate of second control point\n * @param d coordinate of second point on the curve\n * @param t value between 0 and 1\n * @return the value of the Bezier at position t\n /\n bezierPoint(a: number, b: number, c: number, d: number, t: number): number;\n\n /\n Evaluates the tangent to the Bezier at position t\n * for points a, b, c, d. The parameters a and d are\n * the first and last points on the curve, and b and\n * c are the control points. The final parameter t\n * varies between 0 and 1.\n * @param a coordinate of first point on the curve\n * @param b coordinate of first control point\n * @param c coordinate of second control point\n * @param d coordinate of second point on the curve\n * @param t value between 0 and 1\n * @return the tangent at position t\n /\n bezierTangent(a: number, b: number, c: number, d: number, t: number): number;\n\n /\n Draws a curved line on the screen between two\n * points, given as the middle four parameters. The\n * first two parameters are a control point, as if\n * the curve came from this point even though it's\n * not drawn. The last two parameters similarly\n * describe the other control point. Longer curves\n * can be created by putting a series of curve()\n * functions together or using curveVertex(). An\n * additional function called curveTightness()\n * provides control for the visual quality of the\n * curve. The curve() function is an implementation\n * of Catmull-Rom splines.\n * @param x1 x-coordinate for the beginning control\n * point\n * @param y1 y-coordinate for the beginning control\n * point\n * @param x2 x-coordinate for the first point\n * @param y2 y-coordinate for the first point\n * @param x3 x-coordinate for the second point\n * @param y3 y-coordinate for the second point\n * @param x4 x-coordinate for the ending control\n * point\n * @param y4 y-coordinate for the ending control\n * point\n * @chainable\n /\n curve(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;\n\n /\n Draws a curved line on the screen between two\n * points, given as the middle four parameters. The\n * first two parameters are a control point, as if\n * the curve came from this point even though it's\n * not drawn. The last two parameters similarly\n * describe the other control point. Longer curves\n * can be created by putting a series of curve()\n * functions together or using curveVertex(). An\n * additional function called curveTightness()\n * provides control for the visual quality of the\n * curve. The curve() function is an implementation\n * of Catmull-Rom splines.\n * @param x1 x-coordinate for the beginning control\n * point\n * @param y1 y-coordinate for the beginning control\n * point\n * @param z1 z-coordinate for the beginning control\n * point\n * @param x2 x-coordinate for the first point\n * @param y2 y-coordinate for the first point\n * @param z2 z-coordinate for the first point\n * @param x3 x-coordinate for the second point\n * @param y3 y-coordinate for the second point\n * @param z3 z-coordinate for the second point\n * @param x4 x-coordinate for the ending control\n * point\n * @param y4 y-coordinate for the ending control\n * point\n * @param z4 z-coordinate for the ending control\n * point\n * @chainable\n /\n curve(\n x1: number,\n y1: number,\n z1: number,\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number\n ): p5;\n\n /\n Sets the resolution at which curves display. The\n * default value is 20 while the minimum value is 3.\n * This function is only useful when using the WEBGL\n * renderer as the default canvas renderer does not\n * use this information.\n * @param resolution resolution of the curves\n * @chainable\n /\n curveDetail(resolution: number): p5;\n\n /\n Modifies the quality of forms created with curve()\n * and curveVertex().The parameter tightness\n * determines how the curve fits to the vertex\n * points. The value 0.0 is the default value for\n * tightness (this value defines the curves to be\n * Catmull-Rom splines) and the value 1.0 connects\n * all the points with straight lines. Values within\n * the range -5.0 and 5.0 will deform the curves but\n * will leave them recognizable and as values\n * increase in magnitude, they will continue to\n * deform.\n * @param amount amount of deformation from the\n * original vertices\n * @chainable\n /\n curveTightness(amount: number): p5;\n\n /\n Evaluates the curve at position t for points a, b,\n * c, d. The parameter t varies between 0 and 1, a\n * and d are control points of the curve, and b and c\n * are the start and end points of the curve. This\n * can be done once with the x coordinates and a\n * second time with the y coordinates to get the\n * location of a curve at t.\n * @param a coordinate of first control point of the\n * curve\n * @param b coordinate of first point\n * @param c coordinate of second point\n * @param d coordinate of second control point\n * @param t value between 0 and 1\n * @return Curve value at position t\n /\n curvePoint(a: number, b: number, c: number, d: number, t: number): number;\n\n /\n Evaluates the tangent to the curve at position t\n * for points a, b, c, d. The parameter t varies\n * between 0 and 1, a and d are points on the curve,\n * and b and c are the control points.\n * @param a coordinate of first control point\n * @param b coordinate of first point on the curve\n * @param c coordinate of second point on the curve\n * @param d coordinate of second conrol point\n * @param t value between 0 and 1\n * @return the tangent at position t\n /\n curveTangent(a: number, b: number, c: number, d: number, t: number): number;\n\n/\n Use the beginContour() and endContour() functions\n * to create negative shapes within shapes such as\n * the center of the letter 'O'. beginContour()\n * begins recording vertices for the shape and\n * endContour() stops recording. The vertices that\n * define a negative shape must \"wind\" in the\n * opposite direction from the exterior shape. First\n * draw vertices for the exterior clockwise order,\n * then for internal shapes, draw vertices shape in\n * counter-clockwise. These functions can only be\n * used within a beginShape()/endShape() pair and\n * transformations such as translate(), rotate(), and\n * scale() do not work within a\n * beginContour()/endContour() pair. It is also not\n * possible to use other shapes, such as ellipse() or\n * rect() within.\n * @chainable\n /\n beginContour(): p5;\n\n /\n Using the beginShape() and endShape() functions\n * allow creating more complex forms. beginShape()\n * begins recording vertices for a shape and\n * endShape() stops recording. The value of the kind\n * parameter tells it which types of shapes to create\n * from the provided vertices. With no mode\n * specified, the shape can be any irregular polygon.\n * The parameters available for beginShape() are:\n \n POINTS Draw a series of points\n \n LINES Draw a series of unconnected line segments\n * (individual lines)\n \n TRIANGLES Draw a series of separate triangles\n \n TRIANGLE_FAN Draw a series of connected triangles\n * sharing the first vertex in a fan-like fashion\n \n TRIANGLE_STRIP Draw a series of connected\n * triangles in strip fashion\n \n QUADS Draw a series of separate quads\n \n QUAD_STRIP Draw quad strip using adjacent edges to\n * form the next quad\n \n TESS (WEBGL only) Handle irregular polygon for\n * filling curve by explicit tessellation\n \n After calling the beginShape() function, a series\n * of vertex() commands must follow. To stop drawing\n * the shape, call endShape(). Each shape will be\n * outlined with the current stroke color and filled\n * with the fill color.\n \n Transformations such as translate(), rotate(), and\n * scale() do not work within beginShape(). It is\n * also not possible to use other shapes, such as\n * ellipse() or rect() within beginShape().\n * @param [kind] either POINTS, LINES, TRIANGLES,\n * TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or\n * TESS\n * @chainable\n /\n beginShape(kind?: BEGIN_KIND): p5;\n\n /\n Specifies vertex coordinates for Bezier curves.\n * Each call to bezierVertex() defines the position\n * of two control points and one anchor point of a\n * Bezier curve, adding a new segment to a line or\n * shape. For WebGL mode bezierVertex() can be used\n * in 2D as well as 3D mode. 2D mode expects 6\n * parameters, while 3D mode expects 9 parameters\n * (including z coordinates). The first time\n * bezierVertex() is used within a beginShape() call,\n * it must be prefaced with a call to vertex() to set\n * the first anchor point. This function must be used\n * between beginShape() and endShape() and only when\n * there is no MODE or POINTS parameter specified to\n * beginShape().\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param x4 x-coordinate for the anchor point\n * @param y4 y-coordinate for the anchor point\n * @chainable\n /\n bezierVertex(x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;\n\n /\n Specifies vertex coordinates for Bezier curves.\n * Each call to bezierVertex() defines the position\n * of two control points and one anchor point of a\n * Bezier curve, adding a new segment to a line or\n * shape. For WebGL mode bezierVertex() can be used\n * in 2D as well as 3D mode. 2D mode expects 6\n * parameters, while 3D mode expects 9 parameters\n * (including z coordinates). The first time\n * bezierVertex() is used within a beginShape() call,\n * it must be prefaced with a call to vertex() to set\n * the first anchor point. This function must be used\n * between beginShape() and endShape() and only when\n * there is no MODE or POINTS parameter specified to\n * beginShape().\n * @param x2 x-coordinate for the first control point\n * @param y2 y-coordinate for the first control point\n * @param z2 z-coordinate for the first control point\n * (for WebGL mode)\n * @param x3 x-coordinate for the second control\n * point\n * @param y3 y-coordinate for the second control\n * point\n * @param z3 z-coordinate for the second control\n * point (for WebGL mode)\n * @param x4 x-coordinate for the anchor point\n * @param y4 y-coordinate for the anchor point\n * @param z4 z-coordinate for the anchor point (for\n * WebGL mode)\n * @chainable\n /\n bezierVertex(\n x2: number,\n y2: number,\n z2: number,\n x3: number,\n y3: number,\n z3: number,\n x4: number,\n y4: number,\n z4: number\n ): p5;\n\n /\n Specifies vertex coordinates for curves. This\n * function may only be used between beginShape() and\n * endShape() and only when there is no MODE\n * parameter specified to beginShape(). For WebGL\n * mode curveVertex() can be used in 2D as well as 3D\n * mode. 2D mode expects 2 parameters, while 3D mode\n * expects 3 parameters. The first and last points in\n * a series of curveVertex() lines will be used to\n * guide the beginning and end of the curve. A\n * minimum of four points is required to draw a tiny\n * curve between the second and third points. Adding\n * a fifth point with curveVertex() will draw the\n * curve between the second, third, and fourth\n * points. The curveVertex() function is an\n * implementation of Catmull-Rom splines.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @chainable\n /\n curveVertex(x: number, y: number): p5;\n\n /\n Specifies vertex coordinates for curves. This\n * function may only be used between beginShape() and\n * endShape() and only when there is no MODE\n * parameter specified to beginShape(). For WebGL\n * mode curveVertex() can be used in 2D as well as 3D\n * mode. 2D mode expects 2 parameters, while 3D mode\n * expects 3 parameters. The first and last points in\n * a series of curveVertex() lines will be used to\n * guide the beginning and end of the curve. A\n * minimum of four points is required to draw a tiny\n * curve between the second and third points. Adding\n * a fifth point with curveVertex() will draw the\n * curve between the second, third, and fourth\n * points. The curveVertex() function is an\n * implementation of Catmull-Rom splines.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @param [z] z-coordinate of the vertex (for WebGL\n * mode)\n * @chainable\n /\n curveVertex(x: number, y: number, z?: number): p5;\n\n /\n Use the beginContour() and endContour() functions\n * to create negative shapes within shapes such as\n * the center of the letter 'O'. beginContour()\n * begins recording vertices for the shape and\n * endContour() stops recording. The vertices that\n * define a negative shape must \"wind\" in the\n * opposite direction from the exterior shape. First\n * draw vertices for the exterior clockwise order,\n * then for internal shapes, draw vertices shape in\n * counter-clockwise. These functions can only be\n * used within a beginShape()/endShape() pair and\n * transformations such as translate(), rotate(), and\n * scale() do not work within a\n * beginContour()/endContour() pair. It is also not\n * possible to use other shapes, such as ellipse() or\n * rect() within.\n * @chainable\n /\n endContour(): p5;\n\n /\n The endShape() function is the companion to\n * beginShape() and may only be called after\n * beginShape(). When endShape() is called, all of\n * the image data defined since the previous call to\n * beginShape() is written into the image buffer. The\n * constant CLOSE as the value for the mode parameter\n * to close the shape (to connect the beginning and\n * the end).\n * @param [mode] use CLOSE to close the shape\n * @chainable\n /\n endShape(mode?: END_MODE): p5;\n\n /\n Specifies vertex coordinates for quadratic Bezier\n * curves. Each call to quadraticVertex() defines the\n * position of one control points and one anchor\n * point of a Bezier curve, adding a new segment to a\n * line or shape. The first time quadraticVertex() is\n * used within a beginShape() call, it must be\n * prefaced with a call to vertex() to set the first\n * anchor point. For WebGL mode quadraticVertex() can\n * be used in 2D as well as 3D mode. 2D mode expects\n * 4 parameters, while 3D mode expects 6 parameters\n * (including z coordinates). This function must be\n * used between beginShape() and endShape() and only\n * when there is no MODE or POINTS parameter\n * specified to beginShape().\n * @param cx x-coordinate for the control point\n * @param cy y-coordinate for the control point\n * @param x3 x-coordinate for the anchor point\n * @param y3 y-coordinate for the anchor point\n * @chainable\n /\n quadraticVertex(cx: number, cy: number, x3: number, y3: number): p5;\n\n /\n Specifies vertex coordinates for quadratic Bezier\n * curves. Each call to quadraticVertex() defines the\n * position of one control points and one anchor\n * point of a Bezier curve, adding a new segment to a\n * line or shape. The first time quadraticVertex() is\n * used within a beginShape() call, it must be\n * prefaced with a call to vertex() to set the first\n * anchor point. For WebGL mode quadraticVertex() can\n * be used in 2D as well as 3D mode. 2D mode expects\n * 4 parameters, while 3D mode expects 6 parameters\n * (including z coordinates). This function must be\n * used between beginShape() and endShape() and only\n * when there is no MODE or POINTS parameter\n * specified to beginShape().\n * @param cx x-coordinate for the control point\n * @param cy y-coordinate for the control point\n * @param cz z-coordinate for the control point (for\n * WebGL mode)\n * @param x3 x-coordinate for the anchor point\n * @param y3 y-coordinate for the anchor point\n * @param z3 z-coordinate for the anchor point (for\n * WebGL mode)\n * @chainable\n /\n quadraticVertex(cx: number, cy: number, cz: number, x3: number, y3: number, z3: number): p5;\n\n /\n All shapes are constructed by connecting a series\n * of vertices. vertex() is used to specify the\n * vertex coordinates for points, lines, triangles,\n * quads, and polygons. It is used exclusively within\n * the beginShape() and endShape() functions.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @chainable\n /\n vertex(x: number, y: number): p5;\n\n /\n All shapes are constructed by connecting a series\n * of vertices. vertex() is used to specify the\n * vertex coordinates for points, lines, triangles,\n * quads, and polygons. It is used exclusively within\n * the beginShape() and endShape() functions.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @param [z] z-coordinate of the vertex. Defaults to\n * 0 if not specified.\n * @chainable\n /\n vertex(x: number, y: number, z?: number): p5;\n\n /\n All shapes are constructed by connecting a series\n * of vertices. vertex() is used to specify the\n * vertex coordinates for points, lines, triangles,\n * quads, and polygons. It is used exclusively within\n * the beginShape() and endShape() functions.\n * @param x x-coordinate of the vertex\n * @param y y-coordinate of the vertex\n * @param [z] z-coordinate of the vertex. Defaults to\n * 0 if not specified.\n * @param [u] the vertex's texture u-coordinate\n * @param [v] the vertex's texture v-coordinate\n * @chainable\n /\n vertex(x: number, y: number, z?: number, u?: number, v?: number): p5;\n\n /\n Sets the 3d vertex normal to use for subsequent\n * vertices drawn with vertex(). A normal is a vector\n * that is generally nearly perpendicular to a\n * shape's surface which controls how much light will\n * be reflected from that part of the surface.\n * @param vector A p5.Vector representing the vertex\n * normal.\n * @chainable\n /\n normal(vector: Vector): p5;\n\n /\n Sets the 3d vertex normal to use for subsequent\n * vertices drawn with vertex(). A normal is a vector\n * that is generally nearly perpendicular to a\n * shape's surface which controls how much light will\n * be reflected from that part of the surface.\n * @param x The x component of the vertex normal.\n * @param y The y component of the vertex normal.\n * @param z The z component of the vertex normal.\n * @chainable\n /\n normal(x: number, y: number, z: number): p5;\n\n/\n Version of this p5.js.\n /\n readonly VERSION: VERSION;\n\n /\n The default, two-dimensional renderer.\n /\n readonly P2D: P2D;\n\n /\n One of the two render modes in p5.js, used for\n * computationally intensive tasks like 3D rendering\n * and shaders. WEBGL differs from the default P2D\n * renderer in the following ways:\n \n - Coordinate System - When drawing in WEBGL mode,\n * the origin point (0,0,0) is located at the center\n * of the screen, not the top-left corner. See the\n * learn page about coordinates and transformations.\n * - 3D Shapes - WEBGL mode can be used to draw\n * 3-dimensional shapes like box(), sphere(), cone(),\n * and more. See the learn page about custom geometry\n * to make more complex objects.\n * - Shape Detail - When drawing in WEBGL mode, you\n * can specify how smooth curves should be drawn by\n * using a detail parameter. See the wiki section\n * about shapes for a more information and an\n * example.\n * - Textures - A texture is like a skin that wraps\n * onto a shape. See the wiki section about textures\n * for examples of mapping images onto surfaces with\n * textures.\n * - Materials and Lighting - WEBGL offers different\n * types of lights like ambientLight() to place\n * around a scene. Materials like specularMaterial()\n * reflect the lighting to convey shape and depth.\n * See the learn page for styling and appearance to\n * experiment with different combinations.\n * - Camera - The viewport of a WEBGL sketch can be\n * adjusted by changing camera attributes. See the\n * learn page section about cameras for an\n * explanation of camera controls.\n * - Text - WEBGL requires opentype/truetype font\n * files to be preloaded using loadFont(). See the\n * wiki section about text for details, along with a\n * workaround.\n * - Shaders - Shaders are hardware accelerated\n * programs that can be used for a variety of effects\n * and graphics. See the introduction to shaders to\n * get started with shaders in p5.js.\n * - Graphics Acceleration - WEBGL mode uses the\n * graphics card instead of the CPU, so it may help\n * boost the performance of your sketch (example:\n * drawing more shapes on the screen at once).\n \n To learn more about WEBGL mode, check out all the\n * interactive WEBGL tutorials in the \"Learn\" section\n * of this website, or read the wiki article \"Getting\n * started with WebGL in p5\".\n /\n readonly WEBGL: WEBGL;\n\n /\n One of the two possible values of a WebGL canvas\n * (either WEBGL or WEBGL2), which can be used to\n * determine what capabilities the rendering\n * environment has.\n /\n readonly WEBGL2: WEBGL2;\n readonly ARROW: ARROW;\n readonly CROSS: CROSS;\n readonly HAND: HAND;\n readonly MOVE: MOVE;\n readonly TEXT: TEXT;\n readonly WAIT: WAIT;\n\n /\n HALF_PI is a mathematical constant with the value\n * 1.57079632679489661923. It is half the ratio of\n * the circumference of a circle to its diameter. It\n * is useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly HALF_PI: number;\n\n /\n PI is a mathematical constant with the value\n * 3.14159265358979323846. It is the ratio of the\n * circumference of a circle to its diameter. It is\n * useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly PI: number;\n\n /\n QUARTER_PI is a mathematical constant with the\n * value 0.7853982. It is one quarter the ratio of\n * the circumference of a circle to its diameter. It\n * is useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly QUARTER_PI: number;\n\n /\n TAU is an alias for TWO_PI, a mathematical\n * constant with the value 6.28318530717958647693. It\n * is twice the ratio of the circumference of a\n * circle to its diameter. It is useful in\n * combination with the trigonometric functions sin()\n * and cos().\n /\n readonly TAU: number;\n\n /\n TWO_PI is a mathematical constant with the value\n * 6.28318530717958647693. It is twice the ratio of\n * the circumference of a circle to its diameter. It\n * is useful in combination with the trigonometric\n * functions sin() and cos().\n /\n readonly TWO_PI: number;\n\n /\n Constant to be used with the angleMode() function,\n * to set the mode in which p5.js interprets and\n * calculates angles (either DEGREES or RADIANS).\n /\n readonly DEGREES: DEGREES;\n\n /\n Constant to be used with the angleMode() function,\n * to set the mode in which p5.js interprets and\n * calculates angles (either RADIANS or DEGREES).\n /\n readonly RADIANS: RADIANS;\n readonly CORNER: CORNER;\n readonly CORNERS: CORNERS;\n readonly RADIUS: RADIUS;\n readonly RIGHT: RIGHT;\n readonly LEFT: LEFT;\n readonly CENTER: CENTER;\n readonly TOP: TOP;\n readonly BOTTOM: BOTTOM;\n readonly BASELINE: BASELINE;\n readonly POINTS: POINTS;\n readonly LINES: LINES;\n readonly LINE_STRIP: LINE_STRIP;\n readonly LINE_LOOP: LINE_LOOP;\n readonly TRIANGLES: TRIANGLES;\n readonly TRIANGLE_FAN: TRIANGLE_FAN;\n readonly TRIANGLE_STRIP: TRIANGLE_STRIP;\n readonly QUADS: QUADS;\n readonly QUAD_STRIP: QUAD_STRIP;\n readonly TESS: TESS;\n readonly CLOSE: CLOSE;\n readonly OPEN: OPEN;\n readonly CHORD: CHORD;\n readonly PIE: PIE;\n readonly PROJECT: PROJECT;\n readonly SQUARE: SQUARE;\n readonly ROUND: ROUND;\n readonly BEVEL: BEVEL;\n readonly MITER: MITER;\n readonly RGB: RGB;\n\n /\n HSB (hue, saturation, brightness) is a type of\n * color model. You can learn more about it at HSB.\n /\n readonly HSB: HSB;\n readonly HSL: HSL;\n\n /\n AUTO allows us to automatically set the width or\n * height of an element (but not both), based on the\n * current height and width of the element. Only one\n * parameter can be passed to the size function as\n * AUTO, at a time.\n /\n readonly AUTO: AUTO;\n readonly ALT: number;\n readonly BACKSPACE: number;\n readonly CONTROL: number;\n readonly DELETE: number;\n readonly DOWN_ARROW: number;\n readonly ENTER: number;\n readonly ESCAPE: number;\n readonly LEFT_ARROW: number;\n readonly OPTION: number;\n readonly RETURN: number;\n readonly RIGHT_ARROW: number;\n readonly SHIFT: number;\n readonly TAB: number;\n readonly UP_ARROW: number;\n readonly BLEND: BLEND;\n readonly REMOVE: REMOVE;\n readonly ADD: ADD;\n readonly DARKEST: DARKEST;\n readonly LIGHTEST: LIGHTEST;\n readonly DIFFERENCE: DIFFERENCE;\n readonly SUBTRACT: SUBTRACT;\n readonly EXCLUSION: EXCLUSION;\n readonly MULTIPLY: MULTIPLY;\n readonly SCREEN: SCREEN;\n readonly REPLACE: REPLACE;\n readonly OVERLAY: OVERLAY;\n readonly HARD_LIGHT: HARD_LIGHT;\n readonly SOFT_LIGHT: SOFT_LIGHT;\n readonly DODGE: DODGE;\n readonly BURN: BURN;\n readonly THRESHOLD: THRESHOLD;\n readonly GRAY: GRAY;\n readonly OPAQUE: OPAQUE;\n readonly INVERT: INVERT;\n readonly POSTERIZE: POSTERIZE;\n readonly DILATE: DILATE;\n readonly ERODE: ERODE;\n readonly BLUR: BLUR;\n readonly NORMAL: NORMAL;\n readonly ITALIC: ITALIC;\n readonly BOLD: BOLD;\n readonly BOLDITALIC: BOLDITALIC;\n readonly CHAR: CHAR;\n readonly WORD: WORD;\n readonly LINEAR: LINEAR;\n readonly QUADRATIC: QUADRATIC;\n readonly BEZIER: BEZIER;\n readonly CURVE: CURVE;\n readonly STROKE: STROKE;\n readonly FILL: FILL;\n readonly TEXTURE: TEXTURE;\n readonly IMMEDIATE: IMMEDIATE;\n readonly IMAGE: IMAGE;\n readonly NEAREST: NEAREST;\n readonly REPEAT: REPEAT;\n readonly CLAMP: CLAMP;\n readonly MIRROR: MIRROR;\n readonly LANDSCAPE: LANDSCAPE;\n readonly PORTRAIT: PORTRAIT;\n readonly GRID: GRID;\n readonly AXES: AXES;\n readonly LABEL: LABEL;\n readonly FALLBACK: FALLBACK;\n readonly CONTAIN: CONTAIN;\n readonly COVER: COVER;\n readonly UNSIGNED_BYTE: UNSIGNED_BYTE;\n readonly UNSIGNED_INT: UNSIGNED_INT;\n readonly HALF_FLOAT: HALF_FLOAT;\n readonly FLOAT: FLOAT;\n readonly RGBA: RGBA;\n\n/\n The print() function writes to the console area of\n * your browser. This function is often helpful for\n * looking at the data a program is producing. This\n * function creates a new line of text for each call\n * to the function. Individual elements can be\n * separated with quotes (\"\") and joined with the\n * addition operator (+). Note that calling print()\n * without any arguments invokes the window.print()\n * function which opens the browser's print dialog.\n * To print a blank line to console you can write\n * print('\\n').\n * @param contents any combination of Number, String,\n * Object, Boolean, Array to print\n /\n print(contents: any): void;\n\n /\n Sets the cursor to a predefined symbol or an\n * image, or makes it visible if already hidden. If\n * you are trying to set an image as the cursor, the\n * recommended size is 16×16 or 32×32 pixels. The\n * values for parameters x and y must be less than\n * the dimensions of the image.\n * @param type Built-In: either ARROW, CROSS, HAND,\n * MOVE, TEXT and WAIT Native CSS properties: 'grab',\n * 'progress', 'cell' etc. External: path for\n * cursor's images (Allowed File extensions: .cur,\n * .gif, .jpg, .jpeg, .png) For more information on\n * Native CSS cursors and url visit:\n * https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\n * @param [x] the horizontal active spot of the\n * cursor (must be less than 32)\n * @param [y] the vertical active spot of the cursor\n * (must be less than 32)\n /\n cursor(type: string \| CURSOR_TYPE, x?: number, y?: number): void;\n\n /\n Specifies the number of frames to be displayed\n * every second. For example, the function call\n * frameRate(30) will attempt to refresh 30 times a\n * second. If the processor is not fast enough to\n * maintain the specified rate, the frame rate will\n * not be achieved. Setting the frame rate within\n * setup() is recommended. The default frame rate is\n * based on the frame rate of the display (here also\n * called \"refresh rate\"), which is set to 60 frames\n * per second on most computers. A frame rate of 24\n * frames per second (usual for movies) or above will\n * be enough for smooth animations. This is the same\n * as setFrameRate(val). Calling frameRate() with no\n * arguments returns the current framerate. The draw\n * function must run at least once before it will\n * return a value. This is the same as\n * getFrameRate().\n \n Calling frameRate() with arguments that are not of\n * the type Number or are non-positive also returns\n * current framerate.\n * @param fps number of frames to be displayed every\n * second\n * @chainable\n /\n frameRate(fps: number): p5;\n\n /\n Specifies the number of frames to be displayed\n * every second. For example, the function call\n * frameRate(30) will attempt to refresh 30 times a\n * second. If the processor is not fast enough to\n * maintain the specified rate, the frame rate will\n * not be achieved. Setting the frame rate within\n * setup() is recommended. The default frame rate is\n * based on the frame rate of the display (here also\n * called \"refresh rate\"), which is set to 60 frames\n * per second on most computers. A frame rate of 24\n * frames per second (usual for movies) or above will\n * be enough for smooth animations. This is the same\n * as setFrameRate(val). Calling frameRate() with no\n * arguments returns the current framerate. The draw\n * function must run at least once before it will\n * return a value. This is the same as\n * getFrameRate().\n \n Calling frameRate() with arguments that are not of\n * the type Number or are non-positive also returns\n * current framerate.\n * @return current frameRate\n /\n frameRate(): number;\n\n /\n Returns _targetFrameRate variable. The default\n * _targetFrameRate is set to 60. This could be\n * changed by calling frameRate() and setting it to\n * the desired value. When getTargetFrameRate() is\n * called, it should return the value that was set.\n * @return _targetFrameRate\n /\n getTargetFrameRate(): number;\n\n /\n Hides the cursor from view.\n /\n noCursor(): void;\n\n /\n The windowResized() function is called once every\n * time the browser window is resized. This is a good\n * place to resize the canvas or do any other\n * adjustments to accommodate the new window size.\n * @param [event] optional Event callback argument.\n /\n windowResized(event?: object): void;\n\n /\n If argument is given, sets the sketch to\n * fullscreen or not based on the value of the\n * argument. If no argument is given, returns the\n * current fullscreen state. Note that due to browser\n * restrictions this can only be called on user\n * input, for example, on mouse press like the\n * example below.\n * @param [val] whether the sketch should be in\n * fullscreen mode or not\n * @return current fullscreen state\n /\n fullscreen(val?: boolean): boolean;\n\n /\n Sets the pixel scaling for high pixel density\n * displays. By default pixel density is set to match\n * display density, call pixelDensity(1) to turn this\n * off. Calling pixelDensity() with no arguments\n * returns the current pixel density of the sketch.\n * @param val whether or how much the sketch should\n * scale\n * @chainable\n /\n pixelDensity(val: number): p5;\n\n /\n Sets the pixel scaling for high pixel density\n * displays. By default pixel density is set to match\n * display density, call pixelDensity(1) to turn this\n * off. Calling pixelDensity() with no arguments\n * returns the current pixel density of the sketch.\n * @return current pixel density of the sketch\n /\n pixelDensity(): number;\n\n /\n Returns the pixel density of the current display\n * the sketch is running on.\n * @return current pixel density of the display\n /\n displayDensity(): number;\n\n /\n Gets the current URL. Note: when using the p5\n * Editor, this will return an empty object because\n * the sketch is embedded in an iframe. It will work\n * correctly if you view the sketch using the\n * editor's present or share URLs.\n * @return url\n /\n getURL(): string;\n\n /\n Gets the current URL path as an array. Note: when\n * using the p5 Editor, this will return an empty\n * object because the sketch is embedded in an\n * iframe. It will work correctly if you view the\n * sketch using the editor's present or share URLs.\n * @return path components\n /\n getURLPath(): string[];\n\n /\n Gets the current URL params as an Object. Note:\n * when using the p5 Editor, this will return an\n * empty object because the sketch is embedded in an\n * iframe. It will work correctly if you view the\n * sketch using the editor's present or share URLs.\n * @return URL params\n /\n getURLParams(): object;\n\n /\n The system variable frameCount contains the number\n * of frames that have been displayed since the\n * program started. Inside setup() the value is 0,\n * after the first iteration of draw() it is 1, etc.\n /\n frameCount: number;\n\n /\n The system variable deltaTime contains the time\n * difference between the beginning of the previous\n * frame and the beginning of the current frame in\n * milliseconds. This variable is useful for creating\n * time sensitive animation or physics calculation\n * that should stay constant regardless of frame\n * rate.\n /\n deltaTime: number;\n\n /\n Confirms if the window a p5.js program is in is\n * \"focused,\" meaning that the sketch will accept\n * mouse or keyboard input. This variable is \"true\"\n * if the window is focused and \"false\" if not.\n /\n focused: boolean;\n\n /\n If the sketch was created in WebGL mode, then\n * weglVersion will indicate which version of WebGL\n * it is using. It will try to create a WebGL2 canvas\n * unless you have requested WebGL1 via\n * setAttributes({ version: 1 }), and will fall back\n * to WebGL1 if WebGL2 is not available. webglVersion\n * will always be either WEBGL2, WEBGL, or P2D if not\n * in WebGL mode.\n /\n webglVersion: string;\n\n /\n System variable that stores the width of the\n * screen display according to The default\n * pixelDensity. This is used to run a full-screen\n * program on any display size. To return actual\n * screen size, multiply this by pixelDensity.\n /\n displayWidth: number;\n\n /\n System variable that stores the height of the\n * screen display according to The default\n * pixelDensity. This is used to run a full-screen\n * program on any display size. To return actual\n * screen size, multiply this by pixelDensity.\n /\n displayHeight: number;\n\n /\n System variable that stores the width of the inner\n * window, it maps to window.innerWidth.\n /\n windowWidth: number;\n\n /\n System variable that stores the height of the\n * inner window, it maps to window.innerHeight.\n /\n windowHeight: number;\n\n /\n System variable that stores the width of the\n * drawing canvas. This value is set by the first\n * parameter of the createCanvas() function. For\n * example, the function call createCanvas(320, 240)\n * sets the width variable to the value 320. The\n * value of width defaults to 100 if createCanvas()\n * is not used in a program.\n /\n width: number;\n\n /\n System variable that stores the height of the\n * drawing canvas. This value is set by the second\n * parameter of the createCanvas() function. For\n * example, the function call createCanvas(320, 240)\n * sets the height variable to the value 240. The\n * value of height defaults to 100 if createCanvas()\n * is not used in a program.\n /\n height: number;\n\n/\n Creates a canvas element in the document and sets\n * its dimensions in pixels. This method should be\n * called only once at the start of setup(). Calling\n * createCanvas more than once in a sketch will\n * result in very unpredictable behavior. If you want\n * more than one drawing canvas you could use\n * createGraphics() (hidden by default but it can be\n * shown). Important note: in 2D mode (i.e. when\n * p5.Renderer is not set) the origin (0,0) is\n * positioned at the top left of the screen. In 3D\n * mode (i.e. when p5.Renderer is set to WEBGL), the\n * origin is positioned at the center of the canvas.\n * See this issue for more information.\n \n A WebGL canvas will use a WebGL2 context if it is\n * supported by the browser. Check the webglVersion\n * property to check what version is being used, or\n * call setAttributes({ version: 1 }) to create a\n * WebGL1 context.\n \n The system variables width and height are set by\n * the parameters passed to this function. If\n * createCanvas() is not used, the window will be\n * given a default size of 100×100 pixels.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). If\n * specified, avoid using setAttributes() afterwards,\n * as this will remove and recreate the existing\n * canvas.\n \n For more ways to position the canvas, see the\n * positioning the canvas wiki page.\n * @param w width of the canvas\n * @param h height of the canvas\n * @param [renderer] either P2D or WEBGL\n * @param [canvas] existing html canvas element\n * @return pointer to p5.Renderer holding canvas\n /\n createCanvas(w: number, h: number, renderer?: RENDERER, canvas?: object): Renderer;\n\n /\n Creates a canvas element in the document and sets\n * its dimensions in pixels. This method should be\n * called only once at the start of setup(). Calling\n * createCanvas more than once in a sketch will\n * result in very unpredictable behavior. If you want\n * more than one drawing canvas you could use\n * createGraphics() (hidden by default but it can be\n * shown). Important note: in 2D mode (i.e. when\n * p5.Renderer is not set) the origin (0,0) is\n * positioned at the top left of the screen. In 3D\n * mode (i.e. when p5.Renderer is set to WEBGL), the\n * origin is positioned at the center of the canvas.\n * See this issue for more information.\n \n A WebGL canvas will use a WebGL2 context if it is\n * supported by the browser. Check the webglVersion\n * property to check what version is being used, or\n * call setAttributes({ version: 1 }) to create a\n * WebGL1 context.\n \n The system variables width and height are set by\n * the parameters passed to this function. If\n * createCanvas() is not used, the window will be\n * given a default size of 100×100 pixels.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). If\n * specified, avoid using setAttributes() afterwards,\n * as this will remove and recreate the existing\n * canvas.\n \n For more ways to position the canvas, see the\n * positioning the canvas wiki page.\n * @param w width of the canvas\n * @param h height of the canvas\n * @param [canvas] existing html canvas element\n * @return pointer to p5.Renderer holding canvas\n /\n createCanvas(w: number, h: number, canvas?: object): Renderer;\n\n /\n Resizes the canvas to given width and height. The\n * canvas will be cleared and draw will be called\n * immediately, allowing the sketch to re-render\n * itself in the resized canvas.\n * @param w width of the canvas\n * @param h height of the canvas\n * @param [noRedraw] don't redraw the canvas\n * immediately\n /\n resizeCanvas(w: number, h: number, noRedraw?: boolean): void;\n\n /\n Removes the default canvas for a p5 sketch that\n * doesn't require a canvas\n /\n noCanvas(): void;\n\n /\n Creates and returns a new p5.Graphics object. Use\n * this class if you need to draw into an off-screen\n * graphics buffer. The two parameters define the\n * width and height in pixels. A WebGL p5.Graphics\n * will use a WebGL2 context if it is supported by\n * the browser. Check the pg.webglVersion property of\n * the renderer to check what version is being used,\n * or call pg.setAttributes({ version: 1 }) to create\n * a WebGL1 context.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). By\n * default this canvas will be hidden (offscreen\n * buffer), to make visible, set element's style to\n * display:block;\n * @param w width of the offscreen graphics buffer\n * @param h height of the offscreen graphics buffer\n * @param [renderer] either P2D or WEBGL undefined\n * defaults to p2d\n * @param [canvas] existing html canvas element\n * @return offscreen graphics buffer\n /\n createGraphics(w: number, h: number, renderer?: RENDERER, canvas?: object): Graphics;\n\n /\n Creates and returns a new p5.Graphics object. Use\n * this class if you need to draw into an off-screen\n * graphics buffer. The two parameters define the\n * width and height in pixels. A WebGL p5.Graphics\n * will use a WebGL2 context if it is supported by\n * the browser. Check the pg.webglVersion property of\n * the renderer to check what version is being used,\n * or call pg.setAttributes({ version: 1 }) to create\n * a WebGL1 context.\n \n Optionally, an existing canvas can be passed using\n * a selector, ie. document.getElementById(''). By\n * default this canvas will be hidden (offscreen\n * buffer), to make visible, set element's style to\n * display:block;\n * @param w width of the offscreen graphics buffer\n * @param h height of the offscreen graphics buffer\n * @param [canvas] existing html canvas element\n * @return offscreen graphics buffer\n /\n createGraphics(w: number, h: number, canvas?: object): Graphics;\n\n /\n Creates and returns a new p5.Framebuffer, a\n * high-performance WebGL object that you can draw to\n * and then use as a texture. Options can include:\n \n - format: The data format of the texture, either\n * UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. The default\n * is UNSIGNED_BYTE.\n * - channels: What color channels to store, either\n * RGB or RGBA. The default is to match the channels\n * in the main canvas (with alpha unless disabled\n * with setAttributes.)\n * - depth: A boolean, whether or not to include a\n * depth buffer. Defaults to true.\n * - depthFormat: The data format for depth\n * information, either UNSIGNED_INT or FLOAT. The\n * default is FLOAT if available, or UNSIGNED_INT\n * otherwise.\n * - antialias: Boolean or Number, whether or not to\n * render with antialiased edges, and if so,\n * optionally the number of samples to use. Defaults\n * to whether or not the main canvas is antialiased,\n * using a default of 2 samples if so. Antialiasing\n * is only supported when WebGL 2 is available.\n * - width: The width of the texture. Defaults to\n * matching the main canvas.\n * - height: The height of the texture. Defaults to\n * matching the main canvas.\n * - density: The pixel density of the texture.\n * Defaults to the pixel density of the main canvas.\n * - textureFiltering: Either LINEAR (nearby pixels\n * will be interpolated when reading values from the\n * color texture) or NEAREST (no interpolation.)\n * Generally, use LINEAR when using the texture as an\n * image, and use NEAREST if reading the texture as\n * data. Defaults to LINEAR.\n \n If width, height, or density are specified, then\n * the framebuffer will keep that size until manually\n * changed. Otherwise, it will be autosized, and it\n * will update to match the main canvas's size and\n * density when the main canvas changes.\n * @param [options] An optional object with\n * configuration\n /\n createFramebuffer(options?: object): void;\n\n /\n Blends the pixels in the display window according\n * to the defined mode. There is a choice of the\n * following modes to blend the source pixels (A)\n * with the ones of pixels already in the display\n * window (B): - BLEND - linear interpolation of\n * colours: C = Afactor + B. This is the default\n blending mode.\n * - ADD - sum of A and B\n * - DARKEST - only the darkest colour succeeds: C =\n * min(Afactor, B).\n - LIGHTEST - only the lightest colour succeeds: C\n * = max(Afactor, B).\n - DIFFERENCE - subtract colors from underlying\n * image. (2D)\n * - EXCLUSION - similar to DIFFERENCE, but less\n * extreme.\n * - MULTIPLY - multiply the colors, result will\n * always be darker.\n * - SCREEN - opposite multiply, uses inverse values\n * of the colors.\n * - REPLACE - the pixels entirely replace the others\n * and don't utilize alpha (transparency) values.\n * - REMOVE - removes pixels from B with the alpha\n * strength of A.\n * - OVERLAY - mix of MULTIPLY and SCREEN .\n * Multiplies dark values, and screens light values.\n * (2D)\n * - HARD_LIGHT - SCREEN when greater than 50% gray,\n * MULTIPLY when lower. (2D)\n * - SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works\n * like OVERLAY, but not as harsh. (2D)\n * - DODGE - lightens light tones and increases\n * contrast, ignores darks. (2D)\n * - BURN - darker areas are applied, increasing\n * contrast, ignores lights. (2D)\n * - SUBTRACT - remainder of A and B (3D)\n \n (2D) indicates that this blend mode only works in\n * the 2D renderer.\n \n (3D) indicates that this blend mode only works in\n * the WEBGL renderer.\n * @param mode blend mode to set for canvas. either\n * BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT\n /\n blendMode(mode: BLEND_MODE): void;\n\n /\n The p5.js API provides a lot of functionality for\n * creating graphics, but there is some native HTML5\n * Canvas functionality that is not exposed by p5.\n * You can still call it directly using the variable\n * drawingContext, as in the example shown. This is\n * the equivalent of calling canvas.getContext('2d');\n * or canvas.getContext('webgl');. See this\n * reference for the native canvas API for possible\n * drawing functions you can call.\n /\n drawingContext: any;\n\n/\n Stops p5.js from continuously executing the code\n * within draw(). If loop() is called, the code in\n * draw() begins to run continuously again. If using\n * noLoop() in setup(), it should be the last line\n * inside the block. When noLoop() is used, it's not\n * possible to manipulate or access the screen inside\n * event handling functions such as mousePressed() or\n * keyPressed(). Instead, use those functions to call\n * redraw() or loop(), which will run draw(), which\n * can update the screen properly. This means that\n * when noLoop() has been called, no drawing can\n * happen, and functions like saveFrames() or\n * loadPixels() may not be used.\n \n Note that if the sketch is resized, redraw() will\n * be called to update the sketch, even after\n * noLoop() has been specified. Otherwise, the sketch\n * would enter an odd state until loop() was called.\n \n Use isLooping() to check the current state of\n * loop().\n /\n noLoop(): void;\n\n /\n By default, p5.js loops through draw()\n * continuously, executing the code within it.\n * However, the draw() loop may be stopped by calling\n * noLoop(). In that case, the draw() loop can be\n * resumed with loop(). Avoid calling loop() from\n * inside setup().\n \n Use isLooping() to check the current state of\n * loop().\n /\n loop(): void;\n\n /\n By default, p5.js loops through draw()\n * continuously, executing the code within it. If the\n * sketch is stopped with noLoop() or resumed with\n * loop(), isLooping() returns the current state for\n * use within custom event handlers.\n /\n isLooping(): boolean;\n\n /\n The push() function saves the current drawing\n * style settings and transformations, while pop()\n * restores these settings. Note that these functions\n * are always used together. They allow you to change\n * the style and transformation settings and later\n * return to what you had. When a new state is\n * started with push(), it builds on the current\n * style and transform information. The push() and\n * pop() functions can be embedded to provide more\n * control. (See the second example for a\n * demonstration.) push() stores information related\n * to the current transformation state and style\n * settings controlled by the following functions:\n * fill(), noFill(), noStroke(), stroke(), tint(),\n * noTint(), strokeWeight(), strokeCap(),\n * strokeJoin(), imageMode(), rectMode(),\n * ellipseMode(), colorMode(), textAlign(),\n * textFont(), textSize(), textLeading(),\n * applyMatrix(), resetMatrix(), rotate(), scale(),\n * shearX(), shearY(), translate(), noiseSeed().\n \n In WEBGL mode additional style settings are\n * stored. These are controlled by the following\n * functions: setCamera(), ambientLight(),\n * directionalLight(), pointLight(), texture(),\n * specularMaterial(), shininess(), normalMaterial()\n * and shader().\n /\n push(): void;\n\n /\n The push() function saves the current drawing\n * style settings and transformations, while pop()\n * restores these settings. Note that these functions\n * are always used together. They allow you to change\n * the style and transformation settings and later\n * return to what you had. When a new state is\n * started with push(), it builds on the current\n * style and transform information. The push() and\n * pop() functions can be embedded to provide more\n * control. (See the second example for a\n * demonstration.) push() stores information related\n * to the current transformation state and style\n * settings controlled by the following functions:\n * fill(), noFill(), noStroke(), stroke(), tint(),\n * noTint(), strokeWeight(), strokeCap(),\n * strokeJoin(), imageMode(), rectMode(),\n * ellipseMode(), colorMode(), textAlign(),\n * textFont(), textSize(), textLeading(),\n * applyMatrix(), resetMatrix(), rotate(), scale(),\n * shearX(), shearY(), translate(), noiseSeed().\n \n In WEBGL mode additional style settings are\n * stored. These are controlled by the following\n * functions: setCamera(), ambientLight(),\n * directionalLight(), pointLight(), texture(),\n * specularMaterial(), shininess(), normalMaterial()\n * and shader().\n /\n pop(): void;\n\n /\n Executes the code within draw() one time. This\n * function allows the program to update the display\n * window only when necessary, for example when an\n * event registered by mousePressed() or keyPressed()\n * occurs. In structuring a program, it only makes\n * sense to call redraw() within events such as\n * mousePressed(). This is because redraw() does not\n * run draw() immediately (it only sets a flag that\n * indicates an update is needed).\n \n The redraw() function does not work properly when\n * called inside draw().To enable/disable animations,\n * use loop() and noLoop().\n \n In addition you can set the number of redraws per\n * method call. Just add an integer as single\n * parameter for the number of redraws.\n * @param [n] Redraw for n-times. The default value\n * is 1.\n /\n redraw(n?: number): void;\n\n /\n The p5() constructor enables you to activate\n * \"instance mode\" instead of normal \"global mode\".\n * This is an advanced topic. A short description and\n * example is included below. Please see Dan\n * Shiffman's Coding Train video tutorial or this\n * tutorial page for more info. By default, all p5.js\n * functions are in the global namespace (i.e. bound\n * to the window object), meaning you can call them\n * simply ellipse(), fill(), etc. However, this might\n * be inconvenient if you are mixing with other JS\n * libraries (synchronously or asynchronously) or\n * writing long programs of your own. p5.js currently\n * supports a way around this problem called\n * \"instance mode\". In instance mode, all p5\n * functions are bound up in a single variable\n * instead of polluting your global namespace.\n \n Optionally, you can specify a default container\n * for the canvas and any other elements to append to\n * with a second argument. You can give the ID of an\n * element in your html, or an html node itself.\n \n Note that creating instances like this also allows\n * you to have more than one p5 sketch on a single\n * web page, as they will each be wrapped up with\n * their own set up variables. Of course, you could\n * also use iframes to have multiple sketches in\n * global mode.\n * @param sketch a function containing a p5.js sketch\n * @param node ID or pointer to HTML DOM node to\n * contain sketch in\n /\n p5(sketch: object, node: string \| object): void;\n\n/\n Multiplies the current matrix by the one specified\n * through the parameters. This is a powerful\n * operation that can perform the equivalent of\n * translate, scale, shear and rotate all at once.\n * You can learn more about transformation matrices\n * on Wikipedia. The naming of the arguments here\n * follows the naming of the WHATWG specification\n * and corresponds to a transformation matrix of the\n * form:\n * @param arr an array of numbers - should be 6 or 16\n * length (2×3 or 4×4 matrix values)\n * @chainable\n /\n applyMatrix(arr: any[]): p5;\n\n /\n Multiplies the current matrix by the one specified\n * through the parameters. This is a powerful\n * operation that can perform the equivalent of\n * translate, scale, shear and rotate all at once.\n * You can learn more about transformation matrices\n * on Wikipedia. The naming of the arguments here\n * follows the naming of the WHATWG specification\n * and corresponds to a transformation matrix of the\n * form:\n * @param a numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param b numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param c numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param d numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param e numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param f numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @chainable\n /\n applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): p5;\n\n /\n Multiplies the current matrix by the one specified\n * through the parameters. This is a powerful\n * operation that can perform the equivalent of\n * translate, scale, shear and rotate all at once.\n * You can learn more about transformation matrices\n * on Wikipedia. The naming of the arguments here\n * follows the naming of the WHATWG specification\n * and corresponds to a transformation matrix of the\n * form:\n * @param a numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param b numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param c numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param d numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param e numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param f numbers which define the 2×3 or 4×4\n * matrix to be multiplied\n * @param g numbers which define the 4×4 matrix to be\n * multiplied\n * @param h numbers which define the 4×4 matrix to be\n * multiplied\n * @param i numbers which define the 4×4 matrix to be\n * multiplied\n * @param j numbers which define the 4×4 matrix to be\n * multiplied\n * @param k numbers which define the 4×4 matrix to be\n * multiplied\n * @param l numbers which define the 4×4 matrix to be\n * multiplied\n * @param m numbers which define the 4×4 matrix to be\n * multiplied\n * @param n numbers which define the 4×4 matrix to be\n * multiplied\n * @param o numbers which define the 4×4 matrix to be\n * multiplied\n * @param p numbers which define the 4×4 matrix to be\n * multiplied\n * @chainable\n /\n applyMatrix(\n a: number,\n b: number,\n c: number,\n d: number,\n e: number,\n f: number,\n g: number,\n h: number,\n i: number,\n j: number,\n k: number,\n l: number,\n m: number,\n n: number,\n o: number,\n p: number\n ): p5;\n\n /\n Replaces the current matrix with the identity\n * matrix.\n * @chainable\n /\n resetMatrix(): p5;\n\n /\n Rotates a shape by the amount specified by the\n * angle parameter. This function accounts for\n * angleMode, so angles can be entered in either\n * RADIANS or DEGREES. Objects are always rotated\n * around their relative position to the origin and\n * positive numbers rotate objects in a clockwise\n * direction. Transformations apply to everything\n * that happens after and subsequent calls to the\n * function accumulate the effect. For example,\n * calling rotate(HALF_PI) and then rotate(HALF_PI)\n * is the same as rotate(PI). All transformations are\n * reset when draw() begins again.\n \n Technically, rotate() multiplies the current\n * transformation matrix by a rotation matrix. This\n * function can be further controlled by push() and\n * pop().\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @param [axis] (in 3d) the axis to rotate around\n * @chainable\n /\n rotate(angle: number, axis?: Vector \| number[]): p5;\n\n /\n Rotates a shape around X axis by the amount\n * specified in angle parameter. The angles can be\n * entered in either RADIANS or DEGREES. Objects are\n * always rotated around their relative position to\n * the origin and positive numbers rotate objects in\n * a clockwise direction. All transformations are\n * reset when draw() begins again.\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @chainable\n /\n rotateX(angle: number): p5;\n\n /\n Rotates a shape around Y axis by the amount\n * specified in angle parameter. The angles can be\n * entered in either RADIANS or DEGREES. Objects are\n * always rotated around their relative position to\n * the origin and positive numbers rotate objects in\n * a clockwise direction. All transformations are\n * reset when draw() begins again.\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @chainable\n /\n rotateY(angle: number): p5;\n\n /\n Rotates a shape around Z axis by the amount\n * specified in angle parameter. The angles can be\n * entered in either RADIANS or DEGREES. This method\n * works in WEBGL mode only.\n \n Objects are always rotated around their relative\n * position to the origin and positive numbers rotate\n * objects in a clockwise direction. All\n * transformations are reset when draw() begins\n * again.\n * @param angle the angle of rotation, specified in\n * radians or degrees, depending on current angleMode\n * @chainable\n /\n rotateZ(angle: number): p5;\n\n /\n Increases or decreases the size of a shape by\n * expanding or contracting vertices. Objects always\n * scale from their relative origin to the coordinate\n * system. Scale values are specified as decimal\n * percentages. For example, the function call\n * scale(2.0) increases the dimension of a shape by\n * 200%. Transformations apply to everything that\n * happens after and subsequent calls to the function\n * multiply the effect. For example, calling\n * scale(2.0) and then scale(1.5) is the same as\n * scale(3.0). If scale() is called within draw(),\n * the transformation is reset when the loop begins\n * again.\n \n Using this function with the z parameter is only\n * available in WEBGL mode. This function can be\n * further controlled with push() and pop().\n * @param s percent to scale the object, or\n * percentage to scale the object in the x-axis if\n * multiple arguments are given\n * @param [y] percent to scale the object in the\n * y-axis\n * @param [z] percent to scale the object in the\n * z-axis (webgl only)\n * @chainable\n /\n scale(s: number \| Vector \| number[], y?: number, z?: number): p5;\n\n /\n Increases or decreases the size of a shape by\n * expanding or contracting vertices. Objects always\n * scale from their relative origin to the coordinate\n * system. Scale values are specified as decimal\n * percentages. For example, the function call\n * scale(2.0) increases the dimension of a shape by\n * 200%. Transformations apply to everything that\n * happens after and subsequent calls to the function\n * multiply the effect. For example, calling\n * scale(2.0) and then scale(1.5) is the same as\n * scale(3.0). If scale() is called within draw(),\n * the transformation is reset when the loop begins\n * again.\n \n Using this function with the z parameter is only\n * available in WEBGL mode. This function can be\n * further controlled with push() and pop().\n * @param scales per-axis percents to scale the\n * object\n * @chainable\n /\n scale(scales: Vector \| number[]): p5;\n\n /\n Shears a shape around the x-axis by the amount\n * specified by the angle parameter. Angles should be\n * specified in the current angleMode. Objects are\n * always sheared around their relative position to\n * the origin and positive numbers shear objects in a\n * clockwise direction. Transformations apply to\n * everything that happens after and subsequent calls\n * to the function accumulates the effect. For\n * example, calling shearX(PI/2) and then\n * shearX(PI/2) is the same as shearX(PI). If\n * shearX() is called within the draw(), the\n * transformation is reset when the loop begins\n * again.\n \n Technically, shearX() multiplies the current\n * transformation matrix by a rotation matrix. This\n * function can be further controlled by the push()\n * and pop() functions.\n * @param angle angle of shear specified in radians\n * or degrees, depending on current angleMode\n * @chainable\n /\n shearX(angle: number): p5;\n\n /\n Shears a shape around the y-axis the amount\n * specified by the angle parameter. Angles should be\n * specified in the current angleMode. Objects are\n * always sheared around their relative position to\n * the origin and positive numbers shear objects in a\n * clockwise direction. Transformations apply to\n * everything that happens after and subsequent calls\n * to the function accumulates the effect. For\n * example, calling shearY(PI/2) and then\n * shearY(PI/2) is the same as shearY(PI). If\n * shearY() is called within the draw(), the\n * transformation is reset when the loop begins\n * again.\n \n Technically, shearY() multiplies the current\n * transformation matrix by a rotation matrix. This\n * function can be further controlled by the push()\n * and pop() functions.\n * @param angle angle of shear specified in radians\n * or degrees, depending on current angleMode\n * @chainable\n /\n shearY(angle: number): p5;\n\n /\n Specifies an amount to displace objects within the\n * display window. The x parameter specifies\n * left/right translation, the y parameter specifies\n * up/down translation. Transformations are\n * cumulative and apply to everything that happens\n * after and subsequent calls to the function\n * accumulates the effect. For example, calling\n * translate(50, 0) and then translate(20, 0) is the\n * same as translate(70, 0). If translate() is called\n * within draw(), the transformation is reset when\n * the loop begins again. This function can be\n * further controlled by using push() and pop().\n * @param x left/right translation\n * @param y up/down translation\n * @param [z] forward/backward translation (WEBGL\n * only)\n * @chainable\n /\n translate(x: number, y: number, z?: number): p5;\n\n /\n Specifies an amount to displace objects within the\n * display window. The x parameter specifies\n * left/right translation, the y parameter specifies\n * up/down translation. Transformations are\n * cumulative and apply to everything that happens\n * after and subsequent calls to the function\n * accumulates the effect. For example, calling\n * translate(50, 0) and then translate(20, 0) is the\n * same as translate(70, 0). If translate() is called\n * within draw(), the transformation is reset when\n * the loop begins again. This function can be\n * further controlled by using push() and pop().\n * @param vector the vector to translate by\n * @chainable\n /\n translate(vector: Vector): p5;\n\n/\n Stores a value in local storage under the key\n * name. Local storage is saved in the browser and\n * persists between browsing sessions and page\n * reloads. The key can be the name of the variable\n * but doesn't have to be. To retrieve stored items\n * see getItem. Sensitive data such as passwords or\n * personal information should not be stored in local\n * storage.\n /\n storeItem(key: string, value: string \| number \| object \| boolean \| Color \| Vector): void;\n\n /\n Returns the value of an item that was stored in\n * local storage using storeItem()\n * @param key name that you wish to use to store in\n * local storage\n * @return Value of stored item\n /\n getItem(key: string): number \| object \| string \| boolean \| Color \| Vector;\n\n /\n Clears all local storage items set with\n * storeItem() for the current domain.\n /\n clearStorage(): void;\n\n /\n Removes an item that was stored with storeItem()\n /\n removeItem(key: string): void;\n\n/\n Creates a new instance of p5.StringDict using the\n * key-value pair or the object you provide.\n /\n createStringDict(key: string, value: string): StringDict;\n\n /\n Creates a new instance of p5.StringDict using the\n * key-value pair or the object you provide.\n * @param object object\n /\n createStringDict(object: object): StringDict;\n\n /\n Creates a new instance of p5.NumberDict using the\n * key-value pair or object you provide.\n /\n createNumberDict(key: number, value: number): NumberDict;\n\n /\n Creates a new instance of p5.NumberDict using the\n * key-value pair or object you provide.\n * @param object object\n /\n createNumberDict(object: object): NumberDict;\n\n/\n Searches the page for the first element that\n * matches the given CSS selector string (can be an\n * ID, class, tag name or a combination) and returns\n * it as a p5.Element. The DOM node itself can be\n * accessed with .elt. Returns null if none found.\n * You can also specify a container to search within.\n * @param selectors CSS selector string of element to\n * search for\n * @param [container] CSS selector string,\n * p5.Element, or HTML element to search within\n * @return p5.Element containing node found\n /\n select(selectors: string, container?: string \| Element \| HTMLElement): Element \| null;\n\n /\n Searches the page for elements that match the\n * given CSS selector string (can be an ID a class,\n * tag name or a combination) and returns them as\n * p5.Elements in an array. The DOM node itself can\n * be accessed with .elt. Returns an empty array if\n * none found. You can also specify a container to\n * search within.\n * @param selectors CSS selector string of elements\n * to search for\n * @param [container] CSS selector string, p5.Element\n * , or HTML element to search within\n * @return Array of p5.Elements containing nodes\n * found\n /\n selectAll(selectors: string, container?: string \| Element \| HTMLElement): Element[];\n\n /\n Removes all elements created by p5, except any\n * canvas / graphics elements created by createCanvas\n * or createGraphics. Event handlers are removed, and\n * element is removed from the DOM.\n /\n removeElements(): void;\n\n /\n The .changed() function is called when the value\n * of an element changes. This can be used to attach\n * an element specific event listener.\n * @param fxn function to be fired when the value of\n * an element changes. if false is passed instead,\n * the previously firing function will no longer\n * fire.\n * @chainable\n /\n changed(fxn: ((...args: any[]) => any) \| boolean): p5;\n\n /\n The .input() function is called when any user\n * input is detected with an element. The input event\n * is often used to detect keystrokes in a input\n * element, or changes on a slider element. This can\n * be used to attach an element specific event\n * listener.\n * @param fxn function to be fired when any user\n * input is detected within the element. if false is\n * passed instead, the previously firing function\n * will no longer fire.\n * @chainable\n /\n input(fxn: ((...args: any[]) => any) \| boolean): p5;\n\n /\n Creates a <div></div> element in the DOM with\n * given inner HTML.\n * @param [html] inner HTML for element created\n * @return pointer to p5.Element holding created node\n /\n createDiv(html?: string): Element;\n\n /\n Creates a <p></p> element in the DOM with given\n * inner HTML. Used for paragraph length text.\n * @param [html] inner HTML for element created\n * @return pointer to p5.Element holding created node\n /\n createP(html?: string): Element;\n\n /\n Creates a <span></span> element in the DOM with\n * given inner HTML.\n * @param [html] inner HTML for element created\n * @return pointer to p5.Element holding created node\n /\n createSpan(html?: string): Element;\n\n /\n Creates an <img> element in the DOM with given src\n * and alternate text.\n * @param src src path or url for image\n * @param alt alternate text to be used if image does\n * not load. You can use also an empty string (\"\") if\n * that an image is not intended to be viewed.\n * @return pointer to p5.Element holding created node\n /\n createImg(src: string, alt: string): Element;\n\n /\n Creates an <img> element in the DOM with given src\n * and alternate text.\n * @param src src path or url for image\n * @param alt alternate text to be used if image does\n * not load. You can use also an empty string (\"\") if\n * that an image is not intended to be viewed.\n * @param crossOrigin crossOrigin property of the img\n * element; use either 'anonymous' or\n * 'use-credentials' to retrieve the image with\n * cross-origin access (for later use with canvas. if\n * an empty string(\"\") is passed, CORS is not used\n * @param [successCallback] callback to be called\n * once image data is loaded with the p5.Element as\n * argument\n * @return pointer to p5.Element holding created node\n /\n createImg(src: string, alt: string, crossOrigin: string, successCallback?: (...args: any[]) => any): Element;\n\n /\n Creates an <a></a> element in the DOM for\n * including a hyperlink.\n * @param href url of page to link to\n * @param html inner html of link element to display\n * @param [target] target where new link should open,\n * could be _blank, _self, _parent, _top.\n * @return pointer to p5.Element holding created node\n /\n createA(href: string, html: string, target?: string): Element;\n\n /\n Creates a slider <input></input> element in the\n * DOM. Use .size() to set the display length of the\n * slider.\n * @param min minimum value of the slider\n * @param max maximum value of the slider\n * @param [value] default value of the slider\n * @param [step] step size for each tick of the\n * slider (if step is set to 0, the slider will move\n * continuously from the minimum to the maximum\n * value)\n * @return pointer to p5.Element holding the created\n * node\n /\n createSlider(min: number, max: number, value?: number, step?: number): Element;\n\n /\n Creates a <button></button> element in the DOM.\n * Use .size() to set the display size of the button.\n * Use .mousePressed() to specify behavior on press.\n * @param label label displayed on the button\n * @param [value] value of the button\n * @return pointer to p5.Element holding created node\n /\n createButton(label: string, value?: string): Element;\n\n /\n Creates a checkbox <input></input> element in the\n * DOM. Calling .checked() on a checkbox returns a\n * boolean indicating whether it is checked or not.\n * @param [label] label displayed after checkbox\n * @param [value] value of the checkbox; checked is\n * true, unchecked is false\n * @return pointer to p5.Element holding created node\n /\n createCheckbox(label?: string, value?: boolean): Element;\n\n /\n Creates a dropdown menu <select></select> element\n * in the DOM. It also assigns select-related methods\n * to p5.Element when selecting an existing select\n * box. Options in the menu are unique by name (the\n * display text). - .option(name, [value]) can be\n * used to add an option with name (the display text)\n * and value to the select element. If an option with\n * name already exists within the select element,\n * this method will change its value to value.\n * - .value() will return the currently selected\n * option.\n * - .selected() will return the current dropdown\n * element which is an instance of p5.Element.\n * - .selected(value) can be used to make given\n * option selected by default when the page first\n * loads.\n * - .disable() marks the whole dropdown element as\n * disabled.\n * - .disable(value) marks a given option as\n * disabled.\n * - .enable() marks the whole dropdown element as\n * enabled if whole dropdown element is disabled\n * intially.\n * - .enable(value) marks a given option as enable if\n * the initial option is disabled.\n * @param [multiple] true if dropdown should support\n * multiple selections\n * @return pointer to p5.Element holding created node\n /\n createSelect(multiple?: boolean): Element;\n\n /\n Creates a dropdown menu <select></select> element\n * in the DOM. It also assigns select-related methods\n * to p5.Element when selecting an existing select\n * box. Options in the menu are unique by name (the\n * display text). - .option(name, [value]) can be\n * used to add an option with name (the display text)\n * and value to the select element. If an option with\n * name already exists within the select element,\n * this method will change its value to value.\n * - .value() will return the currently selected\n * option.\n * - .selected() will return the current dropdown\n * element which is an instance of p5.Element.\n * - .selected(value) can be used to make given\n * option selected by default when the page first\n * loads.\n * - .disable() marks the whole dropdown element as\n * disabled.\n * - .disable(value) marks a given option as\n * disabled.\n * - .enable() marks the whole dropdown element as\n * enabled if whole dropdown element is disabled\n * intially.\n * - .enable(value) marks a given option as enable if\n * the initial option is disabled.\n * @param existing DOM select element\n /\n createSelect(existing: object): Element;\n\n /\n Creates a radio button element in the DOM. It also\n * helps existing radio buttons assign methods of\n * p5.Element. - .option(value, [label]) can be used\n * to create a new option for the element. If an\n * option with a value already exists, it will be\n * returned. It is recommended to use string values\n * as input for value. Optionally, a label can be\n * provided as second argument for the option.\n * - .remove(value) can be used to remove an option\n * for the element. String values recommended as\n * input for value.\n * - .value() method will return the currently\n * selected value.\n * - .selected() method will return the currently\n * selected input element.\n * - .selected(value) method will select the option\n * and return it. String values recommended as input\n * for value.\n * - .disable(Boolean) method will enable/disable the\n * whole radio button element.\n * @param containerElement A container HTML Element,\n * either a div or span, inside which all existing\n * radio inputs will be considered as options.\n * @param [name] A name parameter for each Input\n * Element.\n * @return pointer to p5.Element holding created node\n /\n createRadio(containerElement: object, name?: string): Element;\n\n /\n Creates a radio button element in the DOM. It also\n * helps existing radio buttons assign methods of\n * p5.Element. - .option(value, [label]) can be used\n * to create a new option for the element. If an\n * option with a value already exists, it will be\n * returned. It is recommended to use string values\n * as input for value. Optionally, a label can be\n * provided as second argument for the option.\n * - .remove(value) can be used to remove an option\n * for the element. String values recommended as\n * input for value.\n * - .value() method will return the currently\n * selected value.\n * - .selected() method will return the currently\n * selected input element.\n * - .selected(value) method will select the option\n * and return it. String values recommended as input\n * for value.\n * - .disable(Boolean) method will enable/disable the\n * whole radio button element.\n * @param name A name parameter for each Input\n * Element.\n * @return pointer to p5.Element holding created node\n /\n createRadio(name: string): Element;\n\n /\n Creates a radio button element in the DOM. It also\n * helps existing radio buttons assign methods of\n * p5.Element. - .option(value, [label]) can be used\n * to create a new option for the element. If an\n * option with a value already exists, it will be\n * returned. It is recommended to use string values\n * as input for value. Optionally, a label can be\n * provided as second argument for the option.\n * - .remove(value) can be used to remove an option\n * for the element. String values recommended as\n * input for value.\n * - .value() method will return the currently\n * selected value.\n * - .selected() method will return the currently\n * selected input element.\n * - .selected(value) method will select the option\n * and return it. String values recommended as input\n * for value.\n * - .disable(Boolean) method will enable/disable the\n * whole radio button element.\n * @return pointer to p5.Element holding created node\n /\n createRadio(): Element;\n\n /\n Creates a colorPicker element in the DOM for color\n * input. The .value() method will return a hex\n * string (#rrggbb) of the color. The .color() method\n * will return a p5.Color object with the current\n * chosen color.\n * @param [value] default color of element\n * @return pointer to p5.Element holding created node\n /\n createColorPicker(value?: string \| Color): Element;\n\n /\n Creates an <input></input> element in the DOM for\n * text input. Use .size() to set the display length\n * of the box.\n * @param value default value of the input box\n * @param [type] type of text, ie text, password etc.\n * Defaults to text. Needs a value to be specified\n * first.\n * @return pointer to p5.Element holding created node\n /\n createInput(value: string, type?: string): Element;\n\n /\n Creates an <input></input> element in the DOM for\n * text input. Use .size() to set the display length\n * of the box.\n * @param [value] default value of the input box\n /\n createInput(value?: string): Element;\n\n /\n Creates an <input></input> element in the DOM of\n * type 'file'. This allows users to select local\n * files for use in a sketch.\n * @param callback callback function for when a file\n * is loaded\n * @param [multiple] optional, to allow multiple\n * files to be selected\n * @return pointer to p5.Element holding created DOM\n * element\n /\n createFileInput(callback: (...args: any[]) => any, multiple?: boolean): Element;\n\n /\n Creates an HTML5 <video> element in the DOM for\n * simple playback of audio/video. Shown by default,\n * can be hidden with .hide() and drawn into canvas\n * using image(). The first parameter can be either a\n * single string path to a video file, or an array of\n * string paths to different formats of the same\n * video. This is useful for ensuring that your video\n * can play across different browsers, as each\n * supports different formats. See this page for\n * further information about supported formats.\n * @param src path to a video file, or array of paths\n * for supporting different browsers\n * @param [callback] callback function to be called\n * upon 'canplaythrough' event fire, that is, when\n * the browser can play the media, and estimates that\n * enough data has been loaded to play the media up\n * to its end without having to stop for further\n * buffering of content\n * @return pointer to video p5.MediaElement\n /\n createVideo(src: string \| string[], callback?: (...args: any[]) => any): MediaElement;\n\n /\n Creates a hidden HTML5 <audio> element in the DOM\n * for simple audio playback. The first parameter can\n * be either a single string path to a audio file, or\n * an array of string paths to different formats of\n * the same audio. This is useful for ensuring that\n * your audio can play across different browsers, as\n * each supports different formats. See this page for\n * further information about supported formats.\n * @param [src] path to an audio file, or array of\n * paths for supporting different browsers\n * @param [callback] callback function to be called\n * upon 'canplaythrough' event fire, that is, when\n * the browser can play the media, and estimates that\n * enough data has been loaded to play the media up\n * to its end without having to stop for further\n * buffering of content\n * @return pointer to audio p5.MediaElement\n /\n createAudio(src?: string \| string[], callback?: (...args: any[]) => any): MediaElement;\n\n /\n Creates a new HTML5 <video> element that contains\n * the audio/video feed from a webcam. The element is\n * separate from the canvas and is displayed by\n * default. The element can be hidden using .hide().\n * The feed can be drawn onto the canvas using\n * image(). The loadedmetadata property can be used\n * to detect when the element has fully loaded (see\n * second example). More specific properties of the\n * feed can be passing in a Constraints object. See\n * the W3C spec for possible properties. Note that\n * not all of these are supported by all browsers.\n \n Security note: A new browser security\n * specification requires that getUserMedia, which is\n * behind createCapture(), only works when you're\n * running the code locally, or on HTTPS. Learn more\n * here and here.\n * @param type type of capture, either VIDEO or AUDIO\n * if none specified, default both, or a Constraints\n * object\n * @param [callback] function to be called once\n * stream has loaded\n * @return capture video p5.Element\n /\n createCapture(type: string \| TYPE \| object, callback?: (...args: any[]) => any): Element;\n\n /\n Creates element with given tag in the DOM with\n * given content.\n * @param tag tag for the new element\n * @param [content] html content to be inserted into\n * the element\n * @return pointer to p5.Element holding created node\n /\n createElement(tag: string, content?: string): Element;\n\n/\n The setMoveThreshold() function is used to set the\n * movement threshold for the deviceMoved() function.\n * The default threshold is set to 0.5.\n * @param value The threshold value\n /\n setMoveThreshold(value: number): void;\n\n /\n The setShakeThreshold() function is used to set\n * the movement threshold for the deviceShaken()\n * function. The default threshold is set to 30.\n * @param value The threshold value\n /\n setShakeThreshold(value: number): void;\n\n /\n The deviceMoved() function is called when the\n * device is moved by more than the threshold value\n * along X, Y or Z axis. The default threshold is set\n * to 0.5. The threshold value can be changed using\n * setMoveThreshold().\n /\n deviceMoved(): void;\n\n /\n The deviceTurned() function is called when the\n * device rotates by more than 90 degrees\n * continuously. The axis that triggers the\n * deviceTurned() method is stored in the turnAxis\n * variable. The deviceTurned() method can be locked\n * to trigger on any axis: X, Y or Z by comparing the\n * turnAxis variable to 'X', 'Y' or 'Z'.\n /\n deviceTurned(): void;\n\n /\n The deviceShaken() function is called when the\n * device total acceleration changes of accelerationX\n * and accelerationY values is more than the\n * threshold value. The default threshold is set to\n * 30. The threshold value can be changed using\n * setShakeThreshold().\n /\n deviceShaken(): void;\n\n /\n The system variable deviceOrientation always\n * contains the orientation of the device. The value\n * of this variable will either be set 'landscape' or\n * 'portrait'. If no data is available it will be set\n * to 'undefined'. either LANDSCAPE or PORTRAIT.\n /\n deviceOrientation: UNKNOWN_P5_CONSTANT;\n\n /\n The system variable accelerationX always contains\n * the acceleration of the device along the x axis.\n * Value is represented as meters per second squared.\n /\n accelerationX: number;\n\n /\n The system variable accelerationY always contains\n * the acceleration of the device along the y axis.\n * Value is represented as meters per second squared.\n /\n accelerationY: number;\n\n /\n The system variable accelerationZ always contains\n * the acceleration of the device along the z axis.\n * Value is represented as meters per second squared.\n /\n accelerationZ: number;\n\n /\n The system variable pAccelerationX always contains\n * the acceleration of the device along the x axis in\n * the frame previous to the current frame. Value is\n * represented as meters per second squared.\n /\n pAccelerationX: number;\n\n /\n The system variable pAccelerationY always contains\n * the acceleration of the device along the y axis in\n * the frame previous to the current frame. Value is\n * represented as meters per second squared.\n /\n pAccelerationY: number;\n\n /\n The system variable pAccelerationZ always contains\n * the acceleration of the device along the z axis in\n * the frame previous to the current frame. Value is\n * represented as meters per second squared.\n /\n pAccelerationZ: number;\n\n /\n The system variable rotationX always contains the\n * rotation of the device along the x axis. If the\n * sketch angleMode() is set to DEGREES, the value\n * will be -180 to 180. If it is set to RADIANS, the\n * value will be -PI to PI. Note: The order the\n * rotations are called is important, ie. if used\n * together, it must be called in the order Z-X-Y or\n * there might be unexpected behaviour.\n /\n rotationX: number;\n\n /\n The system variable rotationY always contains the\n * rotation of the device along the y axis. If the\n * sketch angleMode() is set to DEGREES, the value\n * will be -90 to 90. If it is set to RADIANS, the\n * value will be -PI/2 to PI/2. Note: The order the\n * rotations are called is important, ie. if used\n * together, it must be called in the order Z-X-Y or\n * there might be unexpected behaviour.\n /\n rotationY: number;\n\n /\n The system variable rotationZ always contains the\n * rotation of the device along the z axis. If the\n * sketch angleMode() is set to DEGREES, the value\n * will be 0 to 360. If it is set to RADIANS, the\n * value will be 0 to 2PI. Unlike rotationX and\n rotationY, this variable is available for devices\n * with a built-in compass only.\n \n Note: The order the rotations are called is\n * important, ie. if used together, it must be called\n * in the order Z-X-Y or there might be unexpected\n * behaviour.\n /\n rotationZ: number;\n\n /\n The system variable pRotationX always contains the\n * rotation of the device along the x axis in the\n * frame previous to the current frame. If the sketch\n * angleMode() is set to DEGREES, the value will be\n * -180 to 180. If it is set to RADIANS, the value\n * will be -PI to PI. pRotationX can also be used\n * with rotationX to determine the rotate direction\n * of the device along the X-axis.\n /\n pRotationX: number;\n\n /\n The system variable pRotationY always contains the\n * rotation of the device along the y axis in the\n * frame previous to the current frame. If the sketch\n * angleMode() is set to DEGREES, the value will be\n * -90 to 90. If it is set to RADIANS, the value will\n * be -PI/2 to PI/2. pRotationY can also be used with\n * rotationY to determine the rotate direction of the\n * device along the Y-axis.\n /\n pRotationY: number;\n\n /\n The system variable pRotationZ always contains the\n * rotation of the device along the z axis in the\n * frame previous to the current frame. If the sketch\n * angleMode() is set to DEGREES, the value will be 0\n * to 360. If it is set to RADIANS, the value will be\n * 0 to 2PI. pRotationZ can also be used with\n rotationZ to determine the rotate direction of the\n * device along the Z-axis.\n /\n pRotationZ: number;\n\n /\n When a device is rotated, the axis that triggers\n * the deviceTurned() method is stored in the\n * turnAxis variable. The turnAxis variable is only\n * defined within the scope of deviceTurned().\n /\n turnAxis: string;\n\n/\n The keyPressed() function is called once every\n * time a key is pressed. The keyCode for the key\n * that was pressed is stored in the keyCode\n * variable. For non-ASCII keys, use the keyCode\n * variable. You can check if the keyCode equals\n * BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE,\n * SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW,\n * LEFT_ARROW, RIGHT_ARROW.\n \n For ASCII keys, the key that was pressed is stored\n * in the key variable. However, it does not\n * distinguish between uppercase and lowercase. For\n * this reason, it is recommended to use keyTyped()\n * to read the key variable, in which the case of the\n * variable will be distinguished.\n \n Because of how operating systems handle key\n * repeats, holding down a key may cause multiple\n * calls to keyTyped() (and keyReleased() as well).\n * The rate of repeat is set by the operating system\n * and how each computer is configured.\n \n \n * Browsers may have different default behaviors\n * attached to various key events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the method.\n * @param [event] optional KeyboardEvent callback\n * argument.\n /\n keyPressed(event?: object): void;\n\n /\n The keyReleased() function is called once every\n * time a key is released. See key and keyCode for\n * more information. Browsers may have different\n * default behaviors attached to various key events.\n * To prevent any default behavior for this event,\n * add \"return false\" to the end of the function.\n * @param [event] optional KeyboardEvent callback\n * argument.\n /\n keyReleased(event?: object): void;\n\n /\n The keyTyped() function is called once every time\n * a key is pressed, but action keys such as\n * Backspace, Delete, Ctrl, Shift, and Alt are\n * ignored. If you are trying to detect a keyCode for\n * one of these keys, use the keyPressed() function\n * instead. The most recent key typed will be stored\n * in the key variable. Because of how operating\n * systems handle key repeats, holding down a key\n * will cause multiple calls to keyTyped() (and\n * keyReleased() as well). The rate of repeat is set\n * by the operating system and how each computer is\n * configured.\n \n \n * Browsers may have different default behaviors\n * attached to various key events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the function.\n * @param [event] optional KeyboardEvent callback\n * argument.\n /\n keyTyped(event?: object): void;\n\n /\n The keyIsDown() function checks if the key is\n * currently down, i.e. pressed. It can be used if\n * you have an object that moves, and you want\n * several keys to be able to affect its behaviour\n * simultaneously, such as moving a sprite\n * diagonally. You can put in any number representing\n * the keyCode of the key, or use any of the variable\n * keyCode names listed here.\n * @param code The key to check for.\n * @return whether key is down or not\n /\n keyIsDown(code: number): boolean;\n\n /\n The boolean system variable keyIsPressed is true\n * if any key is pressed and false if no keys are\n * pressed.\n /\n keyIsPressed: boolean;\n\n /\n The system variable key always contains the value\n * of the most recent key on the keyboard that was\n * typed. To get the proper capitalization, it is\n * best to use it within keyTyped(). For non-ASCII\n * keys, use the keyCode variable.\n /\n key: string;\n\n /\n The variable keyCode is used to detect special\n * keys such as BACKSPACE, DELETE, ENTER, RETURN,\n * TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT,\n * UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You\n * can also check for custom keys by looking up the\n * keyCode of any key on a site like this:\n * keycode.info.\n /\n keyCode: number;\n\n/\n The mouseMoved() function is called every time the\n * mouse moves and a mouse button is not pressed.\n * Browsers may have different default behaviors\n * attached to various mouse events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the method.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseMoved(event?: object): void;\n\n /\n The mouseDragged() function is called once every\n * time the mouse moves and a mouse button is\n * pressed. If no mouseDragged() function is defined,\n * the touchMoved() function will be called instead\n * if it is defined. Browsers may have different\n * default behaviors attached to various mouse\n * events. To prevent any default behavior for this\n * event, add \"return false\" to the end of the\n * function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseDragged(event?: object): void;\n\n /\n The mousePressed() function is called once after\n * every time a mouse button is pressed. The\n * mouseButton variable (see the related reference\n * entry) can be used to determine which button has\n * been pressed. If no mousePressed() function is\n * defined, the touchStarted() function will be\n * called instead if it is defined. Browsers may have\n * different default behaviors attached to various\n * mouse events. To prevent any default behavior for\n * this event, add \"return false\" to the end of the\n * function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mousePressed(event?: object): void;\n\n /\n The mouseReleased() function is called every time\n * a mouse button is released. If no mouseReleased()\n * function is defined, the touchEnded() function\n * will be called instead if it is defined. Browsers\n * may have different default behaviors attached to\n * various mouse events. To prevent any default\n * behavior for this event, add \"return false\" to the\n * end of the function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseReleased(event?: object): void;\n\n /\n The mouseClicked() function is called once after a\n * mouse button has been pressed and then released.\n * Browsers handle clicks differently, so this\n * function is only guaranteed to be run when the\n * left mouse button is clicked. To handle other\n * mouse buttons being pressed or released, see\n * mousePressed() or mouseReleased().\n \n \n * Browsers may have different default behaviors\n * attached to various mouse events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the function.\n * @param [event] optional MouseEvent callback\n * argument.\n /\n mouseClicked(event?: object): void;\n\n /\n The doubleClicked() function is executed every\n * time a event listener has detected a dblclick\n * event which is a part of the DOM L3 specification.\n * The doubleClicked event is fired when a pointing\n * device button (usually a mouse's primary button)\n * is clicked twice on a single element. For more\n * info on the dblclick event refer to mozilla's\n * documentation here:\n * https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\n * @param [event] optional MouseEvent callback\n * argument.\n /\n doubleClicked(event?: object): void;\n\n /\n The function mouseWheel() is executed every time a\n * vertical mouse wheel event is detected either\n * triggered by an actual mouse wheel or by a\n * touchpad. The event.delta property returns the\n * amount the mouse wheel have scrolled. The values\n * can be positive or negative depending on the\n * scroll direction (on macOS with \"natural\"\n * scrolling enabled, the signs are inverted).\n \n \n * Browsers may have different default behaviors\n * attached to various mouse events. To prevent any\n * default behavior for this event, add \"return\n * false\" to the end of the method.\n \n \n * Due to the current support of the \"wheel\" event on\n * Safari, the function may only work as expected if\n * \"return false\" is included while using Safari.\n * @param [event] optional WheelEvent callback\n * argument.\n /\n mouseWheel(event?: object): void;\n\n /\n The function requestPointerLock() locks the\n * pointer to its current position and makes it\n * invisible. Use movedX and movedY to get the\n * difference the mouse was moved since the last call\n * of draw. Note that not all browsers support this\n * feature. This enables you to create experiences\n * that aren't limited by the mouse moving out of the\n * screen even if it is repeatedly moved into one\n * direction. For example, a first person perspective\n * experience.\n /\n requestPointerLock(): void;\n\n /\n The function exitPointerLock() exits a previously\n * triggered pointer Lock for example to make ui\n * elements usable etc\n /\n exitPointerLock(): void;\n\n /\n The variable movedX contains the horizontal\n * movement of the mouse since the last frame\n /\n movedX: number;\n\n /\n The variable movedY contains the vertical movement\n * of the mouse since the last frame\n /\n movedY: number;\n\n /\n The system variable mouseX always contains the\n * current horizontal position of the mouse, relative\n * to (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. If touch is used instead of mouse\n * input, mouseX will hold the x value of the most\n * recent touch point.\n /\n mouseX: number;\n\n /\n The system variable mouseY always contains the\n * current vertical position of the mouse, relative\n * to (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. If touch is used instead of mouse\n * input, mouseY will hold the y value of the most\n * recent touch point.\n /\n mouseY: number;\n\n /\n The system variable pmouseX always contains the\n * horizontal position of the mouse or finger in the\n * frame previous to the current frame, relative to\n * (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. Note: pmouseX will be reset to the\n * current mouseX value at the start of each touch\n * event.\n /\n pmouseX: number;\n\n /\n The system variable pmouseY always contains the\n * vertical position of the mouse or finger in the\n * frame previous to the current frame, relative to\n * (0, 0) of the canvas. The value at the top-left\n * corner is (0, 0) for 2-D and (-width/2, -height/2)\n * for WebGL. Note: pmouseY will be reset to the\n * current mouseY value at the start of each touch\n * event.\n /\n pmouseY: number;\n\n /\n The system variable winMouseX always contains the\n * current horizontal position of the mouse, relative\n * to (0, 0) of the window.\n /\n winMouseX: number;\n\n /\n The system variable winMouseY always contains the\n * current vertical position of the mouse, relative\n * to (0, 0) of the window.\n /\n winMouseY: number;\n\n /\n The system variable pwinMouseX always contains the\n * horizontal position of the mouse in the frame\n * previous to the current frame, relative to (0, 0)\n * of the window. Note: pwinMouseX will be reset to\n * the current winMouseX value at the start of each\n * touch event.\n /\n pwinMouseX: number;\n\n /\n The system variable pwinMouseY always contains the\n * vertical position of the mouse in the frame\n * previous to the current frame, relative to (0, 0)\n * of the window. Note: pwinMouseY will be reset to\n * the current winMouseY value at the start of each\n * touch event.\n /\n pwinMouseY: number;\n\n /\n p5 automatically tracks if the mouse button is\n * pressed and which button is pressed. The value of\n * the system variable mouseButton is either LEFT,\n * RIGHT, or CENTER depending on which button was\n * pressed last. Warning: different browsers may\n * track mouseButton differently.\n /\n mouseButton: UNKNOWN_P5_CONSTANT;\n\n /\n The boolean system variable mouseIsPressed is true\n * if the mouse is pressed and false if not.\n /\n mouseIsPressed: boolean;\n\n/\n The touchStarted() function is called once after\n * every time a touch is registered. If no\n * touchStarted() function is defined, the\n * mousePressed() function will be called instead if\n * it is defined. Browsers may have different default\n * behaviors attached to various touch events. To\n * prevent any default behavior for this event, add\n * \"return false\" to the end of the method.\n * @param [event] optional TouchEvent callback\n * argument.\n /\n touchStarted(event?: object): void;\n\n /\n The touchMoved() function is called every time a\n * touch move is registered. If no touchMoved()\n * function is defined, the mouseDragged() function\n * will be called instead if it is defined. Browsers\n * may have different default behaviors attached to\n * various touch events. To prevent any default\n * behavior for this event, add \"return false\" to the\n * end of the method.\n * @param [event] optional TouchEvent callback\n * argument.\n /\n touchMoved(event?: object): void;\n\n /\n The touchEnded() function is called every time a\n * touch ends. If no touchEnded() function is\n * defined, the mouseReleased() function will be\n * called instead if it is defined. Browsers may have\n * different default behaviors attached to various\n * touch events. To prevent any default behavior for\n * this event, add \"return false\" to the end of the\n * method.\n * @param [event] optional TouchEvent callback\n * argument.\n /\n touchEnded(event?: object): void;\n\n /\n The system variable touches[] contains an array of\n * the positions of all current touch points,\n * relative to (0, 0) of the canvas, and IDs\n * identifying a unique touch as it moves. Each\n * element in the array is an object with x, y, and\n * id properties. The touches[] array is not\n * supported on Safari and IE on touch-based desktops\n * (laptops).\n /\n touches: object[];\n\n/\n Creates a new p5.Image (the datatype for storing\n * images). This provides a fresh buffer of pixels to\n * play with. Set the size of the buffer with the\n * width and height parameters. .pixels gives access\n * to an array containing the values for all the\n * pixels in the display window. These values are\n * numbers. This array is the size (including an\n * appropriate factor for the pixelDensity) of the\n * display window x4, representing the R, G, B, A\n * values in order for each pixel, moving from left\n * to right across each row, then down each column.\n * See .pixels for more info. It may also be simpler\n * to use set() or get().\n \n Before accessing the pixels of an image, the data\n * must loaded with the loadPixels() function. After\n * the array data has been modified, the\n * updatePixels() function must be run to update the\n * changes.\n * @param width width in pixels\n * @param height height in pixels\n * @return the p5.Image object\n /\n createImage(width: number, height: number): Image;\n\n /\n Save the current canvas as an image. The browser\n * will either save the file immediately, or prompt\n * the user with a dialogue window.\n * @param selectedCanvas a variable representing a\n * specific html5 canvas (optional)\n * @param [extension] 'jpg' or 'png'\n /\n saveCanvas(selectedCanvas: Element \| HTMLCanvasElement, filename?: string, extension?: string): void;\n\n /\n Save the current canvas as an image. The browser\n * will either save the file immediately, or prompt\n * the user with a dialogue window.\n * @param [extension] 'jpg' or 'png'\n /\n saveCanvas(filename?: string, extension?: string): void;\n\n /\n Capture a sequence of frames that can be used to\n * create a movie. Accepts a callback. For example,\n * you may wish to send the frames to a server where\n * they can be stored or converted into a movie. If\n * no callback is provided, the browser will pop up\n * save dialogues in an attempt to download all of\n * the images that have just been created. With the\n * callback provided the image data isn't saved by\n * default but instead passed as an argument to the\n * callback function as an array of objects, with the\n * size of array equal to the total number of frames.\n * The arguments duration and framerate are\n * constrained to be less or equal to 15 and 22,\n * respectively, which means you can only download a\n * maximum of 15 seconds worth of frames at 22 frames\n * per second, adding up to 330 frames. This is done\n * in order to avoid memory problems since a large\n * enough canvas can fill up the memory in your\n * computer very easily and crash your program or\n * even your browser.\n \n To export longer animations, you might look into a\n * library like ccapture.js.\n * @param extension 'jpg' or 'png'\n * @param duration Duration in seconds to save the\n * frames for. This parameter will be constrained to\n * be less or equal to 15.\n * @param framerate Framerate to save the frames in.\n * This parameter will be constrained to be less or\n * equal to 22.\n * @param [callback] A callback function that will be\n * executed to handle the image data. This function\n * should accept an array as argument. The array will\n * contain the specified number of frames of objects.\n * Each object has three properties: imageData - an\n * image/octet-stream, filename and extension.\n /\n saveFrames(\n filename: string,\n extension: string,\n duration: number,\n framerate: number,\n callback?: (p1: any[]) => any\n ): void;\n\n/\n Loads an image from a path and creates a p5.Image\n * from it. The image may not be immediately\n * available for rendering. If you want to ensure\n * that the image is ready before doing anything with\n * it, place the loadImage() call in preload(). You\n * may also supply a callback function to handle the\n * image when it's ready.\n \n The path to the image should be relative to the\n * HTML file that links in your sketch. Loading an\n * image from a URL or other remote location may be\n * blocked due to your browser's built-in security.\n \n You can also pass in a string of a base64 encoded\n * image as an alternative to the file path. Remember\n * to add \"data:image/png;base64,\" in front of the\n * string.\n * @param path Path of the image to be loaded\n * @param [successCallback] Function to be called\n * once the image is loaded. Will be passed the\n * p5.Image.\n * @param [failureCallback] called with event error\n * if the image fails to load.\n * @return the p5.Image object\n /\n loadImage(path: string, successCallback?: (p1: Image) => any, failureCallback?: (p1: Event) => any): Image;\n\n /\n Generates a gif of your current animation and\n * downloads it to your computer! The duration\n * argument specifies how many seconds you want to\n * record from your animation. This value is then\n * converted to the necessary number of frames to\n * generate it, depending on the value of units. More\n * on that on the next paragraph.\n \n An optional object that can contain two more\n * arguments: delay (number) and units (string).\n \n delay, specifying how much time we should wait\n * before recording\n \n units, a string that can be either 'seconds' or\n * 'frames'. By default it's 'seconds'.\n \n units specifies how the duration and delay\n * arguments will behave. If 'seconds', these\n * arguments will correspond to seconds, meaning that\n * 3 seconds worth of animation will be created. If\n * 'frames', the arguments now correspond to the\n * number of frames you want your animation to be, if\n * you are very sure of this number.\n \n This may be called in setup, or, like in the\n * example below, inside an event function, like\n * keyPressed or mousePressed.\n * @param filename File name of your gif\n * @param duration Duration in seconds that you wish\n * to capture from your sketch\n * @param options An optional object that can contain\n * five more arguments: delay, specifying how much\n * time we should wait before recording; units, a\n * string that can be either 'seconds' or 'frames'.\n * By default it's 'seconds’; silent, a boolean that\n * defines presence of progress notifications. By\n * default it’s false; notificationDuration, a number\n * that defines how long in seconds the final\n * notification will live. 0, the default value,\n * means that the notification will never be removed;\n * notificationID, a string that specifies the\n * notification DOM element id. By default it’s\n * 'progressBar’.\n /\n saveGif(filename: string, duration: number, options: object): void;\n\n /\n Draw an image to the p5.js canvas. This function\n * can be used with different numbers of parameters.\n * The simplest use requires only three parameters:\n * img, x, and y—where (x, y) is the position of the\n * image. Two more parameters can optionally be added\n * to specify the width and height of the image.\n \n This function can also be used with eight Number\n * parameters. To differentiate between all these\n * parameters, p5.js uses the language of\n * \"destination rectangle\" (which corresponds to\n * \"dx\", \"dy\", etc.) and \"source image\" (which\n * corresponds to \"sx\", \"sy\", etc.) below. Specifying\n * the \"source image\" dimensions can be useful when\n * you want to display a subsection of the source\n * image instead of the whole thing. Here's a diagram\n * to explain further:\n \n This function can also be used to draw images\n * without distorting the orginal aspect ratio, by\n * adding 9th parameter, fit, which can either be\n * COVER or CONTAIN. CONTAIN, as the name suggests,\n * contains the whole image within the specified\n * destination box without distorting the image\n * ratio. COVER covers the entire destination box.\n * @param img the image to display\n * @param x the x-coordinate of the top-left corner\n * of the image\n * @param y the y-coordinate of the top-left corner\n * of the image\n * @param [width] the width to draw the image\n * @param [height] the height to draw the image\n /\n image(img: Image \| Element \| Framebuffer, x: number, y: number, width?: number, height?: number): void;\n\n /\n Draw an image to the p5.js canvas. This function\n * can be used with different numbers of parameters.\n * The simplest use requires only three parameters:\n * img, x, and y—where (x, y) is the position of the\n * image. Two more parameters can optionally be added\n * to specify the width and height of the image.\n \n This function can also be used with eight Number\n * parameters. To differentiate between all these\n * parameters, p5.js uses the language of\n * \"destination rectangle\" (which corresponds to\n * \"dx\", \"dy\", etc.) and \"source image\" (which\n * corresponds to \"sx\", \"sy\", etc.) below. Specifying\n * the \"source image\" dimensions can be useful when\n * you want to display a subsection of the source\n * image instead of the whole thing. Here's a diagram\n * to explain further:\n \n This function can also be used to draw images\n * without distorting the orginal aspect ratio, by\n * adding 9th parameter, fit, which can either be\n * COVER or CONTAIN. CONTAIN, as the name suggests,\n * contains the whole image within the specified\n * destination box without distorting the image\n * ratio. COVER covers the entire destination box.\n * @param img the image to display\n * @param dx the x-coordinate of the destination\n * rectangle in which to draw the source image\n * @param dy the y-coordinate of the destination\n * rectangle in which to draw the source image\n * @param dWidth the width of the destination\n * rectangle\n * @param dHeight the height of the destination\n * rectangle\n * @param sx the x-coordinate of the subsection of\n * the source image to draw into the destination\n * rectangle\n * @param sy the y-coordinate of the subsection of\n * the source image to draw into the destination\n * rectangle\n * @param [sWidth] the width of the subsection of the\n * source image to draw into the destination\n * rectangle\n * @param [sHeight] the height of the subsection of\n * the source image to draw into the destination\n * rectangle\n * @param [fit] either CONTAIN or COVER\n * @param [xAlign] either LEFT, RIGHT or CENTER\n * default is CENTER\n * @param [yAlign] either TOP, BOTTOM or CENTER\n * default is CENTER\n /\n image(\n img: Image \| Element \| Framebuffer,\n dx: number,\n dy: number,\n dWidth: number,\n dHeight: number,\n sx: number,\n sy: number,\n sWidth?: number,\n sHeight?: number,\n fit?: IMAGE_FIT,\n xAlign?: X_ALIGN,\n yAlign?: Y_ALIGN\n ): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n /\n tint(v1: number, v2: number, v3: number, alpha?: number): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param value a color string\n /\n tint(value: string): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param gray a gray value\n /\n tint(gray: number, alpha?: number): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param values an array containing the\n * red,green,blue & and alpha components of the color\n /\n tint(values: number[]): void;\n\n /\n Sets the fill value for displaying images. Images\n * can be tinted to specified colors or made\n * transparent by including an alpha value. To apply\n * transparency to an image without affecting its\n * color, use white as the tint color and specify an\n * alpha value. For instance, tint(255, 128) will\n * make an image 50% transparent (assuming the\n * default alpha range of 0-255, which can be changed\n * with colorMode()).\n \n The value for the gray parameter must be less than\n * or equal to the current maximum value as specified\n * by colorMode(). The default maximum value is 255.\n * @param color the tint color\n /\n tint(color: Color): void;\n\n /\n Removes the current fill value for displaying\n * images and reverts to displaying images with their\n * original hues.\n /\n noTint(): void;\n\n /\n Set image mode. Modifies the location from which\n * images are drawn by changing the way in which\n * parameters given to image() are interpreted. The\n * default mode is imageMode(CORNER), which\n * interprets the second and third parameters of\n * image() as the upper-left corner of the image. If\n * two additional parameters are specified, they are\n * used to set the image's width and height.\n * imageMode(CORNERS) interprets the second and third\n * parameters of image() as the location of one\n * corner, and the fourth and fifth parameters as the\n * opposite corner.\n \n imageMode(CENTER) interprets the second and third\n * parameters of image() as the image's center point.\n * If two additional parameters are specified, they\n * are used to set the image's width and height.\n * @param mode either CORNER, CORNERS, or CENTER\n /\n imageMode(mode: IMAGE_MODE): void;\n\n/\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n /\n blend(\n srcImage: Image,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: BLEND_MODE\n ): void;\n\n /\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n /\n blend(\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: UNKNOWN_P5_CONSTANT\n ): void;\n\n /\n Copies a region of the canvas to another region of\n * the canvas and copies a region of pixels from an\n * image used as the srcImg parameter into the canvas\n * srcImage is specified this is used as the source.\n * If the source and destination regions aren't the\n * same size, it will automatically resize source\n * pixels to fit the specified target region.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(\n srcImage: Image \| Element,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number\n ): void;\n\n /\n Copies a region of the canvas to another region of\n * the canvas and copies a region of pixels from an\n * image used as the srcImg parameter into the canvas\n * srcImage is specified this is used as the source.\n * If the source and destination regions aren't the\n * same size, it will automatically resize source\n * pixels to fit the specified target region.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;\n\n /\n Applies a filter to the canvas. The presets\n * options are: THRESHOLD Converts the image to black\n * and white pixels depending if they are above or\n * below the threshold defined by the level\n * parameter. The parameter must be between 0.0\n * (black) and 1.0 (white). If no level is specified,\n * 0.5 is used.\n \n GRAY Converts any colors in the image to grayscale\n * equivalents. No parameter is used.\n \n OPAQUE Sets the alpha channel to entirely opaque.\n * No parameter is used.\n \n INVERT Sets each pixel to its inverse value. No\n * parameter is used.\n \n POSTERIZE Limits each channel of the image to the\n * number of colors specified as the parameter. The\n * parameter can be set to values between 2 and 255,\n * but results are most noticeable in the lower\n * ranges.\n \n BLUR Executes a Gaussian blur with the level\n * parameter specifying the extent of the blurring.\n * If no parameter is used, the blur is equivalent to\n * Gaussian blur of radius 1. Larger values increase\n * the blur.\n \n ERODE Reduces the light areas. No parameter is\n * used.\n \n DILATE Increases the light areas. No parameter is\n * used.\n \n filter() does not work in WEBGL mode. A similar\n * effect can be achieved in WEBGL mode using custom\n * shaders. Adam Ferriss has written a selection of\n * shader examples that contains many of the effects\n * present in the filter examples.\n * @param filterType either THRESHOLD, GRAY, OPAQUE,\n * INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n * See Filters.js for docs on each available filter\n * @param [filterParam] an optional parameter unique\n * to each filter, see above\n /\n filter(filterType: FILTER_TYPE, filterParam?: number): void;\n\n /\n Get a region of pixels, or a single pixel, from\n * the canvas. Returns an array of [R,G,B,A] values\n * for any pixel or grabs a section of an image. If\n * no parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n \n Getting the color of a single pixel with get(x, y)\n * is easy, but not as fast as grabbing the data\n * directly from pixels[]. The equivalent statement\n * to get(x, y) using pixels[] with pixel density d\n * is\n \n let x, y, d; // set these to the coordinates let\n * off = (y * width + x) * d * 4; let components = [\n * pixels[off], pixels[off + 1], pixels[off + 2],\n * pixels[off + 3] ]; print(components);\n \n See the reference for pixels[] for more\n * information.\n \n If you want to extract an array of colors or a\n * subimage from an p5.Image object, take a look at\n * p5.Image.get()\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param w width of the section to be returned\n * @param h height of the section to be returned\n * @return the rectangle p5.Image\n /\n get(x: number, y: number, w: number, h: number): Image;\n\n /\n Get a region of pixels, or a single pixel, from\n * the canvas. Returns an array of [R,G,B,A] values\n * for any pixel or grabs a section of an image. If\n * no parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n \n Getting the color of a single pixel with get(x, y)\n * is easy, but not as fast as grabbing the data\n * directly from pixels[]. The equivalent statement\n * to get(x, y) using pixels[] with pixel density d\n * is\n \n let x, y, d; // set these to the coordinates let\n * off = (y * width + x) * d * 4; let components = [\n * pixels[off], pixels[off + 1], pixels[off + 2],\n * pixels[off + 3] ]; print(components);\n \n See the reference for pixels[] for more\n * information.\n \n If you want to extract an array of colors or a\n * subimage from an p5.Image object, take a look at\n * p5.Image.get()\n * @return the whole p5.Image\n /\n get(): Image;\n\n /\n Get a region of pixels, or a single pixel, from\n * the canvas. Returns an array of [R,G,B,A] values\n * for any pixel or grabs a section of an image. If\n * no parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n \n Getting the color of a single pixel with get(x, y)\n * is easy, but not as fast as grabbing the data\n * directly from pixels[]. The equivalent statement\n * to get(x, y) using pixels[] with pixel density d\n * is\n \n let x, y, d; // set these to the coordinates let\n * off = (y * width + x) * d * 4; let components = [\n * pixels[off], pixels[off + 1], pixels[off + 2],\n * pixels[off + 3] ]; print(components);\n \n See the reference for pixels[] for more\n * information.\n \n If you want to extract an array of colors or a\n * subimage from an p5.Image object, take a look at\n * p5.Image.get()\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @return color of pixel at x,y in array format [R,\n * G, B, A]\n /\n get(x: number, y: number): number[];\n\n /\n Loads the pixel data for the display window into\n * the pixels[] array. This function must always be\n * called before reading from or writing to pixels[].\n * Note that only changes made with set() or direct\n * manipulation of pixels[] will occur.\n /\n loadPixels(): void;\n\n /\n Changes the color of any pixel, or writes an image\n * directly to the display window. The x and y\n * parameters specify the pixel to change and the c\n * parameter specifies the color value. This can be a\n * p5.Color object, or [R, G, B, A] pixel array. It\n * can also be a single grayscale value. When setting\n * an image, the x and y parameters define the\n * coordinates for the upper-left corner of the\n * image, regardless of the current imageMode().\n * After using set(), you must call updatePixels()\n * for your changes to appear. This should be called\n * once all pixels have been set, and must be called\n * before calling .get() or drawing the image.\n \n Setting the color of a single pixel with set(x, y)\n * is easy, but not as fast as putting the data\n * directly into pixels[]. Setting the pixels[]\n * values directly may be complicated when working\n * with a retina display, but will perform better\n * when lots of pixels need to be set directly on\n * every loop. See the reference for pixels[] for\n * more information.\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param c insert a grayscale value \| a pixel array\n * \| a p5.Color object \| a p5.Image to copy\n /\n set(x: number, y: number, c: number \| number[] \| object): void;\n\n /\n Updates the display window with the data in the\n * pixels[] array. Use in conjunction with\n * loadPixels(). If you're only reading pixels from\n * the array, there's no need to call updatePixels()\n * — updating is only necessary to apply changes.\n * updatePixels() should be called anytime the pixels\n * array is manipulated or set() is called, and only\n * changes made with set() or direct changes to\n * pixels[] will occur.\n * @param [x] x-coordinate of the upper-left corner\n * of region to update\n * @param [y] y-coordinate of the upper-left corner\n * of region to update\n * @param [w] width of region to update\n * @param [h] height of region to update\n /\n updatePixels(x?: number, y?: number, w?: number, h?: number): void;\n\n /\n Uint8ClampedArray containing the values for all\n * the pixels in the display window. These values are\n * numbers. This array is the size (include an\n * appropriate factor for pixelDensity) of the\n * display window x4, representing the R, G, B, A\n * values in order for each pixel, moving from left\n * to right across each row, then down each column.\n * Retina and other high density displays will have\n * more pixels[] (by a factor of pixelDensity^2). For\n * example, if the image is 100×100 pixels, there\n * will be 40,000. On a retina display, there will be\n * 160,000. The first four values (indices 0-3) in\n * the array will be the R, G, B, A values of the\n * pixel at (0, 0). The second four values (indices\n * 4-7) will contain the R, G, B, A values of the\n * pixel at (1, 0). More generally, to set values for\n * a pixel at (x, y):\n \n let d = pixelDensity(); for (let i = 0; i < d;\n * i++) { for (let j = 0; j < d; j++) { // loop over\n * index = 4 * ((y * d + j) * width * d + (x * d +\n * i)); pixels[index] = r; pixels[index+1] = g;\n * pixels[index+2] = b; pixels[index+3] = a; } }\n \n While the above method is complex, it is flexible\n * enough to work with any pixelDensity. Note that\n * set() will automatically take care of setting all\n * the appropriate values in pixels[] for a given (x,\n * y) at any pixelDensity, but the performance may\n * not be as fast when lots of modifications are made\n * to the pixel array.\n \n Before accessing this array, the data must loaded\n * with the loadPixels() function. After the array\n * data has been modified, the updatePixels()\n * function must be run to update the changes.\n \n Note that this is not a standard javascript array.\n * This means that standard javascript functions such\n * as slice() or arrayCopy() do not work.\n /\n pixels: number[];\n\n/\n Loads a JSON file from a file or a URL, and\n * returns an Object. Note that even if the JSON file\n * contains an Array, an Object will be returned with\n * index numbers as keys. This method is\n * asynchronous, meaning it may not finish before the\n * next line in your sketch is executed. JSONP is\n * supported via a polyfill and you can pass in as\n * the second argument an object with definitions of\n * the json callback following the syntax specified\n * here.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param path name of the file or url to load\n * @param [jsonpOptions] options object for jsonp\n * related settings\n * @param [datatype] \"json\" or \"jsonp\"\n * @param [callback] function to be executed after\n * loadJSON() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return JSON data\n /\n loadJSON(\n path: string,\n jsonpOptions?: object,\n datatype?: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object \| any[];\n\n /\n Loads a JSON file from a file or a URL, and\n * returns an Object. Note that even if the JSON file\n * contains an Array, an Object will be returned with\n * index numbers as keys. This method is\n * asynchronous, meaning it may not finish before the\n * next line in your sketch is executed. JSONP is\n * supported via a polyfill and you can pass in as\n * the second argument an object with definitions of\n * the json callback following the syntax specified\n * here.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param path name of the file or url to load\n * @param datatype \"json\" or \"jsonp\"\n * @param [callback] function to be executed after\n * loadJSON() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n loadJSON(\n path: string,\n datatype: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object \| any[];\n\n /\n Loads a JSON file from a file or a URL, and\n * returns an Object. Note that even if the JSON file\n * contains an Array, an Object will be returned with\n * index numbers as keys. This method is\n * asynchronous, meaning it may not finish before the\n * next line in your sketch is executed. JSONP is\n * supported via a polyfill and you can pass in as\n * the second argument an object with definitions of\n * the json callback following the syntax specified\n * here.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param path name of the file or url to load\n * @param callback function to be executed after\n * loadJSON() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n loadJSON(\n path: string,\n callback: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object \| any[];\n\n /\n Reads the contents of a file and creates a String\n * array of its individual lines. If the name of the\n * file is used as the parameter, as in the above\n * example, the file must be located in the sketch\n * directory/folder. Alternatively, the file may be\n * loaded from anywhere on the local computer using\n * an absolute path (something that starts with / on\n * Unix and Linux, or a drive letter on Windows), or\n * the filename parameter can be a URL for a file\n * found on a network.\n \n This method is asynchronous, meaning it may not\n * finish before the next line in your sketch is\n * executed.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param filename name of the file or url to load\n * @param [callback] function to be executed after\n * loadStrings() completes, Array is passed in as\n * first argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return Array of Strings\n /\n loadStrings(\n filename: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): string[];\n\n /\n Reads the contents of a file or URL and creates a\n * p5.Table object with its values. If a file is\n * specified, it must be located in the sketch's\n * \"data\" folder. The filename parameter can also be\n * a URL to a file found online. By default, the file\n * is assumed to be comma-separated (in CSV format).\n * Table only looks for a header row if the 'header'\n * option is included. This method is asynchronous,\n * meaning it may not finish before the next line in\n * your sketch is executed. Calling loadTable()\n * inside preload() guarantees to complete the\n * operation before setup() and draw() are called.\n * Outside of preload(), you may supply a callback\n * function to handle the object:\n \n All files loaded and saved use UTF-8 encoding.\n * This method is suitable for fetching files up to\n * size of 64MB.\n * @param filename name of the file or URL to load\n * @param [extension] parse the table by\n * comma-separated values \"csv\", semicolon-separated\n * values \"ssv\", or tab-separated values \"tsv\"\n * @param [header] \"header\" to indicate table has\n * header row\n * @param [callback] function to be executed after\n * loadTable() completes. On success, the Table\n * object is passed in as the first argument.\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return Table object containing data\n /\n loadTable(\n filename: string,\n extension?: string,\n header?: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): object;\n\n /\n Reads the contents of a file and creates an XML\n * object with its values. If the name of the file is\n * used as the parameter, as in the above example,\n * the file must be located in the sketch\n * directory/folder. Alternatively, the file maybe be\n * loaded from anywhere on the local computer using\n * an absolute path (something that starts with / on\n * Unix and Linux, or a drive letter on Windows), or\n * the filename parameter can be a URL for a file\n * found on a network.\n \n This method is asynchronous, meaning it may not\n * finish before the next line in your sketch is\n * executed. Calling loadXML() inside preload()\n * guarantees to complete the operation before\n * setup() and draw() are called.\n \n Outside of preload(), you may supply a callback\n * function to handle the object.\n \n This method is suitable for fetching files up to\n * size of 64MB.\n * @param filename name of the file or URL to load\n * @param [callback] function to be executed after\n * loadXML() completes, XML object is passed in as\n * first argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return XML object containing data\n /\n loadXML(filename: string, callback?: (...args: any[]) => any, errorCallback?: (...args: any[]) => any): object;\n\n /\n This method is suitable for fetching files up to\n * size of 64MB.\n * @param file name of the file or URL to load\n * @param [callback] function to be executed after\n * loadBytes() completes\n * @param [errorCallback] function to be executed if\n * there is an error\n * @return an object whose 'bytes' property will be\n * the loaded buffer\n /\n loadBytes(file: string, callback?: (...args: any[]) => any, errorCallback?: (...args: any[]) => any): object;\n\n /\n Method for executing an HTTP GET request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'GET'). The 'binary'\n * datatype will return a Blob object, and the\n * 'arrayBuffer' datatype will return an ArrayBuffer\n * which can be used to initialize typed arrays (such\n * as Uint8Array).\n * @param path name of the file or url to load\n * @param [datatype] \"json\", \"jsonp\", \"binary\",\n * \"arrayBuffer\", \"xml\", or \"text\"\n * @param [data] param data passed sent with request\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return A promise that resolves with the data when\n * the operation completes successfully or rejects\n * with the error after one occurs.\n /\n httpGet(\n path: string,\n datatype?: string,\n data?: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP GET request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'GET'). The 'binary'\n * datatype will return a Blob object, and the\n * 'arrayBuffer' datatype will return an ArrayBuffer\n * which can be used to initialize typed arrays (such\n * as Uint8Array).\n * @param path name of the file or url to load\n * @param data param data passed sent with request\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpGet(\n path: string,\n data: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP GET request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'GET'). The 'binary'\n * datatype will return a Blob object, and the\n * 'arrayBuffer' datatype will return an ArrayBuffer\n * which can be used to initialize typed arrays (such\n * as Uint8Array).\n * @param path name of the file or url to load\n * @param callback function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpGet(path: string, callback: (...args: any[]) => any, errorCallback?: (...args: any[]) => any): Promise<any>;\n\n /\n Method for executing an HTTP POST request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'POST').\n * @param path name of the file or url to load\n * @param [datatype] \"json\", \"jsonp\", \"xml\", or\n * \"text\". If omitted, httpPost() will guess.\n * @param [data] param data passed sent with request\n * @param [callback] function to be executed after\n * httpPost() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return A promise that resolves with the data when\n * the operation completes successfully or rejects\n * with the error after one occurs.\n /\n httpPost(\n path: string,\n datatype?: string,\n data?: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP POST request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'POST').\n * @param path name of the file or url to load\n * @param data param data passed sent with request\n * @param [callback] function to be executed after\n * httpPost() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpPost(\n path: string,\n data: object \| boolean,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP POST request. If data\n * type is not specified, p5 will try to guess based\n * on the URL, defaulting to text. This is equivalent\n * to calling httpDo(path, 'POST').\n * @param path name of the file or url to load\n * @param callback function to be executed after\n * httpPost() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpPost(\n path: string,\n callback: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP request. If data type\n * is not specified, p5 will try to guess based on\n * the URL, defaulting to text. For more advanced\n * use, you may also pass in the path as the first\n * argument and a object as the second argument, the\n * signature follows the one specified in the Fetch\n * API specification. This method is suitable for\n * fetching files up to size of 64MB when \"GET\" is\n * used.\n * @param path name of the file or url to load\n * @param [method] either \"GET\", \"POST\", or \"PUT\",\n * defaults to \"GET\"\n * @param [datatype] \"json\", \"jsonp\", \"xml\", or\n * \"text\"\n * @param [data] param data passed sent with request\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n * @return A promise that resolves with the data when\n * the operation completes successfully or rejects\n * with the error after one occurs.\n /\n httpDo(\n path: string,\n method?: string,\n datatype?: string,\n data?: object,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n\n /\n Method for executing an HTTP request. If data type\n * is not specified, p5 will try to guess based on\n * the URL, defaulting to text. For more advanced\n * use, you may also pass in the path as the first\n * argument and a object as the second argument, the\n * signature follows the one specified in the Fetch\n * API specification. This method is suitable for\n * fetching files up to size of 64MB when \"GET\" is\n * used.\n * @param path name of the file or url to load\n * @param options Request object options as\n * documented in the \"fetch\" API reference\n * @param [callback] function to be executed after\n * httpGet() completes, data is passed in as first\n * argument\n * @param [errorCallback] function to be executed if\n * there is an error, response is passed in as first\n * argument\n /\n httpDo(\n path: string,\n options: object,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Promise<any>;\n createWriter(name: string, extension?: string): PrintWriter;\n\n /\n Saves a given element(image, text, json, csv, wav,\n * or html) to the client's computer. The first\n * parameter can be a pointer to element we want to\n * save. The element can be one of p5.Element,an\n * Array of Strings, an Array of JSON, a JSON object,\n * a p5.Table , a p5.Image, or a p5.SoundFile\n * (requires p5.sound). The second parameter is a\n * filename (including extension).The third parameter\n * is for options specific to this type of object.\n * This method will save a file that fits the given\n * parameters. If it is called without specifying an\n * element, by default it will save the whole canvas\n * as an image file. You can optionally specify a\n * filename as the first parameter in such a case.\n * Note that it is not recommended to call this\n * method within draw, as it will open a new save\n * dialog on every render.\n * @param [objectOrFilename] If filename is provided,\n * will save canvas as an image with either png or\n * jpg extension depending on the filename. If object\n * is provided, will save depending on the object and\n * filename (see examples above).\n * @param [filename] If an object is provided as the\n * first parameter, then the second parameter\n * indicates the filename, and should include an\n * appropriate file extension (see examples above).\n * @param [options] Additional options depend on\n * filetype. For example, when saving JSON, true\n * indicates that the output will be optimized for\n * filesize, rather than readability.\n /\n save(objectOrFilename?: object \| string, filename?: string, options?: boolean \| string): void;\n\n /\n Writes the contents of an Array or a JSON object\n * to a .json file. The file saving process and\n * location of the saved file will vary between web\n * browsers.\n * @param [optimize] If true, removes line breaks and\n * spaces from the output file to optimize filesize\n * (but not readability).\n /\n saveJSON(json: any[] \| object, filename: string, optimize?: boolean): void;\n\n /\n Writes an array of Strings to a text file, one\n * line per String. The file saving process and\n * location of the saved file will vary between web\n * browsers.\n * @param list string array to be written\n * @param filename filename for output\n * @param [extension] the filename's extension\n * @param [isCRLF] if true, change line-break to CRLF\n /\n saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;\n\n /\n Writes the contents of a Table object to a file.\n * Defaults to a text file with\n * comma-separated-values ('csv') but can also use\n * tab separation ('tsv'), or generate an HTML table\n * ('html'). The file saving process and location of\n * the saved file will vary between web browsers.\n * @param Table the Table object to save to a file\n * @param filename the filename to which the Table\n * should be saved\n * @param [options] can be one of \"tsv\", \"csv\", or\n * \"html\"\n /\n saveTable(Table: Table, filename: string, options?: string): void;\n\n/\n Calculates the absolute value (magnitude) of a\n * number. Maps to Math.abs(). The absolute value of\n * a number is always positive.\n * @param n number to compute\n * @return absolute value of given number\n /\n abs(n: number): number;\n\n /\n Calculates the closest int value that is greater\n * than or equal to the value of the parameter. Maps\n * to Math.ceil(). For example, ceil(9.03) returns\n * the value 10.\n * @param n number to round up\n * @return rounded up number\n /\n ceil(n: number): number;\n\n /\n Constrains a value between a minimum and maximum\n * value.\n * @param n number to constrain\n * @param low minimum limit\n * @param high maximum limit\n * @return constrained number\n /\n constrain(n: number, low: number, high: number): number;\n\n /\n Calculates the distance between two points, in\n * either two or three dimensions. If you looking for\n * distance between two vectors see p5.Vector.dist()\n * @param x1 x-coordinate of the first point\n * @param y1 y-coordinate of the first point\n * @param x2 x-coordinate of the second point\n * @param y2 y-coordinate of the second point\n * @return distance between the two points\n /\n dist(x1: number, y1: number, x2: number, y2: number): number;\n\n /\n Calculates the distance between two points, in\n * either two or three dimensions. If you looking for\n * distance between two vectors see p5.Vector.dist()\n * @param x1 x-coordinate of the first point\n * @param y1 y-coordinate of the first point\n * @param z1 z-coordinate of the first point\n * @param x2 x-coordinate of the second point\n * @param y2 y-coordinate of the second point\n * @param z2 z-coordinate of the second point\n * @return distance between the two points\n /\n dist(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): number;\n\n /\n Returns Euler's number e (2.71828...) raised to\n * the power of the n parameter. Maps to Math.exp().\n * @param n exponent to raise\n * @return e^n\n /\n exp(n: number): number;\n\n /\n Calculates the closest int value that is less than\n * or equal to the value of the parameter. Maps to\n * Math.floor().\n * @param n number to round down\n * @return rounded down number\n /\n floor(n: number): number;\n\n /\n Calculates a number between two numbers at a\n * specific increment. The amt parameter is the\n * amount to interpolate between the two values where\n * 0.0 is equal to the first point, 0.1 is very near\n * the first point, 0.5 is half-way in between, and\n * 1.0 is equal to the second point. If the value of\n * amt is more than 1.0 or less than 0.0, the number\n * will be calculated accordingly in the ratio of the\n * two given numbers. The lerp() function is\n * convenient for creating motion along a straight\n * path and for drawing dotted lines.\n * @param start first value\n * @param stop second value\n * @param amt number\n * @return lerped value\n /\n lerp(start: number, stop: number, amt: number): number;\n\n /\n Calculates the natural logarithm (the base-e\n * logarithm) of a number. This function expects the\n * n parameter to be a value greater than 0.0. Maps\n * to Math.log().\n * @param n number greater than 0\n * @return natural logarithm of n\n /\n log(n: number): number;\n\n /\n Calculates the magnitude (or length) of a vector.\n * A vector is a direction in space commonly used in\n * computer graphics and linear algebra. Because it\n * has no \"start\" position, the magnitude of a vector\n * can be thought of as the distance from the\n * coordinate 0,0 to its x,y value. Therefore, mag()\n * is a shortcut for writing dist(0, 0, x, y).\n * @param a first value\n * @param b second value\n * @return magnitude of vector from (0,0) to (a,b)\n /\n mag(a: number, b: number): number;\n\n /\n Re-maps a number from one range to another. In the\n * first example above, the number 25 is converted\n * from a value in the range of 0 to 100 into a value\n * that ranges from the left edge of the window (0)\n * to the right edge (width).\n * @param value the incoming value to be converted\n * @param start1 lower bound of the value's current\n * range\n * @param stop1 upper bound of the value's current\n * range\n * @param start2 lower bound of the value's target\n * range\n * @param stop2 upper bound of the value's target\n * range\n * @param [withinBounds] constrain the value to the\n * newly mapped range\n * @return remapped number\n /\n map(\n value: number,\n start1: number,\n stop1: number,\n start2: number,\n stop2: number,\n withinBounds?: boolean\n ): number;\n\n /\n Determines the largest value in a sequence of\n * numbers, and then returns that value. max()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param n0 Number to compare\n * @param n1 Number to compare\n * @return maximum Number\n /\n max(n0: number, n1: number): number;\n\n /\n Determines the largest value in a sequence of\n * numbers, and then returns that value. max()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param nums Numbers to compare\n /\n max(nums: number[]): number;\n\n /\n Determines the smallest value in a sequence of\n * numbers, and then returns that value. min()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param n0 Number to compare\n * @param n1 Number to compare\n * @return minimum Number\n /\n min(n0: number, n1: number): number;\n\n /\n Determines the smallest value in a sequence of\n * numbers, and then returns that value. min()\n * accepts any number of Number parameters, or an\n * Array of any length.\n * @param nums Numbers to compare\n /\n min(nums: number[]): number;\n\n /\n Normalizes a number from another range into a\n * value between 0 and 1. Identical to map(value,\n * low, high, 0, 1). Numbers outside of the range are\n * not clamped to 0 and 1, because out-of-range\n * values are often intentional and useful. (See the\n * example above.)\n * @param value incoming value to be normalized\n * @param start lower bound of the value's current\n * range\n * @param stop upper bound of the value's current\n * range\n * @return normalized number\n /\n norm(value: number, start: number, stop: number): number;\n\n /\n Facilitates exponential expressions. The pow()\n * function is an efficient way of multiplying\n * numbers by themselves (or their reciprocals) in\n * large quantities. For example, pow(3, 5) is\n * equivalent to the expression 3 × 3 × 3 × 3 × 3 and\n * pow(3, -5) is equivalent to 1 / 3 × 3 × 3 × 3 × 3.\n * Maps to Math.pow().\n * @param n base of the exponential expression\n * @param e power by which to raise the base\n * @return n^e\n /\n pow(n: number, e: number): number;\n\n /\n Calculates the integer closest to the n parameter.\n * For example, round(133.8) returns the value 134.\n * Maps to Math.round().\n * @param n number to round\n * @param [decimals] number of decimal places to\n * round to, default is 0\n * @return rounded number\n /\n round(n: number, decimals?: number): number;\n\n /\n Squares a number (multiplies a number by itself).\n * The result is always a positive number, as\n * multiplying two negative numbers always yields a\n * positive result. For example, -1 * -1 = 1.\n * @param n number to square\n * @return squared number\n /\n sq(n: number): number;\n\n /\n Calculates the square root of a number. The square\n * root of a number is always positive, even though\n * there may be a valid negative root. The square\n * root s of number a is such that ss = a. It is the\n opposite of squaring. Maps to Math.sqrt().\n * @param n non-negative number to square root\n * @return square root of number\n /\n sqrt(n: number): number;\n\n /\n Calculates the fractional part of a number.\n * @param num Number whose fractional part needs to\n * be found out\n * @return fractional part of x, i.e, {x}\n /\n fract(num: number): number;\n\n/\n Creates a new p5.Vector (the datatype for storing\n * vectors). This provides a two or three-dimensional\n * vector, specifically a Euclidean (also known as\n * geometric) vector. A vector is an entity that has\n * both magnitude and direction.\n * @param [x] x component of the vector\n * @param [y] y component of the vector\n * @param [z] z component of the vector\n /\n createVector(x?: number, y?: number, z?: number): Vector;\n\n/\n Returns the Perlin noise value at specified\n * coordinates. Perlin noise is a random sequence\n * generator producing a more naturally ordered,\n * harmonic succession of numbers compared to the\n * standard random() function. It was invented by Ken\n * Perlin in the 1980s and been used since in\n * graphical applications to produce procedural\n * textures, natural motion, shapes, terrains etc.\n * The main difference to the random() function is\n * that Perlin noise is defined in an infinite\n * n-dimensional space where each pair of coordinates\n * corresponds to a fixed semi-random value (fixed\n * only for the lifespan of the program; see the\n * noiseSeed() function). p5.js can compute 1D, 2D\n * and 3D noise, depending on the number of\n * coordinates given. The resulting value will always\n * be between 0.0 and 1.0. The noise value can be\n * animated by moving through the noise space as\n * demonstrated in the example above. The 2nd and 3rd\n * dimensions can also be interpreted as time.\n \n The actual noise is structured similar to an audio\n * signal, in respect to the function's use of\n * frequencies. Similar to the concept of harmonics\n * in physics, Perlin noise is computed over several\n * octaves which are added together for the final\n * result.\n \n Another way to adjust the character of the\n * resulting sequence is the scale of the input\n * coordinates. As the function works within an\n * infinite space the value of the coordinates\n * doesn't matter as such, only the distance between\n * successive coordinates does (eg. when using\n * noise() within a loop). As a general rule the\n * smaller the difference between coordinates, the\n * smoother the resulting noise sequence will be.\n * Steps of 0.005-0.03 work best for most\n * applications, but this will differ depending on\n * use.\n * @param x x-coordinate in noise space\n * @param [y] y-coordinate in noise space\n * @param [z] z-coordinate in noise space\n * @return Perlin noise value (between 0 and 1) at\n * specified coordinates\n /\n noise(x: number, y?: number, z?: number): number;\n\n /\n Adjusts the character and level of detail produced\n * by the Perlin noise function. Similar to harmonics\n * in physics, noise is computed over several\n * octaves. Lower octaves contribute more to the\n * output signal and as such define the overall\n * intensity of the noise, whereas higher octaves\n * create finer-grained details in the noise\n * sequence. By default, noise is computed over 4\n * octaves with each octave contributing exactly half\n * as much as its predecessor, starting at 50%\n * strength for the 1st octave. This falloff amount\n * can be changed by adding an additional function\n * parameter. Eg. a falloff factor of 0.75 means each\n * octave will now have 75% impact (25% less) of the\n * previous lower octave. Any value between 0.0 and\n * 1.0 is valid, however, note that values greater\n * than 0.5 might result in greater than 1.0 values\n * returned by noise(). By changing these parameters,\n * the signal created by the noise() function can be\n * adapted to fit very specific needs and\n * characteristics.\n * @param lod number of octaves to be used by the\n * noise\n * @param falloff falloff factor for each octave\n /\n noiseDetail(lod: number, falloff: number): void;\n\n /\n Sets the seed value for noise(). By default,\n * noise() produces different results each time the\n * program is run. Set the seed parameter to a\n * constant to return the same pseudo-random numbers\n * each time the software is run.\n * @param seed the seed value\n /\n noiseSeed(seed: number): void;\n\n/\n Sets the seed value for random(). By default,\n * random() produces different results each time the\n * program is run. Set the seed parameter to a\n * constant to return the same pseudo-random numbers\n * each time the software is run.\n * @param seed the seed value\n /\n randomSeed(seed: number): void;\n\n /\n Return a random floating-point number. Takes\n * either 0, 1 or 2 arguments.\n \n If no argument is given, returns a random number\n * from 0 up to (but not including) 1.\n \n If one argument is given and it is a number,\n * returns a random number from 0 up to (but not\n * including) the number.\n \n If one argument is given and it is an array,\n * returns a random element from that array.\n \n If two arguments are given, returns a random\n * number from the first argument up to (but not\n * including) the second argument.\n * @param [min] the lower bound (inclusive)\n * @param [max] the upper bound (exclusive)\n * @return the random number\n /\n random(min?: number, max?: number): number;\n\n /\n Return a random floating-point number. Takes\n * either 0, 1 or 2 arguments.\n \n If no argument is given, returns a random number\n * from 0 up to (but not including) 1.\n \n If one argument is given and it is a number,\n * returns a random number from 0 up to (but not\n * including) the number.\n \n If one argument is given and it is an array,\n * returns a random element from that array.\n \n If two arguments are given, returns a random\n * number from the first argument up to (but not\n * including) the second argument.\n * @param choices the array to choose from\n * @return the random element from the array\n /\n random(choices: any[]): any;\n\n /\n Returns a random number fitting a Gaussian, or\n * normal, distribution. There is theoretically no\n * minimum or maximum value that randomGaussian()\n * might return. Rather, there is just a very low\n * probability that values far from the mean will be\n * returned; and a higher probability that numbers\n * near the mean will be returned. Takes either 0, 1\n * or 2 arguments. If no args, the mean is 0 and the\n * standard deviation is 1.\n \n If one arg, that arg is the mean and the standard\n * deviation is 1.\n \n If two args, the first arg is the mean and the\n * second is the standard deviation.\n * @param [mean] the mean\n * @param [sd] the standard deviation\n * @return the random number\n /\n randomGaussian(mean?: number, sd?: number): number;\n\n/\n The inverse of cos(), returns the arc cosine of a\n * value. This function expects the values in the\n * range of -1 to 1 and values are returned in the\n * range 0 to PI (3.1415927) if the angleMode() is\n * RADIANS or 0 to 180 if the angleMode() is DEGREES.\n * @param value the value whose arc cosine is to be\n * returned\n * @return the arc cosine of the given value\n /\n acos(value: number): number;\n\n /\n The inverse of sin(), returns the arc sine of a\n * value. This function expects the values in the\n * range of -1 to 1 and values are returned in the\n * range -PI/2 to PI/2 if the angleMode is RADIANS or\n * -90 to 90 if the angle mode is DEGREES.\n * @param value the value whose arc sine is to be\n * returned\n * @return the arc sine of the given value\n /\n asin(value: number): number;\n\n /\n The inverse of tan(), returns the arc tangent of a\n * value. This function expects the values in the\n * range of -Infinity to Infinity (exclusive) and\n * values are returned in the range -PI/2 to PI/2 if\n * the angleMode is RADIANS or -90 to 90 if the angle\n * mode is DEGREES.\n * @param value the value whose arc tangent is to be\n * returned\n * @return the arc tangent of the given value\n /\n atan(value: number): number;\n\n /\n Calculates the angle (in radians) from a specified\n * point to the coordinate origin as measured from\n * the positive x-axis. Values are returned as a\n * float in the range from PI to -PI if the\n * angleMode() is RADIANS or 180 to -180 if the\n * angleMode() is DEGREES. The atan2() function is\n * most often used for orienting geometry to the\n * position of the cursor. Note: The y-coordinate of\n * the point is the first parameter, and the\n * x-coordinate is the second parameter, due to the\n * structure of calculating the tangent.\n * @param y y-coordinate of the point\n * @param x x-coordinate of the point\n * @return the arc tangent of the given point\n /\n atan2(y: number, x: number): number;\n\n /\n Calculates the cosine of an angle. This function\n * takes into account the current angleMode. Values\n * are returned in the range -1 to 1.\n * @param angle the angle\n * @return the cosine of the angle\n /\n cos(angle: number): number;\n\n /\n Calculates the sine of an angle. This function\n * takes into account the current angleMode. Values\n * are returned in the range -1 to 1.\n * @param angle the angle\n * @return the sine of the angle\n /\n sin(angle: number): number;\n\n /\n Calculates the tangent of an angle. This function\n * takes into account the current angleMode. Values\n * are returned in the range of all real numbers.\n * @param angle the angle\n * @return the tangent of the angle\n /\n tan(angle: number): number;\n\n /\n Converts a radian measurement to its corresponding\n * value in degrees. Radians and degrees are two ways\n * of measuring the same thing. There are 360 degrees\n * in a circle and 2PI radians in a circle. For\n example, 90° = PI/2 = 1.5707964. This function\n * does not take into account the current\n * angleMode().\n * @param radians the radians value to convert to\n * degrees\n * @return the converted angle\n /\n degrees(radians: number): number;\n\n /\n Converts a degree measurement to its corresponding\n * value in radians. Radians and degrees are two ways\n * of measuring the same thing. There are 360 degrees\n * in a circle and 2PI radians in a circle. For\n example, 90° = PI/2 = 1.5707964. This function\n * does not take into account the current angleMode.\n * @param degrees the degree value to convert to\n * radians\n * @return the converted angle\n /\n radians(degrees: number): number;\n\n /\n Sets the current mode of p5 to the given mode.\n * Default mode is RADIANS. Calling angleMode() with\n * no arguments returns current anglemode.\n * @param mode either RADIANS or DEGREES\n /\n angleMode(mode: ANGLE_MODE): void;\n\n /\n Sets the current mode of p5 to the given mode.\n * Default mode is RADIANS. Calling angleMode() with\n * no arguments returns current anglemode.\n * @return mode either RADIANS or DEGREES\n /\n angleMode(): UNKNOWN_P5_CONSTANT;\n\n/\n Sets the current alignment for drawing text.\n * Accepts two arguments: horizAlign (LEFT, CENTER,\n * or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or\n * BASELINE). The horizAlign parameter is in\n * reference to the x value of the text() function,\n * while the vertAlign parameter is in reference to\n * the y value.\n \n So if you write textAlign(LEFT), you are aligning\n * the left edge of your text to the x value you give\n * in text(). If you write textAlign(RIGHT, TOP), you\n * are aligning the right edge of your text to the x\n * value and the top edge of the text to the y value.\n * @param horizAlign horizontal alignment, either\n * LEFT, CENTER, or RIGHT\n * @param [vertAlign] vertical alignment, either TOP,\n * BOTTOM, CENTER, or BASELINE\n * @chainable\n /\n textAlign(horizAlign: HORIZ_ALIGN, vertAlign?: VERT_ALIGN): p5;\n\n /\n Sets the current alignment for drawing text.\n * Accepts two arguments: horizAlign (LEFT, CENTER,\n * or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or\n * BASELINE). The horizAlign parameter is in\n * reference to the x value of the text() function,\n * while the vertAlign parameter is in reference to\n * the y value.\n \n So if you write textAlign(LEFT), you are aligning\n * the left edge of your text to the x value you give\n * in text(). If you write textAlign(RIGHT, TOP), you\n * are aligning the right edge of your text to the x\n * value and the top edge of the text to the y value.\n /\n textAlign(): object;\n\n /\n Sets/gets the spacing, in pixels, between lines of\n * text. This setting will be used in all subsequent\n * calls to the text() function.\n * @param leading the size in pixels for spacing\n * between lines\n * @chainable\n /\n textLeading(leading: number): p5;\n\n /\n Sets/gets the spacing, in pixels, between lines of\n * text. This setting will be used in all subsequent\n * calls to the text() function.\n /\n textLeading(): number;\n\n /\n Sets/gets the current font size. This size will be\n * used in all subsequent calls to the text()\n * function. Font size is measured in pixels.\n * @param theSize the size of the letters in units of\n * pixels\n * @chainable\n /\n textSize(theSize: number): p5;\n\n /\n Sets/gets the current font size. This size will be\n * used in all subsequent calls to the text()\n * function. Font size is measured in pixels.\n /\n textSize(): number;\n\n /\n Sets/gets the style of the text for system fonts\n * to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this\n * may be is overridden by CSS styling. For\n * non-system fonts (opentype, truetype, etc.) please\n * load styled fonts instead.\n * @param theStyle styling for text, either NORMAL,\n * ITALIC, BOLD or BOLDITALIC\n * @chainable\n /\n textStyle(theStyle: THE_STYLE): p5;\n\n /\n Sets/gets the style of the text for system fonts\n * to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this\n * may be is overridden by CSS styling. For\n * non-system fonts (opentype, truetype, etc.) please\n * load styled fonts instead.\n /\n textStyle(): string;\n\n /\n Calculates and returns the width of any character\n * or text string.\n * @param theText the String of characters to measure\n * @return the calculated width\n /\n textWidth(theText: string): number;\n\n /\n Returns the ascent of the current font at its\n * current size. The ascent represents the distance,\n * in pixels, of the tallest character above the\n * baseline.\n /\n textAscent(): number;\n\n /\n Returns the descent of the current font at its\n * current size. The descent represents the distance,\n * in pixels, of the character with the longest\n * descender below the baseline.\n /\n textDescent(): number;\n\n /\n Specifies how lines of text are wrapped within a\n * text box. This requires a max-width set on the\n * text area, specified in text() as parameter x2.\n * WORD wrap style only breaks lines at spaces. A\n * single string without spaces that exceeds the\n * boundaries of the canvas or text area is not\n * truncated, and will overflow the desired area,\n * disappearing at the canvas edge.\n \n CHAR wrap style breaks lines wherever needed to\n * stay within the text box.\n \n WORD is the default wrap style, and both styles\n * will still break lines at any line breaks (\\n)\n * specified in the original text. The text area\n * max-height parameter (y2) also still applies to\n * wrapped text in both styles, lines of text that do\n * not fit within the text area will not be drawn to\n * the screen.\n * @param wrapStyle text wrapping style, either WORD\n * or CHAR\n * @return wrapStyle\n /\n textWrap(wrapStyle: WRAP_STYLE): string;\n\n/\n Loads an opentype font file (.otf, .ttf) from a\n * file or a URL, and returns a p5.Font object. This\n * function is asynchronous, meaning it may not\n * finish before the next line in your sketch is\n * executed. The path to the font should be relative\n * to the HTML file that links in your sketch.\n * Loading fonts from a URL or other remote location\n * may be blocked due to your browser's built-in\n * security.\n * @param path name of the file or url to load\n * @param [callback] function to be executed after\n * loadFont() completes\n * @param [onError] function to be executed if an\n * error occurs\n * @return p5.Font object\n /\n loadFont(path: string, callback?: (...args: any[]) => any, onError?: (...args: any[]) => any): Font;\n\n /\n Draws text to the screen. Displays the information\n * specified in the first parameter on the screen in\n * the position specified by the additional\n * parameters. A default font will be used unless a\n * font is set with the textFont() function and a\n * default size will be used unless a font is set\n * with textSize(). Change the color of the text with\n * the fill() function. Change the outline of the\n * text with the stroke() and strokeWeight()\n * functions. The text displays in relation to the\n * textAlign() function, which gives the option to\n * draw to the left, right, and center of the\n * coordinates.\n \n The x2 and y2 parameters define a rectangular area\n * to display within and may only be used with string\n * data. When these parameters are specified, they\n * are interpreted based on the current rectMode()\n * setting. Text that does not fit completely within\n * the rectangle specified will not be drawn to the\n * screen. If x2 and y2 are not specified, the\n * baseline alignment is the default, which means\n * that the text will be drawn upwards from x and y.\n \n WEBGL: Only opentype/truetype fonts are supported.\n * You must load a font using the loadFont() method\n * (see the example above). stroke() currently has no\n * effect in webgl mode. Learn more about working\n * with text in webgl mode on the wiki.\n * @param str the alphanumeric symbols to be\n * displayed\n * @param x x-coordinate of text\n * @param y y-coordinate of text\n * @param [x2] by default, the width of the text box,\n * see rectMode() for more info\n * @param [y2] by default, the height of the text\n * box, see rectMode() for more info\n * @chainable\n /\n text(str: string \| object \| any[] \| number \| boolean, x: number, y: number, x2?: number, y2?: number): p5;\n\n /\n Sets the current font that will be drawn with the\n * text() function. If textFont() is called without\n * any argument, it will return the current font if\n * one has been set already. If not, it will return\n * the name of the default font as a string. If\n * textFont() is called with a font to use, it will\n * return the p5 object. WEBGL: Only fonts loaded via\n * loadFont() are supported.\n * @return the current font / p5 Object\n /\n textFont(): object;\n\n /\n Sets the current font that will be drawn with the\n * text() function. If textFont() is called without\n * any argument, it will return the current font if\n * one has been set already. If not, it will return\n * the name of the default font as a string. If\n * textFont() is called with a font to use, it will\n * return the p5 object. WEBGL: Only fonts loaded via\n * loadFont() are supported.\n * @param font a font loaded via loadFont(), or a\n * String representing a web safe font (a font that\n * is generally available across all systems)\n * @param [size] the font size to use\n * @chainable\n /\n textFont(font: object \| string, size?: number): p5;\n\n/\n Adds a value to the end of an array. Extends the\n * length of the array by one. Maps to Array.push().\n * @param array Array to append\n * @param value to be added to the Array\n * @return the array that was appended to\n /\n append(array: any[], value: any): any[];\n\n /\n Copies an array (or part of an array) to another\n * array. The src array is copied to the dst array,\n * beginning at the position specified by srcPosition\n * and into the position specified by dstPosition.\n * The number of elements to copy is determined by\n * length. Note that copying values overwrites\n * existing values in the destination array. To\n * append values instead of overwriting them, use\n * concat(). The simplified version with only two\n * arguments, arrayCopy(src, dst), copies an entire\n * array to another of the same size. It is\n * equivalent to arrayCopy(src, 0, dst, 0,\n * src.length).\n \n Using this function is far more efficient for\n * copying array data than iterating through a for()\n * loop and copying each element individually.\n * @param src the source Array\n * @param srcPosition starting position in the source\n * Array\n * @param dst the destination Array\n * @param dstPosition starting position in the\n * destination Array\n * @param length number of Array elements to be\n * copied\n /\n arrayCopy(src: any[], srcPosition: number, dst: any[], dstPosition: number, length: number): void;\n\n /\n Copies an array (or part of an array) to another\n * array. The src array is copied to the dst array,\n * beginning at the position specified by srcPosition\n * and into the position specified by dstPosition.\n * The number of elements to copy is determined by\n * length. Note that copying values overwrites\n * existing values in the destination array. To\n * append values instead of overwriting them, use\n * concat(). The simplified version with only two\n * arguments, arrayCopy(src, dst), copies an entire\n * array to another of the same size. It is\n * equivalent to arrayCopy(src, 0, dst, 0,\n * src.length).\n \n Using this function is far more efficient for\n * copying array data than iterating through a for()\n * loop and copying each element individually.\n * @param src the source Array\n * @param dst the destination Array\n * @param [length] number of Array elements to be\n * copied\n /\n arrayCopy(src: any[], dst: any[], length?: number): void;\n\n /\n Concatenates two arrays, maps to Array.concat().\n * Does not modify the input arrays.\n * @param a first Array to concatenate\n * @param b second Array to concatenate\n * @return concatenated array\n /\n concat(a: any[], b: any[]): any[];\n\n /\n Reverses the order of an array, maps to\n * Array.reverse()\n * @param list Array to reverse\n * @return the reversed list\n /\n reverse(list: any[]): any[];\n\n /\n Decreases an array by one element and returns the\n * shortened array, maps to Array.pop().\n * @param list Array to shorten\n * @return shortened Array\n /\n shorten(list: any[]): any[];\n\n /\n Randomizes the order of the elements of an array.\n * Implements Fisher-Yates Shuffle Algorithm.\n * @param array Array to shuffle\n * @param [bool] modify passed array\n * @return shuffled Array\n /\n shuffle(array: any[], bool?: boolean): any[];\n\n /\n Sorts an array of numbers from smallest to\n * largest, or puts an array of words in alphabetical\n * order. The original array is not modified; a\n * re-ordered array is returned. The count parameter\n * states the number of elements to sort. For\n * example, if there are 12 elements in an array and\n * count is set to 5, only the first 5 elements in\n * the array will be sorted.\n * @param list Array to sort\n * @param [count] number of elements to sort,\n * starting from 0\n * @return the sorted list\n /\n sort(list: any[], count?: number): any[];\n\n /\n Inserts a value or an array of values into an\n * existing array. The first parameter specifies the\n * initial array to be modified, and the second\n * parameter defines the data to be inserted. The\n * third parameter is an index value which specifies\n * the array position from which to insert data.\n * (Remember that array index numbering starts at\n * zero, so the first position is 0, the second\n * position is 1, and so on.)\n * @param list Array to splice into\n * @param value value to be spliced in\n * @param position in the array from which to insert\n * data\n * @return the list\n /\n splice(list: any[], value: any, position: number): any[];\n\n /\n Extracts an array of elements from an existing\n * array. The list parameter defines the array from\n * which the elements will be copied, and the start\n * and count parameters specify which elements to\n * extract. If no count is given, elements will be\n * extracted from the start to the end of the array.\n * When specifying the start, remember that the first\n * array element is 0. This function does not change\n * the source array.\n * @param list Array to extract from\n * @param start position to begin\n * @param [count] number of values to extract\n * @return Array of extracted elements\n /\n subset(list: any[], start: number, count?: number): any[];\n\n/\n Converts a string to its floating point\n * representation. The contents of a string must\n * resemble a number, or NaN (not a number) will be\n * returned. For example, float(\"1234.56\") evaluates\n * to 1234.56, but float(\"giraffe\") will return NaN.\n * When an array of values is passed in, then an\n * array of floats of the same length is returned.\n * @param str float string to parse\n * @return floating point representation of string\n /\n float(str: string): number;\n\n /\n Converts a boolean, string, or float to its\n * integer representation. When an array of values is\n * passed in, then an int array of the same length is\n * returned.\n * @param n value to parse\n * @param [radix] the radix to convert to (default:\n * 10)\n * @return integer representation of value\n /\n int(n: string \| boolean \| number, radix?: number): number;\n\n /\n Converts a boolean, string, or float to its\n * integer representation. When an array of values is\n * passed in, then an int array of the same length is\n * returned.\n * @param ns values to parse\n * @param [radix] the radix to convert to (default:\n * 10)\n * @return integer representation of values\n /\n int(ns: any[], radix?: number): number[];\n\n /\n Converts a boolean, string or number to its string\n * representation. When an array of values is passed\n * in, then an array of strings of the same length is\n * returned.\n * @param n value to parse\n * @return string representation of value\n /\n str(n: string \| boolean \| number \| any[]): string;\n\n /\n Converts a number or string to its boolean\n * representation. For a number, any non-zero value\n * (positive or negative) evaluates to true, while\n * zero evaluates to false. For a string, the value\n * \"true\" evaluates to true, while any other value\n * evaluates to false. When an array of number or\n * string values is passed in, then a array of\n * booleans of the same length is returned.\n * @param n value to parse\n * @return boolean representation of value\n /\n boolean(n: string \| boolean \| number \| any[]): boolean;\n\n /\n Converts a number, string representation of a\n * number, or boolean to its byte representation. A\n * byte can be only a whole number between -128 and\n * 127, so when a value outside of this range is\n * converted, it wraps around to the corresponding\n * byte representation. When an array of number,\n * string or boolean values is passed in, then an\n * array of bytes the same length is returned.\n * @param n value to parse\n * @return byte representation of value\n /\n byte(n: string \| boolean \| number): number;\n\n /\n Converts a number, string representation of a\n * number, or boolean to its byte representation. A\n * byte can be only a whole number between -128 and\n * 127, so when a value outside of this range is\n * converted, it wraps around to the corresponding\n * byte representation. When an array of number,\n * string or boolean values is passed in, then an\n * array of bytes the same length is returned.\n * @param ns values to parse\n * @return array of byte representation of values\n /\n byte(ns: any[]): number[];\n\n /\n Converts a number or string to its corresponding\n * single-character string representation. If a\n * string parameter is provided, it is first parsed\n * as an integer and then translated into a\n * single-character string. When an array of number\n * or string values is passed in, then an array of\n * single-character strings of the same length is\n * returned.\n * @param n value to parse\n * @return string representation of value\n /\n char(n: string \| number): string;\n\n /\n Converts a number or string to its corresponding\n * single-character string representation. If a\n * string parameter is provided, it is first parsed\n * as an integer and then translated into a\n * single-character string. When an array of number\n * or string values is passed in, then an array of\n * single-character strings of the same length is\n * returned.\n * @param ns values to parse\n * @return array of string representation of values\n /\n char(ns: any[]): string[];\n\n /\n Converts a single-character string to its\n * corresponding integer representation. When an\n * array of single-character string values is passed\n * in, then an array of integers of the same length\n * is returned.\n * @param n value to parse\n * @return integer representation of value\n /\n unchar(n: string): number;\n\n /\n Converts a single-character string to its\n * corresponding integer representation. When an\n * array of single-character string values is passed\n * in, then an array of integers of the same length\n * is returned.\n * @param ns values to parse\n * @return integer representation of values\n /\n unchar(ns: any[]): number[];\n\n /\n Converts a number to a string in its equivalent\n * hexadecimal notation. If a second parameter is\n * passed, it is used to set the number of characters\n * to generate in the hexadecimal notation. When an\n * array is passed in, an array of strings in\n * hexadecimal notation of the same length is\n * returned.\n * @param n value to parse\n * @return hexadecimal string representation of value\n /\n hex(n: number, digits?: number): string;\n\n /\n Converts a number to a string in its equivalent\n * hexadecimal notation. If a second parameter is\n * passed, it is used to set the number of characters\n * to generate in the hexadecimal notation. When an\n * array is passed in, an array of strings in\n * hexadecimal notation of the same length is\n * returned.\n * @param ns array of values to parse\n * @return hexadecimal string representation of\n * values\n /\n hex(ns: number[], digits?: number): string[];\n\n /\n Converts a string representation of a hexadecimal\n * number to its equivalent integer value. When an\n * array of strings in hexadecimal notation is passed\n * in, an array of integers of the same length is\n * returned.\n * @param n value to parse\n * @return integer representation of hexadecimal\n * value\n /\n unhex(n: string): number;\n\n /\n Converts a string representation of a hexadecimal\n * number to its equivalent integer value. When an\n * array of strings in hexadecimal notation is passed\n * in, an array of integers of the same length is\n * returned.\n * @param ns values to parse\n * @return integer representations of hexadecimal\n * value\n /\n unhex(ns: any[]): number[];\n\n/\n Combines an array of Strings into one String, each\n * separated by the character(s) used for the\n * separator parameter. To join arrays of ints or\n * floats, it's necessary to first convert them to\n * Strings using nf() or nfs().\n * @param list array of Strings to be joined\n * @param separator String to be placed between each\n * item\n * @return joined String\n /\n join(list: any[], separator: string): string;\n\n /\n This function is used to apply a regular\n * expression to a piece of text, and return matching\n * groups (elements found inside parentheses) as a\n * String array. If there are no matches, a null\n * value will be returned. If no groups are specified\n * in the regular expression, but the sequence\n * matches, an array of length 1 (with the matched\n * text as the first element of the array) will be\n * returned. To use the function, first check to see\n * if the result is null. If the result is null, then\n * the sequence did not match at all. If the sequence\n * did match, an array is returned.\n \n If there are groups (specified by sets of\n * parentheses) in the regular expression, then the\n * contents of each will be returned in the array.\n * Element [0] of a regular expression match returns\n * the entire matching string, and the match groups\n * start at element [1] (the first group is [1], the\n * second [2], and so on).\n * @param str the String to be searched\n * @param regexp the regexp to be used for matching\n * @return Array of Strings found\n /\n match(str: string, regexp: string): string[];\n\n /\n This function is used to apply a regular\n * expression to a piece of text, and return a list\n * of matching groups (elements found inside\n * parentheses) as a two-dimensional String array. If\n * there are no matches, a null value will be\n * returned. If no groups are specified in the\n * regular expression, but the sequence matches, a\n * two dimensional array is still returned, but the\n * second dimension is only of length one. To use the\n * function, first check to see if the result is\n * null. If the result is null, then the sequence did\n * not match at all. If the sequence did match, a 2D\n * array is returned.\n \n If there are groups (specified by sets of\n * parentheses) in the regular expression, then the\n * contents of each will be returned in the array.\n * Assuming a loop with counter variable i, element\n * [i][0] of a regular expression match returns the\n * entire matching string, and the match groups start\n * at element [i][1] (the first group is [i][1], the\n * second [i][2], and so on).\n * @param str the String to be searched\n * @param regexp the regexp to be used for matching\n * @return 2d Array of Strings found\n /\n matchAll(str: string, regexp: string): string[];\n\n /\n Utility function for formatting numbers into\n * strings. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param num the Number to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nf(num: number \| string, left?: number \| string, right?: number \| string): string;\n\n /\n Utility function for formatting numbers into\n * strings. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param nums the Numbers to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nf(nums: any[], left?: number \| string, right?: number \| string): string[];\n\n /\n Utility function for formatting numbers into\n * strings and placing appropriate commas to mark\n * units of 1000. There are two versions: one for\n * formatting ints, and one for formatting an array\n * of ints. The value for the right parameter should\n * always be a positive integer.\n * @param num the Number to format\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nfc(num: number \| string, right?: number \| string): string;\n\n /\n Utility function for formatting numbers into\n * strings and placing appropriate commas to mark\n * units of 1000. There are two versions: one for\n * formatting ints, and one for formatting an array\n * of ints. The value for the right parameter should\n * always be a positive integer.\n * @param nums the Numbers to format\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nfc(nums: any[], right?: number \| string): string[];\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts a \"+\" in front\n * of positive numbers and a \"-\" in front of negative\n * numbers. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for left, and right parameters should\n * always be positive integers.\n * @param num the Number to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nfp(num: number, left?: number, right?: number): string;\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts a \"+\" in front\n * of positive numbers and a \"-\" in front of negative\n * numbers. There are two versions: one for\n * formatting floats, and one for formatting ints.\n * The values for left, and right parameters should\n * always be positive integers.\n * @param nums the Numbers to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nfp(nums: number[], left?: number, right?: number): string[];\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts an additional\n * \"_\" (space) in front of positive numbers just in\n * case to align it with negative numbers which\n * includes \"-\" (minus) sign. The main usecase of\n * nfs() can be seen when one wants to align the\n * digits (place values) of a non-negative number\n * with some negative number (See the example to get\n * a clear picture). There are two versions: one for\n * formatting float, and one for formatting int.\n \n The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (IMP): The result on the canvas basically the\n * expected alignment can vary based on the typeface\n * you are using.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param num the Number to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted String\n /\n nfs(num: number, left?: number, right?: number): string;\n\n /\n Utility function for formatting numbers into\n * strings. Similar to nf() but puts an additional\n * \"_\" (space) in front of positive numbers just in\n * case to align it with negative numbers which\n * includes \"-\" (minus) sign. The main usecase of\n * nfs() can be seen when one wants to align the\n * digits (place values) of a non-negative number\n * with some negative number (See the example to get\n * a clear picture). There are two versions: one for\n * formatting float, and one for formatting int.\n \n The values for the digits, left, and right\n * parameters should always be positive integers.\n \n (IMP): The result on the canvas basically the\n * expected alignment can vary based on the typeface\n * you are using.\n \n (NOTE): Be cautious when using left and right\n * parameters as it prepends numbers of 0's if the\n * parameter if greater than the current length of\n * the number.\n \n For example if number is 123.2 and left parameter\n * passed is 4 which is greater than length of 123\n * (integer part) i.e 3 than result will be 0123.2.\n * Same case for right parameter i.e. if right is 3\n * than the result will be 123.200.\n * @param nums the Numbers to format\n * @param [left] number of digits to the left of the\n * decimal point\n * @param [right] number of digits to the right of\n * the decimal point\n * @return formatted Strings\n /\n nfs(nums: any[], left?: number, right?: number): string[];\n\n /\n The split() function maps to String.split(), it\n * breaks a String into pieces using a character or\n * string as the delimiter. The delim parameter\n * specifies the character or characters that mark\n * the boundaries between each piece. A String[]\n * array is returned that contains each of the\n * pieces. The splitTokens() function works in a\n * similar fashion, except that it splits using a\n * range of characters instead of a specific\n * character or sequence.\n * @param value the String to be split\n * @param delim the String used to separate the data\n * @return Array of Strings\n /\n split(value: string, delim: string): string[];\n\n /\n The splitTokens() function splits a String at one\n * or many character delimiters or \"tokens.\" The\n * delim parameter specifies the character or\n * characters to be used as a boundary. If no delim\n * characters are specified, any whitespace character\n * is used to split. Whitespace characters include\n * tab (\\t), line feed (\\n), carriage return (\\r),\n * form feed (\\f), and space.\n * @param value the String to be split\n * @param [delim] list of individual Strings that\n * will be used as separators\n * @return Array of Strings\n /\n splitTokens(value: string, delim?: string): string[];\n\n /\n Removes whitespace characters from the beginning\n * and end of a String. In addition to standard\n * whitespace characters such as space, carriage\n * return, and tab, this function also removes the\n * Unicode \"nbsp\" character.\n * @param str a String to be trimmed\n * @return a trimmed String\n /\n trim(str: string): string;\n\n /\n Removes whitespace characters from the beginning\n * and end of a String. In addition to standard\n * whitespace characters such as space, carriage\n * return, and tab, this function also removes the\n * Unicode \"nbsp\" character.\n * @param strs an Array of Strings to be trimmed\n * @return an Array of trimmed Strings\n /\n trim(strs: any[]): string[];\n\n/\n p5.js communicates with the clock on your\n * computer. The day() function returns the current\n * day as a value from 1 - 31.\n * @return the current day\n /\n day(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The hour() function returns the current\n * hour as a value from 0 - 23.\n * @return the current hour\n /\n hour(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The minute() function returns the\n * current minute as a value from 0 - 59.\n * @return the current minute\n /\n minute(): number;\n\n /\n Returns the number of milliseconds (thousandths of\n * a second) since starting the sketch (when setup()\n * is called). This information is often used for\n * timing events and animation sequences.\n * @return the number of milliseconds since starting\n * the sketch\n /\n millis(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The month() function returns the current\n * month as a value from 1 - 12.\n * @return the current month\n /\n month(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The second() function returns the\n * current second as a value from 0 - 59.\n * @return the current second\n /\n second(): number;\n\n /\n p5.js communicates with the clock on your\n * computer. The year() function returns the current\n * year as an integer (2014, 2015, 2016, etc).\n * @return the current year\n /\n year(): number;\n\n/\n Draw a plane with given a width and height\n * @param [width] width of the plane\n * @param [height] height of the plane\n * @param [detailX] Optional number of triangle\n * subdivisions in x-dimension\n * @param [detailY] Optional number of triangle\n * subdivisions in y-dimension\n * @chainable\n /\n plane(width?: number, height?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a box with given width, height and depth\n * @param [width] width of the box\n * @param [height] height of the box\n * @param [depth] depth of the box\n * @param [detailX] Optional number of triangle\n * subdivisions in x-dimension\n * @param [detailY] Optional number of triangle\n * subdivisions in y-dimension\n * @chainable\n /\n box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a sphere with given radius. DetailX and\n * detailY determines the number of subdivisions in\n * the x-dimension and the y-dimension of a sphere.\n * More subdivisions make the sphere seem smoother.\n * The recommended maximum values are both 24. Using\n * a value greater than 24 may cause a warning or\n * slow down the browser.\n * @param [radius] radius of circle\n * @param [detailX] optional number of subdivisions\n * in x-dimension\n * @param [detailY] optional number of subdivisions\n * in y-dimension\n * @chainable\n /\n sphere(radius?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a cylinder with given radius and height\n * DetailX and detailY determines the number of\n * subdivisions in the x-dimension and the\n * y-dimension of a cylinder. More subdivisions make\n * the cylinder seem smoother. The recommended\n * maximum value for detailX is 24. Using a value\n * greater than 24 may cause a warning or slow down\n * the browser.\n * @param [radius] radius of the surface\n * @param [height] height of the cylinder\n * @param [detailX] number of subdivisions in\n * x-dimension; default is 24\n * @param [detailY] number of subdivisions in\n * y-dimension; default is 1\n * @param [bottomCap] whether to draw the bottom of\n * the cylinder\n * @param [topCap] whether to draw the top of the\n * cylinder\n * @chainable\n /\n cylinder(\n radius?: number,\n height?: number,\n detailX?: number,\n detailY?: number,\n bottomCap?: boolean,\n topCap?: boolean\n ): p5;\n\n /\n Draw a cone with given radius and height DetailX\n * and detailY determine the number of subdivisions\n * in the x-dimension and the y-dimension of a cone.\n * More subdivisions make the cone seem smoother. The\n * recommended maximum value for detailX is 24. Using\n * a value greater than 24 may cause a warning or\n * slow down the browser.\n * @param [radius] radius of the bottom surface\n * @param [height] height of the cone\n * @param [detailX] number of segments, the more\n * segments the smoother geometry default is 24\n * @param [detailY] number of segments, the more\n * segments the smoother geometry default is 1\n * @param [cap] whether to draw the base of the cone\n * @chainable\n /\n cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): p5;\n\n /\n Draw an ellipsoid with given radius DetailX and\n * detailY determine the number of subdivisions in\n * the x-dimension and the y-dimension of a cone.\n * More subdivisions make the ellipsoid appear to be\n * smoother. Avoid detail number above 150, it may\n * crash the browser.\n * @param [radiusx] x-radius of ellipsoid\n * @param [radiusy] y-radius of ellipsoid\n * @param [radiusz] z-radius of ellipsoid\n * @param [detailX] number of segments, the more\n * segments the smoother geometry default is 24.\n * Avoid detail number above 150, it may crash the\n * browser.\n * @param [detailY] number of segments, the more\n * segments the smoother geometry default is 16.\n * Avoid detail number above 150, it may crash the\n * browser.\n * @chainable\n /\n ellipsoid(radiusx?: number, radiusy?: number, radiusz?: number, detailX?: number, detailY?: number): p5;\n\n /\n Draw a torus with given radius and tube radius\n * DetailX and detailY determine the number of\n * subdivisions in the x-dimension and the\n * y-dimension of a torus. More subdivisions make the\n * torus appear to be smoother. The default and\n * maximum values for detailX and detailY are 24 and\n * 16, respectively. Setting them to relatively small\n * values like 4 and 6 allows you to create new\n * shapes other than a torus.\n * @param [radius] radius of the whole ring\n * @param [tubeRadius] radius of the tube\n * @param [detailX] number of segments in\n * x-dimension, the more segments the smoother\n * geometry default is 24\n * @param [detailY] number of segments in\n * y-dimension, the more segments the smoother\n * geometry default is 16\n * @chainable\n /\n torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): p5;\n\n/\n Allows movement around a 3D sketch using a mouse\n * or trackpad or touch. Left-clicking and dragging\n * or swipe motion will rotate the camera position\n * about the center of the sketch, right-clicking and\n * dragging or multi-swipe will pan the camera\n * position without rotation, and using the mouse\n * wheel (scrolling) or pinch in/out will move the\n * camera further or closer from the center of the\n * sketch. This function can be called with\n * parameters dictating sensitivity to mouse/touch\n * movement along the X and Y axes. Calling this\n * function without parameters is equivalent to\n * calling orbitControl(1,1). To reverse direction of\n * movement in either axis, enter a negative number\n * for sensitivity.\n * @param [sensitivityX] sensitivity to mouse\n * movement along X axis\n * @param [sensitivityY] sensitivity to mouse\n * movement along Y axis\n * @param [sensitivityZ] sensitivity to scroll\n * movement along Z axis\n * @param [options] An optional object that can\n * contain additional settings, disableTouchActions -\n * Boolean, default value is true. Setting this to\n * true makes mobile interactions smoother by\n * preventing accidental interactions with the page\n * while orbiting. But if you're already doing it via\n * css or want the default touch actions, consider\n * setting it to false. freeRotation - Boolean,\n * default value is false. By default, horizontal\n * movement of the mouse or touch pointer rotates the\n * camera around the y-axis, and vertical movement\n * rotates the camera around the x-axis. But if\n * setting this option to true, the camera always\n * rotates in the direction the pointer is moving.\n * For zoom and move, the behavior is the same\n * regardless of true/false.\n * @chainable\n /\n orbitControl(sensitivityX?: number, sensitivityY?: number, sensitivityZ?: number, options?: object): p5;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n /\n debugMode(): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param mode either GRID or AXES\n /\n debugMode(mode: DEBUG_MODE): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param mode either GRID or AXES\n * @param [gridSize] size of one side of the grid\n * @param [gridDivisions] number of divisions in the\n * grid\n * @param [xOff] X axis offset from origin (0,0,0)\n * @param [yOff] Y axis offset from origin (0,0,0)\n * @param [zOff] Z axis offset from origin (0,0,0)\n /\n debugMode(\n mode: UNKNOWN_P5_CONSTANT,\n gridSize?: number,\n gridDivisions?: number,\n xOff?: number,\n yOff?: number,\n zOff?: number\n ): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param mode either GRID or AXES\n * @param [axesSize] size of axes icon\n * @param [xOff] X axis offset from origin (0,0,0)\n * @param [yOff] Y axis offset from origin (0,0,0)\n * @param [zOff] Z axis offset from origin (0,0,0)\n /\n debugMode(mode: UNKNOWN_P5_CONSTANT, axesSize?: number, xOff?: number, yOff?: number, zOff?: number): void;\n\n /\n debugMode() helps visualize 3D space by adding a\n * grid to indicate where the ‘ground’ is in a sketch\n * and an axes icon which indicates the +X, +Y, and\n * +Z directions. This function can be called without\n * parameters to create a default grid and axes icon,\n * or it can be called according to the examples\n * above to customize the size and position of the\n * grid and/or axes icon. The grid is drawn using the\n * most recently set stroke color and weight. To\n * specify these parameters, add a call to stroke()\n * and strokeWeight() just before the end of the\n * draw() loop. By default, the grid will run through\n * the origin (0,0,0) of the sketch along the XZ\n * plane and the axes icon will be offset from the\n * origin. Both the grid and axes icon will be sized\n * according to the current canvas size. Note that\n * because the grid runs parallel to the default\n * camera view, it is often helpful to use debugMode\n * along with orbitControl to allow full view of the\n * grid.\n * @param [gridSize] size of one side of the grid\n * @param [gridDivisions] number of divisions in the\n * grid\n * @param [axesSize] size of axes icon\n /\n debugMode(\n gridSize?: number,\n gridDivisions?: number,\n gridXOff?: number,\n gridYOff?: number,\n gridZOff?: number,\n axesSize?: number,\n axesXOff?: number,\n axesYOff?: number,\n axesZOff?: number\n ): void;\n\n /\n Turns off debugMode() in a 3D sketch.\n /\n noDebugMode(): void;\n\n/\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n ambientLight(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param gray number specifying value between white\n * and black\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n ambientLight(gray: number, alpha?: number): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param value a color string\n * @chainable\n /\n ambientLight(value: string): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param values an array containing the\n * red,green,blue & and alpha components of the color\n * @chainable\n /\n ambientLight(values: number[]): p5;\n\n /\n Creates an ambient light with the given color.\n * Ambient light does not come from a specific\n * direction. Objects are evenly lit from all sides.\n * Ambient lights are almost always used in\n * combination with other types of lights.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color\n * @chainable\n /\n ambientLight(color: Color): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @chainable\n /\n specularColor(v1: number, v2: number, v3: number): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param gray number specifying value between white\n * and black\n * @chainable\n /\n specularColor(gray: number): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param value color as a CSS string\n * @chainable\n /\n specularColor(value: string): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param values color as an array containing the\n * red, green, and blue components\n * @chainable\n /\n specularColor(values: number[]): p5;\n\n /\n Sets the color of the specular highlight of a\n * non-ambient light (i.e. all lights except\n * ambientLight()). specularColor() affects only the\n * lights which are created after it in the code.\n \n This function is used in combination with\n * specularMaterial(). If a geometry does not use\n * specularMaterial(), this function will have no\n * effect.\n \n The default color is white (255, 255, 255), which\n * is used if specularColor() is not explicitly\n * called.\n \n Note: specularColor is equivalent to the\n * Processing function lightSpecular.\n * @param color color as a p5.Color\n * @chainable\n /\n specularColor(color: Color): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of direction (inclusive range\n * of -1 to 1)\n * @param y y component of direction (inclusive range\n * of -1 to 1)\n * @param z z component of direction (inclusive range\n * of -1 to 1)\n * @chainable\n /\n directionalLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param direction direction of light as a p5.Vector\n * @chainable\n /\n directionalLight(v1: number, v2: number, v3: number, direction: Vector): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of direction (inclusive range\n * of -1 to 1)\n * @param y y component of direction (inclusive range\n * of -1 to 1)\n * @param z z component of direction (inclusive range\n * of -1 to 1)\n * @chainable\n /\n directionalLight(color: Color \| number[] \| string, x: number, y: number, z: number): p5;\n\n /\n Creates a directional light with the given color\n * and direction. Directional light comes from one\n * direction. The direction is specified as numbers\n * inclusively between -1 and 1. For example, setting\n * the direction as (0, -1, 0) will cause the\n * geometry to be lit from below (since the light\n * will be facing directly upwards). Similarly,\n * setting the direction as (1, 0, 0) will cause the\n * geometry to be lit from the left (since the light\n * will be facing directly rightwards).\n \n Directional lights do not have a specific point of\n * origin, and therefore cannot be positioned closer\n * or farther away from a geometry.\n \n A maximum of 5 directional lights can be active at\n * once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param direction direction of light as a p5.Vector\n * @chainable\n /\n directionalLight(color: Color \| number[] \| string, direction: Vector): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @chainable\n /\n pointLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param position of light as a p5.Vector\n * @chainable\n /\n pointLight(v1: number, v2: number, v3: number, position: Vector): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @chainable\n /\n pointLight(color: Color \| number[] \| string, x: number, y: number, z: number): p5;\n\n /\n Creates a point light with the given color and\n * position. A point light emits light from a single\n * point in all directions. Because the light is\n * emitted from a specific point (position), it has a\n * different effect when it is positioned farther vs.\n * nearer an object.\n \n A maximum of 5 point lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param position of light as a p5.Vector\n * @chainable\n /\n pointLight(color: Color \| number[] \| string, position: Vector): p5;\n\n /\n Places an ambient and directional light in the\n * scene. The lights are set to ambientLight(128,\n * 128, 128) and directionalLight(128, 128, 128, 0,\n * 0, -1). Note: lights need to be called (whether\n * directly or indirectly) within draw() to remain\n * persistent in a looping program. Placing them in\n * setup() will cause them to only have an effect the\n * first time through the loop.\n * @chainable\n /\n lights(): p5;\n\n /\n Sets the falloff rate for pointLight() and\n * spotLight(). lightFalloff() affects only the\n * lights which are created after it in the code.\n \n The constant, linear, an quadratic parameters are\n * used to calculate falloff as follows:\n \n d = distance from light position to vertex\n * position\n \n falloff = 1 / (CONSTANT + d * LINEAR + (d * d) \n QUADRATIC)\n * @param constant CONSTANT value for determining\n * falloff\n * @param linear LINEAR value for determining falloff\n * @param quadratic QUADRATIC value for determining\n * falloff\n * @chainable\n /\n lightFalloff(constant: number, linear: number, quadratic: number): p5;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n * @chainable\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n x: number,\n y: number,\n z: number,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): p5;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param position position of light as a p5.Vector\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n position: Vector,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param position position of light as a p5.Vector\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n position: Vector,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n x: number,\n y: number,\n z: number,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param position position of light as a p5.Vector\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n position: Vector,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param direction direction of light as a p5.Vector\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n x: number,\n y: number,\n z: number,\n direction: Vector,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param position position of light as a p5.Vector\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n v1: number,\n v2: number,\n v3: number,\n position: Vector,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Creates a spot light with the given color,\n * position, light direction, angle, and\n * concentration. Like a pointLight(), a spotLight()\n * emits light from a specific point (position). It\n * has a different effect when it is positioned\n * farther vs. nearer an object.\n \n However, unlike a pointLight(), the light is\n * emitted in one direction along a conical shape.\n * The shape of the cone can be controlled using the\n * angle and concentration parameters.\n \n The angle parameter is used to determine the\n * radius of the cone. And the concentration\n * parameter is used to focus the light towards the\n * center of the cone. Both parameters are optional,\n * however if you want to specify concentration, you\n * must also specify angle. The minimum concentration\n * value is 1.\n \n A maximum of 5 spot lights can be active at once.\n \n Note: lights need to be called (whether directly\n * or indirectly) within draw() to remain persistent\n * in a looping program. Placing them in setup() will\n * cause them to only have an effect the first time\n * through the loop.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @param x x component of position\n * @param y y component of position\n * @param z z component of position\n * @param rx x component of light direction\n * (inclusive range of -1 to 1)\n * @param ry y component of light direction\n * (inclusive range of -1 to 1)\n * @param rz z component of light direction\n * (inclusive range of -1 to 1)\n * @param [angle] angle of cone. Defaults to PI/3\n * @param [concentration] concentration of cone.\n * Defaults to 100\n /\n spotLight(\n color: Color \| number[] \| string,\n x: number,\n y: number,\n z: number,\n rx: number,\n ry: number,\n rz: number,\n angle?: number,\n concentration?: number\n ): void;\n\n /\n Removes all lights present in a sketch. All\n * subsequent geometry is rendered without lighting\n * (until a new light is created with a call to one\n * of the lighting functions (lights(),\n * ambientLight(), directionalLight(), pointLight(),\n * spotLight()).\n * @chainable\n /\n noLights(): p5;\n\n/\n Load a 3d model from an OBJ or STL file.\n * loadModel() should be placed inside of preload().\n * This allows the model to load fully before the\n * rest of your code is run.\n \n One of the limitations of the OBJ and STL format\n * is that it doesn't have a built-in sense of scale.\n * This means that models exported from different\n * programs might be very different sizes. If your\n * model isn't displaying, try calling loadModel()\n * with the normalized parameter set to true. This\n * will resize the model to a scale appropriate for\n * p5. You can also make additional changes to the\n * final size of your model with the scale()\n * function.\n \n Also, the support for colored STL files is not\n * present. STL files with color will be rendered\n * without color properties.\n * @param path Path of the model to be loaded\n * @param normalize If true, scale the model to a\n * standardized size when loading\n * @param [successCallback] Function to be called\n * once the model is loaded. Will be passed the 3D\n * model object.\n * @param [failureCallback] called with event error\n * if the model fails to load.\n * @param [fileType] The file extension of the model\n * (.stl, .obj).\n * @return the p5.Geometry object\n /\n loadModel(\n path: string,\n normalize: boolean,\n successCallback?: (p1: Geometry) => any,\n failureCallback?: (p1: Event) => any,\n fileType?: string\n ): Geometry;\n\n /\n Load a 3d model from an OBJ or STL file.\n * loadModel() should be placed inside of preload().\n * This allows the model to load fully before the\n * rest of your code is run.\n \n One of the limitations of the OBJ and STL format\n * is that it doesn't have a built-in sense of scale.\n * This means that models exported from different\n * programs might be very different sizes. If your\n * model isn't displaying, try calling loadModel()\n * with the normalized parameter set to true. This\n * will resize the model to a scale appropriate for\n * p5. You can also make additional changes to the\n * final size of your model with the scale()\n * function.\n \n Also, the support for colored STL files is not\n * present. STL files with color will be rendered\n * without color properties.\n * @param path Path of the model to be loaded\n * @param [successCallback] Function to be called\n * once the model is loaded. Will be passed the 3D\n * model object.\n * @param [failureCallback] called with event error\n * if the model fails to load.\n * @param [fileType] The file extension of the model\n * (.stl, .obj).\n * @return the p5.Geometry object\n /\n loadModel(\n path: string,\n successCallback?: (p1: Geometry) => any,\n failureCallback?: (p1: Event) => any,\n fileType?: string\n ): Geometry;\n\n /\n Render a 3d model to the screen.\n * @param model Loaded 3d model to be rendered\n /\n model(model: Geometry): void;\n\n/\n Creates a new p5.Shader object from the provided\n * vertex and fragment shader files. The shader files\n * are loaded asynchronously in the background, so\n * this method should be used in preload().\n \n Note, shaders can only be used in WEBGL mode.\n * @param vertFilename path to file containing vertex\n * shader source code\n * @param fragFilename path to file containing\n * fragment shader source code\n * @param [callback] callback to be executed after\n * loadShader completes. On success, the p5.Shader\n * object is passed as the first argument.\n * @param [errorCallback] callback to be executed\n * when an error occurs inside loadShader. On error,\n * the error is passed as the first argument.\n * @return a shader object created from the provided\n * vertex and fragment shader files.\n /\n loadShader(\n vertFilename: string,\n fragFilename: string,\n callback?: (...args: any[]) => any,\n errorCallback?: (...args: any[]) => any\n ): Shader;\n\n /\n Creates a new p5.Shader object from the provided\n * vertex and fragment shader code. Note, shaders can\n * only be used in WEBGL mode.\n * @param vertSrc source code for the vertex shader\n * @param fragSrc source code for the fragment shader\n * @return a shader object created from the provided\n * vertex and fragment shaders.\n /\n createShader(vertSrc: string, fragSrc: string): Shader;\n\n /\n Sets the p5.Shader object to be used to render\n * subsequent shapes. Custom shaders can be created\n * using the createShader() and loadShader()\n * functions.\n \n Use resetShader() to restore the default shaders.\n \n Note, shaders can only be used in WEBGL mode.\n * @param s the p5.Shader object to use for rendering\n * shapes.\n * @chainable\n /\n shader(s: Shader): p5;\n\n /\n Restores the default shaders. Code that runs after\n * resetShader() will not be affected by the shader\n * previously set by shader()\n * @chainable\n /\n resetShader(): p5;\n\n /\n Sets the texture that will be used to render\n * subsequent shapes. A texture is like a \"skin\" that\n * wraps around a 3D geometry. Currently supported\n * textures are images, video, and offscreen renders.\n \n To texture a geometry created with beginShape(),\n * you will need to specify uv coordinates in\n * vertex().\n \n Note, texture() can only be used in WEBGL mode.\n \n You can view more materials in this example.\n * @param tex image to use as texture\n * @chainable\n /\n texture(tex: Image \| MediaElement \| Graphics \| Framebuffer): p5;\n\n /\n Sets the coordinate space for texture mapping. The\n * default mode is IMAGE which refers to the actual\n * coordinates of the image. NORMAL refers to a\n * normalized space of values ranging from 0 to 1.\n * With IMAGE, if an image is 100×200 pixels, mapping\n * the image onto the entire size of a quad would\n * require the points (0,0) (100, 0) (100,200)\n * (0,200). The same mapping in NORMAL is (0,0) (1,0)\n * (1,1) (0,1).\n * @param mode either IMAGE or NORMAL\n /\n textureMode(mode: TEXTURE_MODE): void;\n\n /\n Sets the global texture wrapping mode. This\n * controls how textures behave when their uv's go\n * outside of the 0 to 1 range. There are three\n * options: CLAMP, REPEAT, and MIRROR. CLAMP causes\n * the pixels at the edge of the texture to extend to\n * the bounds. REPEAT causes the texture to tile\n * repeatedly until reaching the bounds. MIRROR works\n * similarly to REPEAT but it flips the texture with\n * every new tile.\n \n REPEAT & MIRROR are only available if the texture\n * is a power of two size (128, 256, 512, 1024,\n * etc.).\n \n This method will affect all textures in your\n * sketch until a subsequent textureWrap() call is\n * made.\n \n If only one argument is provided, it will be\n * applied to both the horizontal and vertical axes.\n * @param wrapX either CLAMP, REPEAT, or MIRROR\n * @param [wrapY] either CLAMP, REPEAT, or MIRROR\n /\n textureWrap(wrapX: WRAP_X, wrapY?: WRAP_Y): void;\n\n /\n Sets the current material as a normal material. A\n * normal material is not affected by light. It is\n * often used as a placeholder material when\n * debugging.\n \n Surfaces facing the X-axis become red, those\n * facing the Y-axis become green, and those facing\n * the Z-axis become blue.\n \n You can view more materials in this example.\n * @chainable\n /\n normalMaterial(): p5;\n\n /\n Sets the ambient color of the material. The\n * ambientMaterial() color represents the components\n * of the ambientLight() color that the object\n * reflects.\n \n Consider an ambientMaterial() with the color\n * yellow (255, 255, 0). If the ambientLight() emits\n * the color white (255, 255, 255), then the object\n * will appear yellow as it will reflect the red and\n * green components of the light. If the\n * ambientLight() emits the color red (255, 0, 0),\n * then the object will appear red as it will reflect\n * the red component of the light. If the\n * ambientLight() emits the color blue (0, 0, 255),\n * then the object will appear black, as there is no\n * component of the light that it can reflect.\n \n You can view more materials in this example.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @chainable\n /\n ambientMaterial(v1: number, v2: number, v3: number): p5;\n\n /\n Sets the ambient color of the material. The\n * ambientMaterial() color represents the components\n * of the ambientLight() color that the object\n * reflects.\n \n Consider an ambientMaterial() with the color\n * yellow (255, 255, 0). If the ambientLight() emits\n * the color white (255, 255, 255), then the object\n * will appear yellow as it will reflect the red and\n * green components of the light. If the\n * ambientLight() emits the color red (255, 0, 0),\n * then the object will appear red as it will reflect\n * the red component of the light. If the\n * ambientLight() emits the color blue (0, 0, 255),\n * then the object will appear black, as there is no\n * component of the light that it can reflect.\n \n You can view more materials in this example.\n * @param gray number specifying value between white\n * and black\n * @chainable\n /\n ambientMaterial(gray: number): p5;\n\n /\n Sets the ambient color of the material. The\n * ambientMaterial() color represents the components\n * of the ambientLight() color that the object\n * reflects.\n \n Consider an ambientMaterial() with the color\n * yellow (255, 255, 0). If the ambientLight() emits\n * the color white (255, 255, 255), then the object\n * will appear yellow as it will reflect the red and\n * green components of the light. If the\n * ambientLight() emits the color red (255, 0, 0),\n * then the object will appear red as it will reflect\n * the red component of the light. If the\n * ambientLight() emits the color blue (0, 0, 255),\n * then the object will appear black, as there is no\n * component of the light that it can reflect.\n \n You can view more materials in this example.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @chainable\n /\n ambientMaterial(color: Color \| number[] \| string): p5;\n\n /\n Sets the emissive color of the material. An\n * emissive material will display the emissive color\n * at full strength regardless of lighting. This can\n * give the appearance that the object is glowing.\n \n Note, \"emissive\" is a misnomer in the sense that\n * the material does not actually emit light that\n * will affect surrounding objects.\n \n You can view more materials in this example.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n emissiveMaterial(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the emissive color of the material. An\n * emissive material will display the emissive color\n * at full strength regardless of lighting. This can\n * give the appearance that the object is glowing.\n \n Note, \"emissive\" is a misnomer in the sense that\n * the material does not actually emit light that\n * will affect surrounding objects.\n \n You can view more materials in this example.\n * @param gray number specifying value between white\n * and black\n * @chainable\n /\n emissiveMaterial(gray: number): p5;\n\n /\n Sets the emissive color of the material. An\n * emissive material will display the emissive color\n * at full strength regardless of lighting. This can\n * give the appearance that the object is glowing.\n \n Note, \"emissive\" is a misnomer in the sense that\n * the material does not actually emit light that\n * will affect surrounding objects.\n \n You can view more materials in this example.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @chainable\n /\n emissiveMaterial(color: Color \| number[] \| string): p5;\n\n /\n Sets the specular color of the material. A\n * specular material is reflective (shiny). The\n * shininess can be controlled by the shininess()\n * function.\n \n Like ambientMaterial(), the specularMaterial()\n * color is the color the object will reflect under\n * ambientLight(). However unlike ambientMaterial(),\n * for all other types of lights (directionalLight(),\n * pointLight(), spotLight()), a specular material\n * will reflect the color of the light source. This\n * is what gives it its \"shiny\" appearance.\n \n You can view more materials in this example.\n * @param gray number specifying value between white\n * and black.\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n specularMaterial(gray: number, alpha?: number): p5;\n\n /\n Sets the specular color of the material. A\n * specular material is reflective (shiny). The\n * shininess can be controlled by the shininess()\n * function.\n \n Like ambientMaterial(), the specularMaterial()\n * color is the color the object will reflect under\n * ambientLight(). However unlike ambientMaterial(),\n * for all other types of lights (directionalLight(),\n * pointLight(), spotLight()), a specular material\n * will reflect the color of the light source. This\n * is what gives it its \"shiny\" appearance.\n \n You can view more materials in this example.\n * @param v1 red or hue value relative to the current\n * color range\n * @param v2 green or saturation value relative to\n * the current color range\n * @param v3 blue or brightness value relative to the\n * current color range\n * @param [alpha] alpha value relative to current\n * color range (default is 0-255)\n * @chainable\n /\n specularMaterial(v1: number, v2: number, v3: number, alpha?: number): p5;\n\n /\n Sets the specular color of the material. A\n * specular material is reflective (shiny). The\n * shininess can be controlled by the shininess()\n * function.\n \n Like ambientMaterial(), the specularMaterial()\n * color is the color the object will reflect under\n * ambientLight(). However unlike ambientMaterial(),\n * for all other types of lights (directionalLight(),\n * pointLight(), spotLight()), a specular material\n * will reflect the color of the light source. This\n * is what gives it its \"shiny\" appearance.\n \n You can view more materials in this example.\n * @param color color as a p5.Color, as an array, or\n * as a CSS string\n * @chainable\n /\n specularMaterial(color: Color \| number[] \| string): p5;\n\n /\n Sets the amount of gloss (\"shininess\") of a\n * specularMaterial(). The default and minimum value\n * is 1.\n * @param shine degree of shininess\n * @chainable\n /\n shininess(shine: number): p5;\n\n/\n Sets the position of the current camera in a 3D\n * sketch. Parameters for this function define the\n * camera's position, the center of the sketch (where\n * the camera is pointing), and an up direction (the\n * orientation of the camera). This function\n * simulates the movements of the camera, allowing\n * objects to be viewed from various angles.\n * Remember, it does not move the objects themselves\n * but the camera instead. For example when the\n * centerX value is positive, and the camera is\n * rotating to the right side of the sketch, the\n * object will seem like it's moving to the left.\n \n See this example to view the position of your\n * camera.\n \n If no parameters are given, the following default\n * is used: camera(0, 0, (height/2) / tan(PI/6), 0,\n * 0, 0, 0, 1, 0)\n * @param [x] camera position value on x axis\n * @param [y] camera position value on y axis\n * @param [z] camera position value on z axis\n * @param [centerX] x coordinate representing center\n * of the sketch\n * @param [centerY] y coordinate representing center\n * of the sketch\n * @param [centerZ] z coordinate representing center\n * of the sketch\n * @param [upX] x component of direction 'up' from\n * camera\n * @param [upY] y component of direction 'up' from\n * camera\n * @param [upZ] z component of direction 'up' from\n * camera\n * @chainable\n /\n camera(\n x?: number,\n y?: number,\n z?: number,\n centerX?: number,\n centerY?: number,\n centerZ?: number,\n upX?: number,\n upY?: number,\n upZ?: number\n ): p5;\n\n /\n Sets a perspective projection for the current\n * camera in a 3D sketch. This projection represents\n * depth through foreshortening: objects that are\n * close to the camera appear their actual size while\n * those that are further away from the camera appear\n * smaller. The parameters to this function define\n * the viewing frustum (the truncated pyramid within\n * which objects are seen by the camera) through\n * vertical field of view, aspect ratio (usually\n * width/height), and near and far clipping planes.\n \n If no parameters are given, the following default\n * is used: perspective(PI/3, width/height, eyeZ/10,\n * eyeZ10), where eyeZ is equal to ((height/2) /\n tan(PI/6)).\n * @param [fovy] camera frustum vertical field of\n * view, from bottom to top of view, in angleMode\n * units\n * @param [aspect] camera frustum aspect ratio\n * @param [near] frustum near plane length\n * @param [far] frustum far plane length\n * @chainable\n /\n perspective(fovy?: number, aspect?: number, near?: number, far?: number): p5;\n\n /\n Sets an orthographic projection for the current\n * camera in a 3D sketch and defines a box-shaped\n * viewing frustum within which objects are seen. In\n * this projection, all objects with the same\n * dimension appear the same size, regardless of\n * whether they are near or far from the camera. The\n * parameters to this function specify the viewing\n * frustum where left and right are the minimum and\n * maximum x values, top and bottom are the minimum\n * and maximum y values, and near and far are the\n * minimum and maximum z values.\n \n If no parameters are given, the following default\n * is used: ortho(-width/2, width/2, -height/2,\n * height/2).\n * @param [left] camera frustum left plane\n * @param [right] camera frustum right plane\n * @param [bottom] camera frustum bottom plane\n * @param [top] camera frustum top plane\n * @param [near] camera frustum near plane\n * @param [far] camera frustum far plane\n * @chainable\n /\n ortho(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): p5;\n\n /\n Sets the frustum of the current camera as defined\n * by the parameters. A frustum is a geometric form:\n * a pyramid with its top cut off. With the viewer's\n * eye at the imaginary top of the pyramid, the six\n * planes of the frustum act as clipping planes when\n * rendering a 3D view. Thus, any form inside the\n * clipping planes is visible; anything outside those\n * planes is not visible.\n \n Setting the frustum changes the perspective of the\n * scene being rendered. This can be achieved more\n * simply in many cases by using perspective().\n \n If no parameters are given, the following default\n * is used: frustum(-width/20, width/20, height/20,\n * -height/20, eyeZ/10, eyeZ10), where eyeZ is equal\n to ((height/2) / tan(PI/6)).\n * @param [left] camera frustum left plane\n * @param [right] camera frustum right plane\n * @param [bottom] camera frustum bottom plane\n * @param [top] camera frustum top plane\n * @param [near] camera frustum near plane\n * @param [far] camera frustum far plane\n * @chainable\n /\n frustum(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): p5;\n\n /\n Creates a new p5.Camera object and sets it as the\n * current (active) camera. The new camera is\n * initialized with a default position (see camera())\n * and a default perspective projection (see\n * perspective()). Its properties can be controlled\n * with the p5.Camera methods.\n \n Note: Every 3D sketch starts with a default camera\n * initialized. This camera can be controlled with\n * the global methods camera(), perspective(),\n * ortho(), and frustum() if it is the only camera in\n * the scene.\n * @return The newly created camera object.\n /\n createCamera(): Camera;\n\n /\n Sets the current (active) camera of a 3D sketch.\n * Allows for switching between multiple cameras.\n * @param cam p5.Camera object\n /\n setCamera(cam: Camera): void;\n\n/\n Sets the normal to use for subsequent vertices.\n * @chainable\n /\n vertexNormal(x: number, y: number, z: number, v: Vector): p5;\n\n/\n Set attributes for the WebGL Drawing context. This\n * is a way of adjusting how the WebGL renderer works\n * to fine-tune the display and performance. Note\n * that this will reinitialize the drawing context if\n * called after the WebGL canvas is made.\n \n If an object is passed as the parameter, all\n * attributes not declared in the object will be set\n * to defaults.\n \n The available attributes are:\n \n alpha - indicates if the canvas contains an alpha\n * buffer default is true\n \n depth - indicates whether the drawing buffer has a\n * depth buffer of at least 16 bits - default is true\n \n stencil - indicates whether the drawing buffer has\n * a stencil buffer of at least 8 bits\n \n antialias - indicates whether or not to perform\n * anti-aliasing default is false (true in Safari)\n \n premultipliedAlpha - indicates that the page\n * compositor will assume the drawing buffer contains\n * colors with pre-multiplied alpha default is true\n \n preserveDrawingBuffer - if true the buffers will\n * not be cleared and and will preserve their values\n * until cleared or overwritten by author (note that\n * p5 clears automatically on draw loop) default is\n * true\n \n perPixelLighting - if true, per-pixel lighting\n * will be used in the lighting shader otherwise\n * per-vertex lighting is used. default is true.\n \n version - either 1 or 2, to specify which WebGL\n * version to ask for. By default, WebGL 2 will be\n * requested. If WebGL2 is not available, it will\n * fall back to WebGL 1. You can check what version\n * is used with by looking at the global webglVersion\n * property.\n * @param key Name of attribute\n * @param value New value of named attribute\n /\n setAttributes(key: string, value: boolean): void;\n\n /\n Set attributes for the WebGL Drawing context. This\n * is a way of adjusting how the WebGL renderer works\n * to fine-tune the display and performance. Note\n * that this will reinitialize the drawing context if\n * called after the WebGL canvas is made.\n \n If an object is passed as the parameter, all\n * attributes not declared in the object will be set\n * to defaults.\n \n The available attributes are:\n \n alpha - indicates if the canvas contains an alpha\n * buffer default is true\n \n depth - indicates whether the drawing buffer has a\n * depth buffer of at least 16 bits - default is true\n \n stencil - indicates whether the drawing buffer has\n * a stencil buffer of at least 8 bits\n \n antialias - indicates whether or not to perform\n * anti-aliasing default is false (true in Safari)\n \n premultipliedAlpha - indicates that the page\n * compositor will assume the drawing buffer contains\n * colors with pre-multiplied alpha default is true\n \n preserveDrawingBuffer - if true the buffers will\n * not be cleared and and will preserve their values\n * until cleared or overwritten by author (note that\n * p5 clears automatically on draw loop) default is\n * true\n \n perPixelLighting - if true, per-pixel lighting\n * will be used in the lighting shader otherwise\n * per-vertex lighting is used. default is true.\n \n version - either 1 or 2, to specify which WebGL\n * version to ask for. By default, WebGL 2 will be\n * requested. If WebGL2 is not available, it will\n * fall back to WebGL 1. You can check what version\n * is used with by looking at the global webglVersion\n * property.\n * @param obj object with key-value pairs\n /\n setAttributes(obj: object): void;\n}\n\nnamespace p5 {\n type UNKNOWN_P5_CONSTANT = any;\nclass Color {\n // TODO: Fix p5.Color() errors in src/color/p5.Color.js, line 318:\n //\n // required param \"vals\" follows an optional param\n //\n // constructor(pInst?: p5, vals: number[]\|string);\n\n /\n Returns the color formatted as a string. Doing so\n * can be useful for debugging, or for using p5.js\n * with other libraries.\n * @param [format] how the color string will be\n * formatted. Leaving this empty formats the string\n * as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and\n * '#rrggbbaa' format as hexadecimal color codes.\n * 'rgb' 'hsb' and 'hsl' return the color formatted\n * in the specified color mode. 'rgba' 'hsba' and\n * 'hsla' are the same as above but with alpha\n * channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and\n * 'hsla%' format as percentages.\n * @return the formatted string.\n /\n toString(format?: string): string;\n\n /\n Sets the red component of a color. The range\n * depends on the colorMode(). In the default RGB\n * mode it's between 0 and 255.\n * @param red the new red value.\n /\n setRed(red: number): void;\n\n /\n Sets the green component of a color. The range\n * depends on the colorMode(). In the default RGB\n * mode it's between 0 and 255.\n * @param green the new green value.\n /\n setGreen(green: number): void;\n\n /\n Sets the blue component of a color. The range\n * depends on the colorMode(). In the default RGB\n * mode it's between 0 and 255.\n * @param blue the new blue value.\n /\n setBlue(blue: number): void;\n\n /\n Sets the alpha (transparency) value of a color.\n * The range depends on the colorMode(). In the\n * default RGB mode it's between 0 and 255.\n * @param alpha the new alpha value.\n /\n setAlpha(alpha: number): void;\n }\n\nclass Element {\n /\n Base class for all elements added to a sketch,\n * including canvas, graphics buffers, and other HTML\n * elements. It is not called directly, but\n * p5.Element objects are created by calling\n * createCanvas(), createGraphics(), createDiv(),\n * createImg(), createInput(), etc.\n \n @param elt DOM node that is wrapped\n * @param [pInst] pointer to p5 instance\n /\n constructor(elt: HTMLElement, pInst?: p5);\n\n /\n Attaches the element to the parent specified. A\n * way of setting the container for the element.\n * Accepts either a string ID, DOM node, or\n * p5.Element. If no arguments are given, parent node\n * is returned. For more ways to position the canvas,\n * see the positioning the canvas wiki page.\n * @param parent the ID, DOM node, or p5.Element of\n * desired parent element\n * @chainable\n /\n parent(parent: string \| Element \| object): Element;\n\n /\n Attaches the element to the parent specified. A\n * way of setting the container for the element.\n * Accepts either a string ID, DOM node, or\n * p5.Element. If no arguments are given, parent node\n * is returned. For more ways to position the canvas,\n * see the positioning the canvas wiki page.\n /\n parent(): Element;\n\n /\n Sets the ID of the element. If no ID argument is\n * passed in, it instead returns the current ID of\n * the element. Note that only one element can have a\n * particular id in a page. The class() method can be\n * used to identify multiple elements with the same\n * class name.\n * @param id ID of the element\n * @chainable\n /\n id(id: string): Element;\n\n /\n Sets the ID of the element. If no ID argument is\n * passed in, it instead returns the current ID of\n * the element. Note that only one element can have a\n * particular id in a page. The class() method can be\n * used to identify multiple elements with the same\n * class name.\n * @return the id of the element\n /\n id(): string;\n\n /\n Adds given class to the element. If no class\n * argument is passed in, it instead returns a string\n * containing the current class(es) of the element.\n * @param class class to add\n * @chainable\n /\n class(theClass: string): Element;\n\n /\n Adds given class to the element. If no class\n * argument is passed in, it instead returns a string\n * containing the current class(es) of the element.\n * @return the class of the element\n /\n class(): string;\n\n /\n The mousePressed() method is called once after\n * every time a mouse button is pressed over the\n * element. Some mobile browsers may also trigger\n * this event on a touch screen, if the user performs\n * a quick tap. This can be used to attach\n * element-specific event listeners.\n * @param fxn function to be fired when mouse is\n * pressed over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mousePressed(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The doubleClicked() method is called once after\n * every time a mouse button is pressed twice over\n * the element. This can be used to attach element\n * and action-specific event listeners.\n * @param fxn function to be fired when mouse is\n * double clicked over the element. if false is\n * passed instead, the previously firing function\n * will no longer fire.\n * @chainable\n /\n doubleClicked(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseWheel() method is called once after every\n * time a mouse wheel is scrolled over the element.\n * This can be used to attach element-specific event\n * listeners. The method accepts a callback function\n * as argument which will be executed when the wheel\n * event is triggered on the element, the callback\n * function is passed one argument event. The\n * event.deltaY property returns negative values if\n * the mouse wheel is rotated up or away from the\n * user and positive in the other direction. The\n * event.deltaX does the same as event.deltaY except\n * it reads the horizontal wheel scroll of the mouse\n * wheel.\n \n On macOS with \"natural\" scrolling enabled, the\n * event.deltaY values are reversed.\n * @param fxn function to be fired when mouse is\n * scrolled over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mouseWheel(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseReleased() method is called once after\n * every time a mouse button is released over the\n * element. Some mobile browsers may also trigger\n * this event on a touch screen, if the user performs\n * a quick tap. This can be used to attach\n * element-specific event listeners.\n * @param fxn function to be fired when mouse is\n * released over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mouseReleased(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseClicked() method is called once after a\n * mouse button is pressed and released over the\n * element. Some mobile browsers may also trigger\n * this event on a touch screen, if the user performs\n * a quick tap. This can be used to attach\n * element-specific event listeners.\n * @param fxn function to be fired when mouse is\n * clicked over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n mouseClicked(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseMoved() method is called once every time\n * a mouse moves over the element. This can be used\n * to attach an element-specific event listener.\n * @param fxn function to be fired when a mouse moves\n * over the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n mouseMoved(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseOver() method is called once after every\n * time a mouse moves onto the element. This can be\n * used to attach an element-specific event listener.\n * @param fxn function to be fired when a mouse moves\n * onto the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n mouseOver(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The mouseOut() method is called once after every\n * time a mouse moves off the element. This can be\n * used to attach an element-specific event listener.\n * @param fxn function to be fired when a mouse moves\n * off of an element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n mouseOut(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The touchStarted() method is called once after\n * every time a touch is registered. This can be used\n * to attach element-specific event listeners.\n * @param fxn function to be fired when a touch\n * starts over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n touchStarted(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The touchMoved() method is called once after every\n * time a touch move is registered. This can be used\n * to attach element-specific event listeners.\n * @param fxn function to be fired when a touch moves\n * over the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n touchMoved(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The touchEnded() method is called once after every\n * time a touch is registered. This can be used to\n * attach element-specific event listeners.\n * @param fxn function to be fired when a touch ends\n * over the element. if false is passed instead, the\n * previously firing function will no longer fire.\n * @chainable\n /\n touchEnded(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The dragOver() method is called once after every\n * time a file is dragged over the element. This can\n * be used to attach an element-specific event\n * listener.\n * @param fxn function to be fired when a file is\n * dragged over the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n dragOver(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n The dragLeave() method is called once after every\n * time a dragged file leaves the element area. This\n * can be used to attach an element-specific event\n * listener.\n * @param fxn function to be fired when a file is\n * dragged off the element. if false is passed\n * instead, the previously firing function will no\n * longer fire.\n * @chainable\n /\n dragLeave(fxn: ((...args: any[]) => any) \| boolean): Element;\n\n /\n Underlying HTML element. All normal HTML methods\n * can be called on this.\n /\n elt: any;\n width: any;\n height: any;\n }\n\n// Work-around for p5.Graphics inheriting from both p5 and p5.Element\n class __Graphics__ extends Element {\n /\n Thin wrapper around a renderer, to be used for\n * creating a graphics buffer object. Use this class\n * if you need to draw into an off-screen graphics\n * buffer. The two parameters define the width and\n * height in pixels. The fields and methods for this\n * class are extensive, but mirror the normal drawing\n * API for p5.\n \n @param w width\n * @param h height\n * @param renderer the renderer to use, either P2D or\n * WEBGL\n * @param [pInst] pointer to p5 instance\n * @param [canvas] existing html canvas element\n /\n constructor(w: number, h: number, renderer: GRAPHICS_RENDERER, pInst?: p5, canvas?: object);\n\n /\n Resets certain values such as those modified by\n * functions in the Transform category and in the\n * Lights category that are not automatically reset\n * with graphics buffer objects. Calling this in\n * draw() will copy the behavior of the standard\n * canvas.\n /\n reset(): void;\n\n /\n Removes a Graphics object from the page and frees\n * any resources associated with it.\n /\n remove(): void;\n\n /\n Creates and returns a new p5.Framebuffer inside a\n * p5.Graphics WebGL context. This takes the same\n * parameters as the global createFramebuffer\n * function.\n /\n createFramebuffer(): void;\n }\n // Work-around for p5.Graphics inheriting from both p5 and p5.Element\n type Graphics = __Graphics__ & p5;\n\nclass Image {\n /\n Creates a new p5.Image. A p5.Image is a canvas\n * backed representation of an image. p5 can display\n * .gif, .jpg and .png images. Images may be\n * displayed in 2D and 3D space. Before an image is\n * used, it must be loaded with the loadImage()\n * function. The p5.Image class contains fields for\n * the width and height of the image, as well as an\n * array called pixels[] that contains the values for\n * every pixel in the image.\n \n The methods described below allow easy access to\n * the image's pixels and alpha channel and simplify\n * the process of compositing.\n \n Before using the pixels[] array, be sure to use\n * the loadPixels() method on the image to make sure\n * that the pixel data is properly loaded.\n \n /\n constructor(width: number, height: number);\n\n /*\n Loads the pixels data for this image into the\n * [pixels] attribute.\n /\n loadPixels(): void;\n\n /\n Updates the backing canvas for this image with the\n * contents of the [pixels] array. If this image is\n * an animated GIF then the pixels will be updated in\n * the frame that is currently displayed.\n * @param x x-offset of the target update area for\n * the underlying canvas\n * @param y y-offset of the target update area for\n * the underlying canvas\n * @param w width of the target update area for the\n * underlying canvas\n * @param h height of the target update area for the\n * underlying canvas\n /\n updatePixels(x: number, y: number, w: number, h: number): void;\n\n /\n Updates the backing canvas for this image with the\n * contents of the [pixels] array. If this image is\n * an animated GIF then the pixels will be updated in\n * the frame that is currently displayed.\n /\n updatePixels(): void;\n\n /\n Get a region of pixels from an image. If no params\n * are passed, the whole image is returned. If x and\n * y are the only params passed a single pixel is\n * extracted. If all params are passed a rectangle\n * region is extracted and a p5.Image is returned.\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param w width\n * @param h height\n * @return the rectangle p5.Image\n /\n get(x: number, y: number, w: number, h: number): Image;\n\n /\n Get a region of pixels from an image. If no params\n * are passed, the whole image is returned. If x and\n * y are the only params passed a single pixel is\n * extracted. If all params are passed a rectangle\n * region is extracted and a p5.Image is returned.\n * @return the whole p5.Image\n /\n get(): Image;\n\n /\n Get a region of pixels from an image. If no params\n * are passed, the whole image is returned. If x and\n * y are the only params passed a single pixel is\n * extracted. If all params are passed a rectangle\n * region is extracted and a p5.Image is returned.\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @return color of pixel at x,y in array format [R,\n * G, B, A]\n /\n get(x: number, y: number): number[];\n\n /\n Set the color of a single pixel or write an image\n * into this p5.Image. Note that for a large number\n * of pixels this will be slower than directly\n * manipulating the pixels array and then calling\n * updatePixels().\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param a grayscale value \| pixel array \| a\n * p5.Color \| image to copy\n /\n set(x: number, y: number, a: number \| number[] \| object): void;\n\n /\n Resize the image to a new width and height. To\n * make the image scale proportionally, use 0 as the\n * value for the wide or high parameter. For\n * instance, to make the width of an image 150\n * pixels, and change the height using the same\n * proportion, use resize(150, 0).\n * @param width the resized image width\n * @param height the resized image height\n /\n resize(width: number, height: number): void;\n\n /\n Copies a region of pixels from one image to\n * another. If no srcImage is specified this is used\n * as the source. If the source and destination\n * regions aren't the same size, it will\n * automatically resize source pixels to fit the\n * specified target region.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(\n srcImage: Image \| Element,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number\n ): void;\n\n /\n Copies a region of pixels from one image to\n * another. If no srcImage is specified this is used\n * as the source. If the source and destination\n * regions aren't the same size, it will\n * automatically resize source pixels to fit the\n * specified target region.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n /\n copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;\n\n /\n Masks part of an image from displaying by loading\n * another image and using its alpha channel as an\n * alpha channel for this image. Masks are\n * cumulative, once applied to an image object, they\n * cannot be removed.\n * @param srcImage source image\n /\n mask(srcImage: Image): void;\n\n /\n Applies an image filter to a p5.Image THRESHOLD\n * Converts the image to black and white pixels\n * depending if they are above or below the threshold\n * defined by the level parameter. The parameter must\n * be between 0.0 (black) and 1.0 (white). If no\n * level is specified, 0.5 is used.\n \n GRAY Converts any colors in the image to grayscale\n * equivalents. No parameter is used.\n \n OPAQUE Sets the alpha channel to entirely opaque.\n * No parameter is used.\n \n INVERT Sets each pixel to its inverse value. No\n * parameter is used.\n \n POSTERIZE Limits each channel of the image to the\n * number of colors specified as the parameter. The\n * parameter can be set to values between 2 and 255,\n * but results are most noticeable in the lower\n * ranges.\n \n BLUR Executes a Gaussian blur with the level\n * parameter specifying the extent of the blurring.\n * If no parameter is used, the blur is equivalent to\n * Gaussian blur of radius 1. Larger values increase\n * the blur.\n \n ERODE Reduces the light areas. No parameter is\n * used.\n \n DILATE Increases the light areas. No parameter is\n * used.\n \n filter() does not work in WEBGL mode. A similar\n * effect can be achieved in WEBGL mode using custom\n * shaders. Adam Ferriss has written a selection of\n * shader examples that contains many of the effects\n * present in the filter examples.\n * @param filterType either THRESHOLD, GRAY, OPAQUE,\n * INVERT, POSTERIZE, ERODE, DILATE or BLUR. See\n * Filters.js for docs on each available filter\n * @param [filterParam] an optional parameter unique\n * to each filter, see above\n /\n filter(filterType: FILTER_TYPE, filterParam?: number): void;\n\n /\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param srcImage source image\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n \n Available blend modes are: normal \| multiply \|\n * screen \| overlay \| darken \| lighten \| color-dodge\n * \| color-burn \| hard-light \| soft-light \|\n * difference \| exclusion \| hue \| saturation \| color\n * \| luminosity\n \n http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\n /\n blend(\n srcImage: Image,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: BLEND_MODE\n ): void;\n\n /\n Copies a region of pixels from one image to\n * another, using a specified blend mode to do the\n * operation.\n * @param sx X coordinate of the source's upper left\n * corner\n * @param sy Y coordinate of the source's upper left\n * corner\n * @param sw source image width\n * @param sh source image height\n * @param dx X coordinate of the destination's upper\n * left corner\n * @param dy Y coordinate of the destination's upper\n * left corner\n * @param dw destination image width\n * @param dh destination image height\n * @param blendMode the blend mode. either BLEND,\n * DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.\n \n Available blend modes are: normal \| multiply \|\n * screen \| overlay \| darken \| lighten \| color-dodge\n * \| color-burn \| hard-light \| soft-light \|\n * difference \| exclusion \| hue \| saturation \| color\n * \| luminosity\n \n http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\n /\n blend(\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n blendMode: UNKNOWN_P5_CONSTANT\n ): void;\n\n /\n Saves the image to a file and force the browser to\n * download it. Accepts two strings for filename and\n * file extension Supports png (default), jpg, and\n * gif Note that the file will only be downloaded as\n * an animated GIF if the p5.Image was loaded from a\n * GIF file.\n * @param filename give your file a name\n * @param extension 'png' or 'jpg'\n /\n save(filename: string, extension: string): void;\n\n /\n Starts an animated GIF over at the beginning\n * state.\n /\n reset(): void;\n\n /\n Gets the index for the frame that is currently\n * visible in an animated GIF.\n * @return The index for the currently displaying\n * frame in animated GIF\n /\n getCurrentFrame(): number;\n\n /\n Sets the index of the frame that is currently\n * visible in an animated GIF\n * @param index the index for the frame that should\n * be displayed\n /\n setFrame(index: number): void;\n\n /\n Returns the number of frames in an animated GIF\n /\n numFrames(): number;\n\n /\n Plays an animated GIF that was paused with pause()\n /\n play(): void;\n\n /\n Pauses an animated GIF.\n /\n pause(): void;\n\n /\n Changes the delay between frames in an animated\n * GIF. There is an optional second parameter that\n * indicates an index for a specific frame that\n * should have its delay modified. If no index is\n * given, all frames will have the new delay.\n * @param d the amount in milliseconds to delay\n * between switching frames\n * @param [index] the index of the frame that should\n * have the new delay value {optional}\n /\n delay(d: number, index?: number): void;\n\n /\n Image width.\n /\n width: number;\n\n /\n Image height.\n /\n height: number;\n\n /\n Array containing the values for all the pixels in\n * the display window. These values are numbers. This\n * array is the size (include an appropriate factor\n * for pixelDensity) of the display window x4,\n * representing the R, G, B, A values in order for\n * each pixel, moving from left to right across each\n * row, then down each column. Retina and other high\n * density displays may have more pixels (by a factor\n * of pixelDensity^2). For example, if the image is\n * 100×100 pixels, there will be 40,000. With\n * pixelDensity = 2, there will be 160,000. The first\n * four values (indices 0-3) in the array will be the\n * R, G, B, A values of the pixel at (0, 0). The\n * second four values (indices 4-7) will contain the\n * R, G, B, A values of the pixel at (1, 0). More\n * generally, to set values for a pixel at (x, y):\n * let d = pixelDensity(); for (let i = 0; i < d;\n * i++) { for (let j = 0; j < d; j++) { // loop over\n * index = 4 * ((y * d + j) * width * d + (x * d +\n * i)); pixels[index] = r; pixels[index+1] = g;\n * pixels[index+2] = b; pixels[index+3] = a; } }\n \n Before accessing this array, the data must loaded\n * with the loadPixels() function. After the array\n * data has been modified, the updatePixels()\n * function must be run to update the changes.\n /\n pixels: number[];\n }\n\nclass Table {\n /\n Table objects store data with multiple rows and\n * columns, much like in a traditional spreadsheet.\n * Tables can be generated from scratch, dynamically,\n * or using data from an existing file.\n \n @param [rows] An array of p5.TableRow objects\n /\n constructor(rows?: TableRow[]);\n\n /\n Use addRow() to add a new row of data to a\n * p5.Table object. By default, an empty row is\n * created. Typically, you would store a reference to\n * the new row in a TableRow object (see newRow in\n * the example above), and then set individual values\n * using set(). If a p5.TableRow object is included\n * as a parameter, then that row is duplicated and\n * added to the table.\n * @param [row] row to be added to the table\n * @return the row that was added\n /\n addRow(row?: TableRow): TableRow;\n\n /\n Removes a row from the table object.\n * @param id ID number of the row to remove\n /\n removeRow(id: number): void;\n\n /\n Returns a reference to the specified p5.TableRow.\n * The reference can then be used to get and set\n * values of the selected row.\n * @param rowID ID number of the row to get\n * @return p5.TableRow object\n /\n getRow(rowID: number): TableRow;\n\n /\n Gets all rows from the table. Returns an array of\n * p5.TableRows.\n * @return Array of p5.TableRows\n /\n getRows(): TableRow[];\n\n /\n Finds the first row in the Table that contains the\n * value provided, and returns a reference to that\n * row. Even if multiple rows are possible matches,\n * only the first matching row is returned. The\n * column to search may be specified by either its ID\n * or title.\n * @param value The value to match\n * @param column ID number or title of the column to\n * search\n /\n findRow(value: string, column: number \| string): TableRow;\n\n /\n Finds the rows in the Table that contain the value\n * provided, and returns references to those rows.\n * Returns an Array, so for must be used to iterate\n * through all the rows, as shown in the example\n * above. The column to search may be specified by\n * either its ID or title.\n * @param value The value to match\n * @param column ID number or title of the column to\n * search\n * @return An Array of TableRow objects\n /\n findRows(value: string, column: number \| string): TableRow[];\n\n /\n Finds the first row in the Table that matches the\n * regular expression provided, and returns a\n * reference to that row. Even if multiple rows are\n * possible matches, only the first matching row is\n * returned. The column to search may be specified by\n * either its ID or title.\n * @param regexp The regular expression to match\n * @param column The column ID (number) or title\n * (string)\n * @return TableRow object\n /\n matchRow(regexp: string \| RegExp, column: string \| number): TableRow;\n\n /\n Finds the rows in the Table that match the regular\n * expression provided, and returns references to\n * those rows. Returns an array, so for must be used\n * to iterate through all the rows, as shown in the\n * example. The column to search may be specified by\n * either its ID or title.\n * @param regexp The regular expression to match\n * @param [column] The column ID (number) or title\n * (string)\n * @return An Array of TableRow objects\n /\n matchRows(regexp: string, column?: string \| number): TableRow[];\n\n /\n Retrieves all values in the specified column, and\n * returns them as an array. The column may be\n * specified by either its ID or title.\n * @param column String or Number of the column to\n * return\n * @return Array of column values\n /\n getColumn(column: string \| number): any[];\n\n /\n Removes all rows from a Table. While all rows are\n * removed, columns and column titles are maintained.\n /\n clearRows(): void;\n\n /\n Use addColumn() to add a new column to a Table\n * object. Typically, you will want to specify a\n * title, so the column may be easily referenced\n * later by name. (If no title is specified, the new\n * column's title will be null.)\n * @param [title] title of the given column\n /\n addColumn(title?: string): void;\n\n /\n Returns the total number of columns in a Table.\n * @return Number of columns in this table\n /\n getColumnCount(): number;\n\n /\n Returns the total number of rows in a Table.\n * @return Number of rows in this table\n /\n getRowCount(): number;\n\n /\n Removes any of the specified characters (or\n * \"tokens\"). If no column is specified, then the\n * values in all columns and rows are processed. A\n * specific column may be referenced by either its ID\n * or title.\n * @param chars String listing characters to be\n * removed\n * @param [column] Column ID (number) or name\n * (string)\n /\n removeTokens(chars: string, column?: string \| number): void;\n\n /\n Trims leading and trailing whitespace, such as\n * spaces and tabs, from String table values. If no\n * column is specified, then the values in all\n * columns and rows are trimmed. A specific column\n * may be referenced by either its ID or title.\n * @param [column] Column ID (number) or name\n * (string)\n /\n trim(column?: string \| number): void;\n\n /\n Use removeColumn() to remove an existing column\n * from a Table object. The column to be removed may\n * be identified by either its title (a String) or\n * its index value (an int). removeColumn(0) would\n * remove the first column, removeColumn(1) would\n * remove the second column, and so on.\n * @param column columnName (string) or ID (number)\n /\n removeColumn(column: string \| number): void;\n\n /\n Stores a value in the Table's specified row and\n * column. The row is specified by its ID, while the\n * column may be specified by either its ID or title.\n * @param row row ID\n * @param column column ID (Number) or title (String)\n * @param value value to assign\n /\n set(row: number, column: string \| number, value: string \| number): void;\n\n /\n Stores a Float value in the Table's specified row\n * and column. The row is specified by its ID, while\n * the column may be specified by either its ID or\n * title.\n * @param row row ID\n * @param column column ID (Number) or title (String)\n * @param value value to assign\n /\n setNum(row: number, column: string \| number, value: number): void;\n\n /\n Stores a String value in the Table's specified row\n * and column. The row is specified by its ID, while\n * the column may be specified by either its ID or\n * title.\n * @param row row ID\n * @param column column ID (Number) or title (String)\n * @param value value to assign\n /\n setString(row: number, column: string \| number, value: string): void;\n\n /\n Retrieves a value from the Table's specified row\n * and column. The row is specified by its ID, while\n * the column may be specified by either its ID or\n * title.\n * @param row row ID\n * @param column columnName (string) or ID (number)\n /\n get(row: number, column: string \| number): string \| number;\n\n /\n Retrieves a Float value from the Table's specified\n * row and column. The row is specified by its ID,\n * while the column may be specified by either its ID\n * or title.\n * @param row row ID\n * @param column columnName (string) or ID (number)\n /\n getNum(row: number, column: string \| number): number;\n\n /\n Retrieves a String value from the Table's\n * specified row and column. The row is specified by\n * its ID, while the column may be specified by\n * either its ID or title.\n * @param row row ID\n * @param column columnName (string) or ID (number)\n /\n getString(row: number, column: string \| number): string;\n\n /\n Retrieves all table data and returns as an object.\n * If a column name is passed in, each row object\n * will be stored with that attribute as its title.\n * @param [headerColumn] Name of the column which\n * should be used to title each row object (optional)\n /\n getObject(headerColumn?: string): object;\n\n /\n Retrieves all table data and returns it as a\n * multidimensional array.\n /\n getArray(): any[];\n\n /\n An array containing the names of the columns in\n * the table, if the \"header\" the table is loaded\n * with the \"header\" parameter.\n /\n columns: string[];\n\n /\n An array containing the p5.TableRow objects that\n * make up the rows of the table. The same result as\n * calling getRows()\n /\n rows: TableRow[];\n }\n\nclass TableRow {\n /\n A TableRow object represents a single row of data\n * values, stored in columns, from a table. A Table\n * Row contains both an ordered array, and an\n * unordered JSON object.\n \n @param [str] optional: populate the row with a\n * string of values, separated by the separator\n * @param [separator] comma separated values (csv) by\n * default\n /\n constructor(str?: string, separator?: string);\n\n /\n Stores a value in the TableRow's specified column.\n * The column may be specified by either its ID or\n * title.\n * @param column Column ID (Number) or Title (String)\n * @param value The value to be stored\n /\n set(column: string \| number, value: string \| number): void;\n\n /\n Stores a Float value in the TableRow's specified\n * column. The column may be specified by either its\n * ID or title.\n * @param column Column ID (Number) or Title (String)\n * @param value The value to be stored as a Float\n /\n setNum(column: string \| number, value: number \| string): void;\n\n /\n Stores a String value in the TableRow's specified\n * column. The column may be specified by either its\n * ID or title.\n * @param column Column ID (Number) or Title (String)\n * @param value The value to be stored as a String\n /\n setString(column: string \| number, value: string \| number \| boolean \| object): void;\n\n /\n Retrieves a value from the TableRow's specified\n * column. The column may be specified by either its\n * ID or title.\n * @param column columnName (string) or ID (number)\n /\n get(column: string \| number): string \| number;\n\n /\n Retrieves a Float value from the TableRow's\n * specified column. The column may be specified by\n * either its ID or title.\n * @param column columnName (string) or ID (number)\n * @return Float Floating point number\n /\n getNum(column: string \| number): number;\n\n /\n Retrieves an String value from the TableRow's\n * specified column. The column may be specified by\n * either its ID or title.\n * @param column columnName (string) or ID (number)\n * @return String\n /\n getString(column: string \| number): string;\n }\n\nclass XML {\n /\n XML is a representation of an XML object, able to\n * parse XML code. Use loadXML() to load external XML\n * files and create XML objects.\n \n /\n constructor();\n\n /*\n Gets a copy of the element's parent. Returns the\n * parent as another p5.XML object.\n * @return element parent\n /\n getParent(): XML;\n\n /\n Gets the element's full name, which is returned as\n * a String.\n * @return the name of the node\n /\n getName(): string;\n\n /\n Sets the element's name, which is specified as a\n * String.\n * @param the new name of the node\n /\n setName(the: string): void;\n\n /\n Checks whether or not the element has any\n * children, and returns the result as a boolean.\n /\n hasChildren(): boolean;\n\n /\n Get the names of all of the element's children,\n * and returns the names as an array of Strings. This\n * is the same as looping through and calling\n * getName() on each child element individually.\n * @return names of the children of the element\n /\n listChildren(): string[];\n\n /\n Returns all of the element's children as an array\n * of p5.XML objects. When the name parameter is\n * specified, then it will return all children that\n * match that name.\n * @param [name] element name\n * @return children of the element\n /\n getChildren(name?: string): XML[];\n\n /\n Returns the first of the element's children that\n * matches the name parameter or the child of the\n * given index.It returns undefined if no matching\n * child is found.\n * @param name element name or index\n /\n getChild(name: string \| number): XML;\n\n /\n Appends a new child to the element. The child can\n * be specified with either a String, which will be\n * used as the new tag's name, or as a reference to\n * an existing p5.XML object. A reference to the\n * newly created child is returned as an p5.XML\n * object.\n * @param node a p5.XML Object which will be the\n * child to be added\n /\n addChild(node: XML): void;\n\n /\n Removes the element specified by name or index.\n * @param name element name or index\n /\n removeChild(name: string \| number): void;\n\n /\n Counts the specified element's number of\n * attributes, returned as an Number.\n /\n getAttributeCount(): number;\n\n /\n Gets all of the specified element's attributes,\n * and returns them as an array of Strings.\n * @return an array of strings containing the names\n * of attributes\n /\n listAttributes(): string[];\n\n /\n Checks whether or not an element has the specified\n * attribute.\n * @param the attribute to be checked\n * @return true if attribute found else false\n /\n hasAttribute(the: string): boolean;\n\n /\n Returns an attribute value of the element as an\n * Number. If the defaultValue parameter is specified\n * and the attribute doesn't exist, then defaultValue\n * is returned. If no defaultValue is specified and\n * the attribute doesn't exist, the value 0 is\n * returned.\n * @param name the non-null full name of the\n * attribute\n * @param [defaultValue] the default value of the\n * attribute\n /\n getNum(name: string, defaultValue?: number): number;\n\n /\n Returns an attribute value of the element as an\n * String. If the defaultValue parameter is specified\n * and the attribute doesn't exist, then defaultValue\n * is returned. If no defaultValue is specified and\n * the attribute doesn't exist, null is returned.\n * @param name the non-null full name of the\n * attribute\n * @param [defaultValue] the default value of the\n * attribute\n /\n getString(name: string, defaultValue?: number): string;\n\n /\n Sets the content of an element's attribute. The\n * first parameter specifies the attribute name,\n * while the second specifies the new content.\n * @param name the full name of the attribute\n * @param value the value of the attribute\n /\n setAttribute(name: string, value: number \| string \| boolean): void;\n\n /\n Returns the content of an element. If there is no\n * such content, defaultValue is returned if\n * specified, otherwise null is returned.\n * @param [defaultValue] value returned if no content\n * is found\n /\n getContent(defaultValue?: string): string;\n\n /\n Sets the element's content.\n * @param text the new content\n /\n setContent(text: string): void;\n\n /\n Serializes the element into a string. This\n * function is useful for preparing the content to be\n * sent over a http request or saved to file.\n * @return Serialized string of the element\n /\n serialize(): string;\n }\n\nclass Vector {\n /\n A class to describe a two or three-dimensional\n * vector, specifically a Euclidean (also known as\n * geometric) vector. A vector is an entity that has\n * both magnitude and direction. The datatype,\n * however, stores the components of the vector (x, y\n * for 2D; or x, y, z for 3D). The magnitude and\n * direction can be accessed via the methods\n * p5.Vector.mag() and heading(). In many of the\n * p5.js examples, you will see p5.Vector used to\n * describe a position, velocity, or acceleration.\n * For example, if you consider a rectangle moving\n * across the screen, at any given instant it has a\n * position (a vector that points from the origin to\n * its location), a velocity (the rate at which the\n * object's position changes per time unit, expressed\n * as a vector), and acceleration (the rate at which\n * the object's velocity changes per time unit,\n * expressed as a vector).\n \n Since vectors represent groupings of values, we\n * cannot simply use traditional\n * addition/multiplication/etc. Instead, we'll need\n * to do some \"vector\" math, which is made easy by\n * the methods inside the p5.Vector class.\n \n @param [x] x component of the vector\n * @param [y] y component of the vector\n * @param [z] z component of the vector\n /\n constructor(x?: number, y?: number, z?: number);\n\n /\n Gets a copy of the vector, returns a p5.Vector\n * object.\n * @param v the p5.Vector to create a copy of\n * @return the copy of the p5.Vector object\n /\n static copy(v: Vector): Vector;\n\n /\n Adds x, y, and z components to a vector, adds one\n * vector to another, or adds two independent vectors\n * together. The version of the method that adds two\n * vectors together is a static method and returns a\n * p5.Vector, the others act directly on the vector.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param v1 A p5.Vector to add\n * @param v2 A p5.Vector to add\n * @param [target] The vector to receive the result\n * @return The resulting p5.Vector\n /\n static add(v1: Vector, v2: Vector, target?: Vector): Vector;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param v1 The dividend p5.Vector\n * @param v2 The divisor p5.Vector\n /\n static rem(v1: Vector, v2: Vector): void;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param v1 The dividend p5.Vector\n * @param v2 The divisor p5.Vector\n * @return The resulting p5.Vector\n /\n static rem(v1: Vector, v2: Vector): Vector;\n\n /\n Subtracts x, y, and z components from a vector,\n * subtracts one vector from another, or subtracts\n * two independent vectors. The version of the method\n * that subtracts two vectors is a static method and\n * returns a p5.Vector, the others act directly on\n * the vector. Additionally, you may provide\n * arguments to this method as an array. See the\n * examples for more context.\n * @param v1 A p5.Vector to subtract from\n * @param v2 A p5.Vector to subtract\n * @param [target] The vector to receive the result\n * @return The resulting p5.Vector\n /\n static sub(v1: Vector, v2: Vector, target?: Vector): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param x The number to multiply with the x\n * component of the vector\n * @param y The number to multiply with the y\n * component of the vector\n * @param [z] The number to multiply with the z\n * component of the vector\n * @return The resulting new p5.Vector\n /\n static mult(x: number, y: number, z?: number): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param v The vector to multiply with the\n * components of the original vector\n * @param n The number to multiply with the vector\n * @param [target] the vector to receive the result\n /\n static mult(v: Vector, n: number, target?: Vector): void;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param [target] the vector to receive the result\n /\n static mult(v0: Vector, v1: Vector, target?: Vector): void;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param arr The array to multiply with the\n * components of the vector\n * @param [target] the vector to receive the result\n /\n static mult(v0: Vector, arr: number[], target?: Vector): void;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param x The number to divide with the x component\n * of the vector\n * @param y The number to divide with the y component\n * of the vector\n * @param [z] The number to divide with the z\n * component of the vector\n * @return The resulting new p5.Vector\n /\n static div(x: number, y: number, z?: number): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param v The vector to divide the components of\n * the original vector by\n * @param n The number to divide the vector by\n * @param [target] The vector to receive the result\n /\n static div(v: Vector, n: number, target?: Vector): void;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param [target] The vector to receive the result\n /\n static div(v0: Vector, v1: Vector, target?: Vector): void;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param arr The array to divide the components of\n * the vector by\n * @param [target] The vector to receive the result\n /\n static div(v0: Vector, arr: number[], target?: Vector): void;\n\n /\n Calculates the magnitude (length) of the vector\n * and returns the result as a float. (This is simply\n * the equation sqrt(xx + yy + zz).)\n @param vecT The vector to return the magnitude of\n * @return The magnitude of vecT\n /\n static mag(vecT: Vector): number;\n\n /\n Calculates the squared magnitude of the vector and\n * returns the result as a float. (This is simply the\n * equation xx + yy + zz.) Faster if the real\n length is not required in the case of comparing\n * vectors, etc.\n * @param vecT the vector to return the squared\n * magnitude of\n * @return the squared magnitude of vecT\n /\n static magSq(vecT: Vector): number;\n\n /\n Calculates the dot product of two vectors. The\n * version of the method that computes the dot\n * product of two independent vectors is a static\n * method. See the examples for more context.\n * @param v1 The first p5.Vector\n * @param v2 The second p5.Vector\n * @return The dot product\n /\n static dot(v1: Vector, v2: Vector): number;\n\n /\n Calculates and returns a vector composed of the\n * cross product between two vectors. Both the static\n * and non-static methods return a new p5.Vector. See\n * the examples for more context.\n * @param v1 The first p5.Vector\n * @param v2 The second p5.Vector\n * @return The cross product\n /\n static cross(v1: Vector, v2: Vector): number;\n\n /\n Calculates the Euclidean distance between two\n * points (considering a point as a vector object).\n * If you are looking to calculate distance between 2\n * points see dist()\n * @param v1 The first p5.Vector\n * @param v2 The second p5.Vector\n * @return The distance\n /\n static dist(v1: Vector, v2: Vector): number;\n\n /\n Normalize the vector to length 1 (make it a unit\n * vector).\n * @param v The vector to normalize\n * @param [target] The vector to receive the result\n * @return The vector v, normalized to a length of 1\n /\n static normalize(v: Vector, target?: Vector): Vector;\n\n /\n Limit the magnitude of this vector to the value\n * used for the max parameter.\n * @param v the vector to limit\n * @param max The maximum magnitude for the vector\n * @param [target] the vector to receive the result\n * (Optional)\n * @return v with a magnitude limited to max\n /\n static limit(v: Vector, max: number, target?: Vector): Vector;\n\n /\n Set the magnitude of this vector to the value used\n * for the len parameter.\n * @param v the vector to set the magnitude of\n * @param len The new length for this vector\n * @param [target] the vector to receive the result\n * (Optional)\n * @return v with a magnitude set to len\n /\n static setMag(v: Vector, len: number, target?: Vector): Vector;\n\n /\n Calculate the angle of rotation for this vector\n * (only 2D vectors). p5.Vectors created using\n * createVector() will take the current angleMode()\n * into consideration, and give the angle in radians\n * or degrees accordingly.\n * @param v the vector to find the angle of\n * @return the angle of rotation\n /\n static heading(v: Vector): number;\n\n /\n Rotate the vector by an angle (only 2D vectors);\n * magnitude remains the same.\n * @param angle The angle of rotation\n * @param [target] The vector to receive the result\n /\n static rotate(v: Vector, angle: number, target?: Vector): void;\n\n /\n Calculates and returns the angle between two\n * vectors. This method will take the current\n * angleMode into consideration, and give the angle\n * in radians or degrees accordingly.\n * @param v1 the first vector\n * @param v2 the second vector\n * @return the angle between the two vectors\n /\n static angleBetween(v1: Vector, v2: Vector): number;\n\n /\n Linear interpolate the vector to another vector.\n * @param amt The amount of interpolation; some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @param [target] The vector to receive the result\n * @return The lerped value\n /\n static lerp(v1: Vector, v2: Vector, amt: number, target?: Vector): Vector;\n\n /\n Performs spherical linear interpolation with the\n * other vector and returns the resulting vector.\n * This works in both 3D and 2D. As for 2D, the\n * result of slerping between 2D vectors is always a\n * 2D vector.\n * @param v1 old vector\n * @param v2 new vectpr\n * @param amt The amount of interpolation. some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @param [target] The vector to receive the result\n * @return slerped vector between v1 and v2\n /\n static slerp(v1: Vector, v2: Vector, amt: number, target?: Vector): Vector;\n\n /\n Reflect a vector about a normal to a line in 2D,\n * or about a normal to a plane in 3D.\n * @param incidentVector vector to be reflected\n * @param surfaceNormal the p5.Vector to reflect\n * about.\n * @param [target] the vector to receive the result\n * (Optional)\n * @return the reflected vector\n /\n static reflect(incidentVector: Vector, surfaceNormal: Vector, target?: Vector): Vector;\n\n /\n Return a representation of this vector as a float\n * array. This is only for temporary use. If used in\n * any other fashion, the contents should be copied\n * by using the p5.Vector.copy() method to copy into\n * your own vector.\n * @param v the vector to convert to an array\n * @return an Array with the 3 values\n /\n static array(v: Vector): number[];\n\n /\n Equality check against a p5.Vector.\n * @param v1 the first vector to compare\n * @param v2 the second vector to compare\n /\n static equals(v1: Vector \| any[], v2: Vector \| any[]): boolean;\n\n /\n Make a new 2D vector from an angle.\n * @param angle The desired angle, in radians\n * (unaffected by angleMode)\n * @param [length] The length of the new vector\n * (defaults to 1)\n * @return The new p5.Vector object\n /\n static fromAngle(angle: number, length?: number): Vector;\n\n /\n Make a new 3D vector from a pair of ISO spherical\n * angles.\n * @param theta The polar angle, in radians (zero is\n * up)\n * @param phi The azimuthal angle, in radians (zero\n * is out of the screen)\n * @param [length] The length of the new vector\n * (defaults to 1)\n * @return A new p5.Vector object\n /\n static fromAngles(theta: number, phi: number, length?: number): Vector;\n\n /\n Make a new 2D unit vector from a random angle.\n * @return A new p5.Vector object\n /\n static random2D(): Vector;\n\n /\n Make a new random 3D unit vector.\n * @return A new p5.Vector object\n /\n static random3D(): Vector;\n\n /\n Returns a string representation of a vector v by\n * calling String(v) or v.toString(). This method is\n * useful for logging vectors in the console.\n /\n toString(): string;\n\n /\n Sets the x, y, and z components of the vector\n * using two or three separate variables, the data\n * from a p5.Vector, or the values from a float\n * array.\n * @param [x] The x component of the vector\n * @param [y] The y component of the vector\n * @param [z] The z component of the vector\n * @chainable\n /\n set(x?: number, y?: number, z?: number): Vector;\n\n /\n Sets the x, y, and z components of the vector\n * using two or three separate variables, the data\n * from a p5.Vector, or the values from a float\n * array.\n * @param value The vector to set\n * @chainable\n /\n set(value: Vector \| number[]): Vector;\n\n /\n Gets a copy of the vector, returns a p5.Vector\n * object.\n * @return A copy of the p5.Vector object\n /\n copy(): Vector;\n\n /\n Adds x, y, and z components to a vector, adds one\n * vector to another, or adds two independent vectors\n * together. The version of the method that adds two\n * vectors together is a static method and returns a\n * p5.Vector, the others act directly on the vector.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param x The x component of the vector to be added\n * @param [y] The y component of the vector to be\n * added\n * @param [z] The z component of the vector to be\n * added\n * @chainable\n /\n add(x: number, y?: number, z?: number): Vector;\n\n /\n Adds x, y, and z components to a vector, adds one\n * vector to another, or adds two independent vectors\n * together. The version of the method that adds two\n * vectors together is a static method and returns a\n * p5.Vector, the others act directly on the vector.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param value The vector to add\n * @chainable\n /\n add(value: Vector \| number[]): Vector;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param x The x component of divisor vector\n * @param y The y component of divisor vector\n * @param z The z component of divisor vector\n * @chainable\n /\n rem(x: number, y: number, z: number): Vector;\n\n /\n Gives the remainder of a vector when it is divided\n * by another vector. See examples for more context.\n * @param value The divisor vector\n * @chainable\n /\n rem(value: Vector \| number[]): Vector;\n\n /\n Subtracts x, y, and z components from a vector,\n * subtracts one vector from another, or subtracts\n * two independent vectors. The version of the method\n * that subtracts two vectors is a static method and\n * returns a p5.Vector, the others act directly on\n * the vector. Additionally, you may provide\n * arguments to this method as an array. See the\n * examples for more context.\n * @param x The x component of the vector to subtract\n * @param [y] The y component of the vector to\n * subtract\n * @param [z] The z component of the vector to\n * subtract\n * @chainable\n /\n sub(x: number, y?: number, z?: number): Vector;\n\n /\n Subtracts x, y, and z components from a vector,\n * subtracts one vector from another, or subtracts\n * two independent vectors. The version of the method\n * that subtracts two vectors is a static method and\n * returns a p5.Vector, the others act directly on\n * the vector. Additionally, you may provide\n * arguments to this method as an array. See the\n * examples for more context.\n * @param value the vector to subtract\n * @chainable\n /\n sub(value: Vector \| number[]): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param n The number to multiply with the vector\n * @chainable\n /\n mult(n: number): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param x The number to multiply with the x\n * component of the vector\n * @param y The number to multiply with the y\n * component of the vector\n * @param [z] The number to multiply with the z\n * component of the vector\n * @chainable\n /\n mult(x: number, y: number, z?: number): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param arr The array to multiply with the\n * components of the vector\n * @chainable\n /\n mult(arr: number[]): Vector;\n\n /\n Multiplies the vector by a scalar, multiplies the\n * x, y, and z components from a vector, or\n * multiplies the x, y, and z components of two\n * independent vectors. When multiplying a vector by\n * a scalar, the x, y, and z components of the vector\n * are all multiplied by the scalar. When multiplying\n * a vector by a vector, the x, y, z components of\n * both vectors are multiplied by each other (for\n * example, with two vectors a and b: a.x * b.x, a.y\n * * b.y, a.z * b.z). The static version of this\n * method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * function as an array. See the examples for more\n * context.\n * @param v The vector to multiply with the\n * components of the original vector\n * @chainable\n /\n mult(v: Vector): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param n The number to divide the vector by\n * @chainable\n /\n div(n: number): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param x The number to divide with the x component\n * of the vector\n * @param y The number to divide with the y component\n * of the vector\n * @param [z] The number to divide with the z\n * component of the vector\n * @chainable\n /\n div(x: number, y: number, z?: number): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param arr The array to divide the components of\n * the vector by\n * @chainable\n /\n div(arr: number[]): Vector;\n\n /\n Divides the vector by a scalar, divides a vector\n * by the x, y, and z arguments, or divides the x, y,\n * and z components of two vectors against each\n * other. When dividing a vector by a scalar, the x,\n * y, and z components of the vector are all divided\n * by the scalar. When dividing a vector by a vector,\n * the x, y, z components of the source vector are\n * treated as the dividend, and the x, y, z\n * components of the argument is treated as the\n * divisor. (For example, with two vectors a and b:\n * a.x / b.x, a.y / b.y, a.z / b.z.) If any component\n * of the second vector is 0, a division by 0 error\n * will be logged, unless both two vectors have 0 in\n * their z components, in which case only the x and y\n * components will be divided. The static version of\n * this method creates a new p5.Vector while the\n * non-static version acts on the vector directly.\n * Additionally, you may provide arguments to this\n * method as an array. See the examples for more\n * context.\n * @param v The vector to divide the components of\n * the original vector by\n * @chainable\n /\n div(v: Vector): Vector;\n\n /\n Calculates the magnitude (length) of the vector\n * and returns the result as a float. (This is simply\n * the equation sqrt(xx + yy + zz).)\n @return The magnitude of the vector\n /\n mag(): number;\n\n /\n Calculates the squared magnitude of the vector and\n * returns the result as a float. (This is simply the\n * equation xx + yy + zz.) Faster if the real\n length is not required in the case of comparing\n * vectors, etc.\n * @return The squared magnitude of the vector\n /\n magSq(): number;\n\n /\n Calculates the dot product of two vectors. The\n * version of the method that computes the dot\n * product of two independent vectors is a static\n * method. See the examples for more context.\n * @param x The x component of the vector\n * @param [y] The y component of the vector\n * @param [z] The z component of the vector\n * @return The dot product\n /\n dot(x: number, y?: number, z?: number): number;\n\n /\n Calculates the dot product of two vectors. The\n * version of the method that computes the dot\n * product of two independent vectors is a static\n * method. See the examples for more context.\n * @param value value component of the vector or a\n * p5.Vector\n /\n dot(value: Vector): number;\n\n /\n Calculates and returns a vector composed of the\n * cross product between two vectors. Both the static\n * and non-static methods return a new p5.Vector. See\n * the examples for more context.\n * @param v p5.Vector to be crossed\n * @return p5.Vector composed of cross product\n /\n cross(v: Vector): Vector;\n\n /\n Calculates the Euclidean distance between two\n * points (considering a point as a vector object).\n * If you are looking to calculate distance between 2\n * points see dist()\n * @param v The x, y, and z coordinates of a\n * p5.Vector\n * @return The distance\n /\n dist(v: Vector): number;\n\n /\n Normalize the vector to length 1 (make it a unit\n * vector).\n * @return The normalized p5.Vector\n /\n normalize(): Vector;\n\n /\n Limit the magnitude of this vector to the value\n * used for the max parameter.\n * @param max The maximum magnitude for the vector\n * @chainable\n /\n limit(max: number): Vector;\n\n /\n Set the magnitude of this vector to the value used\n * for the len parameter.\n * @param len The new length for this vector\n * @chainable\n /\n setMag(len: number): Vector;\n\n /\n Calculate the angle of rotation for this vector\n * (only 2D vectors). p5.Vectors created using\n * createVector() will take the current angleMode()\n * into consideration, and give the angle in radians\n * or degrees accordingly.\n * @return The angle of rotation\n /\n heading(): number;\n\n /\n Rotate the vector to a specific angle (only 2D\n * vectors); magnitude remains the same.\n * @param angle The angle of rotation\n * @chainable\n /\n setHeading(angle: number): Vector;\n\n /\n Rotate the vector by an angle (only 2D vectors);\n * magnitude remains the same.\n * @param angle The angle of rotation\n * @chainable\n /\n rotate(angle: number): Vector;\n\n /\n Calculates and returns the angle between two\n * vectors. This method will take the current\n * angleMode into consideration, and give the angle\n * in radians or degrees accordingly.\n * @param value The x, y, and z components of a\n * p5.Vector\n * @return The angle between\n /\n angleBetween(value: Vector): number;\n\n /\n Linear interpolate the vector to another vector.\n * @param x The x component\n * @param y The y component\n * @param z The z component\n * @param amt The amount of interpolation; some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @chainable\n /\n lerp(x: number, y: number, z: number, amt: number): Vector;\n\n /\n Linear interpolate the vector to another vector.\n * @param v The p5.Vector to lerp to\n * @param amt The amount of interpolation; some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n * @chainable\n /\n lerp(v: Vector, amt: number): Vector;\n\n /\n Performs spherical linear interpolation with the\n * other vector and returns the resulting vector.\n * This works in both 3D and 2D. As for 2D, the\n * result of slerping between 2D vectors is always a\n * 2D vector.\n * @param v the p5.Vector to slerp to\n * @param amt The amount of interpolation. some value\n * between 0.0 (old vector) and 1.0 (new vector). 0.9\n * is very near the new vector. 0.5 is halfway in\n * between.\n /\n slerp(v: Vector, amt: number): Vector;\n\n /\n Reflect a vector about a normal to a line in 2D,\n * or about a normal to a plane in 3D.\n * @param surfaceNormal the p5.Vector to reflect\n * about.\n * @chainable\n /\n reflect(surfaceNormal: Vector): Vector;\n\n /\n Return a representation of this vector as a float\n * array. This is only for temporary use. If used in\n * any other fashion, the contents should be copied\n * by using the p5.Vector.copy() method to copy into\n * your own vector.\n * @return An Array with the 3 values\n /\n array(): number[];\n\n /\n Equality check against a p5.Vector.\n * @param [x] The x component of the vector\n * @param [y] The y component of the vector\n * @param [z] The z component of the vector\n * @return Whether the vectors are equal\n /\n equals(x?: number, y?: number, z?: number): boolean;\n\n /\n Equality check against a p5.Vector.\n * @param value The vector to compare\n /\n equals(value: Vector \| any[]): boolean;\n\n /\n The x component of the vector\n /\n x: number;\n\n /\n The y component of the vector\n /\n y: number;\n\n /\n The z component of the vector\n /\n z: number;\n }\n\nclass Font {\n /\n Base class for font handling\n \n @param [pInst] pointer to p5 instance\n /\n constructor(pInst?: p5);\n\n /\n Returns a tight bounding box for the given text\n * string using this font\n * @param line a line of text\n * @param x x-position\n * @param y y-position\n * @param [fontSize] font size to use (optional)\n * Default is 12.\n * @param [options] opentype options (optional)\n * opentype fonts contains alignment and baseline\n * options. Default is 'LEFT' and 'alphabetic'\n * @return a rectangle object with properties: x, y,\n * w, h\n /\n textBounds(line: string, x: number, y: number, fontSize?: number, options?: object): object;\n\n /\n Computes an array of points following the path for\n * specified text\n * @param txt a line of text\n * @param x x-position\n * @param y y-position\n * @param fontSize font size to use (optional)\n * @param [options] an (optional) object that can\n * contain:\n \n \n * sampleFactor - the ratio of path-length to number\n * of samples (default=.1); higher values yield more\n * points and are therefore more precise\n \n \n * simplifyThreshold - if set to a non-zero value,\n * collinear points will be be removed from the\n * polygon; the value represents the threshold angle\n * to use when determining whether two edges are\n * collinear\n * @return an array of points, each with x, y, alpha\n * (the path angle)\n /\n textToPoints(txt: string, x: number, y: number, fontSize: number, options?: object): any[];\n\n /\n Underlying opentype font implementation\n /\n font: any;\n }\n\nclass Framebuffer {\n /\n An object that one can draw to and then read as a\n * texture. While similar to a p5.Graphics, using a\n * p5.Framebuffer as a texture will generally run\n * much faster, as it lives within the same WebGL\n * context as the canvas it is created on. It only\n * works in WebGL mode.\n \n @param target A p5 global instance or p5.Graphics\n * @param [settings] A settings object\n /\n constructor(target: Graphics, settings?: object);\n\n /\n Resizes the framebuffer to the given width and\n * height.\n /\n resize(width: number, height: number): void;\n\n /\n Gets or sets the pixel scaling for high pixel\n * density displays. By default, the density will\n * match that of the canvas the framebuffer was\n * created on, which will match the display density.\n * Call this method with no arguments to get the\n * current density, or pass in a number to set the\n * density.\n * @param [density] A scaling factor for the number\n * of pixels per side of the framebuffer\n /\n pixelDensity(density?: number): void;\n\n /\n Gets or sets whether or not this framebuffer will\n * automatically resize along with the canvas it's\n * attached to in order to match its size. Call this\n * method with no arguments to see if it is currently\n * auto-sized, or pass in a boolean to set this\n * property.\n * @param [autoSized] Whether or not the framebuffer\n * should resize along with the canvas it's attached\n * to\n /\n autoSized(autoSized?: boolean): void;\n\n /\n Creates and returns a new p5.FramebufferCamera to\n * be used while drawing to this framebuffer. The\n * camera will be set as the currently active camera.\n * @return A new camera\n /\n createCamera(): Camera;\n\n /\n Removes the framebuffer and frees its resources.\n /\n remove(): void;\n\n /\n Begin drawing to this framebuffer. Subsequent\n * drawing functions to the canvas the framebuffer is\n * attached to will not be immediately visible, and\n * will instead be drawn to the framebuffer's\n * texture. Call end() when finished to make draw\n * functions go right to the canvas again and to be\n * able to read the contents of the framebuffer's\n * texture.\n /\n begin(): void;\n\n /\n After having previously called begin(), this\n * method stops drawing functions from going to the\n * framebuffer's texture, allowing them to go right\n * to the canvas again. After this, one can read from\n * the framebuffer's texture.\n /\n end(): void;\n\n /\n Run a function while drawing to the framebuffer\n * rather than to its canvas. This is equivalent to\n * calling framebuffer.begin(), running the function,\n * and then calling framebuffer.end(), but ensures\n * that one never accidentally forgets begin or end.\n * @param callback A function to run that draws to\n * the canvas. The function will immediately be run,\n * but it will draw to the framebuffer instead of the\n * canvas.\n /\n draw(callback: (...args: any[]) => any): void;\n\n /\n Get a region of pixels from the canvas in the form\n * of a p5.Image, or a single pixel as an array of\n * numbers. Returns an array of [R,G,B,A] values for\n * any pixel or grabs a section of an image. If the\n * Framebuffer has been set up to not store alpha\n * values, then only [R,G,B] will be returned. If no\n * parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @param w width of the section to be returned\n * @param h height of the section to be returned\n * @return the rectangle p5.Image\n /\n get(x: number, y: number, w: number, h: number): Image;\n\n /\n Get a region of pixels from the canvas in the form\n * of a p5.Image, or a single pixel as an array of\n * numbers. Returns an array of [R,G,B,A] values for\n * any pixel or grabs a section of an image. If the\n * Framebuffer has been set up to not store alpha\n * values, then only [R,G,B] will be returned. If no\n * parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n * @return the whole p5.Image\n /\n get(): Image;\n\n /\n Get a region of pixels from the canvas in the form\n * of a p5.Image, or a single pixel as an array of\n * numbers. Returns an array of [R,G,B,A] values for\n * any pixel or grabs a section of an image. If the\n * Framebuffer has been set up to not store alpha\n * values, then only [R,G,B] will be returned. If no\n * parameters are specified, the entire image is\n * returned. Use the x and y parameters to get the\n * value of one pixel. Get a section of the display\n * window by specifying additional w and h\n * parameters. When getting an image, the x and y\n * parameters define the coordinates for the\n * upper-left corner of the image, regardless of the\n * current imageMode().\n * @param x x-coordinate of the pixel\n * @param y y-coordinate of the pixel\n * @return color of pixel at x,y in array format [R,\n * G, B, A]\n /\n get(x: number, y: number): number[];\n\n /\n A Uint8ClampedArray containing the values for all\n * the pixels in the Framebuffer. Like the main\n * canvas pixels property, call loadPixels() before\n * reading it, and call updatePixels() afterwards to\n * update its data.\n \n Note that updating pixels via this property will\n * be slower than drawing to the framebuffer\n * directly. Consider using a shader instead of\n * looping over pixels.\n /\n pixels: number[];\n\n /\n A texture with the color information of the\n * framebuffer. Pass this (or the framebuffer itself)\n * to texture() to draw it to the canvas, or pass it\n * to a shader with setUniform() to read its data.\n * Since Framebuffers are controlled by WebGL, their\n * y coordinates are stored flipped compared to\n * images and videos. When texturing with a\n * framebuffer texture, you may want to flip\n * vertically, e.g. with plane(framebuffer.width,\n * -framebuffer.height).\n /\n color: any;\n\n /\n A texture with the depth information of the\n * framebuffer. If the framebuffer was created with {\n * depth: false } in its settings, then this property\n * will be undefined. Pass this to texture() to draw\n * it to the canvas, or pass it to a shader with\n * setUniform() to read its data. Since Framebuffers\n * are controlled by WebGL, their y coordinates are\n * stored flipped compared to images and videos. When\n * texturing with a framebuffer texture, you may want\n * to flip vertically, e.g. with\n * plane(framebuffer.width, -framebuffer.height).\n /\n depth: any;\n }\n\nclass Geometry {\n /\n p5 Geometry class\n \n @param [detailX] number of vertices along the\n * x-axis.\n * @param [detailY] number of vertices along the\n * y-axis.\n * @param [callback] function to call upon object\n * instantiation.\n /\n constructor(detailX?: number, detailY?: number, callback?: (...args: any[]) => any);\n\n /\n computes faces for geometry objects based on the\n * vertices.\n * @chainable\n /\n computeFaces(): Geometry;\n\n /\n computes smooth normals per vertex as an average\n * of each face.\n * @chainable\n /\n computeNormals(): Geometry;\n\n /\n Averages the vertex normals. Used in curved\n * surfaces\n * @chainable\n /\n averageNormals(): Geometry;\n\n /\n Averages pole normals. Used in spherical\n * primitives\n * @chainable\n /\n averagePoleNormals(): Geometry;\n\n /\n Modifies all vertices to be centered within the\n * range -100 to 100.\n * @chainable\n /\n normalize(): Geometry;\n }\n\nclass Shader {\n // TODO: Fix p5.Shader() errors in src/webgl/p5.Shader.js, line 11:\n //\n // param \"renderer\" has invalid type: p5.RendererGL\n //\n // constructor(renderer: RendererGL, vertSrc: string, fragSrc: string);\n\n /\n Used to set the uniforms of a p5.Shader object.\n * Uniforms are used as a way to provide shader\n * programs (which run on the GPU) with values from a\n * sketch (which runs on the CPU).\n * @param uniformName the name of the uniform. Must\n * correspond to the name used in the vertex and\n * fragment shaders\n * @param data the data to associate with the\n * uniform. The type can be a boolean (true/false), a\n * number, an array of numbers, or an image\n * (p5.Image, p5.Graphics, p5.MediaElement,\n * p5.Texture)\n * @chainable\n /\n setUniform(uniformName: string, data: boolean \| number \| number[] \| Image \| Graphics \| MediaElement): Shader;\n }\n\nclass Renderer extends Element {\n /\n Main graphics and rendering context, as well as\n * the base API implementation for p5.js \"core\". To\n * be used as the superclass for Renderer2D and\n * Renderer3D classes, respectively.\n \n @param elt DOM node that is wrapped\n * @param [pInst] pointer to p5 instance\n * @param [isMainCanvas] whether we're using it as\n * main canvas\n */\n constructor(elt: HTMLElement, pInst?: p5, isMainCanvas?: boolean);\n }\n\ntype ADD = 'lighter';\n type ARROW = 'arrow';\n type AUTO = 'auto';\n type AXES = 'axes';\n type BASELINE = 'alphabetic';\n type BEVEL = 'bevel';\n type BEZIER = 'bezier';\n type BLEND = 'source-over';\n type BLUR = 'blur';\n type BOLD = 'bold';\n type BOLDITALIC = 'bolditalic';\n type BOTTOM = 'bottom';\n type BURN = 'color-burn';\n type CENTER = 'center';\n type CHAR = 'char';\n type CHORD = 'chord';\n type CLAMP = 'clamp';\n type CLOSE = 'close';\n type CONTAIN = 'contain';\n type CORNER = 'corner';\n type CORNERS = 'corners';\n type COVER = 'cover';\n type CROSS = 'cross';\n type CURVE = 'curve';\n type DARKEST = 'darkest';\n type DEGREES = 'degrees';\n type DIFFERENCE = 'difference';\n type DILATE = 'dilate';\n type DODGE = 'color-dodge';\n type ERODE = 'erode';\n type EXCLUSION = 'exclusion';\n type FALLBACK = 'fallback';\n type FILL = 'fill';\n type FLOAT = 'float';\n type GRAY = 'gray';\n type GRID = 'grid';\n type HALF_FLOAT = 'half-float';\n type HAND = 'hand';\n type HARD_LIGHT = 'hard-light';\n type HSB = 'hsb';\n type HSL = 'hsl';\n type IMAGE = 'image';\n type IMMEDIATE = 'immediate';\n type INVERT = 'invert';\n type ITALIC = 'italic';\n type LABEL = 'label';\n type LANDSCAPE = 'landscape';\n type LEFT = 'left';\n type LIGHTEST = 'lighten';\n type LINE_LOOP = 0x0002;\n type LINE_STRIP = 0x0003;\n type LINEAR = 'linear';\n type LINES = 0x0001;\n type MIRROR = 'mirror';\n type MITER = 'miter';\n type MOVE = 'move';\n type MULTIPLY = 'multiply';\n type NEAREST = 'nearest';\n type NORMAL = 'normal';\n type OPAQUE = 'opaque';\n type OPEN = 'open';\n type OVERLAY = 'overlay';\n type P2D = 'p2d';\n type PIE = 'pie';\n type POINTS = 0x0000;\n type PORTRAIT = 'portrait';\n type POSTERIZE = 'posterize';\n type PROJECT = 'square';\n type QUAD_STRIP = 'quad_strip';\n type QUADRATIC = 'quadratic';\n type QUADS = 'quads';\n type RADIANS = 'radians';\n type RADIUS = 'radius';\n type REMOVE = 'destination-out';\n type REPEAT = 'repeat';\n type REPLACE = 'copy';\n type RGB = 'rgb';\n type RGBA = 'rgba';\n type RIGHT = 'right';\n type ROUND = 'round';\n type SCREEN = 'screen';\n type SOFT_LIGHT = 'soft-light';\n type SQUARE = 'butt';\n type STROKE = 'stroke';\n type SUBTRACT = 'subtract';\n type TESS = 'tess';\n type TEXT = 'text';\n type TEXTURE = 'texture';\n type THRESHOLD = 'threshold';\n type TOP = 'top';\n type TRIANGLE_FAN = 0x0006;\n type TRIANGLE_STRIP = 0x0005;\n type TRIANGLES = 0x0004;\n type UNSIGNED_BYTE = 'unsigned-byte';\n type UNSIGNED_INT = 'unsigned-int';\n type VERSION = 'version';\n type WAIT = 'wait';\n type WEBGL = 'webgl';\n type WEBGL2 = 'webgl2';\n type WORD = 'word';\n type VIDEO = 'video';\n type AUDIO = 'audio';\n\ntype ANGLE_MODE = RADIANS \| DEGREES;\n\n type ARC_MODE = CHORD \| PIE \| OPEN;\n\n type BEGIN_KIND = POINTS \| LINES \| TRIANGLES \| TRIANGLE_FAN \| TRIANGLE_STRIP \| QUADS \| QUAD_STRIP \| TESS;\n\n type BLEND_MODE =\n \| BLEND\n \| DARKEST\n \| LIGHTEST\n \| DIFFERENCE\n \| MULTIPLY\n \| EXCLUSION\n \| SCREEN\n \| REPLACE\n \| OVERLAY\n \| HARD_LIGHT\n \| SOFT_LIGHT\n \| DODGE\n \| BURN\n \| ADD\n \| NORMAL;\n\n type COLOR_MODE = RGB \| HSB \| HSL;\n\n type CURSOR_TYPE = ARROW \| CROSS \| HAND \| MOVE \| TEXT;\n\n type DEBUG_MODE = GRID \| AXES;\n\n type DESCRIBE_DISPLAY = LABEL \| FALLBACK;\n\n type ELLIPSE_MODE = CENTER \| RADIUS \| CORNER \| CORNERS;\n\n type END_MODE = CLOSE;\n\n type FILTER_TYPE = THRESHOLD \| GRAY \| OPAQUE \| INVERT \| POSTERIZE \| ERODE \| DILATE \| BLUR;\n\n type GRAPHICS_RENDERER = P2D \| WEBGL;\n\n type GRID_DISPLAY = FALLBACK \| LABEL;\n\n type HORIZ_ALIGN = LEFT \| CENTER \| RIGHT;\n\n type IMAGE_FIT = CONTAIN \| COVER;\n\n type IMAGE_MODE = CORNER \| CORNERS \| CENTER;\n\n type RECT_MODE = CORNER \| CORNERS \| CENTER \| RADIUS;\n\n type RENDERER = P2D \| WEBGL;\n\n type SIZE_H = AUTO;\n\n type SIZE_W = AUTO;\n\n type STROKE_CAP = ROUND \| SQUARE \| PROJECT;\n\n type STROKE_JOIN = MITER \| BEVEL \| ROUND;\n\n type TEXT_DISPLAY = FALLBACK \| LABEL;\n\n type TEXTURE_MODE = IMAGE \| NORMAL;\n\n type THE_STYLE = NORMAL \| ITALIC \| BOLD \| BOLDITALIC;\n\n type TYPE = VIDEO \| AUDIO;\n\n type VERT_ALIGN = TOP \| BOTTOM \| CENTER \| BASELINE;\n\n type WRAP_STYLE = WORD \| CHAR;\n\n type WRAP_X = CLAMP \| REPEAT \| MIRROR;\n\n type WRAP_Y = CLAMP \| REPEAT \| MIRROR;\n\n type X_ALIGN = LEFT \| RIGHT \| CENTER;\n\n type Y_ALIGN = TOP \| BOTTOM \| CENTER;\n}\n}\n";