p5 2.0.1 → 2.0.3

package/types/image/loading_displaying.d.ts

@@ -0,0 +1,580 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+import { Color } from '../color/p5.Color';
+
+declare module 'p5' {
+/**
+ * Loads an image to create a p5.Image object.`loadImage()` interprets the first parameter one of three ways. If the path
+ * to an image file is provided, `loadImage()` will load it. Paths to local
+ * files should be relative, such as `'assets/thundercat.jpg'`. URLs such as
+ * `'https://example.com/thundercat.jpg'` may be blocked due to browser
+ * security. Raw image data can also be passed as a base64 encoded image in
+ * the form `'data:image/png;base64,arandomsequenceofcharacters'`. The `path`
+ * parameter can also be defined as a
+ * object for more advanced usage.The second parameter is optional. If a function is passed, it will be
+ * called once the image has loaded. The callback function can optionally use
+ * the new p5.Image object. The return value of the
+ * function will be used as the final return value of `loadImage()`.The third parameter is also optional. If a function is passed, it will be
+ * called if the image fails to load. The callback function can optionally use
+ * the event error. The return value of the function will be used as the final
+ * return value of `loadImage()`.This function returns a `Promise` and should be used in an `async` setup with
+ * `await`. See the examples for the usage syntax.
+ *
+ * @param path of the image to be loaded or base64 encoded image.
+ * @param function called with
+ * <a href="#/p5.Image">p5.Image</a> once it
+ * loads.
+ * @param function called with event
+ * error if the image fails to load.
+ * @return the <a href="#/p5.Image">p5.Image</a> object.
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * // Load the image and create a p5.Image object.
+ * async function setup() {
+ * img = await loadImage('assets/laDefense.jpg');
+ * createCanvas(100, 100);
+ * 
+ * // Draw the image.
+ * image(img, 0, 0);
+ * 
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * async function setup() {
+ * // Call handleImage() once the image loads.
+ * await loadImage('assets/laDefense.jpg', handleImage);
+ * 
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ * 
+ * // Display the image.
+ * function handleImage(img) {
+ * image(img, 0, 0);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * async function setup() {
+ * // Call handleImage() once the image loads or
+ * // call handleError() if an error occurs.
+ * await loadImage('assets/laDefense.jpg', handleImage, handleError);
+ * }
+ * 
+ * // Display the image.
+ * function handleImage(img) {
+ * image(img, 0, 0);
+ * 
+ * describe('Image of the underside of a white umbrella and a gridded ceiling.');
+ * }
+ * 
+ * // Log the error.
+ * function handleError(event) {
+ * console.error('Oops!', event);
+ * }
+ * </code>
+ * </div>
+ */
+function loadImage(path: string | Request, successCallback?: any, failureCallback?: any): Promise<p5.Image>;
+
+/**
+ * Generates a gif from a sketch and saves it to a file.`saveGif()` may be called in setup() or at any
+ * point while a sketch is running.The first parameter, `fileName`, sets the gif's file name.The second parameter, `duration`, sets the gif's duration in seconds.The third parameter, `options`, is optional. If an object is passed,
+ * `saveGif()` will use its properties to customize the gif. `saveGif()`
+ * recognizes the properties `delay`, `units`, `silent`,
+ * `notificationDuration`, and `notificationID`.
+ *
+ * @param file name of gif.
+ * @param duration in seconds to capture from the sketch.
+ * @param an object that can contain five more properties:
+ * `delay`, a Number specifying how much time to wait before recording;
+ * `units`, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
+ * `silent`, a Boolean that defines presence of progress notifications. By default it’s `false`;
+ * `notificationDuration`, a Number that defines how long in seconds the final notification
+ * will live. By default it's `0`, meaning the notification will never be removed;
+ * `notificationID`, a String that specifies the id of the notification's DOM element. By default it’s `'progressBar’`.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Style the circle.
+ * let c = frameCount % 255;
+ * fill(c);
+ * 
+ * // Display the circle.
+ * circle(50, 50, 25);
+ * }
+ * 
+ * // Save a 5-second gif when the user presses the 's' key.
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveGif('mySketch', 5);
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Style the circle.
+ * let c = frameCount % 255;
+ * fill(c);
+ * 
+ * // Display the circle.
+ * circle(50, 50, 25);
+ * }
+ * 
+ * // Save a 5-second gif when the user presses the 's' key.
+ * // Wait 1 second after the key press before recording.
+ * function keyPressed() {
+ * if (key === 's') {
+ * saveGif('mySketch', 5, { delay: 1 });
+ * }
+ * }
+ * </code>
+ * </div>
+ */
+function saveGif(filename: string, duration: number, options?: object): void;
+
+/**
+ * Helper function for loading GIF-based images
+ *
+ */
+function _createGif(arrayBuffer: any, pImg: any): void;
+
+/**
+ * Draws an image to the canvas.The first parameter, `img`, is the source image to be drawn. `img` can be
+ * any of the following objects:The second and third parameters, `dx` and `dy`, set the coordinates of the
+ * destination image's top left corner. See
+ * imageMode() for other ways to position images.`let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(50);
+ * 
+ * // Draw the image.
+ * image(img, 0, 0);
+ * 
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+ * }`Here's a diagram that explains how optional parameters work in `image()`:The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
+ * the width and height to draw the destination image. By default, `image()`
+ * draws the full source image at its original size.The sixth and seventh parameters, `sx` and `sy`, are also optional.
+ * These coordinates define the top left corner of a subsection to draw from
+ * the source image.The eighth and ninth parameters, `sw` and `sh`, are also optional.
+ * They define the width and height of a subsection to draw from the source
+ * image. By default, `image()` draws the full subsection that begins at
+ * `(sx, sy)` and extends to the edges of the source image.The ninth parameter, `fit`, is also optional. It enables a subsection of
+ * the source image to be drawn without affecting its aspect ratio. If
+ * `CONTAIN` is passed, the full subsection will appear within the destination
+ * rectangle. If `COVER` is passed, the subsection will completely cover the
+ * destination rectangle. This may have the effect of zooming into the
+ * subsection.The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
+ * optional. They determine how to align the fitted subsection. `xAlign` can
+ * be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
+ * either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
+ * are set to `CENTER`.
+ *
+ * @param image to display.
+ * @param x-coordinate of the top-left corner of the image.
+ * @param y-coordinate of the top-left corner of the image.
+ * @param width to draw the image.
+ * @param height to draw the image.
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(50);
+ * 
+ * // Draw the image.
+ * image(img, 10, 10);
+ * 
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(50);
+ * 
+ * // Draw the image 50x50.
+ * image(img, 0, 0, 50, 50);
+ * 
+ * describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(50);
+ * 
+ * // Draw the center of the image.
+ * image(img, 25, 25, 50, 50, 25, 25, 50, 50);
+ * 
+ * describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/moonwalk.jpg');
+ * createCanvas(100, 100);
+ * 
+ * background(50);
+ * 
+ * // Draw the image and scale it to fit within the canvas.
+ * image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
+ * 
+ * describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense50.png');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(50);
+ * 
+ * // Draw the image and scale it to cover the canvas.
+ * image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
+ * 
+ * describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
+ * }
+ * </code>
+ * </div>
+ */
+function image(img: p5.Image | p5.Element | p5.Texture | p5.Framebuffer | p5.FramebufferTexture | p5.Renderer | p5.Graphics, x: number, y: number, width?: number, height?: number): void;
+
+/**
+ * @param the x-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param the y-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param the width of the destination rectangle
+ * @param the height of the destination rectangle
+ * @param the x-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param the y-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param the width of the subsection of the
+ * source image to draw into the destination
+ * rectangle
+ * @param the height of the subsection of the
+ * source image to draw into the destination rectangle
+ * @param either CONTAIN or COVER
+ * @param either LEFT, RIGHT or CENTER default is CENTER
+ * @param either TOP, BOTTOM or CENTER default is CENTER
+ */
+function image(img: p5.Image | p5.Element | p5.Texture | p5.Framebuffer | p5.FramebufferTexture, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number, fit?: CONTAIN | COVER, xAlign: LEFT | RIGHT | CENTER, yAlign: TOP | BOTTOM | CENTER): void;
+
+/**
+ * Tints images using a color.The version of `tint()` with one parameter interprets it one of four ways.
+ * If the parameter is a number, it's interpreted as a grayscale value. If the
+ * parameter is a string, it's interpreted as a CSS color string. An array of
+ * `[R, G, B, A]` values or a p5.Color object can
+ * also be used to set the tint color.The version of `tint()` with two parameters uses the first one as a
+ * grayscale value and the second as an alpha value. For example, calling
+ * `tint(255, 128)` will make an image 50% transparent.The version of `tint()` with three parameters interprets them as RGB or
+ * HSB values, depending on the current
+ * colorMode(). The optional fourth parameter
+ * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
+ * a red tint and make them transparent.
+ *
+ * @param red or hue value.
+ * @param green or saturation value.
+ * @param blue or brightness.
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * // Left image.
+ * image(img, 0, 0);
+ * 
+ * // Right image.
+ * // Tint with a CSS color string.
+ * tint('red');
+ * image(img, 50, 0);
+ * 
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * // Left image.
+ * image(img, 0, 0);
+ * 
+ * // Right image.
+ * // Tint with RGB values.
+ * tint(255, 0, 0);
+ * image(img, 50, 0);
+ * 
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * *
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * // Left.
+ * image(img, 0, 0);
+ * 
+ * // Right.
+ * // Tint with RGBA values.
+ * tint(255, 0, 0, 100);
+ * image(img, 50, 0);
+ * 
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * // Left.
+ * image(img, 0, 0);
+ * 
+ * // Right.
+ * // Tint with grayscale and alpha values.
+ * tint(255, 180);
+ * image(img, 50, 0);
+ * 
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
+ * }
+ * </code>
+ * </div>
+ */
+function tint(v1: number, v2: number, v3: number, alpha?: number): void;
+
+/**
+ * @param CSS color string.
+ */
+function tint(value: string): void;
+
+/**
+ * @param grayscale value.
+ */
+function tint(gray: number, alpha?: number): void;
+
+/**
+ * @param array containing the red, green, blue &
+ * alpha components of the color.
+ */
+function tint(values: number[]): void;
+
+/**
+ * @param the tint color
+ */
+function tint(color: p5.Color): void;
+
+/**
+ * Removes the current tint set by tint().`noTint()` restores images to their original colors.
+ *
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * // Left.
+ * // Tint with a CSS color string.
+ * tint('red');
+ * image(img, 0, 0);
+ * 
+ * // Right.
+ * // Remove the tint.
+ * noTint();
+ * image(img, 50, 0);
+ * 
+ * describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
+ * }
+ * </code>
+ * </div>
+ */
+function noTint(): void;
+
+/**
+ * Changes the location from which images are drawn when
+ * image() is called.By default, the first
+ * two parameters of image() are the x- and
+ * y-coordinates of the image's upper-left corner. The next parameters are
+ * its width and height. This is the same as calling `imageMode(CORNER)`.`imageMode(CORNERS)` also uses the first two parameters of
+ * image() as the x- and y-coordinates of the image's
+ * top-left corner. The third and fourth parameters are the coordinates of its
+ * bottom-right corner.`imageMode(CENTER)` uses the first two parameters of
+ * image() as the x- and y-coordinates of the image's
+ * center. The next parameters are its width and height.
+ *
+ * @param either CORNER, CORNERS, or CENTER.
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/bricks.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Use CORNER mode.
+ * imageMode(CORNER);
+ * 
+ * // Display the image.
+ * image(img, 10, 10, 50, 50);
+ * 
+ * describe('A square image of a brick wall is drawn at the top left of a gray square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/bricks.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Use CORNERS mode.
+ * imageMode(CORNERS);
+ * 
+ * // Display the image.
+ * image(img, 10, 10, 90, 40);
+ * 
+ * describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load the image.
+ * img = await loadImage('assets/bricks.jpg');
+ * 
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Use CENTER mode.
+ * imageMode(CENTER);
+ * 
+ * // Display the image.
+ * image(img, 50, 50, 80, 80);
+ * 
+ * describe('A square image of a brick wall is drawn on a gray square.');
+ * }
+ * </code>
+ * </div>
+ */
+function imageMode(mode: CORNER | CORNERS | CENTER): void;
+
+}
+
+export default function loading_displaying(p5: any, fn: any): void;