- *
- * 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`.
- *
- * @method image
- * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
- * @param {Number} x x-coordinate of the top-left corner of the image.
- * @param {Number} y y-coordinate of the top-left corner of the image.
- * @param {Number} [width] width to draw the image.
- * @param {Number} [height] height to draw the image.
- *
- * @example
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/moonwalk.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- */
-/**
- * @method image
- * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img
- * @param {Number} dx the x-coordinate of the destination
- * rectangle in which to draw the source image
- * @param {Number} dy the y-coordinate of the destination
- * rectangle in which to draw the source image
- * @param {Number} dWidth the width of the destination rectangle
- * @param {Number} dHeight the height of the destination rectangle
- * @param {Number} sx the x-coordinate of the subsection of the source
- * image to draw into the destination rectangle
- * @param {Number} sy the y-coordinate of the subsection of the source
- * image to draw into the destination rectangle
- * @param {Number} [sWidth] the width of the subsection of the
- * source image to draw into the destination
- * rectangle
- * @param {Number} [sHeight] the height of the subsection of the
- * source image to draw into the destination rectangle
- * @param {(CONTAIN|COVER)} [fit] either CONTAIN or COVER
- * @param {(LEFT|RIGHT|CENTER)} [xAlign=CENTER] either LEFT, RIGHT or CENTER default is CENTER
- * @param {(TOP|BOTTOM|CENTER)} [yAlign=CENTER] either TOP, BOTTOM or CENTER default is CENTER
- */
-p5.prototype.image = function(
- img,
- dx,
- dy,
- dWidth,
- dHeight,
- sx,
- sy,
- sWidth,
- sHeight,
- fit,
- xAlign,
- yAlign
-) {
- // set defaults per spec: https://goo.gl/3ykfOq
-
- p5._validateParameters('image', arguments);
-
- let defW = img.width;
- let defH = img.height;
- yAlign = yAlign || constants.CENTER;
- xAlign = xAlign || constants.CENTER;
-
- if (img.elt) {
- defW = defW !== undefined ? defW : img.elt.width;
- defH = defH !== undefined ? defH : img.elt.height;
- }
- if (img.elt && img.elt.videoWidth && !img.canvas) {
- // video no canvas
- defW = defW !== undefined ? defW : img.elt.videoWidth;
- defH = defH !== undefined ? defH : img.elt.videoHeight;
+ if (fit === constants.CONTAIN) {
+ const { x, y, w, h } = _imageContain(
+ xAlign,
+ yAlign,
+ dx,
+ dy,
+ dw,
+ dh,
+ sw,
+ sh
+ );
+ dx = x;
+ dy = y;
+ dw = w;
+ dh = h;
+ }
+ return { sx, sy, sw, sh, dx, dy, dw, dh };
}
- let _dx = dx;
- let _dy = dy;
- let _dw = dWidth || defW;
- let _dh = dHeight || defH;
- let _sx = sx || 0;
- let _sy = sy || 0;
- let _sw = sWidth !== undefined ? sWidth : defW;
- let _sh = sHeight !== undefined ? sHeight : defH;
-
- _sw = _sAssign(_sw, defW);
- _sh = _sAssign(_sh, defH);
-
- // This part needs cleanup and unit tests
- // see issues https://github.com/processing/p5.js/issues/1741
- // and https://github.com/processing/p5.js/issues/1673
- let pd = 1;
-
- if (img.elt && !img.canvas && img.elt.style.width) {
- //if img is video and img.elt.size() has been used and
- //no width passed to image()
- if (img.elt.videoWidth && !dWidth) {
- pd = img.elt.videoWidth;
+ /**
+ * Validates clipping params. Per drawImage spec sWidth and sHight cannot be
+ * negative or greater than image intrinsic width and height
+ * @private
+ * @param {Number} sVal
+ * @param {Number} iVal
+ * @returns {Number}
+ * @private
+ */
+ function _sAssign(sVal, iVal) {
+ if (sVal > 0 && sVal < iVal) {
+ return sVal;
} else {
- //all other cases
- pd = img.elt.width;
+ return iVal;
}
- pd /= parseInt(img.elt.style.width, 10);
}
- _sx *= pd;
- _sy *= pd;
- _sh *= pd;
- _sw *= pd;
-
- let vals = canvas.modeAdjust(_dx, _dy, _dw, _dh, this._renderer._imageMode);
- vals = _imageFit(
+ /**
+ * 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:
+ * - p5.Image
+ * - p5.Element
+ * - p5.Texture
+ * - p5.Framebuffer
+ * - p5.FramebufferTexture
+ *
+ * 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.
+ *
+ * Here's a diagram that explains how optional parameters work in `image()`:
+ *
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * // Image is 50 x 50 pixels.
- * img = loadImage('assets/laDefense50.png');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
+ *
+ * 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`.
+ *
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
+ * @param {Number} x x-coordinate of the top-left corner of the image.
+ * @param {Number} y y-coordinate of the top-left corner of the image.
+ * @param {Number} [width] width to draw the image.
+ * @param {Number} [height] height to draw the image.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method image
+ * @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img
+ * @param {Number} dx the x-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dy the y-coordinate of the destination
+ * rectangle in which to draw the source image
+ * @param {Number} dWidth the width of the destination rectangle
+ * @param {Number} dHeight the height of the destination rectangle
+ * @param {Number} sx the x-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} sy the y-coordinate of the subsection of the source
+ * image to draw into the destination rectangle
+ * @param {Number} [sWidth] the width of the subsection of the
+ * source image to draw into the destination
+ * rectangle
+ * @param {Number} [sHeight] the height of the subsection of the
+ * source image to draw into the destination rectangle
+ * @param {(CONTAIN|COVER)} [fit] either CONTAIN or COVER
+ * @param {(LEFT|RIGHT|CENTER)} [xAlign=CENTER] either LEFT, RIGHT or CENTER default is CENTER
+ * @param {(TOP|BOTTOM|CENTER)} [yAlign=CENTER] either TOP, BOTTOM or CENTER default is CENTER
+ */
+ fn.image = function(
+ img,
+ dx,
+ dy,
+ dWidth,
+ dHeight,
+ sx,
+ sy,
+ sWidth,
+ sHeight,
fit,
xAlign,
- yAlign,
- vals.x,
- vals.y,
- vals.w,
- vals.h,
- _sx,
- _sy,
- _sw,
- _sh
- );
-
- // tint the image if there is a tint
- this._renderer.image(
- img,
- vals.sx,
- vals.sy,
- vals.sw,
- vals.sh,
- vals.dx,
- vals.dy,
- vals.dw,
- vals.dh
- );
-};
+ yAlign
+ ) {
+ // set defaults per spec: https://goo.gl/3ykfOq
-/**
- * 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.
- *
- * @method tint
- * @param {Number} v1 red or hue value.
- * @param {Number} v2 green or saturation value.
- * @param {Number} v3 blue or brightness.
- * @param {Number} [alpha]
- *
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * // Image is 50 x 50 pixels.
+ * img = loadImage('assets/laDefense50.png');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- */
-/**
- * @method tint
- * @param {String} value CSS color string.
- */
+ p5._validateParameters('image', arguments);
-/**
- * @method tint
- * @param {Number} gray grayscale value.
- * @param {Number} [alpha]
- */
+ let defW = img.width;
+ let defH = img.height;
+ yAlign = yAlign || constants.CENTER;
+ xAlign = xAlign || constants.CENTER;
-/**
- * @method tint
- * @param {Number[]} values array containing the red, green, blue &
- * alpha components of the color.
- */
+ if (img.elt) {
+ defW = defW !== undefined ? defW : img.elt.width;
+ defH = defH !== undefined ? defH : img.elt.height;
+ }
+ if (img.elt && img.elt.videoWidth && !img.canvas) {
+ // video no canvas
+ defW = defW !== undefined ? defW : img.elt.videoWidth;
+ defH = defH !== undefined ? defH : img.elt.videoHeight;
+ }
-/**
- * @method tint
- * @param {p5.Color} color the tint color
- */
-p5.prototype.tint = function(...args) {
- p5._validateParameters('tint', args);
- const c = this.color(...args);
- this._renderer._tint = c.levels;
-};
+ let _dx = dx;
+ let _dy = dy;
+ let _dw = dWidth || defW;
+ let _dh = dHeight || defH;
+ let _sx = sx || 0;
+ let _sy = sy || 0;
+ let _sw = sWidth !== undefined ? sWidth : defW;
+ let _sh = sHeight !== undefined ? sHeight : defH;
+
+ _sw = _sAssign(_sw, defW);
+ _sh = _sAssign(_sh, defH);
+
+ // This part needs cleanup and unit tests
+ // see issues https://github.com/processing/p5.js/issues/1741
+ // and https://github.com/processing/p5.js/issues/1673
+ let pd = 1;
+
+ if (img.elt && !img.canvas && img.elt.style.width) {
+ //if img is video and img.elt.size() has been used and
+ //no width passed to image()
+ if (img.elt.videoWidth && !dWidth) {
+ pd = img.elt.videoWidth;
+ } else {
+ //all other cases
+ pd = img.elt.width;
+ }
+ pd /= parseInt(img.elt.style.width, 10);
+ }
-/**
- * Removes the current tint set by tint().
- *
- * `noTint()` restores images to their original colors.
- *
- * @method noTint
- *
- * @example
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- */
-p5.prototype.noTint = function() {
- this._renderer._tint = null;
-};
+ _sx *= pd;
+ _sy *= pd;
+ _sh *= pd;
+ _sw *= pd;
-/**
- * Apply the current tint color to the input image, return the resulting
- * canvas.
- *
- * @private
- * @param {p5.Image} The image to be tinted
- * @return {canvas} The resulting tinted canvas
- */
-p5.prototype._getTintedImageCanvas =
- p5.Renderer2D.prototype._getTintedImageCanvas;
+ let vals = canvas.modeAdjust(_dx, _dy, _dw, _dh, this._renderer._imageMode);
+ vals = _imageFit(
+ fit,
+ xAlign,
+ yAlign,
+ vals.x,
+ vals.y,
+ vals.w,
+ vals.h,
+ _sx,
+ _sy,
+ _sw,
+ _sh
+ );
-/**
- * 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.
- *
- * @method imageMode
- * @param {(CORNER|CORNERS|CENTER)} mode either CORNER, CORNERS, or CENTER.
- *
- * @example
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
- *
- */
-p5.prototype.imageMode = function(m) {
- p5._validateParameters('imageMode', arguments);
- if (
- m === constants.CORNER ||
- m === constants.CORNERS ||
- m === constants.CENTER
- ) {
- this._renderer._imageMode = m;
- }
-};
+ // tint the image if there is a tint
+ this._renderer.image(
+ img,
+ vals.sx,
+ vals.sy,
+ vals.sw,
+ vals.sh,
+ vals.dx,
+ vals.dy,
+ vals.dw,
+ vals.dh
+ );
+ };
+
+ /**
+ * 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.
+ *
+ * @method tint
+ * @param {Number} v1 red or hue value.
+ * @param {Number} v2 green or saturation value.
+ * @param {Number} v3 blue or brightness.
+ * @param {Number} [alpha]
+ *
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * 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.');
- * }
- *
- *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method tint
+ * @param {String} value CSS color string.
+ */
+
+ /**
+ * @method tint
+ * @param {Number} gray grayscale value.
+ * @param {Number} [alpha]
+ */
+
+ /**
+ * @method tint
+ * @param {Number[]} values array containing the red, green, blue &
+ * alpha components of the color.
+ */
+
+ /**
+ * @method tint
+ * @param {p5.Color} color the tint color
+ */
+ fn.tint = function(...args) {
+ p5._validateParameters('tint', args);
+ const c = this.color(...args);
+ this._renderer._tint = c.levels;
+ };
+
+ /**
+ * Removes the current tint set by tint().
+ *
+ * `noTint()` restores images to their original colors.
+ *
+ * @method noTint
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ */
+ fn.noTint = function() {
+ this._renderer._tint = null;
+ };
-export default p5;
+ /**
+ * Apply the current tint color to the input image, return the resulting
+ * canvas.
+ *
+ * @private
+ * @param {p5.Image} The image to be tinted
+ * @return {canvas} The resulting tinted canvas
+ */
+ fn._getTintedImageCanvas =
+ p5.Renderer2D.prototype._getTintedImageCanvas;
+
+ /**
+ * 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.
+ *
+ * @method imageMode
+ * @param {(CORNER|CORNERS|CENTER)} mode either CORNER, CORNERS, or CENTER.
+ *
+ * @example
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/laDefense.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
+ *
+ */
+ fn.imageMode = function(m) {
+ p5._validateParameters('imageMode', arguments);
+ if (
+ m === constants.CORNER ||
+ m === constants.CORNERS ||
+ m === constants.CENTER
+ ) {
+ this._renderer._imageMode = m;
+ }
+ };
+}
+
+export default loadingDisplaying;
+
+if(typeof p5 !== 'undefined'){
+ loadingDisplaying(p5, p5.prototype);
+}
diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js
index 5505e8a30a..fc45772c00 100644
--- a/src/image/p5.Image.js
+++ b/src/image/p5.Image.js
@@ -10,213 +10,67 @@
* This module defines the p5.Image class and P5 methods for
* drawing images to the main display canvas.
*/
-
-import p5 from '../core/main';
import Filters from './filters';
import Renderer from '../core/p5.Renderer';
-/*
- * Class methods
- */
-
-/**
- * A class to describe an image.
- *
- * Images are rectangular grids of pixels that can be displayed and modified.
- *
- * Existing images can be loaded by calling
- * loadImage(). Blank images can be created by
- * calling createImage(). `p5.Image` objects
- * have methods for common tasks such as applying filters and modifying
- * pixel values.
- *
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * 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.');
+ * }
+ *
+ *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('An image of a brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the GRAY filter.
- * img.filter(GRAY);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A grayscale image of a brick wall.');
- * }
- *
- *
- *
- *
- * @class p5.Image
- * @param {Number} width
- * @param {Number} height
- */
-p5.Image = class Image {
- constructor(width, height) {
- this.width = width;
- this.height = height;
- this.canvas = document.createElement('canvas');
- this.canvas.width = this.width;
- this.canvas.height = this.height;
- this.drawingContext = this.canvas.getContext('2d');
- this._pixelsState = this;
- this._pixelDensity = 1;
- //Object for working with GIFs, defaults to null
- this.gifProperties = null;
- //For WebGL Texturing only: used to determine whether to reupload texture to GPU
- this._modified = false;
- this.pixels = [];
- }
-
- /**
- * Gets or sets the pixel density for high pixel density displays.
- *
- * By default, the density will be set to 1.
- *
- * Call this method with no arguments to get the default density, or pass
- * in a number to set the density. If a non-positive number is provided,
- * it defaults to 1.
- *
- * @param {Number} [density] A scaling factor for the number of pixels per
- * side
- * @returns {Number} The current density if called without arguments, or the instance for chaining if setting density.
- */
- pixelDensity(density) {
- if (typeof density !== 'undefined') {
- // Setter: set the density and handle resize
- if (density <= 0) {
- const errorObj = {
- type: 'INVALID_VALUE',
- format: { types: ['Number'] },
- position: 1
- };
-
- p5._friendlyParamError(errorObj, 'pixelDensity');
-
- // Default to 1 in case of an invalid value
- density = 1;
- }
-
- this._pixelDensity = density;
-
- // Adjust canvas dimensions based on pixel density
- this.width /= density;
- this.height /= density;
-
- return this; // Return the image instance for chaining if needed
- } else {
- // Getter: return the default density
- return this._pixelDensity;
- }
- }
-
- /**
- * Helper function for animating GIF-based images with time
- */
- _animateGif(pInst) {
- const props = this.gifProperties;
- const curTime = pInst._lastRealFrameTime || window.performance.now();
- if (props.lastChangeTime === 0) {
- props.lastChangeTime = curTime;
- }
- if (props.playing) {
- props.timeDisplayed = curTime - props.lastChangeTime;
- const curDelay = props.frames[props.displayIndex].delay;
- if (props.timeDisplayed >= curDelay) {
- //GIF is bound to 'realtime' so can skip frames
- const skips = Math.floor(props.timeDisplayed / curDelay);
- props.timeDisplayed = 0;
- props.lastChangeTime = curTime;
- props.displayIndex += skips;
- props.loopCount = Math.floor(props.displayIndex / props.numFrames);
- if (props.loopLimit !== null && props.loopCount >= props.loopLimit) {
- props.playing = false;
- } else {
- const ind = props.displayIndex % props.numFrames;
- this.drawingContext.putImageData(props.frames[ind].image, 0, 0);
- props.displayIndex = ind;
- this.setModified(true);
- }
- }
- }
- }
-
- /**
- * Helper fxn for sharing pixel methods
- */
- _setProperty(prop, value) {
- this[prop] = value;
- this.setModified(true);
- }
-
+function image(p5, fn){
/**
- * Loads the current value of each pixel in the image into the `img.pixels`
- * array.
+ * A class to describe an image.
*
- * `img.loadPixels()` must be called before reading or modifying pixel
- * values.
+ * Images are rectangular grids of pixels that can be displayed and modified.
+ *
+ * Existing images can be loaded by calling
+ * loadImage(). Blank images can be created by
+ * calling createImage(). `p5.Image` objects
+ * have methods for common tasks such as applying filters and modifying
+ * pixel values.
*
* @example
*
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(66, 66);
- *
- * // Load the image's pixels.
- * img.loadPixels();
- *
- * // Set the pixels to black.
- * for (let x = 0; x < img.width; x += 1) {
- * for (let y = 0; y < img.height; y += 1) {
- * img.set(x, y, 0);
- * }
- * }
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 17, 17);
- *
- * describe('A black square drawn in the middle of a gray square.');
- * }
- *
- *
*
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of a brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the GRAY filter.
+ * img.filter(GRAY);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A grayscale image of a brick wall.');
+ * }
+ *
+ *
+ *
*
- *
* function setup() {
* createCanvas(100, 100);
*
@@ -246,7 +100,244 @@ p5.Image = class Image {
*
*
+ * @class p5.Image
+ * @param {Number} width
+ * @param {Number} height
+ */
+ p5.Image = class Image {
+ constructor(width, height) {
+ this.width = width;
+ this.height = height;
+ this.canvas = document.createElement('canvas');
+ this.canvas.width = this.width;
+ this.canvas.height = this.height;
+ this.drawingContext = this.canvas.getContext('2d');
+ this._pixelsState = this;
+ this._pixelDensity = 1;
+ //Object for working with GIFs, defaults to null
+ this.gifProperties = null;
+ //For WebGL Texturing only: used to determine whether to reupload texture to GPU
+ this._modified = false;
+ this.pixels = [];
+ }
+
+ /**
+ * Gets or sets the pixel density for high pixel density displays.
+ *
+ * By default, the density will be set to 1.
+ *
+ * Call this method with no arguments to get the default density, or pass
+ * in a number to set the density. If a non-positive number is provided,
+ * it defaults to 1.
+ *
+ * @param {Number} [density] A scaling factor for the number of pixels per
+ * side
+ * @returns {Number} The current density if called without arguments, or the instance for chaining if setting density.
+ */
+ pixelDensity(density) {
+ if (typeof density !== 'undefined') {
+ // Setter: set the density and handle resize
+ if (density <= 0) {
+ const errorObj = {
+ type: 'INVALID_VALUE',
+ format: { types: ['Number'] },
+ position: 1
+ };
+
+ p5._friendlyParamError(errorObj, 'pixelDensity');
+
+ // Default to 1 in case of an invalid value
+ density = 1;
+ }
+
+ this._pixelDensity = density;
+
+ // Adjust canvas dimensions based on pixel density
+ this.width /= density;
+ this.height /= density;
+
+ return this; // Return the image instance for chaining if needed
+ } else {
+ // Getter: return the default density
+ return this._pixelDensity;
+ }
+ }
+
+ /**
+ * Helper function for animating GIF-based images with time
+ */
+ _animateGif(pInst) {
+ const props = this.gifProperties;
+ const curTime = pInst._lastRealFrameTime || window.performance.now();
+ if (props.lastChangeTime === 0) {
+ props.lastChangeTime = curTime;
+ }
+ if (props.playing) {
+ props.timeDisplayed = curTime - props.lastChangeTime;
+ const curDelay = props.frames[props.displayIndex].delay;
+ if (props.timeDisplayed >= curDelay) {
+ //GIF is bound to 'realtime' so can skip frames
+ const skips = Math.floor(props.timeDisplayed / curDelay);
+ props.timeDisplayed = 0;
+ props.lastChangeTime = curTime;
+ props.displayIndex += skips;
+ props.loopCount = Math.floor(props.displayIndex / props.numFrames);
+ if (props.loopLimit !== null && props.loopCount >= props.loopLimit) {
+ props.playing = false;
+ } else {
+ const ind = props.displayIndex % props.numFrames;
+ this.drawingContext.putImageData(props.frames[ind].image, 0, 0);
+ props.displayIndex = ind;
+ this.setModified(true);
+ }
+ }
+ }
+ }
+
+ /**
+ * Helper fxn for sharing pixel methods
+ */
+ _setProperty(prop, value) {
+ this[prop] = value;
+ this.setModified(true);
+ }
+
+ /**
+ * Loads the current value of each pixel in the image into the `img.pixels`
+ * array.
+ *
+ * `img.loadPixels()` must be called before reading or modifying pixel
+ * values.
+ *
+ * @example
+ *
+ */
+ fn.loadBytes = async function (file, callback, errorCallback) {
+ const ret = {};
+
+ await new Promise(resolve => this.httpDo(
+ file,
+ 'GET',
+ 'arrayBuffer',
+ arrayBuffer => {
+ ret.bytes = new Uint8Array(arrayBuffer);
+
+ if (typeof callback === 'function') {
+ callback(ret);
}
- row = new p5.TableRow();
- row.arr = records[i];
- row.obj = makeObject(records[i], t.columns);
- t.addRow(row);
- }
- if (typeof callback === 'function') {
- callback(t);
- }
- resolve()
- },
- err => {
- // Error handling
- p5._friendlyFileLoadError(2, path);
+ resolve();
+ },
+ err => {
+ // Error handling
+ p5._friendlyFileLoadError(6, file);
- if (errorCallback) {
- errorCallback(err);
- } else {
- console.error(err);
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
}
- }
- ));
-
- return t;
-};
+ ));
+ return ret;
+ };
-// helper function to turn a row into a JSON object
-function makeObject(row, headers) {
- headers = headers || [];
- if (typeof headers === 'undefined') {
- for (let j = 0; j < row.length; j++) {
- headers[j.toString()] = j;
- }
- }
- return Object.fromEntries(
- headers
- .map((key, i) => [key, row[i]])
- );
-}
+ /**
+ * Method for executing an HTTP GET request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+ * calling
+ */
+ /**
+ * @method httpGet
+ * @param {String} path
+ * @param {Object|Boolean} data
+ * @param {Function} [callback]
+ * @param {Function} [errorCallback]
+ * @return {Promise}
+ */
+ /**
+ * @method httpGet
+ * @param {String} path
+ * @param {Function} callback
+ * @param {Function} [errorCallback]
+ * @return {Promise}
+ */
+ fn.httpGet = function (...args) {
+ p5._validateParameters('httpGet', args);
-/**
- * Loads an XML file to create a p5.XML object.
- *
- * Extensible Markup Language
- * (XML)
- * is a standard format for sending data between applications. Like HTML, the
- * XML format is based on tags and attributes, as in
- * `<time units="s">1234</time>`.
- *
- * The first parameter, `path`, is always a string with the path to the file.
- * Paths to local files should be relative, as in
- * `loadXML('assets/data.xml')`. URLs such as `'https://example.com/data.xml'`
- * may be blocked due to browser security.
- *
- * The second parameter, `successCallback`, is optional. If a function is
- * passed, as in `loadXML('assets/data.xml', handleData)`, then the
- * `handleData()` function will be called once the data loads. The
- * p5.XML object created from the data will be passed
- * to `handleData()` as its only argument.
- *
- * The third parameter, `failureCallback`, is also optional. If a function is
- * passed, as in `loadXML('assets/data.xml', handleData, handleFailure)`, then
- * the `handleFailure()` function will be called if an error occurs while
- * loading. The `Error` object will be passed to `handleFailure()` as its only
- * argument.
- *
- * Note: Data can take time to load. Calling `loadXML()` within
- * preload() ensures data loads before it's used in
- * setup() or draw().
- *
- * @method loadXML
- * @param {String} path path of the XML file to be loaded.
- * @param {Function} [successCallback] function to call once the data is
- * loaded. Will be passed the
- * p5.XML object.
- * @param {Function} [errorCallback] function to call if the data fails to
- * load. Will be passed an `Error` event
- * object.
- * @return {p5.XML} XML data loaded into a p5.XML
- * object.
- *
- * @example
- *
+ */
+ /**
+ * @method httpPost
+ * @param {String} path
+ * @param {Object|Boolean} data
+ * @param {Function} [callback]
+ * @param {Function} [errorCallback]
+ * @return {Promise}
+ */
+ /**
+ * @method httpPost
+ * @param {String} path
+ * @param {Function} callback
+ * @param {Function} [errorCallback]
+ * @return {Promise}
+ */
+ fn.httpPost = function (...args) {
+ p5._validateParameters('httpPost', args);
- resolve()
- },
- function (err) {
- // Error handling
- p5._friendlyFileLoadError(1, arguments[0]);
+ args.splice(1, 0, 'POST');
+ return fn.httpDo.apply(this, args);
+ };
- if (errorCallback) {
- errorCallback(err);
+ /**
+ * Method for executing an HTTP request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text.
+ * For more advanced use, you may also pass in the path as the first argument + * and a object as the second argument, the signature follows the one specified + * in the Fetch API specification. + * This method is suitable for fetching files up to size of 64MB when "GET" is used. + * + * @method httpDo + * @param {String} path name of the file or url to load + * @param {String} [method] either "GET", "POST", or "PUT", + * defaults to "GET" + * @param {String} [datatype] "json", "jsonp", "xml", or "text" + * @param {Object} [data] param data passed sent with request + * @param {Function} [callback] function to be executed after + * httpGet() completes, data is passed in + * as first argument + * @param {Function} [errorCallback] function to be executed if + * there is an error, response is passed + * in as first argument + * @return {Promise} A promise that resolves with the data when the operation + * completes successfully or rejects with the error after + * one occurs. + * + * @example + *
- */
-p5.prototype.loadBytes = async function (file, callback, errorCallback) {
- const ret = {};
-
- await new Promise(resolve => this.httpDo(
- file,
- 'GET',
- 'arrayBuffer',
- arrayBuffer => {
- ret.bytes = new Uint8Array(arrayBuffer);
-
- if (typeof callback === 'function') {
- callback(ret);
+ // The number of arguments minus callbacks
+ const argsCount = args.length - cbCount;
+ const path = args[0];
+ if (
+ argsCount === 2 &&
+ typeof path === 'string' &&
+ typeof args[1] === 'object'
+ ) {
+ // Intended for more advanced use, pass in Request parameters directly
+ request = new Request(path, args[1]);
+ callback = args[2];
+ errorCallback = args[3];
+ } else {
+ // Provided with arguments
+ let method = 'GET';
+ let data;
+
+ for (let j = 1; j < args.length; j++) {
+ const a = args[j];
+ if (typeof a === 'string') {
+ if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
+ method = a;
+ } else if (
+ a === 'json' ||
+ a === 'binary' ||
+ a === 'arrayBuffer' ||
+ a === 'xml' ||
+ a === 'text' ||
+ a === 'table'
+ ) {
+ type = a;
+ } else {
+ data = a;
+ }
+ } else if (typeof a === 'number') {
+ data = a.toString();
+ } else if (typeof a === 'object') {
+ if (a instanceof p5.XML) {
+ data = a.serialize();
+ contentType = 'application/xml';
+ } else {
+ data = JSON.stringify(a);
+ contentType = 'application/json';
+ }
+ } else if (typeof a === 'function') {
+ if (!callback) {
+ callback = a;
+ } else {
+ errorCallback = a;
+ }
+ }
}
- resolve();
- },
- err => {
- // Error handling
- p5._friendlyFileLoadError(6, file);
-
- if (errorCallback) {
- errorCallback(err);
+ let headers =
+ method === 'GET'
+ ? new Headers()
+ : new Headers({ 'Content-Type': contentType });
+
+ request = new Request(path, {
+ method,
+ mode: 'cors',
+ body: data,
+ headers
+ });
+ }
+ // do some sort of smart type checking
+ if (!type) {
+ if (path.includes('json')) {
+ type = 'json';
+ } else if (path.includes('xml')) {
+ type = 'xml';
} else {
- throw err;
+ type = 'text';
}
}
- ));
- return ret;
-};
-
-/**
- * Method for executing an HTTP GET request. If data type is not specified,
- * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
- * calling
- */
-/**
- * @method httpGet
- * @param {String} path
- * @param {Object|Boolean} data
- * @param {Function} [callback]
- * @param {Function} [errorCallback]
- * @return {Promise}
- */
-/**
- * @method httpGet
- * @param {String} path
- * @param {Function} callback
- * @param {Function} [errorCallback]
- * @return {Promise}
- */
-p5.prototype.httpGet = function (...args) {
- p5._validateParameters('httpGet', args);
-
- args.splice(1, 0, 'GET');
- return p5.prototype.httpDo.apply(this, args);
-};
-
-/**
- * Method for executing an HTTP POST request. If data type is not specified,
- * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
- * calling
- */
-/**
- * @method httpPost
- * @param {String} path
- * @param {Object|Boolean} data
- * @param {Function} [callback]
- * @param {Function} [errorCallback]
- * @return {Promise}
- */
-/**
- * @method httpPost
- * @param {String} path
- * @param {Function} callback
- * @param {Function} [errorCallback]
- * @return {Promise}
- */
-p5.prototype.httpPost = function (...args) {
- p5._validateParameters('httpPost', args);
- args.splice(1, 0, 'POST');
- return p5.prototype.httpDo.apply(this, args);
-};
-
-/**
- * Method for executing an HTTP request. If data type is not specified,
- * p5 will try to guess based on the URL, defaulting to text.
- * For more advanced use, you may also pass in the path as the first argument - * and a object as the second argument, the signature follows the one specified - * in the Fetch API specification. - * This method is suitable for fetching files up to size of 64MB when "GET" is used. - * - * @method httpDo - * @param {String} path name of the file or url to load - * @param {String} [method] either "GET", "POST", or "PUT", - * defaults to "GET" - * @param {String} [datatype] "json", "jsonp", "xml", or "text" - * @param {Object} [data] param data passed sent with request - * @param {Function} [callback] function to be executed after - * httpGet() completes, data is passed in - * as first argument - * @param {Function} [errorCallback] function to be executed if - * there is an error, response is passed - * in as first argument - * @return {Promise} A promise that resolves with the data when the operation - * completes successfully or rejects with the error after - * one occurs. - * - * @example - *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+
+ fn.save = function (object, _filename, _options) {
+ // parse the arguments and figure out which things we are saving
+ const args = arguments;
+ // =================================================
+ // OPTION 1: saveCanvas...
+
+ // if no arguments are provided, save canvas
+ const cnv = this._curElement ? this._curElement.elt : this.elt;
+ if (args.length === 0) {
+ fn.saveCanvas(cnv);
+ return;
+ } else if (args[0] instanceof Renderer || args[0] instanceof p5.Graphics) {
+ // otherwise, parse the arguments
+
+ // if first param is a p5Graphics, then saveCanvas
+ fn.saveCanvas(args[0].elt, args[1], args[2]);
+ return;
+ } else if (args.length === 1 && typeof args[0] === 'string') {
+ // if 1st param is String and only one arg, assume it is canvas filename
+ fn.saveCanvas(cnv, args[0]);
+ } else {
+ // =================================================
+ // OPTION 2: extension clarifies saveStrings vs. saveJSON
+ const extension = _checkFileExtension(args[1], args[2])[1];
+ switch (extension) {
+ case 'json':
+ fn.saveJSON(args[0], args[1], args[2]);
+ return;
+ case 'txt':
+ fn.saveStrings(args[0], args[1], args[2]);
+ return;
+ // =================================================
+ // OPTION 3: decide based on object...
+ default:
+ if (args[0] instanceof Array) {
+ fn.saveStrings(args[0], args[1], args[2]);
+ } else if (args[0] instanceof p5.Table) {
+ fn.saveTable(args[0], args[1], args[2]);
+ } else if (args[0] instanceof p5.Image) {
+ fn.saveCanvas(args[0].canvas, args[1]);
+ } else if (args[0] instanceof p5.SoundFile) {
+ fn.saveSound(args[0], args[1], args[2], args[3]);
+ }
+ }
+ }
};
/**
- * Writes data to the print stream with new lines added.
+ * Saves an `Object` or `Array` to a JSON file.
+ *
+ * JavaScript Object Notation
+ * (JSON)
+ * is a standard format for sending data between applications. The format is
+ * based on JavaScript objects which have keys and values. JSON files store
+ * data in an object with strings as keys. Values can be strings, numbers,
+ * Booleans, arrays, `null`, or other objects.
+ *
+ * The first parameter, `json`, is the data to save. The data can be an array,
+ * as in `[1, 2, 3]`, or an object, as in
+ * `{ x: 50, y: 50, color: 'deeppink' }`.
+ *
+ * The second parameter, `filename`, is a string that sets the file's name.
+ * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
+ * `[1, 2, 3]` to a file called `data.json` on the user's computer.
*
- * The parameter, `data`, is the data to write. `data` can be a number or
- * string, as in `myWriter.print('hi')`, or an array of numbers and strings,
- * as in `myWriter.print([1, 2, 3])`. A comma will be inserted between array
- * array elements when they're added to the print stream.
+ * The third parameter, `optimize`, is optional. If `true` is passed, as in
+ * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
+ * be removed to reduce the file size.
*
- * @method print
- * @param {String|Number|Array} data data to be written as a string, number,
- * or array of strings and numbers.
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * @method saveJSON
+ * @param {Array|Object} json data to save.
+ * @param {String} filename name of the file to be saved.
+ * @param {Boolean} [optimize] whether to trim unneeded whitespace. Defaults
+ * to `true`.
*
* @example
*
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- */
-p5.prototype.save = function (object, _filename, _options) {
- // parse the arguments and figure out which things we are saving
- const args = arguments;
- // =================================================
- // OPTION 1: saveCanvas...
-
- // if no arguments are provided, save canvas
- const cnv = this._curElement ? this._curElement.elt : this.elt;
- if (args.length === 0) {
- p5.prototype.saveCanvas(cnv);
- return;
- } else if (args[0] instanceof Renderer || args[0] instanceof p5.Graphics) {
- // otherwise, parse the arguments
-
- // if first param is a p5Graphics, then saveCanvas
- p5.prototype.saveCanvas(args[0].elt, args[1], args[2]);
- return;
- } else if (args.length === 1 && typeof args[0] === 'string') {
- // if 1st param is String and only one arg, assume it is canvas filename
- p5.prototype.saveCanvas(cnv, args[0]);
- } else {
- // =================================================
- // OPTION 2: extension clarifies saveStrings vs. saveJSON
- const extension = _checkFileExtension(args[1], args[2])[1];
- switch (extension) {
- case 'json':
- p5.prototype.saveJSON(args[0], args[1], args[2]);
- return;
- case 'txt':
- p5.prototype.saveStrings(args[0], args[1], args[2]);
- return;
- // =================================================
- // OPTION 3: decide based on object...
- default:
- if (args[0] instanceof Array) {
- p5.prototype.saveStrings(args[0], args[1], args[2]);
- } else if (args[0] instanceof p5.Table) {
- p5.prototype.saveTable(args[0], args[1], args[2]);
- } else if (args[0] instanceof p5.Image) {
- p5.prototype.saveCanvas(args[0].canvas, args[1]);
- } else if (args[0] instanceof p5.SoundFile) {
- p5.prototype.saveSound(args[0], args[1], args[2], args[3]);
- }
- }
- }
-};
-
-/**
- * Saves an `Object` or `Array` to a JSON file.
- *
- * JavaScript Object Notation
- * (JSON)
- * is a standard format for sending data between applications. The format is
- * based on JavaScript objects which have keys and values. JSON files store
- * data in an object with strings as keys. Values can be strings, numbers,
- * Booleans, arrays, `null`, or other objects.
- *
- * The first parameter, `json`, is the data to save. The data can be an array,
- * as in `[1, 2, 3]`, or an object, as in
- * `{ x: 50, y: 50, color: 'deeppink' }`.
- *
- * The second parameter, `filename`, is a string that sets the file's name.
- * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
- * `[1, 2, 3]` to a file called `data.json` on the user's computer.
- *
- * The third parameter, `optimize`, is optional. If `true` is passed, as in
- * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
- * be removed to reduce the file size.
- *
- * Note: The browser will either save the file immediately or prompt the user
- * with a dialogue window.
- *
- * @method saveJSON
- * @param {Array|Object} json data to save.
- * @param {String} filename name of the file to be saved.
- * @param {Boolean} [optimize] whether to trim unneeded whitespace. Defaults
- * to `true`.
- *
- * @example
- *
- */
-p5.prototype.saveTable = function (table, filename, options) {
- p5._validateParameters('saveTable', arguments);
- let ext;
- if (options === undefined) {
- ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
- } else {
- ext = options;
- }
- const pWriter = this.createWriter(filename, ext);
+ /**
+ * Writes the contents of a Table object to a file. Defaults to a
+ * text file with comma-separated-values ('csv') but can also
+ * use tab separation ('tsv'), or generate an HTML table ('html').
+ * The file saving process and location of the saved file will
+ * vary between web browsers.
+ *
+ * @method saveTable
+ * @param {p5.Table} Table the Table object to save to a file
+ * @param {String} filename the filename to which the Table should be saved
+ * @param {String} [options] can be one of "tsv", "csv", or "html"
+ * @example
+ *
+ */
+ fn.saveTable = function (table, filename, options) {
+ p5._validateParameters('saveTable', arguments);
+ let ext;
+ if (options === undefined) {
+ ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
+ } else {
+ ext = options;
+ }
+ const pWriter = this.createWriter(filename, ext);
- const header = table.columns;
+ const header = table.columns;
- let sep = ','; // default to CSV
- if (ext === 'tsv') {
- sep = '\t';
- }
- if (ext !== 'html') {
- // make header if it has values
- if (header[0] !== '0') {
- for (let h = 0; h < header.length; h++) {
- if (h < header.length - 1) {
- pWriter.write(header[h] + sep);
- } else {
- pWriter.write(header[h]);
- }
- }
- pWriter.write('\n');
+ let sep = ','; // default to CSV
+ if (ext === 'tsv') {
+ sep = '\t';
}
-
- // make rows
- for (let i = 0; i < table.rows.length; i++) {
- let j;
- for (j = 0; j < table.rows[i].arr.length; j++) {
- if (j < table.rows[i].arr.length - 1) {
- //double quotes should be inserted in csv only if contains comma separated single value
- if (ext === 'csv' && String(table.rows[i].arr[j]).includes(',')) {
- pWriter.write('"' + table.rows[i].arr[j] + '"' + sep);
+ if (ext !== 'html') {
+ // make header if it has values
+ if (header[0] !== '0') {
+ for (let h = 0; h < header.length; h++) {
+ if (h < header.length - 1) {
+ pWriter.write(header[h] + sep);
} else {
- pWriter.write(table.rows[i].arr[j] + sep);
+ pWriter.write(header[h]);
}
- } else {
- //double quotes should be inserted in csv only if contains comma separated single value
- if (ext === 'csv' && String(table.rows[i].arr[j]).includes(',')) {
- pWriter.write('"' + table.rows[i].arr[j] + '"');
+ }
+ pWriter.write('\n');
+ }
+
+ // make rows
+ for (let i = 0; i < table.rows.length; i++) {
+ let j;
+ for (j = 0; j < table.rows[i].arr.length; j++) {
+ if (j < table.rows[i].arr.length - 1) {
+ //double quotes should be inserted in csv only if contains comma separated single value
+ if (ext === 'csv' && String(table.rows[i].arr[j]).includes(',')) {
+ pWriter.write('"' + table.rows[i].arr[j] + '"' + sep);
+ } else {
+ pWriter.write(table.rows[i].arr[j] + sep);
+ }
} else {
- pWriter.write(table.rows[i].arr[j]);
+ //double quotes should be inserted in csv only if contains comma separated single value
+ if (ext === 'csv' && String(table.rows[i].arr[j]).includes(',')) {
+ pWriter.write('"' + table.rows[i].arr[j] + '"');
+ } else {
+ pWriter.write(table.rows[i].arr[j]);
+ }
}
}
+ pWriter.write('\n');
}
- pWriter.write('\n');
- }
- } else {
- // otherwise, make HTML
- pWriter.print('');
- pWriter.print('');
- let str = ' ');
-
- pWriter.print('');
- pWriter.print(' ');
-
- // make header if it has values
- if (header[0] !== '0') {
- pWriter.print('
');
- pWriter.print('');
- pWriter.print('');
- }
- // close and clear the pWriter
- pWriter.close();
- pWriter.clear();
-}; // end saveTable()
-
-/**
- * Generate a blob of file data as a url to prepare for download.
- * Accepts an array of data, a filename, and an extension (optional).
- * This is a private function because it does not do any formatting,
- * but it is used by saveStrings, saveJSON, saveTable etc.
- *
- * @param {Array} dataToDownload
- * @param {String} filename
- * @param {String} [extension]
- * @private
- */
-p5.prototype.writeFile = function (dataToDownload, filename, extension) {
- let type = 'application/octet-stream';
- if (p5.prototype._isSafari()) {
- type = 'text/plain';
- }
- const blob = new Blob(dataToDownload, {
- type
- });
- p5.prototype.downloadFile(blob, filename, extension);
-};
+ // close and clear the pWriter
+ pWriter.close();
+ pWriter.clear();
+ }; // end saveTable()
-/**
- * Forces download. Accepts a url to filedata/blob, a filename,
- * and an extension (optional).
- * This is a private function because it does not do any formatting,
- * but it is used by saveStrings, saveJSON, saveTable etc.
- *
- * @method downloadFile
- * @private
- * @param {String|Blob} data either an href generated by createObjectURL,
- * or a Blob object containing the data
- * @param {String} [filename]
- * @param {String} [extension]
- */
-p5.prototype.downloadFile = function (data, fName, extension) {
- const fx = _checkFileExtension(fName, extension);
- const filename = fx[0];
+ /**
+ * Generate a blob of file data as a url to prepare for download.
+ * Accepts an array of data, a filename, and an extension (optional).
+ * This is a private function because it does not do any formatting,
+ * but it is used by saveStrings, saveJSON, saveTable etc.
+ *
+ * @param {Array} dataToDownload
+ * @param {String} filename
+ * @param {String} [extension]
+ * @private
+ */
+ fn.writeFile = function (dataToDownload, filename, extension) {
+ let type = 'application/octet-stream';
+ if (fn._isSafari()) {
+ type = 'text/plain';
+ }
+ const blob = new Blob(dataToDownload, {
+ type
+ });
+ fn.downloadFile(blob, filename, extension);
+ };
- if (data instanceof Blob) {
- fileSaver.saveAs(data, filename);
- return;
- }
+ /**
+ * Forces download. Accepts a url to filedata/blob, a filename,
+ * and an extension (optional).
+ * This is a private function because it does not do any formatting,
+ * but it is used by saveStrings, saveJSON, saveTable etc.
+ *
+ * @method downloadFile
+ * @private
+ * @param {String|Blob} data either an href generated by createObjectURL,
+ * or a Blob object containing the data
+ * @param {String} [filename]
+ * @param {String} [extension]
+ */
+ fn.downloadFile = function (data, fName, extension) {
+ const fx = _checkFileExtension(fName, extension);
+ const filename = fx[0];
- const a = document.createElement('a');
- a.href = data;
- a.download = filename;
+ if (data instanceof Blob) {
+ fileSaver.saveAs(data, filename);
+ return;
+ }
- // Firefox requires the link to be added to the DOM before click()
- a.onclick = e => {
- destroyClickedElement(e);
- e.stopPropagation();
+ const a = document.createElement('a');
+ a.href = data;
+ a.download = filename;
+
+ // Firefox requires the link to be added to the DOM before click()
+ a.onclick = e => {
+ destroyClickedElement(e);
+ e.stopPropagation();
+ };
+
+ a.style.display = 'none';
+ document.body.appendChild(a);
+
+ // Safari will open this file in the same page as a confusing Blob.
+ if (fn._isSafari()) {
+ let aText = 'Hello, Safari user! To download this file...\n';
+ aText += '1. Go to File --> Save As.\n';
+ aText += '2. Choose "Page Source" as the Format.\n';
+ aText += `3. Name it with this extension: ."${fx[1]}"`;
+ alert(aText);
+ }
+ a.click();
};
- a.style.display = 'none';
- document.body.appendChild(a);
-
- // Safari will open this file in the same page as a confusing Blob.
- if (p5.prototype._isSafari()) {
- let aText = 'Hello, Safari user! To download this file...\n';
- aText += '1. Go to File --> Save As.\n';
- aText += '2. Choose "Page Source" as the Format.\n';
- aText += `3. Name it with this extension: ."${fx[1]}"`;
- alert(aText);
+ /**
+ * Returns a file extension, or another string
+ * if the provided parameter has no extension.
+ *
+ * @param {String} filename
+ * @param {String} [extension]
+ * @return {String[]} [fileName, fileExtension]
+ *
+ * @private
+ */
+ function _checkFileExtension(filename, extension) {
+ if (!extension || extension === true || extension === 'true') {
+ extension = '';
+ }
+ if (!filename) {
+ filename = 'untitled';
+ }
+ let ext = '';
+ // make sure the file will have a name, see if filename needs extension
+ if (filename && filename.includes('.')) {
+ ext = filename.split('.').pop();
+ }
+ // append extension if it doesn't exist
+ if (extension) {
+ if (ext !== extension) {
+ ext = extension;
+ filename = `${filename}.${ext}`;
+ }
+ }
+ return [filename, ext];
}
- a.click();
-};
+ fn._checkFileExtension = _checkFileExtension;
-/**
- * Returns a file extension, or another string
- * if the provided parameter has no extension.
- *
- * @param {String} filename
- * @param {String} [extension]
- * @return {String[]} [fileName, fileExtension]
- *
- * @private
- */
-function _checkFileExtension(filename, extension) {
- if (!extension || extension === true || extension === 'true') {
- extension = '';
- }
- if (!filename) {
- filename = 'untitled';
- }
- let ext = '';
- // make sure the file will have a name, see if filename needs extension
- if (filename && filename.includes('.')) {
- ext = filename.split('.').pop();
- }
- // append extension if it doesn't exist
- if (extension) {
- if (ext !== extension) {
- ext = extension;
- filename = `${filename}.${ext}`;
- }
+ /**
+ * Returns true if the browser is Safari, false if not.
+ * Safari makes trouble for downloading files.
+ *
+ * @return {Boolean} [description]
+ * @private
+ */
+ fn._isSafari = function () {
+ return window.HTMLElement.toString().includes('Constructor');
+ };
+
+ /**
+ * Helper function, a callback for download that deletes
+ * an invisible anchor element from the DOM once the file
+ * has been automatically downloaded.
+ *
+ * @private
+ */
+ function destroyClickedElement(event) {
+ document.body.removeChild(event.target);
}
- return [filename, ext];
}
-p5.prototype._checkFileExtension = _checkFileExtension;
-/**
- * Returns true if the browser is Safari, false if not.
- * Safari makes trouble for downloading files.
- *
- * @return {Boolean} [description]
- * @private
- */
-p5.prototype._isSafari = function () {
- return window.HTMLElement.toString().includes('Constructor');
-};
+export default files;
-/**
- * Helper function, a callback for download that deletes
- * an invisible anchor element from the DOM once the file
- * has been automatically downloaded.
- *
- * @private
- */
-function destroyClickedElement(event) {
- document.body.removeChild(event.target);
+if(typeof p5 !== 'undefined'){
+ files(p5, p5.prototype);
}
-
-export default p5;
diff --git a/src/io/index.js b/src/io/index.js
new file mode 100644
index 0000000000..474d035cd9
--- /dev/null
+++ b/src/io/index.js
@@ -0,0 +1,11 @@
+import files from './files.js';
+import table from './p5.Table.js';
+import tableRow from './p5.TableRow.js';
+import xml from './p5.XML.js';
+
+export default function(p5){
+ p5.registerAddon(files);
+ p5.registerAddon(table);
+ p5.registerAddon(tableRow);
+ p5.registerAddon(xml);
+}
diff --git a/src/io/p5.Table.js b/src/io/p5.Table.js
index 36ab056631..7dca60a9bd 100644
--- a/src/io/p5.Table.js
+++ b/src/io/p5.Table.js
@@ -4,1303 +4,1306 @@
* @requires core
*/
-import p5 from '../core/main';
-
-/**
- * Table Options
- * Generic class for handling tabular data, typically from a
- * CSV, TSV, or other sort of spreadsheet file.
- * CSV files are
- *
- * comma separated values, often with the data in quotes. TSV
- * files use tabs as separators, and usually don't bother with the
- * quotes.
- * File names should end with .csv if they're comma separated.
- * A rough "spec" for CSV can be found
- * here.
- * To load files, use the loadTable method.
- * To save tables to your computer, use the save method
- * or the saveTable method.
- *
- * Possible options include:
- *
- */
- removeTokens (chars, column) {
- const escape = s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
- const charArray = [];
- for (let i = 0; i < chars.length; i++) {
- charArray.push(escape(chars.charAt(i)));
+ /**
+ * Returns the total number of rows in a Table.
+ *
+ * @return {Integer} Number of rows in this table
+ * @example
+ *
+ */
+ removeTokens (chars, column) {
+ const escape = s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+ const charArray = [];
+ for (let i = 0; i < chars.length; i++) {
+ charArray.push(escape(chars.charAt(i)));
}
- } else if (typeof column === 'string') {
- for (let j = 0; j < this.rows.length; j++) {
- let val = this.rows[j].obj[column];
- val = val.replace(regex, '');
- this.rows[j].obj[column] = val;
- const pos = this.columns.indexOf(column);
- this.rows[j].arr[pos] = val;
- }
- } else {
- for (let k = 0; k < this.rows.length; k++) {
- let str = this.rows[k].arr[column];
- str = str.replace(regex, '');
- this.rows[k].arr[column] = str;
- this.rows[k].obj[this.columns[column]] = str;
+ const regex = new RegExp(charArray.join('|'), 'g');
+
+ if (typeof column === 'undefined') {
+ for (let c = 0; c < this.columns.length; c++) {
+ for (let d = 0; d < this.rows.length; d++) {
+ let s = this.rows[d].arr[c];
+ s = s.replace(regex, '');
+ this.rows[d].arr[c] = s;
+ this.rows[d].obj[this.columns[c]] = s;
+ }
+ }
+ } else if (typeof column === 'string') {
+ for (let j = 0; j < this.rows.length; j++) {
+ let val = this.rows[j].obj[column];
+ val = val.replace(regex, '');
+ this.rows[j].obj[column] = val;
+ const pos = this.columns.indexOf(column);
+ this.rows[j].arr[pos] = val;
+ }
+ } else {
+ for (let k = 0; k < this.rows.length; k++) {
+ let str = this.rows[k].arr[column];
+ str = str.replace(regex, '');
+ this.rows[k].arr[column] = str;
+ this.rows[k].obj[this.columns[column]] = str;
+ }
}
}
- }
- /**
- * Trims leading and trailing whitespace, such as spaces and tabs,
- * from String table values. If no column is specified, then the
- * values in all columns and rows are trimmed. A specific column
- * may be referenced by either its ID or title.
- *
- * @param {String|Integer} [column] Column ID (number)
- * or name (string)
- * @example
- *
- */
- trim (column) {
- const regex = new RegExp(' ', 'g');
+ /**
+ * Trims leading and trailing whitespace, such as spaces and tabs,
+ * from String table values. If no column is specified, then the
+ * values in all columns and rows are trimmed. A specific column
+ * may be referenced by either its ID or title.
+ *
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ * @example
+ *
+ */
+ trim (column) {
+ const regex = new RegExp(' ', 'g');
- if (typeof column === 'undefined') {
- for (let c = 0; c < this.columns.length; c++) {
- for (let d = 0; d < this.rows.length; d++) {
- let s = this.rows[d].arr[c];
- s = s.replace(regex, '');
- this.rows[d].arr[c] = s;
- this.rows[d].obj[this.columns[c]] = s;
+ if (typeof column === 'undefined') {
+ for (let c = 0; c < this.columns.length; c++) {
+ for (let d = 0; d < this.rows.length; d++) {
+ let s = this.rows[d].arr[c];
+ s = s.replace(regex, '');
+ this.rows[d].arr[c] = s;
+ this.rows[d].obj[this.columns[c]] = s;
+ }
+ }
+ } else if (typeof column === 'string') {
+ for (let j = 0; j < this.rows.length; j++) {
+ let val = this.rows[j].obj[column];
+ val = val.replace(regex, '');
+ this.rows[j].obj[column] = val;
+ const pos = this.columns.indexOf(column);
+ this.rows[j].arr[pos] = val;
+ }
+ } else {
+ for (let k = 0; k < this.rows.length; k++) {
+ let str = this.rows[k].arr[column];
+ str = str.replace(regex, '');
+ this.rows[k].arr[column] = str;
+ this.rows[k].obj[this.columns[column]] = str;
}
- }
- } else if (typeof column === 'string') {
- for (let j = 0; j < this.rows.length; j++) {
- let val = this.rows[j].obj[column];
- val = val.replace(regex, '');
- this.rows[j].obj[column] = val;
- const pos = this.columns.indexOf(column);
- this.rows[j].arr[pos] = val;
- }
- } else {
- for (let k = 0; k < this.rows.length; k++) {
- let str = this.rows[k].arr[column];
- str = str.replace(regex, '');
- this.rows[k].arr[column] = str;
- this.rows[k].obj[this.columns[column]] = str;
}
}
- }
- /**
- * Use removeColumn() to remove an existing column from a Table
- * object. The column to be removed may be identified by either
- * its title (a String) or its index value (an int).
- * removeColumn(0) would remove the first column, removeColumn(1)
- * would remove the second column, and so on.
- *
- * @param {String|Integer} column columnName (string) or ID (number)
- *
- * @example
- *
- */
- setString (row, column, value) {
- this.rows[row].setString(column, value);
- }
+ /**
+ * Stores a Float value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {Number} value value to assign
+ *
+ * @example
+ *
+ */
+ setString (row, column, value) {
+ this.rows[row].setString(column, value);
+ }
- /**
- * Retrieves a Float value from the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified by
- * either its ID or title.
- *
- * @param {Integer} row row ID
- * @param {String|Integer} column columnName (string) or
- * ID (number)
- * @return {Number}
- *
- * @example
- *
- */
- set(column, value) {
- // if typeof column is string, use .obj
- if (typeof column === 'string') {
- const cPos = this.table.columns.indexOf(column); // index of columnID
- if (cPos >= 0) {
- this.obj[column] = value;
- this.arr[cPos] = value;
- } else {
- throw new Error(`This table has no column named "${column}"`);
- }
- } else {
- // if typeof column is number, use .arr
- if (column < this.table.columns.length) {
- this.arr[column] = value;
- const cTitle = this.table.columns[column];
- this.obj[cTitle] = value;
+ /**
+ * Stores a value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method set
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number} value The value to be stored
+ *
+ * @example
+ *
+ */
+ set(column, value) {
+ // if typeof column is string, use .obj
+ if (typeof column === 'string') {
+ const cPos = this.table.columns.indexOf(column); // index of columnID
+ if (cPos >= 0) {
+ this.obj[column] = value;
+ this.arr[cPos] = value;
+ } else {
+ throw new Error(`This table has no column named "${column}"`);
+ }
} else {
- throw new Error(`Column #${column} is out of the range of this table`);
+ // if typeof column is number, use .arr
+ if (column < this.table.columns.length) {
+ this.arr[column] = value;
+ const cTitle = this.table.columns[column];
+ this.obj[cTitle] = value;
+ } else {
+ throw new Error(`Column #${column} is out of the range of this table`);
+ }
}
}
- }
-
- /**
- * Stores a Float value in the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method setNum
- * @param {String|Integer} column Column ID (Number)
- * or Title (String)
- * @param {Number|String} value The value to be stored
- * as a Float
- * @example
- *
- */
- setNum(column, value) {
- const floatVal = parseFloat(value);
- this.set(column, floatVal);
- }
- /**
- * Stores a String value in the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method setString
- * @param {String|Integer} column Column ID (Number)
- * or Title (String)
- * @param {String|Number|Boolean|Object} value The value to be stored
- * as a String
- * @example
- *
- */
- setString(column, value) {
- const stringVal = value.toString();
- this.set(column, stringVal);
- }
+ /**
+ * Stores a Float value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method setNum
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {Number|String} value The value to be stored
+ * as a Float
+ * @example
+ *
+ */
+ setNum(column, value) {
+ const floatVal = parseFloat(value);
+ this.set(column, floatVal);
+ }
- /**
- * Retrieves a value from the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method get
- * @param {String|Integer} column columnName (string) or
- * ID (number)
- * @return {String|Number}
- *
- * @example
- *
- */
- get(column) {
- if (typeof column === 'string') {
- return this.obj[column];
- } else {
- return this.arr[column];
+ /**
+ * Stores a String value in the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method setString
+ * @param {String|Integer} column Column ID (Number)
+ * or Title (String)
+ * @param {String|Number|Boolean|Object} value The value to be stored
+ * as a String
+ * @example
+ *
+ */
+ setString(column, value) {
+ const stringVal = value.toString();
+ this.set(column, stringVal);
}
- }
- /**
- * Retrieves a Float value from the TableRow's specified
- * column. The column may be specified by either its ID or
- * title.
- *
- * @method getNum
- * @param {String|Integer} column columnName (string) or
- * ID (number)
- * @return {Number} Float Floating point number
- * @example
- *
- */
- getNum(column) {
- let ret;
- if (typeof column === 'string') {
- ret = parseFloat(this.obj[column]);
- } else {
- ret = parseFloat(this.arr[column]);
+ /**
+ * Retrieves a value from the TableRow's specified column.
+ * The column may be specified by either its ID or title.
+ *
+ * @method get
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String|Number}
+ *
+ * @example
+ *
+ */
+ get(column) {
+ if (typeof column === 'string') {
+ return this.obj[column];
+ } else {
+ return this.arr[column];
+ }
}
- if (ret.toString() === 'NaN') {
- throw `Error: ${this.obj[column]} is NaN (Not a Number)`;
+ /**
+ * Retrieves a Float value from the TableRow's specified
+ * column. The column may be specified by either its ID or
+ * title.
+ *
+ * @method getNum
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number} Float Floating point number
+ * @example
+ *
+ */
+ getNum(column) {
+ let ret;
+ if (typeof column === 'string') {
+ ret = parseFloat(this.obj[column]);
+ } else {
+ ret = parseFloat(this.arr[column]);
+ }
+
+ if (ret.toString() === 'NaN') {
+ throw `Error: ${this.obj[column]} is NaN (Not a Number)`;
+ }
+ return ret;
}
- return ret;
- }
- /**
- * Retrieves an String value from the TableRow's specified
- * column. The column may be specified by either its ID or
- * title.
- *
- * @method getString
- * @param {String|Integer} column columnName (string) or
- * ID (number)
- * @return {String} String
- * @example
- *
- */
- getString(column) {
- if (typeof column === 'string') {
- return this.obj[column].toString();
- } else {
- return this.arr[column].toString();
+ /**
+ * Retrieves an String value from the TableRow's specified
+ * column. The column may be specified by either its ID or
+ * title.
+ *
+ * @method getString
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String} String
+ * @example
+ *
+ */
+ getString(column) {
+ if (typeof column === 'string') {
+ return this.obj[column].toString();
+ } else {
+ return this.arr[column].toString();
+ }
}
- }
-};
-export default p5;
+ };
+}
+
+export default tableRow;
+
+if(typeof p5 !== 'undefined'){
+ tableRow(p5, p5.prototype);
+}
diff --git a/src/io/p5.XML.js b/src/io/p5.XML.js
index a3666c6165..2afd665bb3 100644
--- a/src/io/p5.XML.js
+++ b/src/io/p5.XML.js
@@ -4,1336 +4,1340 @@
* @requires core
*/
-import p5 from '../core/main';
-
-/**
- * A class to describe an XML object.
- *
- * Each `p5.XML` object provides an easy way to interact with XML data.
- * Extensible Markup Language
- * (XML)
- * is a standard format for sending data between applications. Like HTML, the
- * XML format is based on tags and attributes, as in
- * `<time units="s">1234</time>`.
- *
- * Note: Use loadXML() to load external XML files.
- *
- * @class p5.XML
- * @example
- *
+ */
+ fn.append = function (array, value) {
+ array.push(value);
+ return array;
+ };
-/**
- * Adds a value to the end of an array. Extends the length of
- * the array by one. Maps to Array.push().
- *
- * @method append
- * @deprecated Use array.push(value) instead.
- * @param {Array} array Array to append
- * @param {Any} value to be added to the Array
- * @return {Array} the array that was appended to
- * @example
- *
- */
-p5.prototype.append = function (array, value) {
- array.push(value);
- return array;
-};
+ /**
+ * Copies an array (or part of an array) to another array. The src array is
+ * copied to the dst array, beginning at the position specified by
+ * srcPosition and into the position specified by dstPosition. The number of
+ * elements to copy is determined by length. Note that copying values
+ * overwrites existing values in the destination array. To append values
+ * instead of overwriting them, use concat().
+ *
+ * The simplified version with only two arguments, arrayCopy(src, dst),
+ * copies an entire array to another of the same size. It is equivalent to
+ * arrayCopy(src, 0, dst, 0, src.length).
+ *
+ * Using this function is far more efficient for copying array data than
+ * iterating through a for() loop and copying each element individually.
+ *
+ * @method arrayCopy
+ * @deprecated Use arr1.copyWithin(arr2) instead.
+ * @param {Array} src the source Array
+ * @param {Integer} srcPosition starting position in the source Array
+ * @param {Array} dst the destination Array
+ * @param {Integer} dstPosition starting position in the destination Array
+ * @param {Integer} length number of Array elements to be copied
+ *
+ * @example
+ *
+ */
+ /**
+ * @method arrayCopy
+ * @deprecated Use arr1.copyWithin(arr2) instead.
+ * @param {Array} src
+ * @param {Array} dst
+ * @param {Integer} [length]
+ */
+ fn.arrayCopy = function (src, srcPosition, dst, dstPosition, length) {
+ // the index to begin splicing from dst array
+ let start;
+ let end;
-/**
- * Copies an array (or part of an array) to another array. The src array is
- * copied to the dst array, beginning at the position specified by
- * srcPosition and into the position specified by dstPosition. The number of
- * elements to copy is determined by length. Note that copying values
- * overwrites existing values in the destination array. To append values
- * instead of overwriting them, use concat().
- *
- * The simplified version with only two arguments, arrayCopy(src, dst),
- * copies an entire array to another of the same size. It is equivalent to
- * arrayCopy(src, 0, dst, 0, src.length).
- *
- * Using this function is far more efficient for copying array data than
- * iterating through a for() loop and copying each element individually.
- *
- * @method arrayCopy
- * @deprecated Use arr1.copyWithin(arr2) instead.
- * @param {Array} src the source Array
- * @param {Integer} srcPosition starting position in the source Array
- * @param {Array} dst the destination Array
- * @param {Integer} dstPosition starting position in the destination Array
- * @param {Integer} length number of Array elements to be copied
- *
- * @example
- *
- */
-/**
- * @method arrayCopy
- * @deprecated Use arr1.copyWithin(arr2) instead.
- * @param {Array} src
- * @param {Array} dst
- * @param {Integer} [length]
- */
-p5.prototype.arrayCopy = function (src, srcPosition, dst, dstPosition, length) {
- // the index to begin splicing from dst array
- let start;
- let end;
+ if (typeof length !== 'undefined') {
+ end = Math.min(length, src.length);
+ start = dstPosition;
+ src = src.slice(srcPosition, end + srcPosition);
+ } else {
+ if (typeof dst !== 'undefined') {
+ // src, dst, length
+ // rename so we don't get confused
+ end = dst;
+ end = Math.min(end, src.length);
+ } else {
+ // src, dst
+ end = src.length;
+ }
- if (typeof length !== 'undefined') {
- end = Math.min(length, src.length);
- start = dstPosition;
- src = src.slice(srcPosition, end + srcPosition);
- } else {
- if (typeof dst !== 'undefined') {
- // src, dst, length
+ start = 0;
// rename so we don't get confused
- end = dst;
- end = Math.min(end, src.length);
- } else {
- // src, dst
- end = src.length;
+ dst = srcPosition;
+ src = src.slice(0, end);
}
- start = 0;
- // rename so we don't get confused
- dst = srcPosition;
- src = src.slice(0, end);
- }
+ // Since we are not returning the array and JavaScript is pass by reference
+ // we must modify the actual values of the array
+ // instead of reassigning arrays
+ Array.prototype.splice.apply(dst, [start, end].concat(src));
+ };
- // Since we are not returning the array and JavaScript is pass by reference
- // we must modify the actual values of the array
- // instead of reassigning arrays
- Array.prototype.splice.apply(dst, [start, end].concat(src));
-};
+ /**
+ * Concatenates two arrays, maps to Array.concat(). Does not modify the
+ * input arrays.
+ *
+ * @method concat
+ * @deprecated Use arr1.concat(arr2) instead.
+ * @param {Array} a first Array to concatenate
+ * @param {Array} b second Array to concatenate
+ * @return {Array} concatenated array
+ *
+ * @example
+ *
+ */
+ fn.concat = (list0, list1) => list0.concat(list1);
-/**
- * Concatenates two arrays, maps to Array.concat(). Does not modify the
- * input arrays.
- *
- * @method concat
- * @deprecated Use arr1.concat(arr2) instead.
- * @param {Array} a first Array to concatenate
- * @param {Array} b second Array to concatenate
- * @return {Array} concatenated array
- *
- * @example
- *
- */
-p5.prototype.concat = (list0, list1) => list0.concat(list1);
+ /**
+ * Reverses the order of an array, maps to Array.reverse()
+ *
+ * @method reverse
+ * @deprecated Use array.reverse() instead.
+ * @param {Array} list Array to reverse
+ * @return {Array} the reversed list
+ * @example
+ *
+ */
+ fn.reverse = list => list.reverse();
-/**
- * Reverses the order of an array, maps to Array.reverse()
- *
- * @method reverse
- * @deprecated Use array.reverse() instead.
- * @param {Array} list Array to reverse
- * @return {Array} the reversed list
- * @example
- *
- */
-p5.prototype.reverse = list => list.reverse();
+ /**
+ * Decreases an array by one element and returns the shortened array,
+ * maps to Array.pop().
+ *
+ * @method shorten
+ * @deprecated Use array.pop() instead.
+ * @param {Array} list Array to shorten
+ * @return {Array} shortened Array
+ * @example
+ *
+ */
+ fn.shorten = function (list) {
+ list.pop();
+ return list;
+ };
-/**
- * Decreases an array by one element and returns the shortened array,
- * maps to Array.pop().
- *
- * @method shorten
- * @deprecated Use array.pop() instead.
- * @param {Array} list Array to shorten
- * @return {Array} shortened Array
- * @example
- *
- */
-p5.prototype.shorten = function (list) {
- list.pop();
- return list;
-};
+ /**
+ * Shuffles the elements of an array.
+ *
+ * The first parameter, `array`, is the array to be shuffled. For example,
+ * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
+ * default, the original array won’t be modified. Instead, a copy will be
+ * created, shuffled, and returned.
+ *
+ * The second parameter, `modify`, is optional. If `true` is passed, as in
+ * `shuffle(myArray, true)`, then the array will be shuffled in place without
+ * making a copy.
+ *
+ * @method shuffle
+ * @param {Array} array array to shuffle.
+ * @param {Boolean} [bool] if `true`, shuffle the original array in place. Defaults to `false`.
+ * @return {Array} shuffled array.
+ *
+ * @example
+ *
+ *
+ */
+ fn.sort = function (list, count) {
+ let arr = count ? list.slice(0, Math.min(count, list.length)) : list;
+ const rest = count ? list.slice(Math.min(count, list.length)) : [];
+ if (typeof arr[0] === 'string') {
+ arr = arr.sort();
+ } else {
+ arr = arr.sort((a, b) => a - b);
+ }
+ return arr.concat(rest);
+ };
-/**
- * Sorts an array of numbers from smallest to largest, or puts an array of
- * words in alphabetical order. The original array is not modified; a
- * re-ordered array is returned. The count parameter states the number of
- * elements to sort. For example, if there are 12 elements in an array and
- * count is set to 5, only the first 5 elements in the array will be sorted.
- *
- * @method sort
- * @deprecated Use array.sort() instead.
- * @param {Array} list Array to sort
- * @param {Integer} [count] number of elements to sort, starting from 0
- * @return {Array} the sorted list
- *
- * @example
- *
- *
- */
-p5.prototype.sort = function (list, count) {
- let arr = count ? list.slice(0, Math.min(count, list.length)) : list;
- const rest = count ? list.slice(Math.min(count, list.length)) : [];
- if (typeof arr[0] === 'string') {
- arr = arr.sort();
- } else {
- arr = arr.sort((a, b) => a - b);
- }
- return arr.concat(rest);
-};
+ /**
+ * Inserts a value or an array of values into an existing array. The first
+ * parameter specifies the initial array to be modified, and the second
+ * parameter defines the data to be inserted. The third parameter is an index
+ * value which specifies the array position from which to insert data.
+ * (Remember that array index numbering starts at zero, so the first position
+ * is 0, the second position is 1, and so on.)
+ *
+ * @method splice
+ * @deprecated Use array.splice() instead.
+ * @param {Array} list Array to splice into
+ * @param {Any} value value to be spliced in
+ * @param {Integer} position in the array from which to insert data
+ * @return {Array} the list
+ *
+ * @example
+ *
+ */
+ fn.splice = function (list, value, index) {
+ // note that splice returns spliced elements and not an array
+ Array.prototype.splice.apply(list, [index, 0].concat(value));
-/**
- * Inserts a value or an array of values into an existing array. The first
- * parameter specifies the initial array to be modified, and the second
- * parameter defines the data to be inserted. The third parameter is an index
- * value which specifies the array position from which to insert data.
- * (Remember that array index numbering starts at zero, so the first position
- * is 0, the second position is 1, and so on.)
- *
- * @method splice
- * @deprecated Use array.splice() instead.
- * @param {Array} list Array to splice into
- * @param {Any} value value to be spliced in
- * @param {Integer} position in the array from which to insert data
- * @return {Array} the list
- *
- * @example
- *
- */
-p5.prototype.splice = function (list, value, index) {
- // note that splice returns spliced elements and not an array
- Array.prototype.splice.apply(list, [index, 0].concat(value));
+ return list;
+ };
- return list;
-};
+ /**
+ * Extracts an array of elements from an existing array. The list parameter
+ * defines the array from which the elements will be copied, and the start
+ * and count parameters specify which elements to extract. If no count is
+ * given, elements will be extracted from the start to the end of the array.
+ * When specifying the start, remember that the first array element is 0.
+ * This function does not change the source array.
+ *
+ * @method subset
+ * @deprecated Use array.slice() instead.
+ * @param {Array} list Array to extract from
+ * @param {Integer} start position to begin
+ * @param {Integer} [count] number of values to extract
+ * @return {Array} Array of extracted elements
+ *
+ * @example
+ *
+ */
+ fn.subset = function (list, start, count) {
+ if (typeof count !== 'undefined') {
+ return list.slice(start, start + count);
+ } else {
+ return list.slice(start, list.length);
+ }
+ };
+}
-/**
- * Extracts an array of elements from an existing array. The list parameter
- * defines the array from which the elements will be copied, and the start
- * and count parameters specify which elements to extract. If no count is
- * given, elements will be extracted from the start to the end of the array.
- * When specifying the start, remember that the first array element is 0.
- * This function does not change the source array.
- *
- * @method subset
- * @deprecated Use array.slice() instead.
- * @param {Array} list Array to extract from
- * @param {Integer} start position to begin
- * @param {Integer} [count] number of values to extract
- * @return {Array} Array of extracted elements
- *
- * @example
- *
- */
-p5.prototype.subset = function (list, start, count) {
- if (typeof count !== 'undefined') {
- return list.slice(start, start + count);
- } else {
- return list.slice(start, list.length);
- }
-};
+export default arrayFunctions;
-export default p5;
+if(typeof p5 !== 'undefined'){
+ arrayFunctions(p5, p5.prototype);
+}
diff --git a/src/utilities/conversion.js b/src/utilities/conversion.js
index f0524ec6f5..84254e83b5 100644
--- a/src/utilities/conversion.js
+++ b/src/utilities/conversion.js
@@ -5,1042 +5,1046 @@
* @requires core
*/
-import p5 from '../core/main';
-
-/**
- * Converts a `String` to a floating point (decimal) `Number`.
- *
- * `float()` converts strings that resemble numbers, such as `'12.34'`, into
- * numbers.
- *
- * The parameter, `str`, is the string value to convert. For example, calling
- * `float('12.34')` returns the number `12.34`. If an array of strings is
- * passed, as in `float(['12.34', '56.78'])`, then an array of numbers will be
- * returned.
- *
- * Note: If a string can't be converted to a number, as in `float('giraffe')`,
- * then the value `NaN` (not a number) will be returned.
- *
- * @method float
- * @param {String} str string to convert.
- * @return {Number} converted number.
- *
- * @example
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to black.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ */
+ loadPixels() {
+ p5.Renderer2D.prototype.loadPixels.call(this);
+ this.setModified(true);
+ }
+
+ /**
+ * Updates the canvas with the RGBA values in the
+ * img.pixels array.
+ *
+ * `img.updatePixels()` only needs to be called after changing values in
+ * the img.pixels array. Such changes can be
+ * made directly after calling
+ * img.loadPixels() or by calling
+ * img.set().
+ *
+ * The optional parameters `x`, `y`, `width`, and `height` define a
+ * subsection of the image to update. Doing so can improve performance in
+ * some cases.
+ *
+ * If the image was loaded from a GIF, then calling `img.updatePixels()`
+ * will update the pixels in current frame.
+ *
+ * @param {Integer} x x-coordinate of the upper-left corner
+ * of the subsection to update.
+ * @param {Integer} y y-coordinate of the upper-left corner
+ * of the subsection to update.
+ * @param {Integer} w width of the subsection to update.
+ * @param {Integer} h height of the subsection to update.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Load the image's pixels.
+ * img.loadPixels();
+ *
+ * // Set the pixels to black.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * img.set(x, y, 0);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A black square drawn in the middle of a gray square.');
+ * }
+ *
+ *
*
- */
- loadPixels() {
- p5.Renderer2D.prototype.loadPixels.call(this);
- this.setModified(true);
- }
-
- /**
- * Updates the canvas with the RGBA values in the
- * img.pixels array.
- *
- * `img.updatePixels()` only needs to be called after changing values in
- * the img.pixels array. Such changes can be
- * made directly after calling
- * img.loadPixels() or by calling
- * img.set().
- *
- * The optional parameters `x`, `y`, `width`, and `height` define a
- * subsection of the image to update. Doing so can improve performance in
- * some cases.
- *
- * If the image was loaded from a GIF, then calling `img.updatePixels()`
- * will update the pixels in current frame.
- *
- * @param {Integer} x x-coordinate of the upper-left corner
- * of the subsection to update.
- * @param {Integer} y y-coordinate of the upper-left corner
- * of the subsection to update.
- * @param {Integer} w width of the subsection to update.
- * @param {Integer} h height of the subsection to update.
- *
- * @example
- *
* function setup() {
* createCanvas(100, 100);
@@ -259,6 +350,7 @@ p5.Image = class Image {
* // Load the image's pixels.
* img.loadPixels();
*
+ * // Set the pixels to black.
* for (let i = 0; i < img.pixels.length; i += 4) {
* // Red.
* img.pixels[i] = 0;
@@ -280,1160 +372,1476 @@ p5.Image = class Image {
* }
*
*
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(66, 66);
- *
- * // Load the image's pixels.
- * img.loadPixels();
- *
- * // Set the pixels to black.
- * for (let x = 0; x < img.width; x += 1) {
- * for (let y = 0; y < img.height; y += 1) {
- * img.set(x, y, 0);
- * }
- * }
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 17, 17);
- *
- * describe('A black square drawn in the middle of a gray square.');
- * }
- *
- *
- *
- */
- /**
- */
- updatePixels(x, y, w, h) {
- p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
- this.setModified(true);
- }
+ */
+ /**
+ */
+ updatePixels(x, y, w, h) {
+ p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
+ this.setModified(true);
+ }
- /**
- * Gets a pixel or a region of pixels from the image.
- *
- * `img.get()` is easy to use but it's not as fast as
- * img.pixels. Use
- * img.pixels to read many pixel values.
- *
- * The version of `img.get()` with no parameters returns the entire image.
- *
- * The version of `img.get()` with two parameters, as in `img.get(10, 20)`,
- * interprets them as coordinates. It returns an array with the
- * `[R, G, B, A]` values of the pixel at the given point.
- *
- * The version of `img.get()` with four parameters, as in
- * `img,get(10, 20, 50, 90)`, interprets them as
- * coordinates and dimensions. The first two parameters are the coordinates
- * of the upper-left corner of the subsection. The last two parameters are
- * the width and height of the subsection. It returns a subsection of the
- * canvas in a new p5.Image object.
- *
- * Use `img.get()` instead of get() to work directly
- * with images.
- *
- * @param {Number} x x-coordinate of the pixel.
- * @param {Number} y y-coordinate of the pixel.
- * @param {Number} w width of the subsection to be returned.
- * @param {Number} h height of the subsection to be returned.
- * @return {p5.Image} subsection as a p5.Image object.
- *
- * @example
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(66, 66);
- *
- * // Load the image's pixels.
- * img.loadPixels();
- *
- * // Set the pixels to black.
- * for (let i = 0; i < img.pixels.length; i += 4) {
- * // Red.
- * img.pixels[i] = 0;
- * // Green.
- * img.pixels[i + 1] = 0;
- * // Blue.
- * img.pixels[i + 2] = 0;
- * // Alpha.
- * img.pixels[i + 3] = 255;
- * }
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 17, 17);
- *
- * describe('A black square drawn in the middle of a gray square.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Copy the image.
- * let img2 = get();
- *
- * // Display the copied image on the right.
- * image(img2, 50, 0);
- *
- * describe('Two identical mountain landscapes shown side-by-side.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Get a pixel's color.
- * let c = img.get(50, 90);
- *
- * // Style the square using the pixel's color.
- * fill(c);
- * noStroke();
- *
- * // Draw the square.
- * square(25, 25, 50);
- *
- * describe('A mountain landscape with an olive green square in its center.');
- * }
- *
- *
- *
- */
- /**
- * @return {p5.Image} whole p5.Image
- */
- /**
- * @param {Number} x
- * @param {Number} y
- * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
- */
- get(x, y, w, h) {
- p5._validateParameters('p5.Image.get', arguments);
- return p5.Renderer2D.prototype.get.apply(this, arguments);
- }
-
- _getPixel(...args) {
- return p5.Renderer2D.prototype._getPixel.apply(this, args);
- }
+ /**
+ * Gets a pixel or a region of pixels from the image.
+ *
+ * `img.get()` is easy to use but it's not as fast as
+ * img.pixels. Use
+ * img.pixels to read many pixel values.
+ *
+ * The version of `img.get()` with no parameters returns the entire image.
+ *
+ * The version of `img.get()` with two parameters, as in `img.get(10, 20)`,
+ * interprets them as coordinates. It returns an array with the
+ * `[R, G, B, A]` values of the pixel at the given point.
+ *
+ * The version of `img.get()` with four parameters, as in
+ * `img,get(10, 20, 50, 90)`, interprets them as
+ * coordinates and dimensions. The first two parameters are the coordinates
+ * of the upper-left corner of the subsection. The last two parameters are
+ * the width and height of the subsection. It returns a subsection of the
+ * canvas in a new p5.Image object.
+ *
+ * Use `img.get()` instead of get() to work directly
+ * with images.
+ *
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ *
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Copy half of the image.
- * let img2 = img.get(0, 0, img.width / 2, img.height / 2);
- *
- * // Display half of the image.
- * image(img2, 50, 50);
- *
- * describe('A mountain landscape drawn on top of another mountain landscape.');
- * }
- *
- *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Copy the image.
+ * let img2 = get();
+ *
+ * // Display the copied image on the right.
+ * image(img2, 50, 0);
+ *
+ * describe('Two identical mountain landscapes shown side-by-side.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get a pixel's color.
+ * let c = img.get(50, 90);
+ *
+ * // Style the square using the pixel's color.
+ * fill(c);
+ * noStroke();
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
+ *
+ * describe('A mountain landscape with an olive green square in its center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @return {p5.Image} whole p5.Image
+ */
+ /**
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
+ */
+ get(x, y, w, h) {
+ p5._validateParameters('p5.Image.get', arguments);
+ return p5.Renderer2D.prototype.get.apply(this, arguments);
+ }
- /**
- * Sets the color of one or more pixels within an image.
- *
- * `img.set()` is easy to use but it's not as fast as
- * img.pixels. Use
- * img.pixels to set many pixel values.
- *
- * `img.set()` interprets the first two parameters as x- and y-coordinates. It
- * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
- * array, a p5.Color object, or another
- * p5.Image object.
- *
- * img.updatePixels() must be called
- * after using `img.set()` for changes to appear.
- *
- * @param {Number} x x-coordinate of the pixel.
- * @param {Number} y y-coordinate of the pixel.
- * @param {Number|Number[]|Object} a grayscale value | pixel array |
- * p5.Color object |
- * p5.Image to copy.
- *
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Copy half of the image.
+ * let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+ *
+ * // Display half of the image.
+ * image(img2, 50, 50);
+ *
+ * describe('A mountain landscape drawn on top of another mountain landscape.');
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(100, 100);
- *
- * // Set four pixels to black.
- * img.set(30, 20, 0);
- * img.set(85, 20, 0);
- * img.set(85, 75, 0);
- * img.set(30, 75, 0);
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('Four black dots arranged in a square drawn on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(100, 100);
- *
- * // Create a p5.Color object.
- * let black = color(0);
- *
- * // Set four pixels to black.
- * img.set(30, 20, black);
- * img.set(85, 20, black);
- * img.set(85, 75, black);
- * img.set(30, 75, black);
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('Four black dots arranged in a square drawn on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(66, 66);
- *
- * // Draw a color gradient.
- * for (let x = 0; x < img.width; x += 1) {
- * for (let y = 0; y < img.height; y += 1) {
- * let c = map(x, 0, img.width, 0, 255);
- * img.set(x, y, c);
- * }
- * }
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 17, 17);
- *
- * describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');
- * }
- *
- *
- *
- */
- set(x, y, imgOrCol) {
- p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
- this.setModified(true);
- }
+ _getPixel(...args) {
+ return p5.Renderer2D.prototype._getPixel.apply(this, args);
+ }
- /**
- * Resizes the image to a given width and height.
- *
- * The image's original aspect ratio can be kept by passing 0 for either
- * `width` or `height`. For example, calling `img.resize(50, 0)` on an image
- * that was 500 × 300 pixels will resize it to 50 × 30 pixels.
- *
- * @param {Number} width resized image width.
- * @param {Number} height resized image height.
- *
- * @example
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Create a p5.Image object.
- * let img2 = createImage(100, 100);
- *
- * // Set the blank image's pixels using the landscape.
- * img2.set(0, 0, img);
- *
- * // Display the second image.
- * image(img2, 0, 0);
- *
- * describe('An image of a mountain landscape.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Resize the image.
- * img.resize(50, 100);
- *
- * // Display the resized image.
- * image(img, 0, 0);
- *
- * describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Resize the image, keeping the aspect ratio.
- * img.resize(0, 30);
- *
- * // Display the resized image.
- * image(img, 0, 0);
- *
- * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
- * }
- *
- *
- *
- */
- resize(width, height) {
- // Copy contents to a temporary canvas, resize the original
- // and then copy back.
- //
- // There is a faster approach that involves just one copy and swapping the
- // this.canvas reference. We could switch to that approach if (as i think
- // is the case) there an expectation that the user would not hold a
- // reference to the backing canvas of a p5.Image. But since we do not
- // enforce that at the moment, I am leaving in the slower, but safer
- // implementation.
+ /**
+ * Sets the color of one or more pixels within an image.
+ *
+ * `img.set()` is easy to use but it's not as fast as
+ * img.pixels. Use
+ * img.pixels to set many pixel values.
+ *
+ * `img.set()` interprets the first two parameters as x- and y-coordinates. It
+ * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
+ * array, a p5.Color object, or another
+ * p5.Image object.
+ *
+ * img.updatePixels() must be called
+ * after using `img.set()` for changes to appear.
+ *
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number|Number[]|Object} a grayscale value | pixel array |
+ * p5.Color object |
+ * p5.Image to copy.
+ *
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Resize the image, keeping the aspect ratio.
- * img.resize(60, 0);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(100, 100);
+ *
+ * // Set four pixels to black.
+ * img.set(30, 20, 0);
+ * img.set(85, 20, 0);
+ * img.set(85, 75, 0);
+ * img.set(30, 75, 0);
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let black = color(0);
+ *
+ * // Set four pixels to black.
+ * img.set(30, 20, black);
+ * img.set(85, 20, black);
+ * img.set(85, 75, black);
+ * img.set(30, 75, black);
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
+ *
+ * // Draw a color gradient.
+ * for (let x = 0; x < img.width; x += 1) {
+ * for (let y = 0; y < img.height; y += 1) {
+ * let c = map(x, 0, img.width, 0, 255);
+ * img.set(x, y, c);
+ * }
+ * }
+ *
+ * // Update the image.
+ * img.updatePixels();
+ *
+ * // Display the image.
+ * image(img, 17, 17);
+ *
+ * describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ set(x, y, imgOrCol) {
+ p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
+ this.setModified(true);
+ }
+
+ /**
+ * Resizes the image to a given width and height.
+ *
+ * The image's original aspect ratio can be kept by passing 0 for either
+ * `width` or `height`. For example, calling `img.resize(50, 0)` on an image
+ * that was 500 × 300 pixels will resize it to 50 × 30 pixels.
+ *
+ * @param {Number} width resized image width.
+ * @param {Number} height resized image height.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Image object.
+ * let img2 = createImage(100, 100);
+ *
+ * // Set the blank image's pixels using the landscape.
+ * img2.set(0, 0, img);
+ *
+ * // Display the second image.
+ * image(img2, 0, 0);
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Resize the image.
+ * img.resize(50, 100);
+ *
+ * // Display the resized image.
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Resize the image, keeping the aspect ratio.
+ * img.resize(0, 30);
+ *
+ * // Display the resized image.
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+ * }
+ *
+ *
+ *
+ */
+ resize(width, height) {
+ // Copy contents to a temporary canvas, resize the original
+ // and then copy back.
+ //
+ // There is a faster approach that involves just one copy and swapping the
+ // this.canvas reference. We could switch to that approach if (as i think
+ // is the case) there an expectation that the user would not hold a
+ // reference to the backing canvas of a p5.Image. But since we do not
+ // enforce that at the moment, I am leaving in the slower, but safer
+ // implementation.
+
+ // auto-resize
+ if (width === 0 && height === 0) {
+ width = this.canvas.width;
+ height = this.canvas.height;
+ } else if (width === 0) {
+ width = this.canvas.width * height / this.canvas.height;
+ } else if (height === 0) {
+ height = this.canvas.height * width / this.canvas.width;
+ }
+
+ width = Math.floor(width);
+ height = Math.floor(height);
+
+ const tempCanvas = document.createElement('canvas');
+ tempCanvas.width = width;
+ tempCanvas.height = height;
+
+ if (this.gifProperties) {
+ const props = this.gifProperties;
+ //adapted from github.com/LinusU/resize-image-data
+ const nearestNeighbor = (src, dst) => {
+ let pos = 0;
+ for (let y = 0; y < dst.height; y++) {
+ for (let x = 0; x < dst.width; x++) {
+ const srcX = Math.floor(x * src.width / dst.width);
+ const srcY = Math.floor(y * src.height / dst.height);
+ let srcPos = (srcY * src.width + srcX) * 4;
+ dst.data[pos++] = src.data[srcPos++]; // R
+ dst.data[pos++] = src.data[srcPos++]; // G
+ dst.data[pos++] = src.data[srcPos++]; // B
+ dst.data[pos++] = src.data[srcPos++]; // A
+ }
+ }
+ };
+ for (let i = 0; i < props.numFrames; i++) {
+ const resizedImageData = this.drawingContext.createImageData(
+ width,
+ height
+ );
+ nearestNeighbor(props.frames[i].image, resizedImageData);
+ props.frames[i].image = resizedImageData;
+ }
+ }
+
+ tempCanvas.getContext('2d').drawImage(
+ this.canvas,
+ 0, 0, this.canvas.width, this.canvas.height,
+ 0, 0, tempCanvas.width, tempCanvas.height
+ );
+
+ // Resize the original canvas, which will clear its contents
+ this.canvas.width = this.width = width;
+ this.canvas.height = this.height = height;
+
+ //Copy the image back
+ this.drawingContext.drawImage(
+ tempCanvas,
+ 0, 0, width, height,
+ 0, 0, width, height
+ );
+
+ if (this.pixels.length > 0) {
+ this.loadPixels();
+ }
+
+ this.setModified(true);
+ }
+
+ /**
+ * Copies pixels from a source image to this image.
+ *
+ * The first parameter, `srcImage`, is an optional
+ * p5.Image object to copy. If a source image isn't
+ * passed, then `img.copy()` can copy a region of this image to another
+ * region.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to copy from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the region's width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of this image to copy into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the region's width and height.
+ *
+ * Calling `img.copy()` will scale pixels from the source region if it isn't
+ * the same size as the destination region.
+ *
+ * @param {p5.Image|p5.Element} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Resize the image, keeping the aspect ratio.
+ * img.resize(60, 0);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Copy one region of the image to another.
+ * img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Outline the copied region.
+ * stroke(255);
+ * noFill();
+ * square(7, 22, 10);
+ *
+ * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+ copy(...args) {
+ fn.copy.apply(this, args);
+ }
+
+ /**
+ * Masks part of the image with another.
+ *
+ * `img.mask()` uses another p5.Image object's
+ * alpha channel as the alpha channel for this image. Masks are cumulative
+ * and can't be removed once applied. If the mask has a different
+ * pixel density from this image, the mask will be scaled.
+ *
+ * @param {p5.Image} srcImage source image.
+ *
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Calculate the center of the bricks image.
+ * let x = bricks.width / 2;
+ * let y = bricks.height / 2;
+ *
+ * // Copy the bricks to the mountains image.
+ * mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');
+ * }
+ *
+ *
+ *
+ */
+ // TODO: - Accept an array of alpha values.
+ mask(p5Image) {
+ if (p5Image === undefined) {
+ p5Image = this;
+ }
+ const currBlend = this.drawingContext.globalCompositeOperation;
+
+ let imgScaleFactor = this._pixelDensity;
+ let maskScaleFactor = 1;
+ if (p5Image instanceof Renderer) {
+ maskScaleFactor = p5Image._pInst._pixelDensity;
+ }
+
+ const copyArgs = [
+ p5Image,
+ 0,
+ 0,
+ maskScaleFactor * p5Image.width,
+ maskScaleFactor * p5Image.height,
+ 0,
+ 0,
+ imgScaleFactor * this.width,
+ imgScaleFactor * this.height
+ ];
+
+ this.drawingContext.globalCompositeOperation = 'destination-in';
+ if (this.gifProperties) {
+ for (let i = 0; i < this.gifProperties.frames.length; i++) {
+ this.drawingContext.putImageData(
+ this.gifProperties.frames[i].image,
+ 0,
+ 0
+ );
+ this.copy(...copyArgs);
+ this.gifProperties.frames[i].image = this.drawingContext.getImageData(
+ 0,
+ 0,
+ imgScaleFactor * this.width,
+ imgScaleFactor * this.height
+ );
+ }
+ this.drawingContext.putImageData(
+ this.gifProperties.frames[this.gifProperties.displayIndex].image,
+ 0,
+ 0
+ );
+ } else {
+ this.copy(...copyArgs);
+ }
+ this.drawingContext.globalCompositeOperation = currBlend;
+ this.setModified(true);
+ }
+
+ /**
+ * Applies an image filter to the image.
+ *
+ * The preset options are:
+ *
+ * `INVERT`
+ * Inverts the colors in the image. No parameter is used.
+ *
+ * `GRAY`
+ * Converts the image to grayscale. No parameter is used.
+ *
+ * `THRESHOLD`
+ * Converts the image to black and white. Pixels with a grayscale value
+ * above a given threshold are converted to white. The rest are converted to
+ * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+ * value is specified, 0.5 is used.
+ *
+ * `OPAQUE`
+ * Sets the alpha channel to be entirely opaque. No parameter is used.
+ *
+ * `POSTERIZE`
+ * Limits the number of colors in the image. Each color channel is limited to
+ * the number of colors specified. Values between 2 and 255 are valid, but
+ * results are most noticeable with lower values. The default value is 4.
+ *
+ * `BLUR`
+ * Blurs the image. The level of blurring is specified by a blur radius. Larger
+ * values increase the blur. The default value is 4. A gaussian blur is used
+ * in `P2D` mode. A box blur is used in `WEBGL` mode.
+ *
+ * `ERODE`
+ * Reduces the light areas. No parameter is used.
+ *
+ * `DILATE`
+ * Increases the light areas. No parameter is used.
+ *
+ * @param {(THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR)} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, ERODE, DILATE or BLUR.
+ * @param {Number} [filterParam] parameter unique to each filter.
+ *
+ * @example
+ *
+ * let photo;
+ * let maskImage;
+ *
+ * // Load the images.
+ * function preload() {
+ * photo = loadImage('assets/rockies.jpg');
+ * maskImage = loadImage('assets/mask2.png');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the mask.
+ * photo.mask(maskImage);
+ *
+ * // Display the image.
+ * image(photo, 0, 0);
+ *
+ * describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the INVERT filter.
+ * img.filter(INVERT);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A blue brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the GRAY filter.
+ * img.filter(GRAY);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A brick wall drawn in grayscale.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the THRESHOLD filter.
+ * img.filter(THRESHOLD);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A brick wall drawn in black and white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the OPAQUE filter.
+ * img.filter(OPAQUE);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the POSTERIZE filter.
+ * img.filter(POSTERIZE, 3);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of a red brick wall drawn with a limited color palette.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the BLUR filter.
+ * img.filter(BLUR, 3);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the DILATE filter.
+ * img.filter(DILATE);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall with bright lines between each brick.');
+ * }
+ *
+ *
+ *
+ */
+ filter(operation, value) {
+ Filters.apply(this.canvas, Filters[operation], value);
+ this.setModified(true);
+ }
- // auto-resize
- if (width === 0 && height === 0) {
- width = this.canvas.width;
- height = this.canvas.height;
- } else if (width === 0) {
- width = this.canvas.width * height / this.canvas.height;
- } else if (height === 0) {
- height = this.canvas.height * width / this.canvas.width;
+ /**
+ * Copies a region of pixels from another image into this one.
+ *
+ * The first parameter, `srcImage`, is the
+ * p5.Image object to blend.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to blend from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the regions width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the regions width and height.
+ *
+ * The tenth parameter, `blendMode`, sets the effect used to blend the images'
+ * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
+ * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
+ * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`.
+ *
+ * @param {p5.Image} srcImage source image
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * Available blend modes are: normal | multiply | screen | overlay |
+ * darken | lighten | color-dodge | color-burn | hard-light |
+ * soft-light | difference | exclusion | hue | saturation |
+ * color | luminosity
+ *
+ * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Apply the ERODE filter.
+ * img.filter(ERODE);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('A red brick wall with faint lines between each brick.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Blend the bricks image into the mountains.
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * // Display the bricks image.
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Blend the bricks image into the mountains.
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * // Display the bricks image.
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode
+ */
+ blend(...args) {
+ p5._validateParameters('p5.Image.blend', arguments);
+ fn.blend.apply(this, args);
+ this.setModified(true);
}
- width = Math.floor(width);
- height = Math.floor(height);
+ /**
+ * helper method for web GL mode to indicate that an image has been
+ * changed or unchanged since last upload. gl texture upload will
+ * set this value to false after uploading the texture.
+ * @param {boolean} val sets whether or not the image has been
+ * modified.
+ * @private
+ */
+ setModified(val) {
+ this._modified = val; //enforce boolean?
+ }
- const tempCanvas = document.createElement('canvas');
- tempCanvas.width = width;
- tempCanvas.height = height;
+ /**
+ * helper method for web GL mode to figure out if the image
+ * has been modified and might need to be re-uploaded to texture
+ * memory between frames.
+ * @private
+ * @return {boolean} a boolean indicating whether or not the
+ * image has been updated or modified since last texture upload.
+ */
+ isModified() {
+ return this._modified;
+ }
- if (this.gifProperties) {
- const props = this.gifProperties;
- //adapted from github.com/LinusU/resize-image-data
- const nearestNeighbor = (src, dst) => {
- let pos = 0;
- for (let y = 0; y < dst.height; y++) {
- for (let x = 0; x < dst.width; x++) {
- const srcX = Math.floor(x * src.width / dst.width);
- const srcY = Math.floor(y * src.height / dst.height);
- let srcPos = (srcY * src.width + srcX) * 4;
- dst.data[pos++] = src.data[srcPos++]; // R
- dst.data[pos++] = src.data[srcPos++]; // G
- dst.data[pos++] = src.data[srcPos++]; // B
- dst.data[pos++] = src.data[srcPos++]; // A
- }
- }
- };
- for (let i = 0; i < props.numFrames; i++) {
- const resizedImageData = this.drawingContext.createImageData(
- width,
- height
- );
- nearestNeighbor(props.frames[i].image, resizedImageData);
- props.frames[i].image = resizedImageData;
+ /**
+ * Saves the image to a file.
+ *
+ * By default, `img.save()` saves the image as a PNG image called
+ * `untitled.png`.
+ *
+ * The first parameter, `filename`, is optional. It's a string that sets the
+ * file's name. If a file extension is included, as in
+ * `img.save('drawing.png')`, then the image will be saved using that
+ * format.
+ *
+ * The second parameter, `extension`, is also optional. It sets the files format.
+ * Either `'png'` or `'jpg'` can be used. For example, `img.save('drawing', 'jpg')`
+ * saves the canvas to a file called `drawing.jpg`.
+ *
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * The image will only be downloaded as an animated GIF if it was loaded
+ * from a GIF file. See saveGif() to create new
+ * GIFs.
+ *
+ * @param {String} filename filename. Defaults to 'untitled'.
+ * @param {String} [extension] file extension, either 'png' or 'jpg'.
+ * Defaults to 'png'.
+ *
+ * @example
+ *
+ * let mountains;
+ * let bricks;
+ *
+ * // Load the images.
+ * function preload() {
+ * mountains = loadImage('assets/rockies.jpg');
+ * bricks = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Blend the bricks image into the mountains.
+ * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ *
+ * // Display the mountains image.
+ * image(mountains, 0, 0);
+ *
+ * // Display the bricks image.
+ * image(bricks, 0, 0);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ save(filename, extension) {
+ if (this.gifProperties) {
+ fn.encodeAndDownloadGif(this, filename);
+ } else {
+ fn.saveCanvas(this.canvas, filename, extension);
}
}
- tempCanvas.getContext('2d').drawImage(
- this.canvas,
- 0, 0, this.canvas.width, this.canvas.height,
- 0, 0, tempCanvas.width, tempCanvas.height
- );
-
- // Resize the original canvas, which will clear its contents
- this.canvas.width = this.width = width;
- this.canvas.height = this.height = height;
-
- //Copy the image back
- this.drawingContext.drawImage(
- tempCanvas,
- 0, 0, width, height,
- 0, 0, width, height
- );
-
- if (this.pixels.length > 0) {
- this.loadPixels();
+ // GIF Section
+ /**
+ * Restarts an animated GIF at its first frame.
+ *
+ * @example
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * describe('An image of a mountain landscape. The image is downloaded when the user presses the "s", "j", or "p" key.');
+ * }
+ *
+ * // Save the image with different options when the user presses a key.
+ * function keyPressed() {
+ * if (key === 's') {
+ * img.save();
+ * } else if (key === 'j') {
+ * img.save('rockies.jpg');
+ * } else if (key === 'p') {
+ * img.save('rockies', 'png');
+ * }
+ * }
+ *
+ *
+ *
+ */
+ reset() {
+ if (this.gifProperties) {
+ const props = this.gifProperties;
+ props.playing = true;
+ props.timeSinceStart = 0;
+ props.timeDisplayed = 0;
+ props.lastChangeTime = 0;
+ props.loopCount = 0;
+ props.displayIndex = 0;
+ this.drawingContext.putImageData(props.frames[0].image, 0, 0);
+ }
}
- this.setModified(true);
- }
-
- /**
- * Copies pixels from a source image to this image.
- *
- * The first parameter, `srcImage`, is an optional
- * p5.Image object to copy. If a source image isn't
- * passed, then `img.copy()` can copy a region of this image to another
- * region.
- *
- * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
- * to copy from the source image. `(sx, sy)` is the top-left corner of the
- * region. `sw` and `sh` are the region's width and height.
- *
- * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
- * of this image to copy into. `(dx, dy)` is the top-left corner of the
- * region. `dw` and `dh` are the region's width and height.
- *
- * Calling `img.copy()` will scale pixels from the source region if it isn't
- * the same size as the destination region.
- *
- * @param {p5.Image|p5.Element} srcImage source image.
- * @param {Integer} sx x-coordinate of the source's upper-left corner.
- * @param {Integer} sy y-coordinate of the source's upper-left corner.
- * @param {Integer} sw source image width.
- * @param {Integer} sh source image height.
- * @param {Integer} dx x-coordinate of the destination's upper-left corner.
- * @param {Integer} dy y-coordinate of the destination's upper-left corner.
- * @param {Integer} dw destination image width.
- * @param {Integer} dh destination image height.
- *
- * @example
- *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ * // Reset the GIF when the user presses the mouse.
+ * function mousePressed() {
+ * gif.reset();
+ * }
+ *
+ *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Copy one region of the image to another.
- * img.copy(7, 22, 10, 10, 35, 25, 50, 50);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Outline the copied region.
- * stroke(255);
- * noFill();
- * square(7, 22, 10);
- *
- * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
- * }
- *
- *
- *
- */
- /**
- * @param {Integer} sx
- * @param {Integer} sy
- * @param {Integer} sw
- * @param {Integer} sh
- * @param {Integer} dx
- * @param {Integer} dy
- * @param {Integer} dw
- * @param {Integer} dh
- */
- copy(...args) {
- p5.prototype.copy.apply(this, args);
- }
-
- /**
- * Masks part of the image with another.
- *
- * `img.mask()` uses another p5.Image object's
- * alpha channel as the alpha channel for this image. Masks are cumulative
- * and can't be removed once applied. If the mask has a different
- * pixel density from this image, the mask will be scaled.
- *
- * @param {p5.Image} srcImage source image.
- *
- * @example
- *
- * let mountains;
- * let bricks;
- *
- * // Load the images.
- * function preload() {
- * mountains = loadImage('assets/rockies.jpg');
- * bricks = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Calculate the center of the bricks image.
- * let x = bricks.width / 2;
- * let y = bricks.height / 2;
- *
- * // Copy the bricks to the mountains image.
- * mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
- *
- * // Display the mountains image.
- * image(mountains, 0, 0);
- *
- * describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');
- * }
- *
- *
- *
- */
- // TODO: - Accept an array of alpha values.
- mask(p5Image) {
- if (p5Image === undefined) {
- p5Image = this;
+ /**
+ * Gets the index of the current frame in an animated GIF.
+ *
+ * @return {Number} index of the GIF's current frame.
+ *
+ * @example
+ *
- * let photo;
- * let maskImage;
- *
- * // Load the images.
- * function preload() {
- * photo = loadImage('assets/rockies.jpg');
- * maskImage = loadImage('assets/mask2.png');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the mask.
- * photo.mask(maskImage);
- *
- * // Display the image.
- * image(photo, 0, 0);
- *
- * describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');
- * }
- *
- *
+ *
+ */
+ getCurrentFrame() {
+ if (this.gifProperties) {
+ const props = this.gifProperties;
+ return props.displayIndex % props.numFrames;
+ }
}
- const currBlend = this.drawingContext.globalCompositeOperation;
- let imgScaleFactor = this._pixelDensity;
- let maskScaleFactor = 1;
- if (p5Image instanceof Renderer) {
- maskScaleFactor = p5Image._pInst._pixelDensity;
+ /**
+ * Sets the current frame in an animated GIF.
+ *
+ * @param {Number} index index of the frame to display.
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
+ * }
+ *
+ * function draw() {
+ * // Get the index of the current GIF frame.
+ * let index = gif.getCurrentFrame();
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ *
+ * // Display the current frame.
+ * text(index, 10, 90);
+ * }
+ *
+ *
+ *
+ */
+ setFrame(index) {
+ if (this.gifProperties) {
+ const props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.timeDisplayed = 0;
+ props.lastChangeTime = 0;
+ props.displayIndex = index;
+ this.drawingContext.putImageData(props.frames[index].image, 0, 0);
+ } else {
+ console.log(
+ 'Cannot set GIF to a frame number that is higher than total number of frames or below zero.'
+ );
+ }
+ }
}
- const copyArgs = [
- p5Image,
- 0,
- 0,
- maskScaleFactor * p5Image.width,
- maskScaleFactor * p5Image.height,
- 0,
- 0,
- imgScaleFactor * this.width,
- imgScaleFactor * this.height
- ];
+ /**
+ * Returns the number of frames in an animated GIF.
+ *
+ * @return {Number} number of frames in the GIF.
+ *
+ * @example
+ *
+ * let gif;
+ * let frameSlider;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Get the index of the last frame.
+ * let maxFrame = gif.numFrames() - 1;
+ *
+ * // Create a slider to control which frame is drawn.
+ * frameSlider = createSlider(0, maxFrame);
+ * frameSlider.position(10, 80);
+ * frameSlider.size(80);
+ *
+ * describe('A cartoon eye looks around when a slider is moved.');
+ * }
+ *
+ * function draw() {
+ * // Get the slider's value.
+ * let index = frameSlider.value();
+ *
+ * // Set the GIF's frame.
+ * gif.setFrame(index);
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ *
+ *
+ */
+ numFrames() {
+ if (this.gifProperties) {
+ return this.gifProperties.numFrames;
+ }
+ }
- this.drawingContext.globalCompositeOperation = 'destination-in';
- if (this.gifProperties) {
- for (let i = 0; i < this.gifProperties.frames.length; i++) {
- this.drawingContext.putImageData(
- this.gifProperties.frames[i].image,
- 0,
- 0
- );
- this.copy(...copyArgs);
- this.gifProperties.frames[i].image = this.drawingContext.getImageData(
- 0,
- 0,
- imgScaleFactor * this.width,
- imgScaleFactor * this.height
- );
+ /**
+ * Plays an animated GIF that was paused with
+ * img.pause().
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+ * }
+ *
+ * function draw() {
+ * // Display the image.
+ * image(gif, 0, 0);
+ *
+ * // Display the current state of playback.
+ * let total = gif.numFrames();
+ * let index = gif.getCurrentFrame();
+ * text(`${index} / ${total}`, 30, 90);
+ * }
+ *
+ *
+ *
+ */
+ play() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = true;
}
- this.drawingContext.putImageData(
- this.gifProperties.frames[this.gifProperties.displayIndex].image,
- 0,
- 0
- );
- } else {
- this.copy(...copyArgs);
}
- this.drawingContext.globalCompositeOperation = currBlend;
- this.setModified(true);
- }
-
- /**
- * Applies an image filter to the image.
- *
- * The preset options are:
- *
- * `INVERT`
- * Inverts the colors in the image. No parameter is used.
- *
- * `GRAY`
- * Converts the image to grayscale. No parameter is used.
- *
- * `THRESHOLD`
- * Converts the image to black and white. Pixels with a grayscale value
- * above a given threshold are converted to white. The rest are converted to
- * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
- * value is specified, 0.5 is used.
- *
- * `OPAQUE`
- * Sets the alpha channel to be entirely opaque. No parameter is used.
- *
- * `POSTERIZE`
- * Limits the number of colors in the image. Each color channel is limited to
- * the number of colors specified. Values between 2 and 255 are valid, but
- * results are most noticeable with lower values. The default value is 4.
- *
- * `BLUR`
- * Blurs the image. The level of blurring is specified by a blur radius. Larger
- * values increase the blur. The default value is 4. A gaussian blur is used
- * in `P2D` mode. A box blur is used in `WEBGL` mode.
- *
- * `ERODE`
- * Reduces the light areas. No parameter is used.
- *
- * `DILATE`
- * Increases the light areas. No parameter is used.
- *
- * @param {(THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR)} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
- * POSTERIZE, ERODE, DILATE or BLUR.
- * @param {Number} [filterParam] parameter unique to each filter.
- *
- * @example
- *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ * image(gif, 0, 0);
+ * }
+ *
+ * // Pause the GIF when the user presses the mouse.
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * // Play the GIF when the user releases the mouse.
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the INVERT filter.
- * img.filter(INVERT);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A blue brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the GRAY filter.
- * img.filter(GRAY);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A brick wall drawn in grayscale.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the THRESHOLD filter.
- * img.filter(THRESHOLD);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A brick wall drawn in black and white.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the OPAQUE filter.
- * img.filter(OPAQUE);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A red brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the POSTERIZE filter.
- * img.filter(POSTERIZE, 3);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('An image of a red brick wall drawn with a limited color palette.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the BLUR filter.
- * img.filter(BLUR, 3);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A blurry image of a red brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the DILATE filter.
- * img.filter(DILATE);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A red brick wall with bright lines between each brick.');
- * }
- *
- *
- *
- */
- filter(operation, value) {
- Filters.apply(this.canvas, Filters[operation], value);
- this.setModified(true);
- }
-
- /**
- * Copies a region of pixels from another image into this one.
- *
- * The first parameter, `srcImage`, is the
- * p5.Image object to blend.
- *
- * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
- * to blend from the source image. `(sx, sy)` is the top-left corner of the
- * region. `sw` and `sh` are the regions width and height.
- *
- * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
- * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
- * region. `dw` and `dh` are the regions width and height.
- *
- * The tenth parameter, `blendMode`, sets the effect used to blend the images'
- * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
- * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
- * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`.
- *
- * @param {p5.Image} srcImage source image
- * @param {Integer} sx x-coordinate of the source's upper-left corner.
- * @param {Integer} sy y-coordinate of the source's upper-left corner.
- * @param {Integer} sw source image width.
- * @param {Integer} sh source image height.
- * @param {Integer} dx x-coordinate of the destination's upper-left corner.
- * @param {Integer} dy y-coordinate of the destination's upper-left corner.
- * @param {Integer} dw destination image width.
- * @param {Integer} dh destination image height.
- * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode the blend mode. either
- * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
- * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
- * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
- *
- * Available blend modes are: normal | multiply | screen | overlay |
- * darken | lighten | color-dodge | color-burn | hard-light |
- * soft-light | difference | exclusion | hue | saturation |
- * color | luminosity
- *
- * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
- *
- * @example
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Apply the ERODE filter.
- * img.filter(ERODE);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * describe('A red brick wall with faint lines between each brick.');
- * }
- *
- *
- *
- *
- *
- * let mountains;
- * let bricks;
- *
- * // Load the images.
- * function preload() {
- * mountains = loadImage('assets/rockies.jpg');
- * bricks = loadImage('assets/bricks_third.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Blend the bricks image into the mountains.
- * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
- *
- * // Display the mountains image.
- * image(mountains, 0, 0);
- *
- * // Display the bricks image.
- * image(bricks, 0, 0);
- *
- * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
- * }
- *
- *
- *
- *
- *
- * let mountains;
- * let bricks;
- *
- * // Load the images.
- * function preload() {
- * mountains = loadImage('assets/rockies.jpg');
- * bricks = loadImage('assets/bricks_third.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Blend the bricks image into the mountains.
- * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
- *
- * // Display the mountains image.
- * image(mountains, 0, 0);
- *
- * // Display the bricks image.
- * image(bricks, 0, 0);
- *
- * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
- * }
- *
- *
- *
- */
- /**
- * @param {Integer} sx
- * @param {Integer} sy
- * @param {Integer} sw
- * @param {Integer} sh
- * @param {Integer} dx
- * @param {Integer} dy
- * @param {Integer} dw
- * @param {Integer} dh
- * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode
- */
- blend(...args) {
- p5._validateParameters('p5.Image.blend', arguments);
- p5.prototype.blend.apply(this, args);
- this.setModified(true);
- }
- /**
- * helper method for web GL mode to indicate that an image has been
- * changed or unchanged since last upload. gl texture upload will
- * set this value to false after uploading the texture.
- * @param {boolean} val sets whether or not the image has been
- * modified.
- * @private
- */
- setModified(val) {
- this._modified = val; //enforce boolean?
- }
+ /**
+ * Pauses an animated GIF.
+ *
+ * The GIF can be resumed by calling
+ * img.play().
+ *
+ * @example
+ *
- * let mountains;
- * let bricks;
- *
- * // Load the images.
- * function preload() {
- * mountains = loadImage('assets/rockies.jpg');
- * bricks = loadImage('assets/bricks_third.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Blend the bricks image into the mountains.
- * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
- *
- * // Display the mountains image.
- * image(mountains, 0, 0);
- *
- * // Display the bricks image.
- * image(bricks, 0, 0);
- *
- * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
- * }
- *
- *
+ *
+ */
+ pause() {
+ if (this.gifProperties) {
+ this.gifProperties.playing = false;
+ }
+ }
- /**
- * helper method for web GL mode to figure out if the image
- * has been modified and might need to be re-uploaded to texture
- * memory between frames.
- * @private
- * @return {boolean} a boolean indicating whether or not the
- * image has been updated or modified since last texture upload.
- */
- isModified() {
- return this._modified;
- }
+ /**
+ * Changes the delay between frames in an animated GIF.
+ *
+ * The first parameter, `delay`, is the length of the delay in milliseconds.
+ *
+ * The second parameter, `index`, is optional. If provided, only the frame
+ * at `index` will have its delay modified. All other frames will keep
+ * their default delay.
+ *
+ * @param {Number} d delay in milliseconds between switching frames.
+ * @param {Number} [index] index of the frame that will have its delay modified.
+ *
+ * @example
+ *
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ * }
+ *
+ * function draw() {
+ * background(255);
+ *
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ * // Pause the GIF when the user presses the mouse.
+ * function mousePressed() {
+ * gif.pause();
+ * }
+ *
+ * // Play the GIF when the user presses the mouse.
+ * function mouseReleased() {
+ * gif.play();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let gifFast;
+ * let gifSlow;
+ *
+ * // Load the images.
+ * function preload() {
+ * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Resize the images.
+ * gifFast.resize(50, 50);
+ * gifSlow.resize(50, 50);
+ *
+ * // Set the delay lengths.
+ * gifFast.delay(10);
+ * gifSlow.delay(100);
+ *
+ * describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+ * }
+ *
+ * function draw() {
+ * // Display the images.
+ * image(gifFast, 0, 0);
+ * image(gifSlow, 50, 0);
+ * }
+ *
+ *
+ *
+ */
+ delay(d, index) {
+ if (this.gifProperties) {
+ const props = this.gifProperties;
+ if (index < props.numFrames && index >= 0) {
+ props.frames[index].delay = d;
+ } else {
+ // change all frames
+ for (const frame of props.frames) {
+ frame.delay = d;
+ }
+ }
+ }
+ }
+ };
/**
- * Saves the image to a file.
- *
- * By default, `img.save()` saves the image as a PNG image called
- * `untitled.png`.
- *
- * The first parameter, `filename`, is optional. It's a string that sets the
- * file's name. If a file extension is included, as in
- * `img.save('drawing.png')`, then the image will be saved using that
- * format.
+ * The image's width in pixels.
*
- * The second parameter, `extension`, is also optional. It sets the files format.
- * Either `'png'` or `'jpg'` can be used. For example, `img.save('drawing', 'jpg')`
- * saves the canvas to a file called `drawing.jpg`.
- *
- * Note: The browser will either save the file immediately or prompt the user
- * with a dialogue window.
- *
- * The image will only be downloaded as an animated GIF if it was loaded
- * from a GIF file. See saveGif() to create new
- * GIFs.
- *
- * @param {String} filename filename. Defaults to 'untitled'.
- * @param {String} [extension] file extension, either 'png' or 'jpg'.
- * Defaults to 'png'.
+ * @type {Number}
+ * @property {Number} width
+ * @for p5.Image
+ * @name width
+ * @readOnly
*
* @example
*
+ * let gif;
+ *
+ * // Load the image.
+ * function preload() {
+ * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Set the delay of frame 67.
+ * gif.delay(3000, 67);
+ *
+ * describe('An animated eye looking around. It pauses for three seconds while it looks down.');
+ * }
+ *
+ * function draw() {
+ * // Display the image.
+ * image(gif, 0, 0);
+ * }
+ *
+ *
@@ -1451,568 +1859,160 @@ p5.Image = class Image {
* // Display the image.
* image(img, 0, 0);
*
- * describe('An image of a mountain landscape. The image is downloaded when the user presses the "s", "j", or "p" key.');
- * }
- *
- * // Save the image with different options when the user presses a key.
- * function keyPressed() {
- * if (key === 's') {
- * img.save();
- * } else if (key === 'j') {
- * img.save('rockies.jpg');
- * } else if (key === 'p') {
- * img.save('rockies', 'png');
- * }
- * }
- *
- *
- */
- save(filename, extension) {
- if (this.gifProperties) {
- p5.prototype.encodeAndDownloadGif(this, filename);
- } else {
- p5.prototype.saveCanvas(this.canvas, filename, extension);
- }
- }
-
- // GIF Section
- /**
- * Restarts an animated GIF at its first frame.
- *
- * @example
- *
- *
- */
- reset() {
- if (this.gifProperties) {
- const props = this.gifProperties;
- props.playing = true;
- props.timeSinceStart = 0;
- props.timeDisplayed = 0;
- props.lastChangeTime = 0;
- props.loopCount = 0;
- props.displayIndex = 0;
- this.drawingContext.putImageData(props.frames[0].image, 0, 0);
- }
- }
-
- /**
- * Gets the index of the current frame in an animated GIF.
- *
- * @return {Number} index of the GIF's current frame.
- *
- * @example
- *
- * let gif;
- *
- * // Load the image.
- * function preload() {
- * gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
- * }
- *
- * function draw() {
- * background(255);
- *
- * // Display the image.
- * image(gif, 0, 0);
- * }
- *
- * // Reset the GIF when the user presses the mouse.
- * function mousePressed() {
- * gif.reset();
- * }
- *
- *
- *
*/
- getCurrentFrame() {
- if (this.gifProperties) {
- const props = this.gifProperties;
- return props.displayIndex % props.numFrames;
- }
- }
/**
- * Sets the current frame in an animated GIF.
+ * The image's height in pixels.
*
- * @param {Number} index index of the frame to display.
+ * @type {Number}
+ * @property height
+ * @for p5.Image
+ * @name height
+ * @readOnly
*
* @example
*
- * let gif;
- *
- * // Load the image.
- * function preload() {
- * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
- * }
- *
- * function draw() {
- * // Get the index of the current GIF frame.
- * let index = gif.getCurrentFrame();
+ * // Calculate the center coordinates.
+ * let x = img.width / 2;
+ * let y = img.height / 2;
*
- * // Display the image.
- * image(gif, 0, 0);
+ * // Draw a circle at the image's center.
+ * circle(x, y, 20);
*
- * // Display the current frame.
- * text(index, 10, 90);
+ * describe('An image of a mountain landscape with a white circle drawn in the middle.');
* }
*
*
*
- */
- setFrame(index) {
- if (this.gifProperties) {
- const props = this.gifProperties;
- if (index < props.numFrames && index >= 0) {
- props.timeDisplayed = 0;
- props.lastChangeTime = 0;
- props.displayIndex = index;
- this.drawingContext.putImageData(props.frames[index].image, 0, 0);
- } else {
- console.log(
- 'Cannot set GIF to a frame number that is higher than total number of frames or below zero.'
- );
- }
- }
- }
-
- /**
- * Returns the number of frames in an animated GIF.
- *
- * @return {Number} number of frames in the GIF.
- *
- * @example
- *
- * let gif;
- * let frameSlider;
+ * let img;
*
* // Load the image.
* function preload() {
- * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+ * img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* createCanvas(100, 100);
*
- * // Get the index of the last frame.
- * let maxFrame = gif.numFrames() - 1;
- *
- * // Create a slider to control which frame is drawn.
- * frameSlider = createSlider(0, maxFrame);
- * frameSlider.position(10, 80);
- * frameSlider.size(80);
- *
- * describe('A cartoon eye looks around when a slider is moved.');
- * }
- *
- * function draw() {
- * // Get the slider's value.
- * let index = frameSlider.value();
- *
- * // Set the GIF's frame.
- * gif.setFrame(index);
- *
* // Display the image.
- * image(gif, 0, 0);
- * }
- *
- *
- *
*/
- numFrames() {
- if (this.gifProperties) {
- return this.gifProperties.numFrames;
- }
- }
/**
- * Plays an animated GIF that was paused with
- * img.pause().
+ * An array containing the color of each pixel in the image.
+ *
+ * Colors are stored as numbers representing red, green, blue, and alpha
+ * (RGBA) values. `img.pixels` is a one-dimensional array for performance
+ * reasons.
+ *
+ * Each pixel occupies four elements in the pixels array, one for each
+ * RGBA value. For example, the pixel at coordinates (0, 0) stores its
+ * RGBA values at `img.pixels[0]`, `img.pixels[1]`, `img.pixels[2]`,
+ * and `img.pixels[3]`, respectively. The next pixel at coordinates (1, 0)
+ * stores its RGBA values at `img.pixels[4]`, `img.pixels[5]`,
+ * `img.pixels[6]`, and `img.pixels[7]`. And so on. The `img.pixels` array
+ * for a 100×100 p5.Image object has
+ * 100 × 100 × 4 = 40,000 elements.
+ *
+ * Accessing the RGBA values for a pixel in the image requires a little
+ * math as shown in the examples below. The
+ * img.loadPixels()
+ * method must be called before accessing the `img.pixels` array. The
+ * img.updatePixels() method must be
+ * called after any changes are made.
+ *
+ * @property {Number[]} pixels
+ * @for p5.Image
+ * @name pixels
*
* @example
*
- * let gif;
- *
- * // Load the image.
- * function preload() {
- * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
+ * image(img, 0, 0);
*
- * describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
- * }
+ * // Calculate the center coordinates.
+ * let x = img.width / 2;
+ * let y = img.height / 2;
*
- * function draw() {
- * // Display the image.
- * image(gif, 0, 0);
+ * // Draw a circle at the image's center.
+ * circle(x, y, 20);
*
- * // Display the current state of playback.
- * let total = gif.numFrames();
- * let index = gif.getCurrentFrame();
- * text(`${index} / ${total}`, 30, 90);
+ * describe('An image of a mountain landscape with a white circle drawn in the middle.');
* }
*
*
*
- */
- play() {
- if (this.gifProperties) {
- this.gifProperties.playing = true;
- }
- }
-
- /**
- * Pauses an animated GIF.
- *
- * The GIF can be resumed by calling
- * img.play().
- *
- * @example
- *
- * let gif;
- *
- * // Load the image.
- * function preload() {
- * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
- * }
- *
* function setup() {
* createCanvas(100, 100);
*
- * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
- * }
- *
- * function draw() {
- * background(255);
- * image(gif, 0, 0);
- * }
- *
- * // Pause the GIF when the user presses the mouse.
- * function mousePressed() {
- * gif.pause();
- * }
- *
- * // Play the GIF when the user releases the mouse.
- * function mouseReleased() {
- * gif.play();
- * }
- *
- *
- *
- */
- pause() {
- if (this.gifProperties) {
- this.gifProperties.playing = false;
- }
- }
-
- /**
- * Changes the delay between frames in an animated GIF.
- *
- * The first parameter, `delay`, is the length of the delay in milliseconds.
- *
- * The second parameter, `index`, is optional. If provided, only the frame
- * at `index` will have its delay modified. All other frames will keep
- * their default delay.
- *
- * @param {Number} d delay in milliseconds between switching frames.
- * @param {Number} [index] index of the frame that will have its delay modified.
*
- * @example
*
- * let gif;
+ * background(200);
*
- * // Load the image.
- * function preload() {
- * gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
- * }
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
*
- * function setup() {
- * createCanvas(100, 100);
+ * // Load the image's pixels.
+ * img.loadPixels();
*
- * describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
- * }
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 0;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
*
- * function draw() {
- * background(255);
+ * // Update the image.
+ * img.updatePixels();
*
* // Display the image.
- * image(gif, 0, 0);
- * }
- *
- * // Pause the GIF when the user presses the mouse.
- * function mousePressed() {
- * gif.pause();
- * }
+ * image(img, 17, 17);
*
- * // Play the GIF when the user presses the mouse.
- * function mouseReleased() {
- * gif.play();
+ * describe('A black square drawn in the middle of a gray square.');
* }
*
*
*
- *
- *
- * let gifFast;
- * let gifSlow;
- *
- * // Load the images.
- * function preload() {
- * gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
- * gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
- * }
- *
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
- * // Resize the images.
- * gifFast.resize(50, 50);
- * gifSlow.resize(50, 50);
- *
- * // Set the delay lengths.
- * gifFast.delay(10);
- * gifSlow.delay(100);
- *
- * describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
- * }
- *
- * function draw() {
- * // Display the images.
- * image(gifFast, 0, 0);
- * image(gifSlow, 50, 0);
- * }
- *
- *
- *
*/
- delay(d, index) {
- if (this.gifProperties) {
- const props = this.gifProperties;
- if (index < props.numFrames && index >= 0) {
- props.frames[index].delay = d;
- } else {
- // change all frames
- for (const frame of props.frames) {
- frame.delay = d;
- }
- }
- }
- }
-};
+}
-/**
- * The image's width in pixels.
- *
- * @type {Number}
- * @property {Number} width
- * @for p5.Image
- * @name width
- * @readOnly
- *
- * @example
- *
- * let gif;
- *
- * // Load the image.
- * function preload() {
- * gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
- * }
+ * // Create a p5.Image object.
+ * let img = createImage(66, 66);
*
- * function setup() {
- * createCanvas(100, 100);
+ * // Load the image's pixels.
+ * img.loadPixels();
*
- * // Set the delay of frame 67.
- * gif.delay(3000, 67);
+ * // Set the pixels to red.
+ * for (let i = 0; i < img.pixels.length; i += 4) {
+ * // Red.
+ * img.pixels[i] = 255;
+ * // Green.
+ * img.pixels[i + 1] = 0;
+ * // Blue.
+ * img.pixels[i + 2] = 0;
+ * // Alpha.
+ * img.pixels[i + 3] = 255;
+ * }
*
- * describe('An animated eye looking around. It pauses for three seconds while it looks down.');
- * }
+ * // Update the image.
+ * img.updatePixels();
*
- * function draw() {
* // Display the image.
- * image(gif, 0, 0);
+ * image(img, 17, 17);
+ *
+ * describe('A red square drawn in the middle of a gray square.');
* }
*
*
- *
- */
-
-/**
- * The image's height in pixels.
- *
- * @type {Number}
- * @property height
- * @for p5.Image
- * @name height
- * @readOnly
- *
- * @example
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Calculate the center coordinates.
- * let x = img.width / 2;
- * let y = img.height / 2;
- *
- * // Draw a circle at the image's center.
- * circle(x, y, 20);
- *
- * describe('An image of a mountain landscape with a white circle drawn in the middle.');
- * }
- *
- *
- *
- */
-
-/**
- * An array containing the color of each pixel in the image.
- *
- * Colors are stored as numbers representing red, green, blue, and alpha
- * (RGBA) values. `img.pixels` is a one-dimensional array for performance
- * reasons.
- *
- * Each pixel occupies four elements in the pixels array, one for each
- * RGBA value. For example, the pixel at coordinates (0, 0) stores its
- * RGBA values at `img.pixels[0]`, `img.pixels[1]`, `img.pixels[2]`,
- * and `img.pixels[3]`, respectively. The next pixel at coordinates (1, 0)
- * stores its RGBA values at `img.pixels[4]`, `img.pixels[5]`,
- * `img.pixels[6]`, and `img.pixels[7]`. And so on. The `img.pixels` array
- * for a 100×100 p5.Image object has
- * 100 × 100 × 4 = 40,000 elements.
- *
- * Accessing the RGBA values for a pixel in the image requires a little
- * math as shown in the examples below. The
- * img.loadPixels()
- * method must be called before accessing the `img.pixels` array. The
- * img.updatePixels() method must be
- * called after any changes are made.
- *
- * @property {Number[]} pixels
- * @for p5.Image
- * @name pixels
- *
- * @example
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Calculate the center coordinates.
- * let x = img.width / 2;
- * let y = img.height / 2;
- *
- * // Draw a circle at the image's center.
- * circle(x, y, 20);
- *
- * describe('An image of a mountain landscape with a white circle drawn in the middle.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(66, 66);
- *
- * // Load the image's pixels.
- * img.loadPixels();
- *
- * for (let i = 0; i < img.pixels.length; i += 4) {
- * // Red.
- * img.pixels[i] = 0;
- * // Green.
- * img.pixels[i + 1] = 0;
- * // Blue.
- * img.pixels[i + 2] = 0;
- * // Alpha.
- * img.pixels[i + 3] = 255;
- * }
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 17, 17);
- *
- * describe('A black square drawn in the middle of a gray square.');
- * }
- *
- *
- *
- */
+export default image;
-export default p5.Image;
+if(typeof p5 !== 'undefined'){
+ image(p5, p5.prototype);
+}
diff --git a/src/image/pixels.js b/src/image/pixels.js
index 936d453055..3b0716c657 100644
--- a/src/image/pixels.js
+++ b/src/image/pixels.js
@@ -5,1179 +5,1183 @@
* @requires core
*/
-import p5 from '../core/main';
import Filters from './filters';
-import '../color/p5.Color';
-/**
- * An array containing the color of each pixel on the canvas.
- *
- * Colors are stored as numbers representing red, green, blue, and alpha
- * (RGBA) values. `pixels` is a one-dimensional array for performance reasons.
- *
- * Each pixel occupies four elements in the `pixels` array, one for each RGBA
- * value. For example, the pixel at coordinates (0, 0) stores its RGBA values
- * at `pixels[0]`, `pixels[1]`, `pixels[2]`, and `pixels[3]`, respectively.
- * The next pixel at coordinates (1, 0) stores its RGBA values at `pixels[4]`,
- * `pixels[5]`, `pixels[6]`, and `pixels[7]`. And so on. The `pixels` array
- * for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
- *
- * Some displays use several smaller pixels to set the color at a single
- * point. The pixelDensity() function returns
- * the pixel density of the canvas. High density displays often have a
- * pixelDensity() of 2. On such a display, the
- * `pixels` array for a 100×100 canvas has 200 × 200 × 4 =
- * 160,000 elements.
- *
- * Accessing the RGBA values for a point on the canvas requires a little math
- * as shown below. The loadPixels() function
- * must be called before accessing the `pixels` array. The
- * updatePixels() function must be called
- * after any changes are made.
- *
- * @property {Number[]} pixels
- *
- * @example
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Image object.
- * let img = createImage(66, 66);
- *
- * // Load the image's pixels.
- * img.loadPixels();
- *
- * // Set the pixels to red.
- * for (let i = 0; i < img.pixels.length; i += 4) {
- * // Red.
- * img.pixels[i] = 255;
- * // Green.
- * img.pixels[i + 1] = 0;
- * // Blue.
- * img.pixels[i + 2] = 0;
- * // Alpha.
- * img.pixels[i + 3] = 255;
- * }
- *
- * // Update the image.
- * img.updatePixels();
- *
- * // Display the image.
- * image(img, 17, 17);
- *
- * describe('A red square drawn in the middle of a gray square.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Load the pixels array.
- * loadPixels();
- *
- * // Set the dot's coordinates.
- * let x = 50;
- * let y = 50;
- *
- * // Get the pixel density.
- * let d = pixelDensity();
- *
- * // Set the pixel(s) at the center of the canvas black.
- * for (let i = 0; i < d; i += 1) {
- * for (let j = 0; j < d; j += 1) {
- * let index = 4 * ((y * d + j) * width * d + (x * d + i));
- * // Red.
- * pixels[index] = 0;
- * // Green.
- * pixels[index + 1] = 0;
- * // Blue.
- * pixels[index + 2] = 0;
- * // Alpha.
- * pixels[index + 3] = 255;
- * }
- * }
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('A black dot in the middle of a gray rectangle.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Load the pixels array.
- * loadPixels();
- *
- * // Get the pixel density.
- * let d = pixelDensity();
- *
- * // Calculate the halfway index in the pixels array.
- * let halfImage = 4 * (d * width) * (d * height / 2);
- *
- * // Make the top half of the canvas red.
- * for (let i = 0; i < halfImage; i += 4) {
- * // Red.
- * pixels[i] = 255;
- * // Green.
- * pixels[i + 1] = 0;
- * // Blue.
- * pixels[i + 2] = 0;
- * // Alpha.
- * pixels[i + 3] = 255;
- * }
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('A red rectangle drawn above a gray rectangle.');
- * }
- *
- *
- *
- */
-p5.prototype.pixels = [];
+function pixels(p5, fn){
+ /**
+ * An array containing the color of each pixel on the canvas.
+ *
+ * Colors are stored as numbers representing red, green, blue, and alpha
+ * (RGBA) values. `pixels` is a one-dimensional array for performance reasons.
+ *
+ * Each pixel occupies four elements in the `pixels` array, one for each RGBA
+ * value. For example, the pixel at coordinates (0, 0) stores its RGBA values
+ * at `pixels[0]`, `pixels[1]`, `pixels[2]`, and `pixels[3]`, respectively.
+ * The next pixel at coordinates (1, 0) stores its RGBA values at `pixels[4]`,
+ * `pixels[5]`, `pixels[6]`, and `pixels[7]`. And so on. The `pixels` array
+ * for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
+ *
+ * Some displays use several smaller pixels to set the color at a single
+ * point. The pixelDensity() function returns
+ * the pixel density of the canvas. High density displays often have a
+ * pixelDensity() of 2. On such a display, the
+ * `pixels` array for a 100×100 canvas has 200 × 200 × 4 =
+ * 160,000 elements.
+ *
+ * Accessing the RGBA values for a point on the canvas requires a little math
+ * as shown below. The loadPixels() function
+ * must be called before accessing the `pixels` array. The
+ * updatePixels() function must be called
+ * after any changes are made.
+ *
+ * @property {Number[]} pixels
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Create a p5.Color object.
- * let pink = color(255, 102, 204);
- *
- * // Load the pixels array.
- * loadPixels();
- *
- * // Get the pixel density.
- * let d = pixelDensity();
- *
- * // Calculate the halfway index in the pixels array.
- * let halfImage = 4 * (d * width) * (d * height / 2);
- *
- * // Make the top half of the canvas red.
- * for (let i = 0; i < halfImage; i += 4) {
- * pixels[i] = red(pink);
- * pixels[i + 1] = green(pink);
- * pixels[i + 2] = blue(pink);
- * pixels[i + 3] = alpha(pink);
- * }
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('A pink rectangle drawn above a gray rectangle.');
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Set the dot's coordinates.
+ * let x = 50;
+ * let y = 50;
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Set the pixel(s) at the center of the canvas black.
+ * for (let i = 0; i < d; i += 1) {
+ * for (let j = 0; j < d; j += 1) {
+ * let index = 4 * ((y * d + j) * width * d + (x * d + i));
+ * // Red.
+ * pixels[index] = 0;
+ * // Green.
+ * pixels[index + 1] = 0;
+ * // Blue.
+ * pixels[index + 2] = 0;
+ * // Alpha.
+ * pixels[index + 3] = 255;
+ * }
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A black dot in the middle of a gray rectangle.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Make the top half of the canvas red.
+ * for (let i = 0; i < halfImage; i += 4) {
+ * // Red.
+ * pixels[i] = 255;
+ * // Green.
+ * pixels[i + 1] = 0;
+ * // Blue.
+ * pixels[i + 2] = 0;
+ * // Alpha.
+ * pixels[i + 3] = 255;
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A red rectangle drawn above a gray rectangle.');
+ * }
+ *
+ *
+ *
+ */
+ fn.pixels = [];
-/**
- * Copies a region of pixels from one image to another.
- *
- * The first parameter, `srcImage`, is the
- * p5.Image object to blend.
- *
- * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
- * to blend from the source image. `(sx, sy)` is the top-left corner of the
- * region. `sw` and `sh` are the regions width and height.
- *
- * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
- * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
- * region. `dw` and `dh` are the regions width and height.
- *
- * The tenth parameter, `blendMode`, sets the effect used to blend the images'
- * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
- * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
- * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`
- *
- * @method blend
- * @param {p5.Image} srcImage source image.
- * @param {Integer} sx x-coordinate of the source's upper-left corner.
- * @param {Integer} sy y-coordinate of the source's upper-left corner.
- * @param {Integer} sw source image width.
- * @param {Integer} sh source image height.
- * @param {Integer} dx x-coordinate of the destination's upper-left corner.
- * @param {Integer} dy y-coordinate of the destination's upper-left corner.
- * @param {Integer} dw destination image width.
- * @param {Integer} dh destination image height.
- * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode the blend mode. either
- * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
- * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
- * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Create a p5.Color object.
+ * let pink = color(255, 102, 204);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Make the top half of the canvas red.
+ * for (let i = 0; i < halfImage; i += 4) {
+ * pixels[i] = red(pink);
+ * pixels[i + 1] = green(pink);
+ * pixels[i + 2] = blue(pink);
+ * pixels[i + 3] = alpha(pink);
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A pink rectangle drawn above a gray rectangle.');
+ * }
+ *
+ *
- *
- *
- *
- * let img0;
- * let img1;
- *
- * // Load the images.
- * function preload() {
- * img0 = loadImage('assets/rockies.jpg');
- * img1 = loadImage('assets/bricks_third.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Use the mountains as the background.
- * background(img0);
- *
- * // Display the bricks.
- * image(img1, 0, 0);
- *
- * // Display the bricks faded into the landscape.
- * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
- *
- * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
- * }
- *
- *
- *
- *
- *
- * let img0;
- * let img1;
- *
- * // Load the images.
- * function preload() {
- * img0 = loadImage('assets/rockies.jpg');
- * img1 = loadImage('assets/bricks_third.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Use the mountains as the background.
- * background(img0);
- *
- * // Display the bricks.
- * image(img1, 0, 0);
- *
- * // Display the bricks partially transparent.
- * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
- *
- * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
- * }
- *
- *
- *
- */
-/**
- * @method blend
- * @param {Integer} sx
- * @param {Integer} sy
- * @param {Integer} sw
- * @param {Integer} sh
- * @param {Integer} dx
- * @param {Integer} dy
- * @param {Integer} dw
- * @param {Integer} dh
- * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode
- */
-p5.prototype.blend = function(...args) {
- p5._validateParameters('blend', args);
- if (this._renderer) {
- this._renderer.blend(...args);
- } else {
- p5.Renderer2D.prototype.blend.apply(this, args);
- }
-};
+ /**
+ * Copies a region of pixels from one image to another.
+ *
+ * The first parameter, `srcImage`, is the
+ * p5.Image object to blend.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to blend from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the regions width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the regions width and height.
+ *
+ * The tenth parameter, `blendMode`, sets the effect used to blend the images'
+ * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
+ * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
+ * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`
+ *
+ * @method blend
+ * @param {p5.Image} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode the blend mode. either
+ * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ *
+ * @example
+ *
- * let img0;
- * let img1;
- *
- * // Load the images.
- * function preload() {
- * img0 = loadImage('assets/rockies.jpg');
- * img1 = loadImage('assets/bricks_third.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Use the mountains as the background.
- * background(img0);
- *
- * // Display the bricks.
- * image(img1, 0, 0);
- *
- * // Display the bricks washed out into the landscape.
- * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
- *
- * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
- * }
- *
- *
+ *
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * // Load the images.
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img0);
+ *
+ * // Display the bricks.
+ * image(img1, 0, 0);
+ *
+ * // Display the bricks faded into the landscape.
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img0;
+ * let img1;
+ *
+ * // Load the images.
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img0);
+ *
+ * // Display the bricks.
+ * image(img1, 0, 0);
+ *
+ * // Display the bricks partially transparent.
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method blend
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ * @param {(BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL)} blendMode
+ */
+ fn.blend = function(...args) {
+ p5._validateParameters('blend', args);
+ if (this._renderer) {
+ this._renderer.blend(...args);
+ } else {
+ p5.Renderer2D.prototype.blend.apply(this, args);
+ }
+ };
-/**
- * Copies pixels from a source image to a region of the canvas.
- *
- * The first parameter, `srcImage`, is the
- * p5.Image object to blend. The source image can be
- * the canvas itself or a
- * p5.Image object. `copy()` will scale pixels from
- * the source region if it isn't the same size as the destination region.
- *
- * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
- * to copy from the source image. `(sx, sy)` is the top-left corner of the
- * region. `sw` and `sh` are the region's width and height.
- *
- * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
- * of the canvas to copy into. `(dx, dy)` is the top-left corner of the
- * region. `dw` and `dh` are the region's width and height.
- *
- * @method copy
- * @param {p5.Image|p5.Element} srcImage source image.
- * @param {Integer} sx x-coordinate of the source's upper-left corner.
- * @param {Integer} sy y-coordinate of the source's upper-left corner.
- * @param {Integer} sw source image width.
- * @param {Integer} sh source image height.
- * @param {Integer} dx x-coordinate of the destination's upper-left corner.
- * @param {Integer} dy y-coordinate of the destination's upper-left corner.
- * @param {Integer} dw destination image width.
- * @param {Integer} dh destination image height.
- *
- * @example
- *
+ * let img0;
+ * let img1;
+ *
+ * // Load the images.
+ * function preload() {
+ * img0 = loadImage('assets/rockies.jpg');
+ * img1 = loadImage('assets/bricks_third.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img0);
+ *
+ * // Display the bricks.
+ * image(img1, 0, 0);
+ *
+ * // Display the bricks washed out into the landscape.
+ * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+ *
+ * describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+ * }
+ *
+ *
- *
- */
-/**
- * @method copy
- * @param {Integer} sx
- * @param {Integer} sy
- * @param {Integer} sw
- * @param {Integer} sh
- * @param {Integer} dx
- * @param {Integer} dy
- * @param {Integer} dw
- * @param {Integer} dh
- */
-p5.prototype.copy = function(...args) {
- p5._validateParameters('copy', args);
+ /**
+ * Copies pixels from a source image to a region of the canvas.
+ *
+ * The first parameter, `srcImage`, is the
+ * p5.Image object to blend. The source image can be
+ * the canvas itself or a
+ * p5.Image object. `copy()` will scale pixels from
+ * the source region if it isn't the same size as the destination region.
+ *
+ * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
+ * to copy from the source image. `(sx, sy)` is the top-left corner of the
+ * region. `sw` and `sh` are the region's width and height.
+ *
+ * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
+ * of the canvas to copy into. `(dx, dy)` is the top-left corner of the
+ * region. `dw` and `dh` are the region's width and height.
+ *
+ * @method copy
+ * @param {p5.Image|p5.Element} srcImage source image.
+ * @param {Integer} sx x-coordinate of the source's upper-left corner.
+ * @param {Integer} sy y-coordinate of the source's upper-left corner.
+ * @param {Integer} sw source image width.
+ * @param {Integer} sh source image height.
+ * @param {Integer} dx x-coordinate of the destination's upper-left corner.
+ * @param {Integer} dy y-coordinate of the destination's upper-left corner.
+ * @param {Integer} dw destination image width.
+ * @param {Integer} dh destination image height.
+ *
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Use the mountains as the background.
- * background(img);
- *
- * // Copy a region of pixels to another spot.
- * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
- *
- * // Outline the copied region.
- * stroke(255);
- * noFill();
- * square(7, 22, 10);
- *
- * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
- * }
- *
- *
+ *
+ */
+ /**
+ * @method copy
+ * @param {Integer} sx
+ * @param {Integer} sy
+ * @param {Integer} sw
+ * @param {Integer} sh
+ * @param {Integer} dx
+ * @param {Integer} dy
+ * @param {Integer} dw
+ * @param {Integer} dh
+ */
+ fn.copy = function(...args) {
+ p5._validateParameters('copy', args);
- let srcImage, sx, sy, sw, sh, dx, dy, dw, dh;
- if (args.length === 9) {
- srcImage = args[0];
- sx = args[1];
- sy = args[2];
- sw = args[3];
- sh = args[4];
- dx = args[5];
- dy = args[6];
- dw = args[7];
- dh = args[8];
- } else if (args.length === 8) {
- srcImage = this;
- sx = args[0];
- sy = args[1];
- sw = args[2];
- sh = args[3];
- dx = args[4];
- dy = args[5];
- dw = args[6];
- dh = args[7];
- } else {
- throw new Error('Signature not supported');
- }
+ let srcImage, sx, sy, sw, sh, dx, dy, dw, dh;
+ if (args.length === 9) {
+ srcImage = args[0];
+ sx = args[1];
+ sy = args[2];
+ sw = args[3];
+ sh = args[4];
+ dx = args[5];
+ dy = args[6];
+ dw = args[7];
+ dh = args[8];
+ } else if (args.length === 8) {
+ srcImage = this;
+ sx = args[0];
+ sy = args[1];
+ sw = args[2];
+ sh = args[3];
+ dx = args[4];
+ dy = args[5];
+ dw = args[6];
+ dh = args[7];
+ } else {
+ throw new Error('Signature not supported');
+ }
- p5.prototype._copyHelper(this, srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
-};
+ fn._copyHelper(this, srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
+ };
-p5.prototype._copyHelper = (
- dstImage,
- srcImage,
- sx,
- sy,
- sw,
- sh,
- dx,
- dy,
- dw,
- dh
-) => {
- const s = srcImage.canvas.width / srcImage.width;
- // adjust coord system for 3D when renderer
- // ie top-left = -width/2, -height/2
- let sxMod = 0;
- let syMod = 0;
- if (srcImage._renderer && srcImage._renderer.isP3D) {
- sxMod = srcImage.width / 2;
- syMod = srcImage.height / 2;
- }
- if (dstImage._renderer && dstImage._renderer.isP3D) {
- dstImage.push();
- dstImage.resetMatrix();
- dstImage.noLights();
- dstImage.blendMode(dstImage.BLEND);
- dstImage.imageMode(dstImage.CORNER);
- p5.RendererGL.prototype.image.call(
- dstImage._renderer,
- srcImage,
- sx + sxMod,
- sy + syMod,
- sw,
- sh,
- dx,
- dy,
- dw,
- dh
- );
- dstImage.pop();
- } else {
- dstImage.drawingContext.drawImage(
- srcImage.canvas,
- s * (sx + sxMod),
- s * (sy + syMod),
- s * sw,
- s * sh,
- dx,
- dy,
- dw,
- dh
- );
- }
-};
+ fn._copyHelper = (
+ dstImage,
+ srcImage,
+ sx,
+ sy,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh
+ ) => {
+ const s = srcImage.canvas.width / srcImage.width;
+ // adjust coord system for 3D when renderer
+ // ie top-left = -width/2, -height/2
+ let sxMod = 0;
+ let syMod = 0;
+ if (srcImage._renderer && srcImage._renderer.isP3D) {
+ sxMod = srcImage.width / 2;
+ syMod = srcImage.height / 2;
+ }
+ if (dstImage._renderer && dstImage._renderer.isP3D) {
+ dstImage.push();
+ dstImage.resetMatrix();
+ dstImage.noLights();
+ dstImage.blendMode(dstImage.BLEND);
+ dstImage.imageMode(dstImage.CORNER);
+ p5.RendererGL.prototype.image.call(
+ dstImage._renderer,
+ srcImage,
+ sx + sxMod,
+ sy + syMod,
+ sw,
+ sh,
+ dx,
+ dy,
+ dw,
+ dh
+ );
+ dstImage.pop();
+ } else {
+ dstImage.drawingContext.drawImage(
+ srcImage.canvas,
+ s * (sx + sxMod),
+ s * (sy + syMod),
+ s * sw,
+ s * sh,
+ dx,
+ dy,
+ dw,
+ dh
+ );
+ }
+ };
-/**
- * Applies an image filter to the canvas.
- *
- * The preset options are:
- *
- * `INVERT`
- * Inverts the colors in the image. No parameter is used.
- *
- * `GRAY`
- * Converts the image to grayscale. No parameter is used.
- *
- * `THRESHOLD`
- * Converts the image to black and white. Pixels with a grayscale value
- * above a given threshold are converted to white. The rest are converted to
- * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
- * value is specified, 0.5 is used.
- *
- * `OPAQUE`
- * Sets the alpha channel to entirely opaque. No parameter is used.
- *
- * `POSTERIZE`
- * Limits the number of colors in the image. Each color channel is limited to
- * the number of colors specified. Values between 2 and 255 are valid, but
- * results are most noticeable with lower values. The default value is 4.
- *
- * `BLUR`
- * Blurs the image. The level of blurring is specified by a blur radius. Larger
- * values increase the blur. The default value is 4. A gaussian blur is used
- * in `P2D` mode. A box blur is used in `WEBGL` mode.
- *
- * `ERODE`
- * Reduces the light areas. No parameter is used.
- *
- * `DILATE`
- * Increases the light areas. No parameter is used.
- *
- * `filter()` uses WebGL in the background by default because it's faster.
- * This can be disabled in `P2D` mode by adding a `false` argument, as in
- * `filter(BLUR, false)`. This may be useful to keep computation off the GPU
- * or to work around a lack of WebGL support.
- *
- * In WebgL mode, `filter()` can also use custom shaders. See
- * createFilterShader() for more
- * information.
- *
- *
- * @method filter
- * @param {(THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR)} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
- * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
- * @param {Number} [filterParam] parameter unique to each filter.
- * @param {Boolean} [useWebGL=true] flag to control whether to use fast
- * WebGL filters (GPU) or original image
- * filters (CPU); defaults to `true`.
- *
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the mountains as the background.
+ * background(img);
+ *
+ * // Copy a region of pixels to another spot.
+ * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+ *
+ * // Outline the copied region.
+ * stroke(255);
+ * noFill();
+ * square(7, 22, 10);
+ *
+ * describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+ * }
+ *
+ *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the INVERT filter.
- * filter(INVERT);
- *
- * describe('A blue brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the GRAY filter.
- * filter(GRAY);
- *
- * describe('A brick wall drawn in grayscale.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the THRESHOLD filter.
- * filter(THRESHOLD);
- *
- * describe('A brick wall drawn in black and white.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the OPAQUE filter.
- * filter(OPAQUE);
- *
- * describe('A red brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the POSTERIZE filter.
- * filter(POSTERIZE, 3);
- *
- * describe('An image of a red brick wall drawn with limited color palette.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the BLUR filter.
- * filter(BLUR, 3);
- *
- * describe('A blurry image of a red brick wall.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the DILATE filter.
- * filter(DILATE);
- *
- * describe('A red brick wall with bright lines between each brick.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the ERODE filter.
- * filter(ERODE);
- *
- * describe('A red brick wall with faint lines between each brick.');
- * }
- *
- *
- *
- */
+ /**
+ * Applies an image filter to the canvas.
+ *
+ * The preset options are:
+ *
+ * `INVERT`
+ * Inverts the colors in the image. No parameter is used.
+ *
+ * `GRAY`
+ * Converts the image to grayscale. No parameter is used.
+ *
+ * `THRESHOLD`
+ * Converts the image to black and white. Pixels with a grayscale value
+ * above a given threshold are converted to white. The rest are converted to
+ * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+ * value is specified, 0.5 is used.
+ *
+ * `OPAQUE`
+ * Sets the alpha channel to entirely opaque. No parameter is used.
+ *
+ * `POSTERIZE`
+ * Limits the number of colors in the image. Each color channel is limited to
+ * the number of colors specified. Values between 2 and 255 are valid, but
+ * results are most noticeable with lower values. The default value is 4.
+ *
+ * `BLUR`
+ * Blurs the image. The level of blurring is specified by a blur radius. Larger
+ * values increase the blur. The default value is 4. A gaussian blur is used
+ * in `P2D` mode. A box blur is used in `WEBGL` mode.
+ *
+ * `ERODE`
+ * Reduces the light areas. No parameter is used.
+ *
+ * `DILATE`
+ * Increases the light areas. No parameter is used.
+ *
+ * `filter()` uses WebGL in the background by default because it's faster.
+ * This can be disabled in `P2D` mode by adding a `false` argument, as in
+ * `filter(BLUR, false)`. This may be useful to keep computation off the GPU
+ * or to work around a lack of WebGL support.
+ *
+ * In WebgL mode, `filter()` can also use custom shaders. See
+ * createFilterShader() for more
+ * information.
+ *
+ *
+ * @method filter
+ * @param {(THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR)} filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
+ * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+ * @param {Number} [filterParam] parameter unique to each filter.
+ * @param {Boolean} [useWebGL=true] flag to control whether to use fast
+ * WebGL filters (GPU) or original image
+ * filters (CPU); defaults to `true`.
+ *
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/bricks.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Apply the BLUR filter.
- * // Don't use WebGL.
- * filter(BLUR, 3, false);
- *
- * describe('A blurry image of a red brick wall.');
- * }
- *
- *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the INVERT filter.
+ * filter(INVERT);
+ *
+ * describe('A blue brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the GRAY filter.
+ * filter(GRAY);
+ *
+ * describe('A brick wall drawn in grayscale.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the THRESHOLD filter.
+ * filter(THRESHOLD);
+ *
+ * describe('A brick wall drawn in black and white.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the OPAQUE filter.
+ * filter(OPAQUE);
+ *
+ * describe('A red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the POSTERIZE filter.
+ * filter(POSTERIZE, 3);
+ *
+ * describe('An image of a red brick wall drawn with limited color palette.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the BLUR filter.
+ * filter(BLUR, 3);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the DILATE filter.
+ * filter(DILATE);
+ *
+ * describe('A red brick wall with bright lines between each brick.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the ERODE filter.
+ * filter(ERODE);
+ *
+ * describe('A red brick wall with faint lines between each brick.');
+ * }
+ *
+ *
+ *
+ */
-/**
- * @method getFilterGraphicsLayer
- * @private
- * @returns {p5.Graphics}
- */
-p5.prototype.getFilterGraphicsLayer = function() {
- return this._renderer.getFilterGraphicsLayer();
-};
+ /**
+ * @method getFilterGraphicsLayer
+ * @private
+ * @returns {p5.Graphics}
+ */
+ fn.getFilterGraphicsLayer = function() {
+ return this._renderer.getFilterGraphicsLayer();
+ };
-/**
- * @method filter
- * @param {(THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR)} filterType
- * @param {Number} [filterParam]
- * @param {Boolean} [useWebGL=true]
- */
-/**
- * @method filter
- * @param {p5.Shader} shaderFilter shader that's been loaded, with the
- * frag shader using a `tex0` uniform.
- */
-p5.prototype.filter = function(...args) {
- p5._validateParameters('filter', args);
+ /**
+ * @method filter
+ * @param {(THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR)} filterType
+ * @param {Number} [filterParam]
+ * @param {Boolean} [useWebGL=true]
+ */
+ /**
+ * @method filter
+ * @param {p5.Shader} shaderFilter shader that's been loaded, with the
+ * frag shader using a `tex0` uniform.
+ */
+ fn.filter = function(...args) {
+ p5._validateParameters('filter', args);
- let { shader, operation, value, useWebGL } = parseFilterArgs(...args);
+ let { shader, operation, value, useWebGL } = parseFilterArgs(...args);
- // when passed a shader, use it directly
- if (this._renderer.isP3D && shader) {
- p5.RendererGL.prototype.filter.call(this._renderer, shader);
- return;
- }
+ // when passed a shader, use it directly
+ if (this._renderer.isP3D && shader) {
+ p5.RendererGL.prototype.filter.call(this._renderer, shader);
+ return;
+ }
- // when opting out of webgl, use old pixels method
- if (!useWebGL && !this._renderer.isP3D) {
- if (this.canvas !== undefined) {
- Filters.apply(this.canvas, Filters[operation], value);
- } else {
- Filters.apply(this.elt, Filters[operation], value);
+ // when opting out of webgl, use old pixels method
+ if (!useWebGL && !this._renderer.isP3D) {
+ if (this.canvas !== undefined) {
+ Filters.apply(this.canvas, Filters[operation], value);
+ } else {
+ Filters.apply(this.elt, Filters[operation], value);
+ }
+ return;
}
- return;
- }
- if(!useWebGL && this._renderer.isP3D) {
- console.warn('filter() with useWebGL=false is not supported in WEBGL');
- }
+ if(!useWebGL && this._renderer.isP3D) {
+ console.warn('filter() with useWebGL=false is not supported in WEBGL');
+ }
- // when this is a webgl renderer, apply constant shader filter
- if (this._renderer.isP3D) {
- p5.RendererGL.prototype.filter.call(this._renderer, operation, value);
- }
+ // when this is a webgl renderer, apply constant shader filter
+ if (this._renderer.isP3D) {
+ p5.RendererGL.prototype.filter.call(this._renderer, operation, value);
+ }
- // when this is P2D renderer, create/use hidden webgl renderer
- else {
- const filterGraphicsLayer = this.getFilterGraphicsLayer();
+ // when this is P2D renderer, create/use hidden webgl renderer
+ else {
+ const filterGraphicsLayer = this.getFilterGraphicsLayer();
- // copy p2d canvas contents to secondary webgl renderer
- // dest
- filterGraphicsLayer.copy(
- // src
- this._renderer,
- // src coods
- 0, 0, this.width, this.height,
- // dest coords
- -this.width/2, -this.height/2, this.width, this.height
- );
- //clearing the main canvas
- this._renderer.clear();
+ // copy p2d canvas contents to secondary webgl renderer
+ // dest
+ filterGraphicsLayer.copy(
+ // src
+ this._renderer,
+ // src coods
+ 0, 0, this.width, this.height,
+ // dest coords
+ -this.width/2, -this.height/2, this.width, this.height
+ );
+ //clearing the main canvas
+ this._renderer.clear();
- this._renderer.resetMatrix();
- // filter it with shaders
- filterGraphicsLayer.filter(...args);
+ this._renderer.resetMatrix();
+ // filter it with shaders
+ filterGraphicsLayer.filter(...args);
- // copy secondary webgl renderer back to original p2d canvas
- this.copy(
- // src
- filterGraphicsLayer._renderer,
- // src coods
- 0, 0, this.width, this.height,
- // dest coords
- 0, 0, this.width, this.height
- );
- filterGraphicsLayer.clear(); // prevent feedback effects on p2d canvas
- }
-};
+ // copy secondary webgl renderer back to original p2d canvas
+ this.copy(
+ // src
+ filterGraphicsLayer._renderer,
+ // src coods
+ 0, 0, this.width, this.height,
+ // dest coords
+ 0, 0, this.width, this.height
+ );
+ filterGraphicsLayer.clear(); // prevent feedback effects on p2d canvas
+ }
+ };
-function parseFilterArgs(...args) {
- // args could be:
- // - operation, value, [useWebGL]
- // - operation, [useWebGL]
- // - shader
+ function parseFilterArgs(...args) {
+ // args could be:
+ // - operation, value, [useWebGL]
+ // - operation, [useWebGL]
+ // - shader
- let result = {
- shader: undefined,
- operation: undefined,
- value: undefined,
- useWebGL: true
- };
+ let result = {
+ shader: undefined,
+ operation: undefined,
+ value: undefined,
+ useWebGL: true
+ };
- if (args[0] instanceof p5.Shader) {
- result.shader = args[0];
- return result;
- }
- else {
- result.operation = args[0];
- }
+ if (args[0] instanceof p5.Shader) {
+ result.shader = args[0];
+ return result;
+ }
+ else {
+ result.operation = args[0];
+ }
- if (args.length > 1 && typeof args[1] === 'number') {
- result.value = args[1];
- }
+ if (args.length > 1 && typeof args[1] === 'number') {
+ result.value = args[1];
+ }
- if (args[args.length-1] === false) {
- result.useWebGL = false;
+ if (args[args.length-1] === false) {
+ result.useWebGL = false;
+ }
+ return result;
}
- return result;
-}
-/**
- * Gets a pixel or a region of pixels from the canvas.
- *
- * `get()` is easy to use but it's not as fast as
- * pixels. Use pixels
- * to read many pixel values.
- *
- * The version of `get()` with no parameters returns the entire canvas.
- *
- * The version of `get()` with two parameters interprets them as
- * coordinates. It returns an array with the `[R, G, B, A]` values of the
- * pixel at the given point.
- *
- * The version of `get()` with four parameters interprets them as coordinates
- * and dimensions. It returns a subsection of the canvas as a
- * p5.Image object. The first two parameters are the
- * coordinates for the upper-left corner of the subsection. The last two
- * parameters are the width and height of the subsection.
- *
- * Use p5.Image.get() to work directly with
- * p5.Image objects.
- *
- * @method get
- * @param {Number} x x-coordinate of the pixel.
- * @param {Number} y y-coordinate of the pixel.
- * @param {Number} w width of the subsection to be returned.
- * @param {Number} h height of the subsection to be returned.
- * @return {p5.Image} subsection as a p5.Image object.
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/bricks.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Apply the BLUR filter.
+ * // Don't use WebGL.
+ * filter(BLUR, 3, false);
+ *
+ * describe('A blurry image of a red brick wall.');
+ * }
+ *
+ *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Get the entire canvas.
- * let c = get();
- *
- * // Display half the canvas.
- * image(c, 50, 0);
- *
- * describe('Two identical mountain landscapes shown side-by-side.');
- * }
- *
- *
- *
- *
- *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Get the color of a pixel.
- * let c = get(50, 90);
- *
- * // Style the square with the pixel's color.
- * fill(c);
- * noStroke();
- *
- * // Display the square.
- * square(25, 25, 50);
- *
- * describe('A mountain landscape with an olive green square in its center.');
- * }
- *
- *
- *
- */
-/**
- * @method get
- * @return {p5.Image} whole canvas as a p5.Image.
- */
-/**
- * @method get
- * @param {Number} x
- * @param {Number} y
- * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
- */
-p5.prototype.get = function(x, y, w, h) {
- p5._validateParameters('get', arguments);
- return this._renderer.get(...arguments);
-};
+ /**
+ * Gets a pixel or a region of pixels from the canvas.
+ *
+ * `get()` is easy to use but it's not as fast as
+ * pixels. Use pixels
+ * to read many pixel values.
+ *
+ * The version of `get()` with no parameters returns the entire canvas.
+ *
+ * The version of `get()` with two parameters interprets them as
+ * coordinates. It returns an array with the `[R, G, B, A]` values of the
+ * pixel at the given point.
+ *
+ * The version of `get()` with four parameters interprets them as coordinates
+ * and dimensions. It returns a subsection of the canvas as a
+ * p5.Image object. The first two parameters are the
+ * coordinates for the upper-left corner of the subsection. The last two
+ * parameters are the width and height of the subsection.
+ *
+ * Use p5.Image.get() to work directly with
+ * p5.Image objects.
+ *
+ * @method get
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number} w width of the subsection to be returned.
+ * @param {Number} h height of the subsection to be returned.
+ * @return {p5.Image} subsection as a p5.Image object.
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0);
- *
- * // Get a region of the image.
- * let c = get(0, 0, 50, 50);
- *
- * // Display the region.
- * image(c, 50, 50);
- *
- * describe('A mountain landscape drawn on top of another mountain landscape.');
- * }
- *
- *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get the entire canvas.
+ * let c = get();
+ *
+ * // Display half the canvas.
+ * image(c, 50, 0);
+ *
+ * describe('Two identical mountain landscapes shown side-by-side.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get the color of a pixel.
+ * let c = get(50, 90);
+ *
+ * // Style the square with the pixel's color.
+ * fill(c);
+ * noStroke();
+ *
+ * // Display the square.
+ * square(25, 25, 50);
+ *
+ * describe('A mountain landscape with an olive green square in its center.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method get
+ * @return {p5.Image} whole canvas as a p5.Image.
+ */
+ /**
+ * @method get
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number[]} color of the pixel at (x, y) in array format `[R, G, B, A]`.
+ */
+ fn.get = function(x, y, w, h) {
+ p5._validateParameters('get', arguments);
+ return this._renderer.get(...arguments);
+ };
-/**
- * Loads the current value of each pixel on the canvas into the
- * pixels array.
- *
- * `loadPixels()` must be called before reading from or writing to
- * pixels.
- *
- * @method loadPixels
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0);
+ *
+ * // Get a region of the image.
+ * let c = get(0, 0, 50, 50);
+ *
+ * // Display the region.
+ * image(c, 50, 50);
+ *
+ * describe('A mountain landscape drawn on top of another mountain landscape.');
+ * }
+ *
+ *
- *
- */
-p5.prototype.loadPixels = function(...args) {
- p5._validateParameters('loadPixels', args);
- this._renderer.loadPixels();
-};
+ /**
+ * Loads the current value of each pixel on the canvas into the
+ * pixels array.
+ *
+ * `loadPixels()` must be called before reading from or writing to
+ * pixels.
+ *
+ * @method loadPixels
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0, 100, 100);
- *
- * // Get the pixel density.
- * let d = pixelDensity();
- *
- * // Calculate the halfway index in the pixels array.
- * let halfImage = 4 * (d * width) * (d * height / 2);
- *
- * // Load the pixels array.
- * loadPixels();
- *
- * // Copy the top half of the canvas to the bottom.
- * for (let i = 0; i < halfImage; i += 1) {
- * pixels[i + halfImage] = pixels[i];
- * }
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('Two identical images of mountain landscapes, one on top of the other.');
- * }
- *
- *
+ *
+ */
+ fn.loadPixels = function(...args) {
+ p5._validateParameters('loadPixels', args);
+ this._renderer.loadPixels();
+ };
-/**
- * Sets the color of a pixel or draws an image to the canvas.
- *
- * `set()` is easy to use but it's not as fast as
- * pixels. Use pixels
- * to set many pixel values.
- *
- * `set()` interprets the first two parameters as x- and y-coordinates. It
- * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
- * array, a p5.Color object, or a
- * p5.Image object. If an image is passed, the first
- * two parameters set the coordinates for the image's upper-left corner,
- * regardless of the current imageMode().
- *
- * updatePixels() must be called after using
- * `set()` for changes to appear.
- *
- * @method set
- * @param {Number} x x-coordinate of the pixel.
- * @param {Number} y y-coordinate of the pixel.
- * @param {Number|Number[]|Object} c grayscale value | pixel array |
- * p5.Color object | p5.Image to copy.
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0, 100, 100);
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Copy the top half of the canvas to the bottom.
+ * for (let i = 0; i < halfImage; i += 1) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Two identical images of mountain landscapes, one on top of the other.');
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Set four pixels to black.
- * set(30, 20, 0);
- * set(85, 20, 0);
- * set(85, 75, 0);
- * set(30, 75, 0);
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('Four black dots arranged in a square drawn on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Color object.
- * let black = color(0);
- *
- * // Set four pixels to black.
- * set(30, 20, black);
- * set(85, 20, black);
- * set(85, 75, black);
- * set(30, 75, black);
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('Four black dots arranged in a square drawn on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(255);
- *
- * // Draw a horizontal color gradient.
- * for (let x = 0; x < 100; x += 1) {
- * for (let y = 0; y < 100; y += 1) {
- * // Calculate the grayscale value.
- * let c = map(x, 0, 100, 0, 255);
- *
- * // Set the pixel using the grayscale value.
- * set(x, y, c);
- * }
- * }
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('A horiztonal color gradient from black to white.');
- * }
- *
- *
- *
- */
-p5.prototype.set = function(x, y, imgOrCol) {
- this._renderer.set(x, y, imgOrCol);
-};
+ /**
+ * Sets the color of a pixel or draws an image to the canvas.
+ *
+ * `set()` is easy to use but it's not as fast as
+ * pixels. Use pixels
+ * to set many pixel values.
+ *
+ * `set()` interprets the first two parameters as x- and y-coordinates. It
+ * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
+ * array, a p5.Color object, or a
+ * p5.Image object. If an image is passed, the first
+ * two parameters set the coordinates for the image's upper-left corner,
+ * regardless of the current imageMode().
+ *
+ * updatePixels() must be called after using
+ * `set()` for changes to appear.
+ *
+ * @method set
+ * @param {Number} x x-coordinate of the pixel.
+ * @param {Number} y y-coordinate of the pixel.
+ * @param {Number|Number[]|Object} c grayscale value | pixel array |
+ * p5.Color object | p5.Image to copy.
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Use the image to set all pixels.
- * set(0, 0, img);
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('An image of a mountain landscape.');
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Set four pixels to black.
+ * set(30, 20, 0);
+ * set(85, 20, 0);
+ * set(85, 75, 0);
+ * set(30, 75, 0);
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object.
+ * let black = color(0);
+ *
+ * // Set four pixels to black.
+ * set(30, 20, black);
+ * set(85, 20, black);
+ * set(85, 75, black);
+ * set(30, 75, black);
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Four black dots arranged in a square drawn on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(255);
+ *
+ * // Draw a horizontal color gradient.
+ * for (let x = 0; x < 100; x += 1) {
+ * for (let y = 0; y < 100; y += 1) {
+ * // Calculate the grayscale value.
+ * let c = map(x, 0, 100, 0, 255);
+ *
+ * // Set the pixel using the grayscale value.
+ * set(x, y, c);
+ * }
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('A horiztonal color gradient from black to white.');
+ * }
+ *
+ *
+ *
+ */
+ fn.set = function(x, y, imgOrCol) {
+ this._renderer.set(x, y, imgOrCol);
+ };
-/**
- * Updates the canvas with the RGBA values in the
- * pixels array.
- *
- * `updatePixels()` only needs to be called after changing values in the
- * pixels array. Such changes can be made directly
- * after calling loadPixels() or by calling
- * set().
- *
- * @method updatePixels
- * @param {Number} [x] x-coordinate of the upper-left corner of region
- * to update.
- * @param {Number} [y] y-coordinate of the upper-left corner of region
- * to update.
- * @param {Number} [w] width of region to update.
- * @param {Number} [h] height of region to update.
- * @example
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use the image to set all pixels.
+ * set(0, 0, img);
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('An image of a mountain landscape.');
+ * }
+ *
+ *
- *
- */
-p5.prototype.updatePixels = function(x, y, w, h) {
- p5._validateParameters('updatePixels', arguments);
- // graceful fail - if loadPixels() or set() has not been called, pixel
- // array will be empty, ignore call to updatePixels()
- if (this.pixels.length === 0) {
- return;
- }
- this._renderer.updatePixels(x, y, w, h);
-};
+ /**
+ * Updates the canvas with the RGBA values in the
+ * pixels array.
+ *
+ * `updatePixels()` only needs to be called after changing values in the
+ * pixels array. Such changes can be made directly
+ * after calling loadPixels() or by calling
+ * set().
+ *
+ * @method updatePixels
+ * @param {Number} [x] x-coordinate of the upper-left corner of region
+ * to update.
+ * @param {Number} [y] y-coordinate of the upper-left corner of region
+ * to update.
+ * @param {Number} [w] width of region to update.
+ * @param {Number} [h] height of region to update.
+ * @example
+ *
- * let img;
- *
- * // Load the image.
- * function preload() {
- * img = loadImage('assets/rockies.jpg');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * // Display the image.
- * image(img, 0, 0, 100, 100);
- *
- * // Get the pixel density.
- * let d = pixelDensity();
- *
- * // Calculate the halfway index in the pixels array.
- * let halfImage = 4 * (d * width) * (d * height / 2);
- *
- * // Load the pixels array.
- * loadPixels();
- *
- * // Copy the top half of the canvas to the bottom.
- * for (let i = 0; i < halfImage; i += 1) {
- * pixels[i + halfImage] = pixels[i];
- * }
- *
- * // Update the canvas.
- * updatePixels();
- *
- * describe('Two identical images of mountain landscapes, one on top of the other.');
- * }
- *
- *
+ *
+ */
+ fn.updatePixels = function(x, y, w, h) {
+ p5._validateParameters('updatePixels', arguments);
+ // graceful fail - if loadPixels() or set() has not been called, pixel
+ // array will be empty, ignore call to updatePixels()
+ if (this.pixels.length === 0) {
+ return;
+ }
+ this._renderer.updatePixels(x, y, w, h);
+ };
+}
-export default p5;
+export default pixels;
+
+if(typeof p5 !== 'undefined'){
+ pixels(p5, p5.prototype);
+}
diff --git a/src/io/files.js b/src/io/files.js
index e6711ea20f..cb5404cbe6 100644
--- a/src/io/files.js
+++ b/src/io/files.js
@@ -5,1596 +5,1541 @@
* @requires core
*/
-import p5 from '../core/main';
import * as fileSaver from 'file-saver';
-import '../core/friendly_errors/validate_params';
-import '../core/friendly_errors/file_errors';
-import '../core/friendly_errors/fes_core';
import Renderer from '../core/p5.Renderer';
-/**
- * Loads a JSON file to create an `Object`.
- *
- * JavaScript Object Notation
- * (JSON)
- * is a standard format for sending data between applications. The format is
- * based on JavaScript objects which have keys and values. JSON files store
- * data in an object with strings as keys. Values can be strings, numbers,
- * Booleans, arrays, `null`, or other objects.
- *
- * The first parameter, `path`, is always a string with the path to the file.
- * Paths to local files should be relative, as in
- * `loadJSON('assets/data.json')`. URLs such as
- * `'https://example.com/data.json'` may be blocked due to browser security.
- *
- * The second parameter, `successCallback`, is optional. If a function is
- * passed, as in `loadJSON('assets/data.json', handleData)`, then the
- * `handleData()` function will be called once the data loads. The object
- * created from the JSON data will be passed to `handleData()` as its only argument.
- *
- * The third parameter, `failureCallback`, is also optional. If a function is
- * passed, as in `loadJSON('assets/data.json', handleData, handleFailure)`,
- * then the `handleFailure()` function will be called if an error occurs while
- * loading. The `Error` object will be passed to `handleFailure()` as its only
- * argument.
- *
- * Note: Data can take time to load. Calling `loadJSON()` within
- * preload() ensures data loads before it's used in
- * setup() or draw().
- *
- * @method loadJSON
- * @param {String} path path of the JSON file to be loaded.
- * @param {Function} [successCallback] function to call once the data is loaded. Will be passed the object.
- * @param {Function} [errorCallback] function to call if the data fails to load. Will be passed an `Error` event object.
- * @return {Object} object containing the loaded data.
- *
- * @example
- *
- *
+ * let img;
+ *
+ * // Load the image.
+ * function preload() {
+ * img = loadImage('assets/rockies.jpg');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Display the image.
+ * image(img, 0, 0, 100, 100);
+ *
+ * // Get the pixel density.
+ * let d = pixelDensity();
+ *
+ * // Calculate the halfway index in the pixels array.
+ * let halfImage = 4 * (d * width) * (d * height / 2);
+ *
+ * // Load the pixels array.
+ * loadPixels();
+ *
+ * // Copy the top half of the canvas to the bottom.
+ * for (let i = 0; i < halfImage; i += 1) {
+ * pixels[i + halfImage] = pixels[i];
+ * }
+ *
+ * // Update the canvas.
+ * updatePixels();
+ *
+ * describe('Two identical images of mountain landscapes, one on top of the other.');
+ * }
+ *
+ *
- *
- *
- *
- * let myData;
- *
- * // Load the JSON and create an object.
- * function preload() {
- * myData = loadJSON('assets/data.json');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the circle.
- * fill(myData.color);
- * noStroke();
- *
- * // Draw the circle.
- * circle(myData.x, myData.y, myData.d);
- *
- * describe('A pink circle on a gray background.');
- * }
- *
- *
- *
- *
- *
- * let myData;
- *
- * // Load the JSON and create an object.
- * function preload() {
- * myData = loadJSON('assets/data.json');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.Color object and make it transparent.
- * let c = color(myData.color);
- * c.setAlpha(80);
- *
- * // Style the circles.
- * fill(c);
- * noStroke();
- *
- * // Iterate over the myData.bubbles array.
- * for (let b of myData.bubbles) {
- * // Draw a circle for each bubble.
- * circle(b.x, b.y, b.d);
- * }
- *
- * describe('Several pink bubbles floating in a blue sky.');
- * }
- *
- *
- *
- *
- *
- * let myData;
- *
- * // Load the GeoJSON and create an object.
- * function preload() {
- * myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get data about the most recent earthquake.
- * let quake = myData.features[0].properties;
- *
- * // Draw a circle based on the earthquake's magnitude.
- * circle(50, 50, quake.mag * 10);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(11);
- *
- * // Display the earthquake's location.
- * text(quake.place, 5, 80, 100);
- *
- * describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
- * }
- *
- *
- *
- *
- *
- * let bigQuake;
- *
- * // Load the GeoJSON and preprocess it.
- * function preload() {
- * loadJSON(
- * 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
- * handleData
- * );
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Draw a circle based on the earthquake's magnitude.
- * circle(50, 50, bigQuake.mag * 10);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(11);
- *
- * // Display the earthquake's location.
- * text(bigQuake.place, 5, 80, 100);
- *
- * describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
- * }
- *
- * // Find the biggest recent earthquake.
- * function handleData(data) {
- * let maxMag = 0;
- * // Iterate over the earthquakes array.
- * for (let quake of data.features) {
- * // Reassign bigQuake if a larger
- * // magnitude quake is found.
- * if (quake.properties.mag > maxMag) {
- * bigQuake = quake.properties;
- * }
- * }
- * }
- *
- *
- *
- */
-p5.prototype.loadJSON = async function (...args) {
- p5._validateParameters('loadJSON', args);
- const path = args[0];
- let callback;
- let errorCallback;
- let options;
-
- const ret = {}; // object needed for preload
- let t = 'json';
-
- // check for explicit data type argument
- for (let i = 1; i < args.length; i++) {
- const arg = args[i];
- if (typeof arg === 'string') {
- if (arg === 'json') {
- t = arg;
- }
- } else if (typeof arg === 'function') {
- if (!callback) {
- callback = arg;
- } else {
- errorCallback = arg;
+function files(p5, fn){
+ /**
+ * Loads a JSON file to create an `Object`.
+ *
+ * JavaScript Object Notation
+ * (JSON)
+ * is a standard format for sending data between applications. The format is
+ * based on JavaScript objects which have keys and values. JSON files store
+ * data in an object with strings as keys. Values can be strings, numbers,
+ * Booleans, arrays, `null`, or other objects.
+ *
+ * The first parameter, `path`, is always a string with the path to the file.
+ * Paths to local files should be relative, as in
+ * `loadJSON('assets/data.json')`. URLs such as
+ * `'https://example.com/data.json'` may be blocked due to browser security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, as in `loadJSON('assets/data.json', handleData)`, then the
+ * `handleData()` function will be called once the data loads. The object
+ * created from the JSON data will be passed to `handleData()` as its only argument.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, as in `loadJSON('assets/data.json', handleData, handleFailure)`,
+ * then the `handleFailure()` function will be called if an error occurs while
+ * loading. The `Error` object will be passed to `handleFailure()` as its only
+ * argument.
+ *
+ * Note: Data can take time to load. Calling `loadJSON()` within
+ * preload() ensures data loads before it's used in
+ * setup() or draw().
+ *
+ * @method loadJSON
+ * @param {String} path path of the JSON file to be loaded.
+ * @param {Function} [successCallback] function to call once the data is loaded. Will be passed the object.
+ * @param {Function} [errorCallback] function to call if the data fails to load. Will be passed an `Error` event object.
+ * @return {Object} object containing the loaded data.
+ *
+ * @example
+ *
+ *
- * let bigQuake;
- *
- * // Load the GeoJSON and preprocess it.
- * function preload() {
- * loadJSON(
- * 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
- * handleData,
- * handleError
- * );
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Draw a circle based on the earthquake's magnitude.
- * circle(50, 50, bigQuake.mag * 10);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(11);
- *
- * // Display the earthquake's location.
- * text(bigQuake.place, 5, 80, 100);
- *
- * describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
- * }
- *
- * // Find the biggest recent earthquake.
- * function handleData(data) {
- * let maxMag = 0;
- * // Iterate over the earthquakes array.
- * for (let quake of data.features) {
- * // Reassign bigQuake if a larger
- * // magnitude quake is found.
- * if (quake.properties.mag > maxMag) {
- * bigQuake = quake.properties;
- * }
- * }
- * }
- *
- * // Log any errors to the console.
- * function handleError(error) {
- * console.log('Oops!', error);
- * }
- *
- *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the JSON and create an object.
+ * function preload() {
+ * myData = loadJSON('assets/data.json');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the circle.
+ * fill(myData.color);
+ * noStroke();
+ *
+ * // Draw the circle.
+ * circle(myData.x, myData.y, myData.d);
+ *
+ * describe('A pink circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the JSON and create an object.
+ * function preload() {
+ * myData = loadJSON('assets/data.json');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.Color object and make it transparent.
+ * let c = color(myData.color);
+ * c.setAlpha(80);
+ *
+ * // Style the circles.
+ * fill(c);
+ * noStroke();
+ *
+ * // Iterate over the myData.bubbles array.
+ * for (let b of myData.bubbles) {
+ * // Draw a circle for each bubble.
+ * circle(b.x, b.y, b.d);
+ * }
+ *
+ * describe('Several pink bubbles floating in a blue sky.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the GeoJSON and create an object.
+ * function preload() {
+ * myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get data about the most recent earthquake.
+ * let quake = myData.features[0].properties;
+ *
+ * // Draw a circle based on the earthquake's magnitude.
+ * circle(50, 50, quake.mag * 10);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display the earthquake's location.
+ * text(quake.place, 5, 80, 100);
+ *
+ * describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let bigQuake;
+ *
+ * // Load the GeoJSON and preprocess it.
+ * function preload() {
+ * loadJSON(
+ * 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+ * handleData
+ * );
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a circle based on the earthquake's magnitude.
+ * circle(50, 50, bigQuake.mag * 10);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display the earthquake's location.
+ * text(bigQuake.place, 5, 80, 100);
+ *
+ * describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+ * }
+ *
+ * // Find the biggest recent earthquake.
+ * function handleData(data) {
+ * let maxMag = 0;
+ * // Iterate over the earthquakes array.
+ * for (let quake of data.features) {
+ * // Reassign bigQuake if a larger
+ * // magnitude quake is found.
+ * if (quake.properties.mag > maxMag) {
+ * bigQuake = quake.properties;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ */
+ fn.loadJSON = async function (...args) {
+ p5._validateParameters('loadJSON', args);
+ const path = args[0];
+ let callback;
+ let errorCallback;
+ let options;
+
+ const ret = {}; // object needed for preload
+ let t = 'json';
+
+ // check for explicit data type argument
+ for (let i = 1; i < args.length; i++) {
+ const arg = args[i];
+ if (typeof arg === 'string') {
+ if (arg === 'json') {
+ t = arg;
+ }
+ } else if (typeof arg === 'function') {
+ if (!callback) {
+ callback = arg;
+ } else {
+ errorCallback = arg;
+ }
}
}
- }
- await new Promise(resolve => this.httpDo(
- path,
- 'GET',
- options,
- t,
- resp => {
- for (const k in resp) {
- ret[k] = resp[k];
- }
- if (typeof callback !== 'undefined') {
- callback(resp);
- }
+ await new Promise(resolve => this.httpDo(
+ path,
+ 'GET',
+ options,
+ t,
+ resp => {
+ for (const k in resp) {
+ ret[k] = resp[k];
+ }
+ if (typeof callback !== 'undefined') {
+ callback(resp);
+ }
- resolve()
- },
- err => {
- // Error handling
- p5._friendlyFileLoadError(5, path);
+ resolve()
+ },
+ err => {
+ // Error handling
+ p5._friendlyFileLoadError(5, path);
- if (errorCallback) {
- errorCallback(err);
- } else {
- throw err;
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
}
- }
- ));
+ ));
- return ret;
-};
+ return ret;
+ };
-/**
- * Loads a text file to create an `Array`.
- *
- * The first parameter, `path`, is always a string with the path to the file.
- * Paths to local files should be relative, as in
- * `loadStrings('assets/data.txt')`. URLs such as
- * `'https://example.com/data.txt'` may be blocked due to browser security.
- *
- * The second parameter, `successCallback`, is optional. If a function is
- * passed, as in `loadStrings('assets/data.txt', handleData)`, then the
- * `handleData()` function will be called once the data loads. The array
- * created from the text data will be passed to `handleData()` as its only
- * argument.
- *
- * The third parameter, `failureCallback`, is also optional. If a function is
- * passed, as in `loadStrings('assets/data.txt', handleData, handleFailure)`,
- * then the `handleFailure()` function will be called if an error occurs while
- * loading. The `Error` object will be passed to `handleFailure()` as its only
- * argument.
- *
- * Note: Data can take time to load. Calling `loadStrings()` within
- * preload() ensures data loads before it's used in
- * setup() or draw().
- *
- * @method loadStrings
- * @param {String} path path of the text file to be loaded.
- * @param {Function} [successCallback] function to call once the data is
- * loaded. Will be passed the array.
- * @param {Function} [errorCallback] function to call if the data fails to
- * load. Will be passed an `Error` event
- * object.
- * @return {String[]} new array containing the loaded text.
- *
- * @example
- *
- *
+ * let bigQuake;
+ *
+ * // Load the GeoJSON and preprocess it.
+ * function preload() {
+ * loadJSON(
+ * 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+ * handleData,
+ * handleError
+ * );
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a circle based on the earthquake's magnitude.
+ * circle(50, 50, bigQuake.mag * 10);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display the earthquake's location.
+ * text(bigQuake.place, 5, 80, 100);
+ *
+ * describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+ * }
+ *
+ * // Find the biggest recent earthquake.
+ * function handleData(data) {
+ * let maxMag = 0;
+ * // Iterate over the earthquakes array.
+ * for (let quake of data.features) {
+ * // Reassign bigQuake if a larger
+ * // magnitude quake is found.
+ * if (quake.properties.mag > maxMag) {
+ * bigQuake = quake.properties;
+ * }
+ * }
+ * }
+ *
+ * // Log any errors to the console.
+ * function handleError(error) {
+ * console.log('Oops!', error);
+ * }
+ *
+ *
- *
- *
- *
- * let myData;
- *
- * // Load the text and create an array.
- * function preload() {
- * myData = loadStrings('assets/test.txt');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Select a random line from the text.
- * let phrase = random(myData);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display the text.
- * text(phrase, 10, 50, 90);
- *
- * describe(`The text "${phrase}" written in black on a gray background.`);
- * }
- *
- *
- *
- *
- *
- * let lastLine;
- *
- * // Load the text and preprocess it.
- * function preload() {
- * loadStrings('assets/test.txt', handleData);
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display the text.
- * text(lastLine, 10, 50, 90);
- *
- * describe('The text "I talk like an orange" written in black on a gray background.');
- * }
- *
- * // Select the last line from the text.
- * function handleData(data) {
- * lastLine = data[data.length - 1];
- * }
- *
- *
- *
- */
-p5.prototype.loadStrings = async function (...args) {
- p5._validateParameters('loadStrings', args);
-
- const ret = [];
- let callback, errorCallback;
-
- for (let i = 1; i < args.length; i++) {
- const arg = args[i];
- if (typeof arg === 'function') {
- if (typeof callback === 'undefined') {
- callback = arg;
- } else if (typeof errorCallback === 'undefined') {
- errorCallback = arg;
+ /**
+ * Loads a text file to create an `Array`.
+ *
+ * The first parameter, `path`, is always a string with the path to the file.
+ * Paths to local files should be relative, as in
+ * `loadStrings('assets/data.txt')`. URLs such as
+ * `'https://example.com/data.txt'` may be blocked due to browser security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, as in `loadStrings('assets/data.txt', handleData)`, then the
+ * `handleData()` function will be called once the data loads. The array
+ * created from the text data will be passed to `handleData()` as its only
+ * argument.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, as in `loadStrings('assets/data.txt', handleData, handleFailure)`,
+ * then the `handleFailure()` function will be called if an error occurs while
+ * loading. The `Error` object will be passed to `handleFailure()` as its only
+ * argument.
+ *
+ * Note: Data can take time to load. Calling `loadStrings()` within
+ * preload() ensures data loads before it's used in
+ * setup() or draw().
+ *
+ * @method loadStrings
+ * @param {String} path path of the text file to be loaded.
+ * @param {Function} [successCallback] function to call once the data is
+ * loaded. Will be passed the array.
+ * @param {Function} [errorCallback] function to call if the data fails to
+ * load. Will be passed an `Error` event
+ * object.
+ * @return {String[]} new array containing the loaded text.
+ *
+ * @example
+ *
+ *
- * let lastLine;
- *
- * // Load the text and preprocess it.
- * function preload() {
- * loadStrings('assets/test.txt', handleData, handleError);
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display the text.
- * text(lastLine, 10, 50, 90);
- *
- * describe('The text "I talk like an orange" written in black on a gray background.');
- * }
- *
- * // Select the last line from the text.
- * function handleData(data) {
- * lastLine = data[data.length - 1];
- * }
- *
- * // Log any errors to the console.
- * function handleError(error) {
- * console.error('Oops!', error);
- * }
- *
- *
+ *
+ *
+ *
+ * let myData;
+ *
+ * // Load the text and create an array.
+ * function preload() {
+ * myData = loadStrings('assets/test.txt');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Select a random line from the text.
+ * let phrase = random(myData);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display the text.
+ * text(phrase, 10, 50, 90);
+ *
+ * describe(`The text "${phrase}" written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let lastLine;
+ *
+ * // Load the text and preprocess it.
+ * function preload() {
+ * loadStrings('assets/test.txt', handleData);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display the text.
+ * text(lastLine, 10, 50, 90);
+ *
+ * describe('The text "I talk like an orange" written in black on a gray background.');
+ * }
+ *
+ * // Select the last line from the text.
+ * function handleData(data) {
+ * lastLine = data[data.length - 1];
+ * }
+ *
+ *
+ *
+ */
+ fn.loadStrings = async function (...args) {
+ p5._validateParameters('loadStrings', args);
+
+ const ret = [];
+ let callback, errorCallback;
+
+ for (let i = 1; i < args.length; i++) {
+ const arg = args[i];
+ if (typeof arg === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arg;
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arg;
+ }
}
}
- }
- await new Promise(resolve => p5.prototype.httpDo.call(
- this,
- args[0],
- 'GET',
- 'text',
- data => {
- // split lines handling mac/windows/linux endings
- const lines = data
- .replace(/\r\n/g, '\r')
- .replace(/\n/g, '\r')
- .split(/\r/);
-
- // safe insert approach which will not blow up stack when inserting
- // >100k lines, but still be faster than iterating line-by-line. based on
- // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Examples
- const QUANTUM = 32768;
- for (let i = 0, len = lines.length; i < len; i += QUANTUM) {
- Array.prototype.push.apply(
- ret,
- lines.slice(i, Math.min(i + QUANTUM, len))
- );
- }
+ await new Promise(resolve => fn.httpDo.call(
+ this,
+ args[0],
+ 'GET',
+ 'text',
+ data => {
+ // split lines handling mac/windows/linux endings
+ const lines = data
+ .replace(/\r\n/g, '\r')
+ .replace(/\n/g, '\r')
+ .split(/\r/);
+
+ // safe insert approach which will not blow up stack when inserting
+ // >100k lines, but still be faster than iterating line-by-line. based on
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Examples
+ const QUANTUM = 32768;
+ for (let i = 0, len = lines.length; i < len; i += QUANTUM) {
+ Array.prototype.push.apply(
+ ret,
+ lines.slice(i, Math.min(i + QUANTUM, len))
+ );
+ }
+
+ if (typeof callback !== 'undefined') {
+ callback(ret);
+ }
- if (typeof callback !== 'undefined') {
- callback(ret);
+ resolve()
+ },
+ function (err) {
+ // Error handling
+ p5._friendlyFileLoadError(3, arguments[0]);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
+ }
}
+ ));
- resolve()
- },
- function (err) {
- // Error handling
- p5._friendlyFileLoadError(3, arguments[0]);
+ return ret;
+ };
- if (errorCallback) {
- errorCallback(err);
- } else {
- throw err;
+ /**
+ * Reads the contents of a file or URL and creates a p5.Table object with
+ * its values. If a file is specified, it must be located in the sketch's
+ * "data" folder. The filename parameter can also be a URL to a file found
+ * online. By default, the file is assumed to be comma-separated (in CSV
+ * format). Table only looks for a header row if the 'header' option is
+ * included.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed. Calling loadTable() inside preload()
+ * guarantees to complete the operation before setup() and draw() are called.
+ * Outside of preload(), you may supply a callback function to handle the
+ * object:
+ *
+ * All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
+ * @method loadTable
+ * @param {String} filename name of the file or URL to load
+ * @param {String} [extension] parse the table by comma-separated values "csv", semicolon-separated
+ * values "ssv", or tab-separated values "tsv"
+ * @param {String} [header] "header" to indicate table has header row
+ * @param {Function} [callback] function to be executed after
+ * loadTable() completes. On success, the
+ * Table object is passed in as the
+ * first argument.
+ * @param {Function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Object} Table object containing data
+ *
+ * @example
+ *
+ * let lastLine;
+ *
+ * // Load the text and preprocess it.
+ * function preload() {
+ * loadStrings('assets/test.txt', handleData, handleError);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display the text.
+ * text(lastLine, 10, 50, 90);
+ *
+ * describe('The text "I talk like an orange" written in black on a gray background.');
+ * }
+ *
+ * // Select the last line from the text.
+ * function handleData(data) {
+ * lastLine = data[data.length - 1];
+ * }
+ *
+ * // Log any errors to the console.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ *
+ */
+ fn.loadTable = async function (path) {
+ // p5._validateParameters('loadTable', arguments);
+ let callback;
+ let errorCallback;
+ const options = [];
+ let header = false;
+ const ext = path.substring(path.lastIndexOf('.') + 1, path.length);
+
+ let sep;
+ if (ext === 'csv') {
+ sep = ',';
+ } else if (ext === 'ssv') {
+ sep = ';';
+ } else if (ext === 'tsv') {
+ sep = '\t';
+ }
+
+ for (let i = 1; i < arguments.length; i++) {
+ if (typeof arguments[i] === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arguments[i];
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arguments[i];
+ }
+ } else if (typeof arguments[i] === 'string') {
+ options.push(arguments[i]);
+ if (arguments[i] === 'header') {
+ header = true;
+ }
+ if (arguments[i] === 'csv') {
+ sep = ',';
+ } else if (arguments[i] === 'ssv') {
+ sep = ';';
+ } else if (arguments[i] === 'tsv') {
+ sep = '\t';
+ }
}
}
- ));
- return ret;
-};
+ const t = new p5.Table();
+
+ await new Promise(resolve => this.httpDo(
+ path,
+ 'GET',
+ 'table',
+ resp => {
+ const state = {};
+
+ // define constants
+ const PRE_TOKEN = 0,
+ MID_TOKEN = 1,
+ POST_TOKEN = 2,
+ POST_RECORD = 4;
+
+ const QUOTE = '"',
+ CR = '\r',
+ LF = '\n';
+
+ const records = [];
+ let offset = 0;
+ let currentRecord = null;
+ let currentChar;
+
+ const tokenBegin = () => {
+ state.currentState = PRE_TOKEN;
+ state.token = '';
+ };
+
+ const tokenEnd = () => {
+ currentRecord.push(state.token);
+ tokenBegin();
+ };
+
+ const recordBegin = () => {
+ state.escaped = false;
+ currentRecord = [];
+ tokenBegin();
+ };
+
+ const recordEnd = () => {
+ state.currentState = POST_RECORD;
+ records.push(currentRecord);
+ currentRecord = null;
+ };
+
+ for (; ;) {
+ currentChar = resp[offset++];
+
+ // EOF
+ if (currentChar == null) {
+ if (state.escaped) {
+ throw new Error('Unclosed quote in file.');
+ }
+ if (currentRecord) {
+ tokenEnd();
+ recordEnd();
+ break;
+ }
+ }
+ if (currentRecord === null) {
+ recordBegin();
+ }
-/**
- * Reads the contents of a file or URL and creates a p5.Table object with
- * its values. If a file is specified, it must be located in the sketch's
- * "data" folder. The filename parameter can also be a URL to a file found
- * online. By default, the file is assumed to be comma-separated (in CSV
- * format). Table only looks for a header row if the 'header' option is
- * included.
- *
- * This method is asynchronous, meaning it may not finish before the next
- * line in your sketch is executed. Calling loadTable() inside preload()
- * guarantees to complete the operation before setup() and draw() are called.
- * Outside of preload(), you may supply a callback function to handle the
- * object:
- *
- * All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
- * @method loadTable
- * @param {String} filename name of the file or URL to load
- * @param {String} [extension] parse the table by comma-separated values "csv", semicolon-separated
- * values "ssv", or tab-separated values "tsv"
- * @param {String} [header] "header" to indicate table has header row
- * @param {Function} [callback] function to be executed after
- * loadTable() completes. On success, the
- * Table object is passed in as the
- * first argument.
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @return {Object} Table object containing data
- *
- * @example
- *
+ * // Given the following CSV file called "mammals.csv"
+ * // located in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * //the file can be remote
+ * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * // "csv", "header");
+ * }
+ *
+ * function setup() {
+ * //count the columns
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ *
+ * print(table.getColumn('name'));
+ * //["Goat", "Leopard", "Zebra"]
+ *
+ * //cycle through the table
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(table.getString(r, c));
+ * }
+ * describe(`randomly generated text from a file,
+ * for example "i smell like butter"`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.loadTable = async function (path) {
- // p5._validateParameters('loadTable', arguments);
- let callback;
- let errorCallback;
- const options = [];
- let header = false;
- const ext = path.substring(path.lastIndexOf('.') + 1, path.length);
-
- let sep;
- if (ext === 'csv') {
- sep = ',';
- } else if (ext === 'ssv') {
- sep = ';';
- } else if (ext === 'tsv') {
- sep = '\t';
- }
+ // Handle opening quote
+ if (state.currentState === PRE_TOKEN) {
+ if (currentChar === QUOTE) {
+ state.escaped = true;
+ state.currentState = MID_TOKEN;
+ continue;
+ }
+ state.currentState = MID_TOKEN;
+ }
+
+ // mid-token and escaped, look for sequences and end quote
+ if (state.currentState === MID_TOKEN && state.escaped) {
+ if (currentChar === QUOTE) {
+ if (resp[offset] === QUOTE) {
+ state.token += QUOTE;
+ offset++;
+ } else {
+ state.escaped = false;
+ state.currentState = POST_TOKEN;
+ }
+ } else if (currentChar === CR) {
+ continue;
+ } else {
+ state.token += currentChar;
+ }
+ continue;
+ }
+
+ // fall-through: mid-token or post-token, not escaped
+ if (currentChar === CR) {
+ if (resp[offset] === LF) {
+ offset++;
+ }
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === LF) {
+ tokenEnd();
+ recordEnd();
+ } else if (currentChar === sep) {
+ tokenEnd();
+ } else if (state.currentState === MID_TOKEN) {
+ state.token += currentChar;
+ }
+ }
+
+ // set up column names
+ if (header) {
+ t.columns = records.shift();
+ } else {
+ for (let i = 0; i < records[0].length; i++) {
+ t.columns[i] = 'null';
+ }
+ }
+ let row;
+ for (let i = 0; i < records.length; i++) {
+ //Handles row of 'undefined' at end of some CSVs
+ if (records[i].length === 1) {
+ if (records[i][0] === 'undefined' || records[i][0] === '') {
+ continue;
+ }
+ }
+ row = new p5.TableRow();
+ row.arr = records[i];
+ row.obj = makeObject(records[i], t.columns);
+ t.addRow(row);
+ }
+ if (typeof callback === 'function') {
+ callback(t);
+ }
- for (let i = 1; i < arguments.length; i++) {
- if (typeof arguments[i] === 'function') {
- if (typeof callback === 'undefined') {
- callback = arguments[i];
- } else if (typeof errorCallback === 'undefined') {
- errorCallback = arguments[i];
+ resolve()
+ },
+ err => {
+ // Error handling
+ p5._friendlyFileLoadError(2, path);
+
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ console.error(err);
+ }
}
- } else if (typeof arguments[i] === 'string') {
- options.push(arguments[i]);
- if (arguments[i] === 'header') {
- header = true;
+ ));
+
+ return t;
+ };
+
+ // helper function to turn a row into a JSON object
+ function makeObject(row, headers) {
+ headers = headers || [];
+ if (typeof headers === 'undefined') {
+ for (let j = 0; j < row.length; j++) {
+ headers[j.toString()] = j;
}
- if (arguments[i] === 'csv') {
- sep = ',';
- } else if (arguments[i] === 'ssv') {
- sep = ';';
- } else if (arguments[i] === 'tsv') {
- sep = '\t';
+ }
+ return Object.fromEntries(
+ headers
+ .map((key, i) => [key, row[i]])
+ );
+ }
+
+ /**
+ * Loads an XML file to create a p5.XML object.
+ *
+ * Extensible Markup Language
+ * (XML)
+ * is a standard format for sending data between applications. Like HTML, the
+ * XML format is based on tags and attributes, as in
+ * `<time units="s">1234</time>`.
+ *
+ * The first parameter, `path`, is always a string with the path to the file.
+ * Paths to local files should be relative, as in
+ * `loadXML('assets/data.xml')`. URLs such as `'https://example.com/data.xml'`
+ * may be blocked due to browser security.
+ *
+ * The second parameter, `successCallback`, is optional. If a function is
+ * passed, as in `loadXML('assets/data.xml', handleData)`, then the
+ * `handleData()` function will be called once the data loads. The
+ * p5.XML object created from the data will be passed
+ * to `handleData()` as its only argument.
+ *
+ * The third parameter, `failureCallback`, is also optional. If a function is
+ * passed, as in `loadXML('assets/data.xml', handleData, handleFailure)`, then
+ * the `handleFailure()` function will be called if an error occurs while
+ * loading. The `Error` object will be passed to `handleFailure()` as its only
+ * argument.
+ *
+ * Note: Data can take time to load. Calling `loadXML()` within
+ * preload() ensures data loads before it's used in
+ * setup() or draw().
+ *
+ * @method loadXML
+ * @param {String} path path of the XML file to be loaded.
+ * @param {Function} [successCallback] function to call once the data is
+ * loaded. Will be passed the
+ * p5.XML object.
+ * @param {Function} [errorCallback] function to call if the data fails to
+ * load. Will be passed an `Error` event
+ * object.
+ * @return {p5.XML} XML data loaded into a p5.XML
+ * object.
+ *
+ * @example
+ *
- * // Given the following CSV file called "mammals.csv"
- * // located in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * //the file can be remote
- * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
- * // "csv", "header");
- * }
- *
- * function setup() {
- * //count the columns
- * print(table.getRowCount() + ' total rows in table');
- * print(table.getColumnCount() + ' total columns in table');
- *
- * print(table.getColumn('name'));
- * //["Goat", "Leopard", "Zebra"]
- *
- * //cycle through the table
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++) {
- * print(table.getString(r, c));
- * }
- * describe(`randomly generated text from a file,
- * for example "i smell like butter"`);
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal tags.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the mammals array.
+ * for (let i = 0; i < mammals.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the mammal's common name.
+ * let name = mammals[i].getContent();
+ *
+ * // Display the mammal's name.
+ * text(name, 20, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * let lastMammal;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * loadXML('assets/animals.xml', handleData);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display the content of the last mammal element.
+ * text(lastMammal, 50, 50);
+ *
+ * describe('The word "Zebra" written in black on a gray background.');
+ * }
+ *
+ * // Get the content of the last mammal element.
+ * function handleData(data) {
+ * // Get an array with all mammal elements.
+ * let mammals = data.getChildren('mammal');
+ *
+ * // Get the content of the last mammal.
+ * lastMammal = mammals[mammals.length - 1].getContent();
+ * }
+ *
+ *
+ *
+ */
+ fn.loadXML = async function (...args) {
+ const ret = new p5.XML();
+ let callback, errorCallback;
+
+ for (let i = 1; i < args.length; i++) {
+ const arg = args[i];
+ if (typeof arg === 'function') {
+ if (typeof callback === 'undefined') {
+ callback = arg;
+ } else if (typeof errorCallback === 'undefined') {
+ errorCallback = arg;
+ }
}
}
- }
- const t = new p5.Table();
-
- await new Promise(resolve => this.httpDo(
- path,
- 'GET',
- 'table',
- resp => {
- const state = {};
-
- // define constants
- const PRE_TOKEN = 0,
- MID_TOKEN = 1,
- POST_TOKEN = 2,
- POST_RECORD = 4;
-
- const QUOTE = '"',
- CR = '\r',
- LF = '\n';
-
- const records = [];
- let offset = 0;
- let currentRecord = null;
- let currentChar;
-
- const tokenBegin = () => {
- state.currentState = PRE_TOKEN;
- state.token = '';
- };
-
- const tokenEnd = () => {
- currentRecord.push(state.token);
- tokenBegin();
- };
-
- const recordBegin = () => {
- state.escaped = false;
- currentRecord = [];
- tokenBegin();
- };
-
- const recordEnd = () => {
- state.currentState = POST_RECORD;
- records.push(currentRecord);
- currentRecord = null;
- };
-
- for (; ;) {
- currentChar = resp[offset++];
-
- // EOF
- if (currentChar == null) {
- if (state.escaped) {
- throw new Error('Unclosed quote in file.');
- }
- if (currentRecord) {
- tokenEnd();
- recordEnd();
- break;
- }
- }
- if (currentRecord === null) {
- recordBegin();
+ await new Promise(resolve => this.httpDo(
+ args[0],
+ 'GET',
+ 'xml',
+ xml => {
+ for (const key in xml) {
+ ret[key] = xml[key];
}
-
- // Handle opening quote
- if (state.currentState === PRE_TOKEN) {
- if (currentChar === QUOTE) {
- state.escaped = true;
- state.currentState = MID_TOKEN;
- continue;
- }
- state.currentState = MID_TOKEN;
+ if (typeof callback !== 'undefined') {
+ callback(ret);
}
- // mid-token and escaped, look for sequences and end quote
- if (state.currentState === MID_TOKEN && state.escaped) {
- if (currentChar === QUOTE) {
- if (resp[offset] === QUOTE) {
- state.token += QUOTE;
- offset++;
- } else {
- state.escaped = false;
- state.currentState = POST_TOKEN;
- }
- } else if (currentChar === CR) {
- continue;
- } else {
- state.token += currentChar;
- }
- continue;
- }
+ resolve()
+ },
+ function (err) {
+ // Error handling
+ p5._friendlyFileLoadError(1, arguments[0]);
- // fall-through: mid-token or post-token, not escaped
- if (currentChar === CR) {
- if (resp[offset] === LF) {
- offset++;
- }
- tokenEnd();
- recordEnd();
- } else if (currentChar === LF) {
- tokenEnd();
- recordEnd();
- } else if (currentChar === sep) {
- tokenEnd();
- } else if (state.currentState === MID_TOKEN) {
- state.token += currentChar;
+ if (errorCallback) {
+ errorCallback(err);
+ } else {
+ throw err;
}
}
+ ));
- // set up column names
- if (header) {
- t.columns = records.shift();
- } else {
- for (let i = 0; i < records[0].length; i++) {
- t.columns[i] = 'null';
- }
- }
- let row;
- for (let i = 0; i < records.length; i++) {
- //Handles row of 'undefined' at end of some CSVs
- if (records[i].length === 1) {
- if (records[i][0] === 'undefined' || records[i][0] === '') {
- continue;
- }
+ return ret;
+ };
+
+ /**
+ * This method is suitable for fetching files up to size of 64MB.
+ * @method loadBytes
+ * @param {String} file name of the file or URL to load
+ * @param {Function} [callback] function to be executed after loadBytes()
+ * completes
+ * @param {Function} [errorCallback] function to be executed if there
+ * is an error
+ * @returns {Object} an object whose 'bytes' property will be the loaded buffer
+ *
+ * @example
+ *
+ * let lastMammal;
+ *
+ * // Load the XML and preprocess it.
+ * function preload() {
+ * loadXML('assets/animals.xml', handleData, handleError);
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display the content of the last mammal element.
+ * text(lastMammal, 50, 50);
+ *
+ * describe('The word "Zebra" written in black on a gray background.');
+ * }
+ *
+ * // Get the content of the last mammal element.
+ * function handleData(data) {
+ * // Get an array with all mammal elements.
+ * let mammals = data.getChildren('mammal');
+ *
+ * // Get the content of the last mammal.
+ * lastMammal = mammals[mammals.length - 1].getContent();
+ * }
+ *
+ * // Log any errors to the console.
+ * function handleError(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ *
+ * let data;
+ *
+ * function preload() {
+ * data = loadBytes('assets/mammals.xml');
+ * }
+ *
+ * function setup() {
+ * for (let i = 0; i < 5; i++) {
+ * console.log(data.bytes[i].toString(16));
+ * }
+ * describe('no image displayed');
+ * }
+ * httpDo(path, 'GET'). The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ *
+ * @method httpGet
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {Function} [callback] function to be executed after
+ * httpGet() completes, data is passed in
+ * as first argument
+ * @param {Function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ * @example
+ *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ * let earthquakes;
+ * function preload() {
+ * // Get the most recent earthquake in the database
+ * let url =
+ 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ * 'format=geojson&limit=1&orderby=time';
+ * httpGet(url, 'json', function(response) {
+ * // when the HTTP request completes, populate the variable that holds the
+ * // earthquake data used in the visualization.
+ * earthquakes = response;
+ * });
+ * }
+ *
+ * function draw() {
+ * if (!earthquakes) {
+ * // Wait until the earthquake data has loaded before drawing.
+ * return;
+ * }
+ * background(200);
+ * // Get the magnitude and name of the earthquake out of the loaded JSON
+ * let earthquakeMag = earthquakes.features[0].properties.mag;
+ * let earthquakeName = earthquakes.features[0].properties.place;
+ * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+ * textAlign(CENTER);
+ * text(earthquakeName, 0, height - 30, width, 30);
+ * noLoop();
+ * }
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get an array with all mammal tags.
- * let mammals = myXML.getChildren('mammal');
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the mammals array.
- * for (let i = 0; i < mammals.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Get the mammal's common name.
- * let name = mammals[i].getContent();
- *
- * // Display the mammal's name.
- * text(name, 20, y);
- * }
- *
- * describe(
- * 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
- *
- *
- *
- * let lastMammal;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * loadXML('assets/animals.xml', handleData);
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(16);
- *
- * // Display the content of the last mammal element.
- * text(lastMammal, 50, 50);
- *
- * describe('The word "Zebra" written in black on a gray background.');
- * }
- *
- * // Get the content of the last mammal element.
- * function handleData(data) {
- * // Get an array with all mammal elements.
- * let mammals = data.getChildren('mammal');
- *
- * // Get the content of the last mammal.
- * lastMammal = mammals[mammals.length - 1].getContent();
- * }
- *
- *
- *
- */
-p5.prototype.loadXML = async function (...args) {
- const ret = new p5.XML();
- let callback, errorCallback;
-
- for (let i = 1; i < args.length; i++) {
- const arg = args[i];
- if (typeof arg === 'function') {
- if (typeof callback === 'undefined') {
- callback = arg;
- } else if (typeof errorCallback === 'undefined') {
- errorCallback = arg;
- }
- }
- }
+ args.splice(1, 0, 'GET');
+ return fn.httpDo.apply(this, args);
+ };
- await new Promise(resolve => this.httpDo(
- args[0],
- 'GET',
- 'xml',
- xml => {
- for (const key in xml) {
- ret[key] = xml[key];
- }
- if (typeof callback !== 'undefined') {
- callback(ret);
- }
+ /**
+ * Method for executing an HTTP POST request. If data type is not specified,
+ * p5 will try to guess based on the URL, defaulting to text. This is equivalent to
+ * calling
- * let lastMammal;
- *
- * // Load the XML and preprocess it.
- * function preload() {
- * loadXML('assets/animals.xml', handleData, handleError);
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(16);
- *
- * // Display the content of the last mammal element.
- * text(lastMammal, 50, 50);
- *
- * describe('The word "Zebra" written in black on a gray background.');
- * }
- *
- * // Get the content of the last mammal element.
- * function handleData(data) {
- * // Get an array with all mammal elements.
- * let mammals = data.getChildren('mammal');
- *
- * // Get the content of the last mammal.
- * lastMammal = mammals[mammals.length - 1].getContent();
- * }
- *
- * // Log any errors to the console.
- * function handleError(error) {
- * console.error('Oops!', error);
- * }
- *
- * httpDo(path, 'POST').
+ *
+ * @method httpPost
+ * @param {String} path name of the file or url to load
+ * @param {String} [datatype] "json", "jsonp", "xml", or "text".
+ * If omitted, httpPost() will guess.
+ * @param {Object|Boolean} [data] param data passed sent with request
+ * @param {Function} [callback] function to be executed after
+ * httpPost() completes, data is passed in
+ * as first argument
+ * @param {Function} [errorCallback] function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @return {Promise} A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ * // Examples use jsonplaceholder.typicode.com for a Mock Data API
+ *
+ * let url = 'https://jsonplaceholder.typicode.com/posts';
+ * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * }
+ *
+ * function mousePressed() {
+ * httpPost(url, 'json', postData, function(result) {
+ * strokeWeight(2);
+ * text(result.body, mouseX, mouseY);
+ * });
+ * }
+ *
+ *
+ * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+ * let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * }
+ *
+ * function mousePressed() {
+ * httpPost(
+ * url,
+ * 'json',
+ * postData,
+ * function(result) {
+ * // ... won't be called
+ * },
+ * function(error) {
+ * strokeWeight(2);
+ * text(error.toString(), mouseX, mouseY);
+ * }
+ * );
+ * }
+ * + * For more advanced use, you may also pass in the path as the first argument + * and a object as the second argument, the signature follows the one specified + * in the Fetch API specification. + * This method is suitable for fetching files up to size of 64MB when "GET" is used. + * + * @method httpDo + * @param {String} path name of the file or url to load + * @param {String} [method] either "GET", "POST", or "PUT", + * defaults to "GET" + * @param {String} [datatype] "json", "jsonp", "xml", or "text" + * @param {Object} [data] param data passed sent with request + * @param {Function} [callback] function to be executed after + * httpGet() completes, data is passed in + * as first argument + * @param {Function} [errorCallback] function to be executed if + * there is an error, response is passed + * in as first argument + * @return {Promise} A promise that resolves with the data when the operation + * completes successfully or rejects with the error after + * one occurs. + * + * @example + *
+ *
+ */
+ /**
+ * @method httpDo
+ * @param {String} path
+ * @param {Object} options Request object options as documented in the
+ * "fetch" API
+ * reference
+ * @param {Function} [callback]
+ * @param {Function} [errorCallback]
+ * @return {Promise}
+ */
+ fn.httpDo = function (...args) {
+ let type;
+ let callback;
+ let errorCallback;
+ let request;
+ let promise;
+ let cbCount = 0;
+ let contentType = 'text/plain';
+ // Trim the callbacks off the end to get an idea of how many arguments are passed
+ for (let i = args.length - 1; i > 0; i--) {
+ if (typeof args[i] === 'function') {
+ cbCount++;
} else {
- throw err;
+ break;
}
}
- ));
-
- return ret;
-};
-
-/**
- * This method is suitable for fetching files up to size of 64MB.
- * @method loadBytes
- * @param {String} file name of the file or URL to load
- * @param {Function} [callback] function to be executed after loadBytes()
- * completes
- * @param {Function} [errorCallback] function to be executed if there
- * is an error
- * @returns {Object} an object whose 'bytes' property will be the loaded buffer
- *
- * @example
- *
+ * // Examples use USGS Earthquake API:
+ * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+ *
+ * // displays an animation of all USGS earthquakes
+ * let earthquakes;
+ * let eqFeatureIndex = 0;
+ *
+ * function preload() {
+ * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+ * httpDo(
+ * url,
+ * {
+ * method: 'GET',
+ * // Other Request options, like special headers for apis
+ * headers: { authorization: 'Bearer secretKey' }
+ * },
+ * function(res) {
+ * earthquakes = res;
+ * }
+ * );
+ * }
+ *
+ * function draw() {
+ * // wait until the data is loaded
+ * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+ * return;
+ * }
+ * clear();
+ *
+ * let feature = earthquakes.features[eqFeatureIndex];
+ * let mag = feature.properties.mag;
+ * let rad = mag / 11 * ((width + height) / 2);
+ * fill(255, 0, 0, 100);
+ * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+ *
+ * if (eqFeatureIndex >= earthquakes.features.length) {
+ * eqFeatureIndex = 0;
+ * } else {
+ * eqFeatureIndex += 1;
+ * }
+ * }
+ *
+ *
- * let data;
- *
- * function preload() {
- * data = loadBytes('assets/mammals.xml');
- * }
- *
- * function setup() {
- * for (let i = 0; i < 5; i++) {
- * console.log(data.bytes[i].toString(16));
- * }
- * describe('no image displayed');
- * }
- * httpDo(path, 'GET'). The 'binary' datatype will return
- * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
- * which can be used to initialize typed arrays (such as Uint8Array).
- *
- * @method httpGet
- * @param {String} path name of the file or url to load
- * @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
- * "xml", or "text"
- * @param {Object|Boolean} [data] param data passed sent with request
- * @param {Function} [callback] function to be executed after
- * httpGet() completes, data is passed in
- * as first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @return {Promise} A promise that resolves with the data when the operation
- * completes successfully or rejects with the error after
- * one occurs.
- * @example
- *
- * // Examples use USGS Earthquake API:
- * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
- * let earthquakes;
- * function preload() {
- * // Get the most recent earthquake in the database
- * let url =
- 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
- * 'format=geojson&limit=1&orderby=time';
- * httpGet(url, 'json', function(response) {
- * // when the HTTP request completes, populate the variable that holds the
- * // earthquake data used in the visualization.
- * earthquakes = response;
- * });
- * }
- *
- * function draw() {
- * if (!earthquakes) {
- * // Wait until the earthquake data has loaded before drawing.
- * return;
- * }
- * background(200);
- * // Get the magnitude and name of the earthquake out of the loaded JSON
- * let earthquakeMag = earthquakes.features[0].properties.mag;
- * let earthquakeName = earthquakes.features[0].properties.place;
- * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
- * textAlign(CENTER);
- * text(earthquakeName, 0, height - 30, width, 30);
- * noLoop();
- * }
- * httpDo(path, 'POST').
- *
- * @method httpPost
- * @param {String} path name of the file or url to load
- * @param {String} [datatype] "json", "jsonp", "xml", or "text".
- * If omitted, httpPost() will guess.
- * @param {Object|Boolean} [data] param data passed sent with request
- * @param {Function} [callback] function to be executed after
- * httpPost() completes, data is passed in
- * as first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @return {Promise} A promise that resolves with the data when the operation
- * completes successfully or rejects with the error after
- * one occurs.
- *
- * @example
- *
- *
- *
- *
- * // Examples use jsonplaceholder.typicode.com for a Mock Data API
- *
- * let url = 'https://jsonplaceholder.typicode.com/posts';
- * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };
- *
- * function setup() {
- * createCanvas(100, 100);
- * background(200);
- * }
- *
- * function mousePressed() {
- * httpPost(url, 'json', postData, function(result) {
- * strokeWeight(2);
- * text(result.body, mouseX, mouseY);
- * });
- * }
- *
- *
- * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
- * let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
- *
- * function setup() {
- * createCanvas(100, 100);
- * background(200);
- * }
- *
- * function mousePressed() {
- * httpPost(
- * url,
- * 'json',
- * postData,
- * function(result) {
- * // ... won't be called
- * },
- * function(error) {
- * strokeWeight(2);
- * text(error.toString(), mouseX, mouseY);
- * }
- * );
- * }
- * - * For more advanced use, you may also pass in the path as the first argument - * and a object as the second argument, the signature follows the one specified - * in the Fetch API specification. - * This method is suitable for fetching files up to size of 64MB when "GET" is used. - * - * @method httpDo - * @param {String} path name of the file or url to load - * @param {String} [method] either "GET", "POST", or "PUT", - * defaults to "GET" - * @param {String} [datatype] "json", "jsonp", "xml", or "text" - * @param {Object} [data] param data passed sent with request - * @param {Function} [callback] function to be executed after - * httpGet() completes, data is passed in - * as first argument - * @param {Function} [errorCallback] function to be executed if - * there is an error, response is passed - * in as first argument - * @return {Promise} A promise that resolves with the data when the operation - * completes successfully or rejects with the error after - * one occurs. - * - * @example - *
- *
- */
-/**
- * @method httpDo
- * @param {String} path
- * @param {Object} options Request object options as documented in the
- * "fetch" API
- * reference
- * @param {Function} [callback]
- * @param {Function} [errorCallback]
- * @return {Promise}
- */
-p5.prototype.httpDo = function (...args) {
- let type;
- let callback;
- let errorCallback;
- let request;
- let promise;
- let cbCount = 0;
- let contentType = 'text/plain';
- // Trim the callbacks off the end to get an idea of how many arguments are passed
- for (let i = args.length - 1; i > 0; i--) {
- if (typeof args[i] === 'function') {
- cbCount++;
- } else {
- break;
- }
- }
- // The number of arguments minus callbacks
- const argsCount = args.length - cbCount;
- const path = args[0];
- if (
- argsCount === 2 &&
- typeof path === 'string' &&
- typeof args[1] === 'object'
- ) {
- // Intended for more advanced use, pass in Request parameters directly
- request = new Request(path, args[1]);
- callback = args[2];
- errorCallback = args[3];
- } else {
- // Provided with arguments
- let method = 'GET';
- let data;
-
- for (let j = 1; j < args.length; j++) {
- const a = args[j];
- if (typeof a === 'string') {
- if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
- method = a;
- } else if (
- a === 'json' ||
- a === 'binary' ||
- a === 'arrayBuffer' ||
- a === 'xml' ||
- a === 'text' ||
- a === 'table'
- ) {
- type = a;
- } else {
- data = a;
- }
- } else if (typeof a === 'number') {
- data = a.toString();
- } else if (typeof a === 'object') {
- if (a instanceof p5.XML) {
- data = a.serialize();
- contentType = 'application/xml';
- } else {
- data = JSON.stringify(a);
- contentType = 'application/json';
- }
- } else if (typeof a === 'function') {
- if (!callback) {
- callback = a;
- } else {
- errorCallback = a;
+ promise = fetch(request);
+ promise = promise.then(res => {
+ if (!res.ok) {
+ const err = new Error(res.body);
+ err.status = res.status;
+ err.ok = false;
+ throw err;
+ } else {
+ switch (type) {
+ case 'json':
+ return res.json();
+ case 'binary':
+ return res.blob();
+ case 'arrayBuffer':
+ return res.arrayBuffer();
+ case 'xml':
+ return res.text().then(text => {
+ const parser = new DOMParser();
+ const xml = parser.parseFromString(text, 'text/xml');
+ return new p5.XML(xml.documentElement);
+ });
+ default:
+ return res.text();
}
}
- }
-
- let headers =
- method === 'GET'
- ? new Headers()
- : new Headers({ 'Content-Type': contentType });
-
- request = new Request(path, {
- method,
- mode: 'cors',
- body: data,
- headers
});
- }
- // do some sort of smart type checking
- if (!type) {
- if (path.includes('json')) {
- type = 'json';
- } else if (path.includes('xml')) {
- type = 'xml';
- } else {
- type = 'text';
- }
- }
-
- promise = fetch(request);
- promise = promise.then(res => {
- if (!res.ok) {
- const err = new Error(res.body);
- err.status = res.status;
- err.ok = false;
- throw err;
- } else {
- switch (type) {
- case 'json':
- return res.json();
- case 'binary':
- return res.blob();
- case 'arrayBuffer':
- return res.arrayBuffer();
- case 'xml':
- return res.text().then(text => {
- const parser = new DOMParser();
- const xml = parser.parseFromString(text, 'text/xml');
- return new p5.XML(xml.documentElement);
- });
- default:
- return res.text();
- }
- }
- });
- promise.then(callback || (() => { }));
- promise.catch(errorCallback || console.error);
- return promise;
-};
+ promise.then(callback || (() => { }));
+ promise.catch(errorCallback || console.error);
+ return promise;
+ };
-/**
- * @module IO
- * @submodule Output
- * @for p5
- */
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
-window.URL = window.URL || window.webkitURL;
+ window.URL = window.URL || window.webkitURL;
-// private array of p5.PrintWriter objects
-p5.prototype._pWriters = [];
+ // private array of p5.PrintWriter objects
+ fn._pWriters = [];
-/**
- * Creates a new p5.PrintWriter object.
- *
- * p5.PrintWriter objects provide a way to
- * save a sequence of text data, called the *print stream*, to the user's
- * computer. They're low-level objects that enable precise control of text
- * output. Functions such as
- * saveStrings() and
- * saveJSON() are easier to use for simple file
- * saving.
- *
- * The first parameter, `filename`, is the name of the file to be written. If
- * a string is passed, as in `createWriter('words.txt')`, a new
- * p5.PrintWriter object will be created that
- * writes to a file named `words.txt`.
- *
- * The second parameter, `extension`, is optional. If a string is passed, as
- * in `createWriter('words', 'csv')`, the first parameter will be interpreted
- * as the file name and the second parameter as the extension.
- *
- * @method createWriter
- * @param {String} name name of the file to create.
- * @param {String} [extension] format to use for the file.
- * @return {p5.PrintWriter} stream for writing data.
- *
- * @example
- *
- * // Examples use USGS Earthquake API:
- * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
- *
- * // displays an animation of all USGS earthquakes
- * let earthquakes;
- * let eqFeatureIndex = 0;
- *
- * function preload() {
- * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
- * httpDo(
- * url,
- * {
- * method: 'GET',
- * // Other Request options, like special headers for apis
- * headers: { authorization: 'Bearer secretKey' }
- * },
- * function(res) {
- * earthquakes = res;
- * }
- * );
- * }
- *
- * function draw() {
- * // wait until the data is loaded
- * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
- * return;
- * }
- * clear();
- *
- * let feature = earthquakes.features[eqFeatureIndex];
- * let mag = feature.properties.mag;
- * let rad = mag / 11 * ((width + height) / 2);
- * fill(255, 0, 0, 100);
- * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
- *
- * if (eqFeatureIndex >= earthquakes.features.length) {
- * eqFeatureIndex = 0;
- * } else {
- * eqFeatureIndex += 1;
- * }
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create a p5.PrintWriter object.
- * let myWriter = createWriter('xo.txt');
- *
- * // Add some lines to the print stream.
- * myWriter.print('XOO');
- * myWriter.print('OXO');
- * myWriter.print('OOX');
- *
- * // Save the file and close the print stream.
- * myWriter.close();
- * }
- * }
- *
- *
- *
- */
-p5.prototype.createWriter = function (name, extension) {
- let newPW;
- // check that it doesn't already exist
- for (const i in p5.prototype._pWriters) {
- if (p5.prototype._pWriters[i].name === name) {
- // if a p5.PrintWriter w/ this name already exists...
- // return p5.prototype._pWriters[i]; // return it w/ contents intact.
- // or, could return a new, empty one with a unique name:
- newPW = new p5.PrintWriter(name + this.millis(), extension);
- p5.prototype._pWriters.push(newPW);
- return newPW;
+ /**
+ * Creates a new p5.PrintWriter object.
+ *
+ * p5.PrintWriter objects provide a way to
+ * save a sequence of text data, called the *print stream*, to the user's
+ * computer. They're low-level objects that enable precise control of text
+ * output. Functions such as
+ * saveStrings() and
+ * saveJSON() are easier to use for simple file
+ * saving.
+ *
+ * The first parameter, `filename`, is the name of the file to be written. If
+ * a string is passed, as in `createWriter('words.txt')`, a new
+ * p5.PrintWriter object will be created that
+ * writes to a file named `words.txt`.
+ *
+ * The second parameter, `extension`, is optional. If a string is passed, as
+ * in `createWriter('words', 'csv')`, the first parameter will be interpreted
+ * as the file name and the second parameter as the extension.
+ *
+ * @method createWriter
+ * @param {String} name name of the file to create.
+ * @param {String} [extension] format to use for the file.
+ * @return {p5.PrintWriter} stream for writing data.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create a p5.PrintWriter object.
- * // Use the file format .csv.
- * let myWriter = createWriter('mauna_loa_co2', 'csv');
- *
- * // Add some lines to the print stream.
- * myWriter.print('date,ppm_co2');
- * myWriter.print('1960-01-01,316.43');
- * myWriter.print('1970-01-01,325.06');
- * myWriter.print('1980-01-01,337.9');
- * myWriter.print('1990-01-01,353.86');
- * myWriter.print('2000-01-01,369.45');
- * myWriter.print('2020-01-01,413.61');
- *
- * // Save the file and close the print stream.
- * myWriter.close();
- * }
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('xo.txt');
+ *
+ * // Add some lines to the print stream.
+ * myWriter.print('XOO');
+ * myWriter.print('OXO');
+ * myWriter.print('OOX');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ * }
+ *
+ *
+ *
+ */
+ fn.createWriter = function (name, extension) {
+ let newPW;
+ // check that it doesn't already exist
+ for (const i in fn._pWriters) {
+ if (fn._pWriters[i].name === name) {
+ // if a p5.PrintWriter w/ this name already exists...
+ // return fn._pWriters[i]; // return it w/ contents intact.
+ // or, could return a new, empty one with a unique name:
+ newPW = new p5.PrintWriter(name + this.millis(), extension);
+ fn._pWriters.push(newPW);
+ return newPW;
+ }
}
- }
- newPW = new p5.PrintWriter(name, extension);
- p5.prototype._pWriters.push(newPW);
- return newPW;
-};
-
-/**
- * A class to describe a print stream.
- *
- * Each `p5.PrintWriter` object provides a way to save a sequence of text
- * data, called the *print stream*, to the user's computer. It's a low-level
- * object that enables precise control of text output. Functions such as
- * saveStrings() and
- * saveJSON() are easier to use for simple file
- * saving.
- *
- * Note: createWriter() is the recommended way
- * to make an instance of this class.
- *
- * @class p5.PrintWriter
- * @param {String} filename name of the file to create.
- * @param {String} [extension] format to use for the file.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create a p5.PrintWriter object.
+ * // Use the file format .csv.
+ * let myWriter = createWriter('mauna_loa_co2', 'csv');
+ *
+ * // Add some lines to the print stream.
+ * myWriter.print('date,ppm_co2');
+ * myWriter.print('1960-01-01,316.43');
+ * myWriter.print('1970-01-01,325.06');
+ * myWriter.print('1980-01-01,337.9');
+ * myWriter.print('1990-01-01,353.86');
+ * myWriter.print('2000-01-01,369.45');
+ * myWriter.print('2020-01-01,413.61');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ * }
+ *
+ *
- *
- */
-p5.PrintWriter = function (filename, extension) {
- let self = this;
- this.name = filename;
- this.content = '';
+ newPW = new p5.PrintWriter(name, extension);
+ fn._pWriters.push(newPW);
+ return newPW;
+ };
/**
- * Writes data to the print stream without adding new lines.
+ * A class to describe a print stream.
*
- * The parameter, `data`, is the data to write. `data` can be a number or
- * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
- * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
- * array elements when they're added to the print stream.
+ * Each `p5.PrintWriter` object provides a way to save a sequence of text
+ * data, called the *print stream*, to the user's computer. It's a low-level
+ * object that enables precise control of text output. Functions such as
+ * saveStrings() and
+ * saveJSON() are easier to use for simple file
+ * saving.
*
- * @method write
- * @param {String|Number|Array} data data to be written as a string, number,
- * or array of strings and numbers.
+ * Note: createWriter() is the recommended way
+ * to make an instance of this class.
+ *
+ * @class p5.PrintWriter
+ * @param {String} filename name of the file to create.
+ * @param {String} [extension] format to use for the file.
*
* @example
*
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * // Create a p5.PrintWriter object.
- * let myWriter = createWriter('xo.txt');
- *
- * // Add some lines to the print stream.
- * myWriter.print('XOO');
- * myWriter.print('OXO');
- * myWriter.print('OOX');
- *
- * // Save the file and close the print stream.
- * myWriter.close();
- * }
- *
- *
@@ -1618,11 +1563,12 @@ p5.PrintWriter = function (filename, extension) {
* // Save the file when the user double-clicks.
* function doubleClicked() {
* // Create a p5.PrintWriter object.
- * let myWriter = createWriter('numbers.txt');
+ * let myWriter = createWriter('xo.txt');
*
- * // Add some data to the print stream.
- * myWriter.write('1,2,3,');
- * myWriter.write(['4', '5', '6']);
+ * // Add some lines to the print stream.
+ * myWriter.print('XOO');
+ * myWriter.print('OXO');
+ * myWriter.print('OOX');
*
* // Save the file and close the print stream.
* myWriter.close();
@@ -1630,21 +1576,398 @@ p5.PrintWriter = function (filename, extension) {
*
*
*/
- this.write = function (data) {
- this.content += data;
+ p5.PrintWriter = function (filename, extension) {
+ let self = this;
+ this.name = filename;
+ this.content = '';
+
+ /**
+ * Writes data to the print stream without adding new lines.
+ *
+ * The parameter, `data`, is the data to write. `data` can be a number or
+ * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
+ * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
+ * array elements when they're added to the print stream.
+ *
+ * @method write
+ * @param {String|Number|Array} data data to be written as a string, number,
+ * or array of strings and numbers.
+ *
+ * @example
+ *
+ *
+ */
+ this.write = function (data) {
+ this.content += data;
+ };
+
+ /**
+ * Writes data to the print stream with new lines added.
+ *
+ * The parameter, `data`, is the data to write. `data` can be a number or
+ * string, as in `myWriter.print('hi')`, or an array of numbers and strings,
+ * as in `myWriter.print([1, 2, 3])`. A comma will be inserted between array
+ * array elements when they're added to the print stream.
+ *
+ * @method print
+ * @param {String|Number|Array} data data to be written as a string, number,
+ * or array of strings and numbers.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('numbers.txt');
+ *
+ * // Add some data to the print stream.
+ * myWriter.write('1,2,3,');
+ * myWriter.write(['4', '5', '6']);
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.print = function (data) {
+ this.content += `${data}\n`;
+ };
+
+ /**
+ * Clears all data from the print stream.
+ *
+ * @method clear
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('numbers.txt');
+ *
+ * // Add some data to the print stream.
+ * myWriter.print('1,2,3,');
+ * myWriter.print(['4', '5', '6']);
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.clear = function () {
+ this.content = '';
+ };
+
+ /**
+ * Saves the file and closes the print stream.
+ *
+ * @method close
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('numbers.txt');
+ *
+ * // Add some data to the print stream.
+ * myWriter.print('Hello p5*js!');
+ *
+ * // Clear the print stream.
+ * myWriter.clear();
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ *
+ */
+ this.close = function () {
+ // convert String to Array for the writeFile Blob
+ const arr = [];
+ arr.push(this.content);
+ fn.writeFile(arr, filename, extension);
+ // remove from _pWriters array and delete self
+ for (const i in fn._pWriters) {
+ if (fn._pWriters[i].name === this.name) {
+ // remove from _pWriters array
+ fn._pWriters.splice(i, 1);
+ }
+ }
+ self.clear();
+ self = {};
+ };
+ };
+
+ /**
+ * @module IO
+ * @submodule Output
+ * @for p5
+ */
+
+ // object, filename, options --> saveJSON, saveStrings,
+ // filename, [extension] [canvas] --> saveImage
+
+ /**
+ * Saves a given element(image, text, json, csv, wav, or html) to the client's
+ * computer. The first parameter can be a pointer to element we want to save.
+ * The element can be one of p5.Element,an Array of
+ * Strings, an Array of JSON, a JSON object, a p5.Table
+ * , a p5.Image, or a p5.SoundFile (requires
+ * p5.sound). The second parameter is a filename (including extension).The
+ * third parameter is for options specific to this type of object. This method
+ * will save a file that fits the given parameters.
+ * If it is called without specifying an element, by default it will save the
+ * whole canvas as an image file. You can optionally specify a filename as
+ * the first parameter in such a case.
+ * **Note that it is not recommended to
+ * call this method within draw, as it will open a new save dialog on every
+ * render.**
+ *
+ * @method save
+ * @param {Object|String} [objectOrFilename] If filename is provided, will
+ * save canvas as an image with
+ * either png or jpg extension
+ * depending on the filename.
+ * If object is provided, will
+ * save depending on the object
+ * and filename (see examples
+ * above).
+ * @param {String} [filename] If an object is provided as the first
+ * parameter, then the second parameter
+ * indicates the filename,
+ * and should include an appropriate
+ * file extension (see examples above).
+ * @param {Boolean|String} [options] Additional options depend on
+ * filetype. For example, when saving JSON,
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * let myWriter = createWriter('cat.txt');
+ *
+ * // Add some data to the print stream.
+ * // ASCII art courtesy Wikipedia:
+ * // https://en.wikipedia.org/wiki/ASCII_art
+ * myWriter.print(' (\\_/) ');
+ * myWriter.print("(='.'=)");
+ * myWriter.print('(")_(")');
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ * true indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ *
+ * @example
+ *
+ * // Saves the canvas as an image
+ * cnv = createCanvas(300, 300);
+ * save(cnv, 'myCanvas.jpg');
+ *
+ * // Saves the canvas as an image by default
+ * save('myCanvas.jpg');
+ * describe('An example for saving a canvas as an image.');
+ *
+ * // Saves p5.Image as an image
+ * img = createImage(10, 10);
+ * save(img, 'myImage.png');
+ * describe('An example for saving a p5.Image element as an image.');
+ *
+ * // Saves p5.Renderer object as an image
+ * obj = createGraphics(100, 100);
+ * save(obj, 'myObject.png');
+ * describe('An example for saving a p5.Renderer element.');
+ *
+ * let myTable = new p5.Table();
+ * // Saves table as html file
+ * save(myTable, 'myTable.html');
+ *
+ * // Comma Separated Values
+ * save(myTable, 'myTable.csv');
+ *
+ * // Tab Separated Values
+ * save(myTable, 'myTable.tsv');
+ *
+ * describe(`An example showing how to save a table in formats of
+ * HTML, CSV and TSV.`);
+ *
+ * let myJSON = { a: 1, b: true };
+ *
+ * // Saves pretty JSON
+ * save(myJSON, 'my.json');
+ *
+ * // Optimizes JSON filesize
+ * save(myJSON, 'my.json', true);
+ *
+ * describe('An example for saving JSON to a txt file with some extra arguments.');
+ *
+ * // Saves array of strings to text file with line breaks after each item
+ * let arrayOfStrings = ['a', 'b'];
+ * save(arrayOfStrings, 'my.txt');
+ * describe(`An example for saving an array of strings to text file
+ * with line breaks.`);
+ *
@@ -1667,29 +1990,17 @@ p5.PrintWriter = function (filename, extension) {
*
* // Save the file when the user double-clicks.
* function doubleClicked() {
- * // Create a p5.PrintWriter object.
- * let myWriter = createWriter('numbers.txt');
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * let data = [1, 2, 3];
*
- * // Add some data to the print stream.
- * myWriter.print('1,2,3,');
- * myWriter.print(['4', '5', '6']);
- *
- * // Save the file and close the print stream.
- * myWriter.close();
+ * // Save the JSON file.
+ * saveJSON(data, 'numbers.json');
+ * }
* }
*
*
- */
- this.print = function (data) {
- this.content += `${data}\n`;
- };
-
- /**
- * Clears all data from the print stream.
- *
- * @method clear
*
- * @example
*
*
*
- * // Clear the print stream.
- * myWriter.clear();
+ *
* function setup() {
@@ -1710,29 +2021,92 @@ p5.PrintWriter = function (filename, extension) {
*
* // Save the file when the user double-clicks.
* function doubleClicked() {
- * // Create a p5.PrintWriter object.
- * let myWriter = createWriter('numbers.txt');
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an object.
+ * let data = { x: mouseX, y: mouseY };
*
- * // Add some data to the print stream.
- * myWriter.print('Hello p5*js!');
+ * // Save the JSON file.
+ * saveJSON(data, 'state.json');
+ * }
+ * }
+ *
+ *
+ *
*/
- this.clear = function () {
- this.content = '';
+ fn.saveJSON = function (json, filename, opt) {
+ p5._validateParameters('saveJSON', arguments);
+ let stringify;
+ if (opt) {
+ stringify = JSON.stringify(json);
+ } else {
+ stringify = JSON.stringify(json, undefined, 2);
+ }
+ this.saveStrings(stringify.split('\n'), filename, 'json');
};
+ fn.saveJSONObject = fn.saveJSON;
+ fn.saveJSONArray = fn.saveJSON;
+
/**
- * Saves the file and closes the print stream.
+ * Saves an `Array` of `String`s to a file, one per line.
+ *
+ * The first parameter, `list`, is an array with the strings to save.
+ *
+ * The second parameter, `filename`, is a string that sets the file's name.
+ * For example, calling `saveStrings(['0', '01', '011'], 'data.txt')` saves
+ * the array `['0', '01', '011']` to a file called `data.txt` on the user's
+ * computer.
+ *
+ * The third parameter, `extension`, is optional. If a string is passed, as in
+ * `saveStrings(['0', '01', '0`1'], 'data', 'txt')`, the second parameter will
+ * be interpreted as the file name and the third parameter as the extension.
*
- * @method close
+ * The fourth parameter, `isCRLF`, is also optional, If `true` is passed, as
+ * in `saveStrings(['0', '01', '011'], 'data', 'txt', true)`, then two
+ * characters, `\r\n` , will be added to the end of each string to create new
+ * lines in the saved file. `\r` is a carriage return (CR) and `\n` is a line
+ * feed (LF). By default, only `\n` (line feed) is added to each string in
+ * order to create new lines.
+ *
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ *
+ * @method saveStrings
+ * @param {String[]} list data to save.
+ * @param {String} filename name of file to be saved.
+ * @param {String} [extension] format to use for the file.
+ * @param {Boolean} [isCRLF] whether to add `\r\n` to the end of each
+ * string. Defaults to `false`.
*
* @example
*
+ * function setup() {
+ * createCanvas(100, 100);
*
- * // Save the file and close the print stream.
- * myWriter.close();
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an object.
+ * let data = { x: mouseX, y: mouseY };
+ *
+ * // Save the JSON file and reduce its size.
+ * saveJSON(data, 'state.json', true);
+ * }
* }
*
*
@@ -1755,741 +2129,369 @@ p5.PrintWriter = function (filename, extension) {
*
* // Save the file when the user double-clicks.
* function doubleClicked() {
- * // Create a p5.PrintWriter object.
- * let myWriter = createWriter('cat.txt');
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * let data = ['0', '01', '011'];
*
- * // Add some data to the print stream.
- * // ASCII art courtesy Wikipedia:
- * // https://en.wikipedia.org/wiki/ASCII_art
- * myWriter.print(' (\\_/) ');
- * myWriter.print("(='.'=)");
- * myWriter.print('(")_(")');
+ * // Save the text file.
+ * saveStrings(data, 'data.txt');
+ * }
+ * }
+ *
+ *
*
- * // Save the file and close the print stream.
- * myWriter.close();
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * // ASCII art courtesy Wikipedia:
+ * // https://en.wikipedia.org/wiki/ASCII_art
+ * let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
+ *
+ * // Save the text file.
+ * saveStrings(data, 'cat', 'txt');
+ * }
+ * }
+ *
+ *
+ *
*/
- this.close = function () {
- // convert String to Array for the writeFile Blob
- const arr = [];
- arr.push(this.content);
- p5.prototype.writeFile(arr, filename, extension);
- // remove from _pWriters array and delete self
- for (const i in p5.prototype._pWriters) {
- if (p5.prototype._pWriters[i].name === this.name) {
- // remove from _pWriters array
- p5.prototype._pWriters.splice(i, 1);
- }
+ fn.saveStrings = function (list, filename, extension, isCRLF) {
+ p5._validateParameters('saveStrings', arguments);
+ const ext = extension || 'txt';
+ const pWriter = this.createWriter(filename, ext);
+ for (let i = 0; i < list.length; i++) {
+ isCRLF ? pWriter.write(list[i] + '\r\n') : pWriter.write(list[i] + '\n');
}
- self.clear();
- self = {};
+ pWriter.close();
+ pWriter.clear();
};
-};
-
-/**
- * @module IO
- * @submodule Output
- * @for p5
- */
-
-// object, filename, options --> saveJSON, saveStrings,
-// filename, [extension] [canvas] --> saveImage
-
-/**
- * Saves a given element(image, text, json, csv, wav, or html) to the client's
- * computer. The first parameter can be a pointer to element we want to save.
- * The element can be one of p5.Element,an Array of
- * Strings, an Array of JSON, a JSON object, a p5.Table
- * , a p5.Image, or a p5.SoundFile (requires
- * p5.sound). The second parameter is a filename (including extension).The
- * third parameter is for options specific to this type of object. This method
- * will save a file that fits the given parameters.
- * If it is called without specifying an element, by default it will save the
- * whole canvas as an image file. You can optionally specify a filename as
- * the first parameter in such a case.
- * **Note that it is not recommended to
- * call this method within draw, as it will open a new save dialog on every
- * render.**
- *
- * @method save
- * @param {Object|String} [objectOrFilename] If filename is provided, will
- * save canvas as an image with
- * either png or jpg extension
- * depending on the filename.
- * If object is provided, will
- * save depending on the object
- * and filename (see examples
- * above).
- * @param {String} [filename] If an object is provided as the first
- * parameter, then the second parameter
- * indicates the filename,
- * and should include an appropriate
- * file extension (see examples above).
- * @param {Boolean|String} [options] Additional options depend on
- * filetype. For example, when saving JSON,
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+ * // Create an array.
+ * // +--+
+ * // / /|
+ * // +--+ +
+ * // | |/
+ * // +--+
+ * let data = [' +--+', ' / /|', '+--+ +', '| |/', '+--+'];
+ *
+ * // Save the text file.
+ * // Use CRLF for line endings.
+ * saveStrings(data, 'box', 'txt', true);
+ * }
* }
*
* true indicates that the
- * output will be optimized for filesize,
- * rather than readability.
- *
- * @example
- *
- * // Saves the canvas as an image
- * cnv = createCanvas(300, 300);
- * save(cnv, 'myCanvas.jpg');
- *
- * // Saves the canvas as an image by default
- * save('myCanvas.jpg');
- * describe('An example for saving a canvas as an image.');
- *
- * // Saves p5.Image as an image
- * img = createImage(10, 10);
- * save(img, 'myImage.png');
- * describe('An example for saving a p5.Image element as an image.');
- *
- * // Saves p5.Renderer object as an image
- * obj = createGraphics(100, 100);
- * save(obj, 'myObject.png');
- * describe('An example for saving a p5.Renderer element.');
- *
- * let myTable = new p5.Table();
- * // Saves table as html file
- * save(myTable, 'myTable.html');
- *
- * // Comma Separated Values
- * save(myTable, 'myTable.csv');
- *
- * // Tab Separated Values
- * save(myTable, 'myTable.tsv');
- *
- * describe(`An example showing how to save a table in formats of
- * HTML, CSV and TSV.`);
- *
- * let myJSON = { a: 1, b: true };
- *
- * // Saves pretty JSON
- * save(myJSON, 'my.json');
- *
- * // Optimizes JSON filesize
- * save(myJSON, 'my.json', true);
- *
- * describe('An example for saving JSON to a txt file with some extra arguments.');
- *
- * // Saves array of strings to text file with line breaks after each item
- * let arrayOfStrings = ['a', 'b'];
- * save(arrayOfStrings, 'my.txt');
- * describe(`An example for saving an array of strings to text file
- * with line breaks.`);
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create an array.
- * let data = [1, 2, 3];
- *
- * // Save the JSON file.
- * saveJSON(data, 'numbers.json');
- * }
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create an object.
- * let data = { x: mouseX, y: mouseY };
- *
- * // Save the JSON file.
- * saveJSON(data, 'state.json');
- * }
- * }
- *
- *
- *
- */
-p5.prototype.saveJSON = function (json, filename, opt) {
- p5._validateParameters('saveJSON', arguments);
- let stringify;
- if (opt) {
- stringify = JSON.stringify(json);
- } else {
- stringify = JSON.stringify(json, undefined, 2);
+ // =======
+ // HELPERS
+ // =======
+
+ function escapeHelper(content) {
+ return content
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
}
- this.saveStrings(stringify.split('\n'), filename, 'json');
-};
-p5.prototype.saveJSONObject = p5.prototype.saveJSON;
-p5.prototype.saveJSONArray = p5.prototype.saveJSON;
-
-/**
- * Saves an `Array` of `String`s to a file, one per line.
- *
- * The first parameter, `list`, is an array with the strings to save.
- *
- * The second parameter, `filename`, is a string that sets the file's name.
- * For example, calling `saveStrings(['0', '01', '011'], 'data.txt')` saves
- * the array `['0', '01', '011']` to a file called `data.txt` on the user's
- * computer.
- *
- * The third parameter, `extension`, is optional. If a string is passed, as in
- * `saveStrings(['0', '01', '0`1'], 'data', 'txt')`, the second parameter will
- * be interpreted as the file name and the third parameter as the extension.
- *
- * The fourth parameter, `isCRLF`, is also optional, If `true` is passed, as
- * in `saveStrings(['0', '01', '011'], 'data', 'txt', true)`, then two
- * characters, `\r\n` , will be added to the end of each string to create new
- * lines in the saved file. `\r` is a carriage return (CR) and `\n` is a line
- * feed (LF). By default, only `\n` (line feed) is added to each string in
- * order to create new lines.
- *
- * Note: The browser will either save the file immediately or prompt the user
- * with a dialogue window.
- *
- * @method saveStrings
- * @param {String[]} list data to save.
- * @param {String} filename name of file to be saved.
- * @param {String} [extension] format to use for the file.
- * @param {Boolean} [isCRLF] whether to add `\r\n` to the end of each
- * string. Defaults to `false`.
- *
- * @example
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create an object.
- * let data = { x: mouseX, y: mouseY };
- *
- * // Save the JSON file and reduce its size.
- * saveJSON(data, 'state.json', true);
- * }
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create an array.
- * let data = ['0', '01', '011'];
- *
- * // Save the text file.
- * saveStrings(data, 'data.txt');
- * }
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create an array.
- * // ASCII art courtesy Wikipedia:
- * // https://en.wikipedia.org/wiki/ASCII_art
- * let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
- *
- * // Save the text file.
- * saveStrings(data, 'cat', 'txt');
- * }
- * }
- *
- *
- *
- */
-p5.prototype.saveStrings = function (list, filename, extension, isCRLF) {
- p5._validateParameters('saveStrings', arguments);
- const ext = extension || 'txt';
- const pWriter = this.createWriter(filename, ext);
- for (let i = 0; i < list.length; i++) {
- isCRLF ? pWriter.write(list[i] + '\r\n') : pWriter.write(list[i] + '\n');
- }
- pWriter.close();
- pWriter.clear();
-};
-
-// =======
-// HELPERS
-// =======
-
-function escapeHelper(content) {
- return content
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
-}
-
-/**
- * Writes the contents of a Table object to a file. Defaults to a
- * text file with comma-separated-values ('csv') but can also
- * use tab separation ('tsv'), or generate an HTML table ('html').
- * The file saving process and location of the saved file will
- * vary between web browsers.
- *
- * @method saveTable
- * @param {p5.Table} Table the Table object to save to a file
- * @param {String} filename the filename to which the Table should be saved
- * @param {String} [options] can be one of "tsv", "csv", or "html"
- * @example
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * // Create an array.
- * // +--+
- * // / /|
- * // +--+ +
- * // | |/
- * // +--+
- * let data = [' +--+', ' / /|', '+--+ +', '| |/', '+--+'];
- *
- * // Save the text file.
- * // Use CRLF for line endings.
- * saveStrings(data, 'box', 'txt', true);
- * }
- * }
- *
- *
- * let table;
- *
- * function setup() {
- * table = new p5.Table();
- *
- * table.addColumn('id');
- * table.addColumn('species');
- * table.addColumn('name');
- *
- * let newRow = table.addRow();
- * newRow.setNum('id', table.getRowCount() - 1);
- * newRow.setString('species', 'Panthera leo');
- * newRow.setString('name', 'Lion');
- *
- * // To save, un-comment next line then click 'run'
- * // saveTable(table, 'new.csv');
- *
- * describe('no image displayed');
- * }
- *
- * // Saves the following to a file called 'new.csv':
- * // id,species,name
- * // 0,Panthera leo,Lion
- *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('id');
+ * table.addColumn('species');
+ * table.addColumn('name');
+ *
+ * let newRow = table.addRow();
+ * newRow.setNum('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Panthera leo');
+ * newRow.setString('name', 'Lion');
+ *
+ * // To save, un-comment next line then click 'run'
+ * // saveTable(table, 'new.csv');
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Saves the following to a file called 'new.csv':
+ * // id,species,name
+ * // 0,Panthera leo,Lion
+ * | ${e}`); - pWriter.print(' | '); + } else { + // otherwise, make HTML + pWriter.print(''); + pWriter.print(''); + let str = ' '); + + pWriter.print(''); + pWriter.print('
| ${e}`); + pWriter.print(' | '); + } + pWriter.print('
| ${htmlEntry}`); - pWriter.print(' | '); + // make rows + for (let row = 0; row < table.rows.length; row++) { + pWriter.print('
| ${htmlEntry}`); + pWriter.print(' | '); + } + pWriter.print('
-
- *
- csv - parse the table as comma-separated values - *
- tsv - parse the table as tab-separated values - *
- header - this table has a header (title) row - *
-
+ *
- csv - parse the table as comma-separated values + *
- tsv - parse the table as tab-separated values + *
- header - this table has a header (title) row + *
- *
- */
- addRow (row) {
- // make sure it is a valid TableRow
- const r = row || new p5.TableRow();
+ * Table objects store data with multiple rows and columns, much
+ * like in a traditional spreadsheet. Tables can be generated from
+ * scratch, dynamically, or using data from an existing file.
+ *
+ * @class p5.Table
+ * @param {p5.TableRow[]} [rows] An array of p5.TableRow objects
+ */
+ p5.Table = class Table {
+ constructor(rows) {
+ this.columns = [];
+ this.rows = [];
+ }
+
+ /**
+ * Use addRow() to add a new row of data to a p5.Table object. By default,
+ * an empty row is created. Typically, you would store a reference to
+ * the new row in a TableRow object (see newRow in the example above),
+ * and then set individual values using set().
+ *
+ * If a p5.TableRow object is included as a parameter, then that row is
+ * duplicated and added to the table.
+ *
+ * @param {p5.TableRow} [row] row to be added to the table
+ * @return {p5.TableRow} the row that was added
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //add a row
- * let newRow = table.addRow();
- * newRow.setString('id', table.getRowCount() - 1);
- * newRow.setString('species', 'Canis Lupus');
- * newRow.setString('name', 'Wolf');
- *
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ addRow (row) {
+ // make sure it is a valid TableRow
+ const r = row || new p5.TableRow();
- if (typeof r.arr === 'undefined' || typeof r.obj === 'undefined') {
- //r = new p5.prototype.TableRow(r);
- throw new Error(`invalid TableRow: ${r}`);
+ if (typeof r.arr === 'undefined' || typeof r.obj === 'undefined') {
+ //r = new p5.prototype.TableRow(r);
+ throw new Error(`invalid TableRow: ${r}`);
+ }
+ r.table = this;
+ this.rows.push(r);
+ return r;
}
- r.table = this;
- this.rows.push(r);
- return r;
- }
- /**
- * Removes a row from the table object.
- *
- * @param {Integer} id ID number of the row to remove
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- removeRow (id) {
- this.rows[id].table = null; // remove reference to table
- const chunk = this.rows.splice(id + 1, this.rows.length);
- this.rows.pop();
- this.rows = this.rows.concat(chunk);
- }
+ /**
+ * Removes a row from the table object.
+ *
+ * @param {Integer} id ID number of the row to remove
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //remove the first row
- * table.removeRow(0);
- *
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ removeRow (id) {
+ this.rows[id].table = null; // remove reference to table
+ const chunk = this.rows.splice(id + 1, this.rows.length);
+ this.rows.pop();
+ this.rows = this.rows.concat(chunk);
+ }
- /**
- * Returns a reference to the specified p5.TableRow. The reference
- * can then be used to get and set values of the selected row.
- *
- * @param {Integer} rowID ID number of the row to get
- * @return {p5.TableRow} p5.TableRow object
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //remove the first row
+ * table.removeRow(0);
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- getRow (r) {
- return this.rows[r];
- }
+ /**
+ * Returns a reference to the specified p5.TableRow. The reference
+ * can then be used to get and set values of the selected row.
+ *
+ * @param {Integer} rowID ID number of the row to get
+ * @return {p5.TableRow} p5.TableRow object
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let row = table.getRow(1);
- * //print it column by column
- * //note: a row is an object, not an array
- * for (let c = 0; c < table.getColumnCount(); c++) {
- * print(row.getString(c));
- * }
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ getRow (r) {
+ return this.rows[r];
+ }
- /**
- * Gets all rows from the table. Returns an array of p5.TableRows.
- *
- * @return {p5.TableRow[]} Array of p5.TableRows
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let row = table.getRow(1);
+ * //print it column by column
+ * //note: a row is an object, not an array
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print(row.getString(c));
+ * }
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- getRows () {
- return this.rows;
- }
+ /**
+ * Gets all rows from the table. Returns an array of p5.TableRows.
+ *
+ * @return {p5.TableRow[]} Array of p5.TableRows
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let rows = table.getRows();
- *
- * //warning: rows is an array of objects
- * for (let r = 0; r < rows.length; r++) {
- * rows[r].set('name', 'Unicorn');
- * }
- *
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ getRows () {
+ return this.rows;
+ }
- /**
- * Finds the first row in the Table that contains the value
- * provided, and returns a reference to that row. Even if
- * multiple rows are possible matches, only the first matching
- * row is returned. The column to search may be specified by
- * either its ID or title.
- *
- * @param {String} value The value to match
- * @param {Integer|String} column ID number or title of the
- * column to search
- * @return {p5.TableRow}
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ *
+ * //warning: rows is an array of objects
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- findRow (value, column) {
- // try the Object
- if (typeof column === 'string') {
- for (let i = 0; i < this.rows.length; i++) {
- if (this.rows[i].obj[column] === value) {
- return this.rows[i];
+ /**
+ * Finds the first row in the Table that contains the value
+ * provided, and returns a reference to that row. Even if
+ * multiple rows are possible matches, only the first matching
+ * row is returned. The column to search may be specified by
+ * either its ID or title.
+ *
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow}
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //find the animal named zebra
- * let row = table.findRow('Zebra', 'name');
- * //find the corresponding species
- * print(row.getString('species'));
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ findRow (value, column) {
+ // try the Object
+ if (typeof column === 'string') {
+ for (let i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ return this.rows[i];
+ }
}
- }
- } else {
- // try the Array
- for (let j = 0; j < this.rows.length; j++) {
- if (this.rows[j].arr[column] === value) {
- return this.rows[j];
+ } else {
+ // try the Array
+ for (let j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ return this.rows[j];
+ }
}
}
+ // otherwise...
+ return null;
}
- // otherwise...
- return null;
- }
- /**
- * Finds the rows in the Table that contain the value
- * provided, and returns references to those rows. Returns an
- * Array, so for must be used to iterate through all the rows,
- * as shown in the example above. The column to search may be
- * specified by either its ID or title.
- *
- * @param {String} value The value to match
- * @param {Integer|String} column ID number or title of the
- * column to search
- * @return {p5.TableRow[]} An Array of TableRow objects
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //find the animal named zebra
+ * let row = table.findRow('Zebra', 'name');
+ * //find the corresponding species
+ * print(row.getString('species'));
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- findRows (value, column) {
- const ret = [];
- if (typeof column === 'string') {
- for (let i = 0; i < this.rows.length; i++) {
- if (this.rows[i].obj[column] === value) {
- ret.push(this.rows[i]);
+ /**
+ * Finds the rows in the Table that contain the value
+ * provided, and returns references to those rows. Returns an
+ * Array, so for must be used to iterate through all the rows,
+ * as shown in the example above. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @param {String} value The value to match
+ * @param {Integer|String} column ID number or title of the
+ * column to search
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //add another goat
- * let newRow = table.addRow();
- * newRow.setString('id', table.getRowCount() - 1);
- * newRow.setString('species', 'Scape Goat');
- * newRow.setString('name', 'Goat');
- *
- * //find the rows containing animals named Goat
- * let rows = table.findRows('Goat', 'name');
- * print(rows.length + ' Goats found');
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ findRows (value, column) {
+ const ret = [];
+ if (typeof column === 'string') {
+ for (let i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column] === value) {
+ ret.push(this.rows[i]);
+ }
}
- }
- } else {
- // try the Array
- for (let j = 0; j < this.rows.length; j++) {
- if (this.rows[j].arr[column] === value) {
- ret.push(this.rows[j]);
+ } else {
+ // try the Array
+ for (let j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column] === value) {
+ ret.push(this.rows[j]);
+ }
}
}
+ return ret;
}
- return ret;
- }
- /**
- * Finds the first row in the Table that matches the regular
- * expression provided, and returns a reference to that row.
- * Even if multiple rows are possible matches, only the first
- * matching row is returned. The column to search may be
- * specified by either its ID or title.
- *
- * @param {String|RegExp} regexp The regular expression to match
- * @param {String|Integer} column The column ID (number) or
- * title (string)
- * @return {p5.TableRow} TableRow object
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add another goat
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Scape Goat');
+ * newRow.setString('name', 'Goat');
+ *
+ * //find the rows containing animals named Goat
+ * let rows = table.findRows('Goat', 'name');
+ * print(rows.length + ' Goats found');
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- matchRow (regexp, column) {
- if (typeof column === 'number') {
- for (let j = 0; j < this.rows.length; j++) {
- if (this.rows[j].arr[column].match(regexp)) {
- return this.rows[j];
+ /**
+ * Finds the first row in the Table that matches the regular
+ * expression provided, and returns a reference to that row.
+ * Even if multiple rows are possible matches, only the first
+ * matching row is returned. The column to search may be
+ * specified by either its ID or title.
+ *
+ * @param {String|RegExp} regexp The regular expression to match
+ * @param {String|Integer} column The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow} TableRow object
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //Search using specified regex on a given column, return TableRow object
- * let mammal = table.matchRow(new RegExp('ant'), 1);
- * print(mammal.getString(1));
- * //Output "Panthera pardus"
- * }
- *
- *
+ *
+ */
+ matchRow (regexp, column) {
+ if (typeof column === 'number') {
+ for (let j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ return this.rows[j];
+ }
}
- }
- } else {
- for (let i = 0; i < this.rows.length; i++) {
- if (this.rows[i].obj[column].match(regexp)) {
- return this.rows[i];
+ } else {
+ for (let i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ return this.rows[i];
+ }
}
}
+ return null;
}
- return null;
- }
- /**
- * Finds the rows in the Table that match the regular expression provided,
- * and returns references to those rows. Returns an array, so for must be
- * used to iterate through all the rows, as shown in the example. The
- * column to search may be specified by either its ID or title.
- *
- * @param {String} regexp The regular expression to match
- * @param {String|Integer} [column] The column ID (number) or
- * title (string)
- * @return {p5.TableRow[]} An Array of TableRow objects
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //Search using specified regex on a given column, return TableRow object
+ * let mammal = table.matchRow(new RegExp('ant'), 1);
+ * print(mammal.getString(1));
+ * //Output "Panthera pardus"
+ * }
+ *
+ *
- *
- */
- matchRows (regexp, column) {
- const ret = [];
- if (typeof column === 'number') {
- for (let j = 0; j < this.rows.length; j++) {
- if (this.rows[j].arr[column].match(regexp)) {
- ret.push(this.rows[j]);
+ /**
+ * Finds the rows in the Table that match the regular expression provided,
+ * and returns references to those rows. Returns an array, so for must be
+ * used to iterate through all the rows, as shown in the example. The
+ * column to search may be specified by either its ID or title.
+ *
+ * @param {String} regexp The regular expression to match
+ * @param {String|Integer} [column] The column ID (number) or
+ * title (string)
+ * @return {p5.TableRow[]} An Array of TableRow objects
+ * @example
+ *
- * let table;
- *
- * function setup() {
- * table = new p5.Table();
- *
- * table.addColumn('name');
- * table.addColumn('type');
- *
- * let newRow = table.addRow();
- * newRow.setString('name', 'Lion');
- * newRow.setString('type', 'Mammal');
- *
- * newRow = table.addRow();
- * newRow.setString('name', 'Snake');
- * newRow.setString('type', 'Reptile');
- *
- * newRow = table.addRow();
- * newRow.setString('name', 'Mosquito');
- * newRow.setString('type', 'Insect');
- *
- * newRow = table.addRow();
- * newRow.setString('name', 'Lizard');
- * newRow.setString('type', 'Reptile');
- *
- * let rows = table.matchRows('R.*', 'type');
- * for (let i = 0; i < rows.length; i++) {
- * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
- * }
- * }
- * // Sketch prints:
- * // Snake: Reptile
- * // Lizard: Reptile
- *
- *
+ *
+ */
+ matchRows (regexp, column) {
+ const ret = [];
+ if (typeof column === 'number') {
+ for (let j = 0; j < this.rows.length; j++) {
+ if (this.rows[j].arr[column].match(regexp)) {
+ ret.push(this.rows[j]);
+ }
}
- }
- } else {
- for (let i = 0; i < this.rows.length; i++) {
- if (this.rows[i].obj[column].match(regexp)) {
- ret.push(this.rows[i]);
+ } else {
+ for (let i = 0; i < this.rows.length; i++) {
+ if (this.rows[i].obj[column].match(regexp)) {
+ ret.push(this.rows[i]);
+ }
}
}
+ return ret;
}
- return ret;
- }
- /**
- * Retrieves all values in the specified column, and returns them
- * as an array. The column may be specified by either its ID or title.
- *
- * @param {String|Number} column String or Number of the column to return
- * @return {Array} Array of column values
- *
- * @example
- *
+ * let table;
+ *
+ * function setup() {
+ * table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', 'Lion');
+ * newRow.setString('type', 'Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Snake');
+ * newRow.setString('type', 'Reptile');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Mosquito');
+ * newRow.setString('type', 'Insect');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', 'Lizard');
+ * newRow.setString('type', 'Reptile');
+ *
+ * let rows = table.matchRows('R.*', 'type');
+ * for (let i = 0; i < rows.length; i++) {
+ * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+ * }
+ * }
+ * // Sketch prints:
+ * // Snake: Reptile
+ * // Lizard: Reptile
+ *
+ *
- *
- */
- getColumn (value) {
- const ret = [];
- if (typeof value === 'string') {
- for (let i = 0; i < this.rows.length; i++) {
- ret.push(this.rows[i].obj[value]);
- }
- } else {
- for (let j = 0; j < this.rows.length; j++) {
- ret.push(this.rows[j].arr[value]);
+ /**
+ * Retrieves all values in the specified column, and returns them
+ * as an array. The column may be specified by either its ID or title.
+ *
+ * @param {String|Number} column String or Number of the column to return
+ * @return {Array} Array of column values
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //getColumn returns an array that can be printed directly
- * print(table.getColumn('species'));
- * //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ getColumn (value) {
+ const ret = [];
+ if (typeof value === 'string') {
+ for (let i = 0; i < this.rows.length; i++) {
+ ret.push(this.rows[i].obj[value]);
+ }
+ } else {
+ for (let j = 0; j < this.rows.length; j++) {
+ ret.push(this.rows[j].arr[value]);
+ }
}
+ return ret;
}
- return ret;
- }
- /**
- * Removes all rows from a Table. While all rows are removed,
- * columns and column titles are maintained.
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //getColumn returns an array that can be printed directly
+ * print(table.getColumn('species'));
+ * //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- clearRows () {
- delete this.rows;
- this.rows = [];
- }
-
- /**
- * Use addColumn() to add a new column to a Table object.
- * Typically, you will want to specify a title, so the column
- * may be easily referenced later by name. (If no title is
- * specified, the new column's title will be null.)
- *
- * @param {String} [title] title of the given column
- *
- * @example
- *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * table.clearRows();
- * print(table.getRowCount() + ' total rows in table');
- * print(table.getColumnCount() + ' total columns in table');
- * describe('no image displayed');
- * }
- *
- *
- *
- */
- addColumn (title) {
- const t = title || null;
- this.columns.push(t);
- }
+ /**
+ * Removes all rows from a Table. While all rows are removed,
+ * columns and column titles are maintained.
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * table.addColumn('carnivore');
- * table.set(0, 'carnivore', 'no');
- * table.set(1, 'carnivore', 'yes');
- * table.set(2, 'carnivore', 'no');
- *
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ clearRows () {
+ delete this.rows;
+ this.rows = [];
+ }
- /**
- * Returns the total number of columns in a Table.
- *
- * @return {Integer} Number of columns in this table
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.clearRows();
+ * print(table.getRowCount() + ' total rows in table');
+ * print(table.getColumnCount() + ' total columns in table');
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- getColumnCount () {
- return this.columns.length;
- }
+ /**
+ * Use addColumn() to add a new column to a Table object.
+ * Typically, you will want to specify a title, so the column
+ * may be easily referenced later by name. (If no title is
+ * specified, the new column's title will be null.)
+ *
+ * @param {String} [title] title of the given column
+ *
+ * @example
+ *
- * // given the cvs file "blobs.csv" in /assets directory
- * // ID, Name, Flavor, Shape, Color
- * // Blob1, Blobby, Sweet, Blob, Pink
- * // Blob2, Saddy, Savory, Blob, Blue
- *
- * let table;
- *
- * function preload() {
- * table = loadTable('assets/blobs.csv');
- * }
- *
- * function setup() {
- * createCanvas(200, 100);
- * textAlign(CENTER);
- * background(255);
- * }
- *
- * function draw() {
- * let numOfColumn = table.getColumnCount();
- * text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
- * }
- *
- *
+ *
+ */
+ addColumn (title) {
+ const t = title || null;
+ this.columns.push(t);
+ }
- /**
- * Returns the total number of rows in a Table.
- *
- * @return {Integer} Number of rows in this table
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.addColumn('carnivore');
+ * table.set(0, 'carnivore', 'no');
+ * table.set(1, 'carnivore', 'yes');
+ * table.set(2, 'carnivore', 'no');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- getRowCount () {
- return this.rows.length;
- }
+ /**
+ * Returns the total number of columns in a Table.
+ *
+ * @return {Integer} Number of columns in this table
+ * @example
+ *
- * // given the cvs file "blobs.csv" in /assets directory
- * //
- * // ID, Name, Flavor, Shape, Color
- * // Blob1, Blobby, Sweet, Blob, Pink
- * // Blob2, Saddy, Savory, Blob, Blue
- *
- * let table;
- *
- * function preload() {
- * table = loadTable('assets/blobs.csv');
- * }
- *
- * function setup() {
- * createCanvas(200, 100);
- * textAlign(CENTER);
- * background(255);
- * }
- *
- * function draw() {
- * text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
- * }
- *
- *
+ *
+ */
+ getColumnCount () {
+ return this.columns.length;
+ }
- /**
- * Removes any of the specified characters (or "tokens").
- *
- * If no column is specified, then the values in all columns and
- * rows are processed. A specific column may be referenced by
- * either its ID or title.
- *
- * @param {String} chars String listing characters to be removed
- * @param {String|Integer} [column] Column ID (number)
- * or name (string)
- *
- * @example
- *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * let numOfColumn = table.getColumnCount();
+ * text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
+ * }
+ *
+ *
- * function setup() {
- * let table = new p5.Table();
- *
- * table.addColumn('name');
- * table.addColumn('type');
- *
- * let newRow = table.addRow();
- * newRow.setString('name', ' $Lion ,');
- * newRow.setString('type', ',,,Mammal');
- *
- * newRow = table.addRow();
- * newRow.setString('name', '$Snake ');
- * newRow.setString('type', ',,,Reptile');
- *
- * table.removeTokens(',$ ');
- * print(table.getArray());
- * }
- *
- * // prints:
- * // 0 "Lion" "Mamal"
- * // 1 "Snake" "Reptile"
- *
+ *
+ */
+ getRowCount () {
+ return this.rows.length;
}
- const regex = new RegExp(charArray.join('|'), 'g');
- if (typeof column === 'undefined') {
- for (let c = 0; c < this.columns.length; c++) {
- for (let d = 0; d < this.rows.length; d++) {
- let s = this.rows[d].arr[c];
- s = s.replace(regex, '');
- this.rows[d].arr[c] = s;
- this.rows[d].obj[this.columns[c]] = s;
- }
+ /**
+ * Removes any of the specified characters (or "tokens").
+ *
+ * If no column is specified, then the values in all columns and
+ * rows are processed. A specific column may be referenced by
+ * either its ID or title.
+ *
+ * @param {String} chars String listing characters to be removed
+ * @param {String|Integer} [column] Column ID (number)
+ * or name (string)
+ *
+ * @example
+ *
+ * // given the cvs file "blobs.csv" in /assets directory
+ * //
+ * // ID, Name, Flavor, Shape, Color
+ * // Blob1, Blobby, Sweet, Blob, Pink
+ * // Blob2, Saddy, Savory, Blob, Blue
+ *
+ * let table;
+ *
+ * function preload() {
+ * table = loadTable('assets/blobs.csv');
+ * }
+ *
+ * function setup() {
+ * createCanvas(200, 100);
+ * textAlign(CENTER);
+ * background(255);
+ * }
+ *
+ * function draw() {
+ * text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
+ * }
+ *
+ *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' $Lion ,');
+ * newRow.setString('type', ',,,Mammal');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', '$Snake ');
+ * newRow.setString('type', ',,,Reptile');
+ *
+ * table.removeTokens(',$ ');
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
- * function setup() {
- * let table = new p5.Table();
- *
- * table.addColumn('name');
- * table.addColumn('type');
- *
- * let newRow = table.addRow();
- * newRow.setString('name', ' Lion ,');
- * newRow.setString('type', ' Mammal ');
- *
- * newRow = table.addRow();
- * newRow.setString('name', ' Snake ');
- * newRow.setString('type', ' Reptile ');
- *
- * table.trim();
- * print(table.getArray());
- * }
- *
- * // prints:
- * // 0 "Lion" "Mamal"
- * // 1 "Snake" "Reptile"
- *
+ * function setup() {
+ * let table = new p5.Table();
+ *
+ * table.addColumn('name');
+ * table.addColumn('type');
+ *
+ * let newRow = table.addRow();
+ * newRow.setString('name', ' Lion ,');
+ * newRow.setString('type', ' Mammal ');
+ *
+ * newRow = table.addRow();
+ * newRow.setString('name', ' Snake ');
+ * newRow.setString('type', ' Reptile ');
+ *
+ * table.trim();
+ * print(table.getArray());
+ * }
+ *
+ * // prints:
+ * // 0 "Lion" "Mamal"
+ * // 1 "Snake" "Reptile"
+ *
- *
- */
- removeColumn (c) {
- let cString;
- let cNumber;
- if (typeof c === 'string') {
- // find the position of c in the columns
- cString = c;
- cNumber = this.columns.indexOf(c);
- } else {
- cNumber = c;
- cString = this.columns[c];
- }
+ /**
+ * Use removeColumn() to remove an existing column from a Table
+ * object. The column to be removed may be identified by either
+ * its title (a String) or its index value (an int).
+ * removeColumn(0) would remove the first column, removeColumn(1)
+ * would remove the second column, and so on.
+ *
+ * @param {String|Integer} column columnName (string) or ID (number)
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * table.removeColumn('id');
- * print(table.getColumnCount());
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ removeColumn (c) {
+ let cString;
+ let cNumber;
+ if (typeof c === 'string') {
+ // find the position of c in the columns
+ cString = c;
+ cNumber = this.columns.indexOf(c);
+ } else {
+ cNumber = c;
+ cString = this.columns[c];
+ }
- const chunk = this.columns.splice(cNumber + 1, this.columns.length);
- this.columns.pop();
- this.columns = this.columns.concat(chunk);
+ const chunk = this.columns.splice(cNumber + 1, this.columns.length);
+ this.columns.pop();
+ this.columns = this.columns.concat(chunk);
- for (let i = 0; i < this.rows.length; i++) {
- const tempR = this.rows[i].arr;
- const chip = tempR.splice(cNumber + 1, tempR.length);
- tempR.pop();
- this.rows[i].arr = tempR.concat(chip);
- delete this.rows[i].obj[cString];
+ for (let i = 0; i < this.rows.length; i++) {
+ const tempR = this.rows[i].arr;
+ const chip = tempR.splice(cNumber + 1, tempR.length);
+ tempR.pop();
+ this.rows[i].arr = tempR.concat(chip);
+ delete this.rows[i].obj[cString];
+ }
}
- }
- /**
- * Stores a value in the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified
- * by either its ID or title.
- *
- * @param {Integer} row row ID
- * @param {String|Integer} column column ID (Number)
- * or title (String)
- * @param {String|Number} value value to assign
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.removeColumn('id');
+ * print(table.getColumnCount());
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- set (row, column, value) {
- this.rows[row].set(column, value);
- }
-
- /**
- * Stores a Float value in the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified
- * by either its ID or title.
- *
- * @param {Integer} row row ID
- * @param {String|Integer} column column ID (Number)
- * or title (String)
- * @param {Number} value value to assign
- *
- * @example
- *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * table.set(0, 'species', 'Canis Lupus');
- * table.set(0, 'name', 'Wolf');
- *
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- *
- * describe('no image displayed');
- * }
- *
- *
- *
- */
- setNum (row, column, value) {
- this.rows[row].setNum(column, value);
- }
+ /**
+ * Stores a value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String|Number} value value to assign
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * table.setNum(1, 'id', 1);
- *
- * print(table.getColumn(0));
- * //["0", 1, "2"]
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ set (row, column, value) {
+ this.rows[row].set(column, value);
+ }
- /**
- * Stores a String value in the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified
- * by either its ID or title.
- *
- * @param {Integer} row row ID
- * @param {String|Integer} column column ID (Number)
- * or title (String)
- * @param {String} value value to assign
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.set(0, 'species', 'Canis Lupus');
+ * table.set(0, 'name', 'Wolf');
+ *
+ * //print the results
+ * for (let r = 0; r < table.getRowCount(); r++)
+ * for (let c = 0; c < table.getColumnCount(); c++)
+ * print(table.getString(r, c));
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //add a row
- * let newRow = table.addRow();
- * newRow.setString('id', table.getRowCount() - 1);
- * newRow.setString('species', 'Canis Lupus');
- * newRow.setString('name', 'Wolf');
- *
- * print(table.getArray());
- *
- * describe('no image displayed');
- * }
- *
+ *
+ */
+ setNum (row, column, value) {
+ this.rows[row].setNum(column, value);
+ }
- /**
- * Retrieves a value from the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified by
- * either its ID or title.
- *
- * @param {Integer} row row ID
- * @param {String|Integer} column columnName (string) or
- * ID (number)
- * @return {String|Number}
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * table.setNum(1, 'id', 1);
+ *
+ * print(table.getColumn(0));
+ * //["0", 1, "2"]
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- get (row, column) {
- return this.rows[row].get(column);
- }
+ /**
+ * Stores a String value in the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified
+ * by either its ID or title.
+ *
+ * @param {Integer} row row ID
+ * @param {String|Integer} column column ID (Number)
+ * or title (String)
+ * @param {String} value value to assign
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * print(table.get(0, 1));
- * //Capra hircus
- * print(table.get(0, 'species'));
- * //Capra hircus
- * describe('no image displayed');
- * }
- *
- *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //add a row
+ * let newRow = table.addRow();
+ * newRow.setString('id', table.getRowCount() - 1);
+ * newRow.setString('species', 'Canis Lupus');
+ * newRow.setString('name', 'Wolf');
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
- *
- */
- getNum (row, column) {
- return this.rows[row].getNum(column);
- }
+ /**
+ * Retrieves a value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String|Number}
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * print(table.getNum(1, 0) + 100);
- * //id 1 + 100 = 101
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ get (row, column) {
+ return this.rows[row].get(column);
+ }
- /**
- * Retrieves a String value from the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified by
- * either its ID or title.
- *
- * @param {Integer} row row ID
- * @param {String|Integer} column columnName (string) or
- * ID (number)
- * @return {String}
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.get(0, 1));
+ * //Capra hircus
+ * print(table.get(0, 'species'));
+ * //Capra hircus
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
+ /**
+ * Retrieves a Float value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {Number}
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * // table is comma separated value "CSV"
- * // and has specifiying header for column labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * print(table.getString(0, 0)); // 0
- * print(table.getString(0, 1)); // Capra hircus
- * print(table.getString(0, 2)); // Goat
- * print(table.getString(1, 0)); // 1
- * print(table.getString(1, 1)); // Panthera pardus
- * print(table.getString(1, 2)); // Leopard
- * print(table.getString(2, 0)); // 2
- * print(table.getString(2, 1)); // Equus zebra
- * print(table.getString(2, 2)); // Zebra
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ getNum (row, column) {
+ return this.rows[row].getNum(column);
+ }
- getString (row, column) {
- return this.rows[row].getString(column);
- }
+ /**
+ * Retrieves a String value from the Table's specified row and column.
+ * The row is specified by its ID, while the column may be specified by
+ * either its ID or title.
+ *
+ * @param {Integer} row row ID
+ * @param {String|Integer} column columnName (string) or
+ * ID (number)
+ * @return {String}
+ *
+ * @example
+ *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getNum(1, 0) + 100);
+ * //id 1 + 100 = 101
+ * describe('no image displayed');
+ * }
+ *
+ *
+ *
+ */
+ getString (row, column) {
+ return this.rows[row].getString(column);
+ }
- /**
- * Retrieves all table data and returns as an object. If a column name is
- * passed in, each row object will be stored with that attribute as its
- * title.
- *
- * @param {String} [headerColumn] Name of the column which should be used to
- * title each row object (optional)
- * @return {Object}
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * print(table.getString(0, 0)); // 0
+ * print(table.getString(0, 1)); // Capra hircus
+ * print(table.getString(0, 2)); // Goat
+ * print(table.getString(1, 0)); // 1
+ * print(table.getString(1, 1)); // Panthera pardus
+ * print(table.getString(1, 2)); // Leopard
+ * print(table.getString(2, 0)); // 2
+ * print(table.getString(2, 1)); // Equus zebra
+ * print(table.getString(2, 2)); // Zebra
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- getObject (headerColumn) {
- const tableObject = {};
- let obj, cPos, index;
+ /**
+ * Retrieves all table data and returns as an object. If a column name is
+ * passed in, each row object will be stored with that attribute as its
+ * title.
+ *
+ * @param {String} [headerColumn] Name of the column which should be used to
+ * title each row object (optional)
+ * @return {Object}
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let tableObject = table.getObject();
- *
- * print(tableObject);
- * //outputs an object
- *
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ getObject (headerColumn) {
+ const tableObject = {};
+ let obj, cPos, index;
- for (let i = 0; i < this.rows.length; i++) {
- obj = this.rows[i].obj;
+ for (let i = 0; i < this.rows.length; i++) {
+ obj = this.rows[i].obj;
- if (typeof headerColumn === 'string') {
- cPos = this.columns.indexOf(headerColumn); // index of columnID
- if (cPos >= 0) {
- index = obj[headerColumn];
- tableObject[index] = obj;
+ if (typeof headerColumn === 'string') {
+ cPos = this.columns.indexOf(headerColumn); // index of columnID
+ if (cPos >= 0) {
+ index = obj[headerColumn];
+ tableObject[index] = obj;
+ } else {
+ throw new Error(`This table has no column named "${headerColumn}"`);
+ }
} else {
- throw new Error(`This table has no column named "${headerColumn}"`);
+ tableObject[i] = this.rows[i].obj;
}
- } else {
- tableObject[i] = this.rows[i].obj;
}
+ return tableObject;
}
- return tableObject;
- }
- /**
- * Retrieves all table data and returns it as a multidimensional array.
- *
- * @return {Array}
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableObject = table.getObject();
+ *
+ * print(tableObject);
+ * //outputs an object
+ *
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
- getArray () {
- const tableArray = [];
- for (let i = 0; i < this.rows.length; i++) {
- tableArray.push(this.rows[i].arr);
+ /**
+ * Retrieves all table data and returns it as a multidimensional array.
+ *
+ * @return {Array}
+ *
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leoperd
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * // table is comma separated value "CSV"
- * // and has specifiying header for column labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let tableArray = table.getArray();
- * for (let i = 0; i < tableArray.length; i++) {
- * print(tableArray[i]);
- * }
- * describe('no image displayed');
- * }
- *
- *
+ *
+ */
+ getArray () {
+ const tableArray = [];
+ for (let i = 0; i < this.rows.length; i++) {
+ tableArray.push(this.rows[i].arr);
+ }
+ return tableArray;
}
- return tableArray;
- }
-};
+ };
-/**
- * An array containing the names of the columns in the table, if the "header" the table is
- * loaded with the "header" parameter.
- * @type {String[]}
- * @property columns
- * @for p5.Table
- * @name columns
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leoperd
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * // table is comma separated value "CSV"
+ * // and has specifiying header for column labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let tableArray = table.getArray();
+ * for (let i = 0; i < tableArray.length; i++) {
+ * print(tableArray[i]);
+ * }
+ * describe('no image displayed');
+ * }
+ *
+ *
- *
- */
+ /**
+ * An array containing the names of the columns in the table, if the "header" the table is
+ * loaded with the "header" parameter.
+ * @type {String[]}
+ * @property columns
+ * @for p5.Table
+ * @name columns
+ * @example
+ *
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * //print the column names
- * for (let c = 0; c < table.getColumnCount(); c++) {
- * print('column ' + c + ' is named ' + table.columns[c]);
- * }
- * }
- *
- *
+ *
+ */
-/**
- * An array containing the p5.TableRow objects that make up the
- * rows of the table. The same result as calling getRows()
- * @type {p5.TableRow[]}
- * @property rows
- * @for p5.Table
- * @name rows
-*/
+ /**
+ * An array containing the p5.TableRow objects that make up the
+ * rows of the table. The same result as calling getRows()
+ * @type {p5.TableRow[]}
+ * @property rows
+ * @for p5.Table
+ * @name rows
+ */
+}
+
+export default table;
-export default p5;
+if(typeof p5 !== 'undefined'){
+ table(p5, p5.prototype);
+}
diff --git a/src/io/p5.TableRow.js b/src/io/p5.TableRow.js
index 652c8521d6..eb171e2766 100644
--- a/src/io/p5.TableRow.js
+++ b/src/io/p5.TableRow.js
@@ -4,332 +4,337 @@
* @requires core
*/
-import p5 from '../core/main';
+function tableRow(p5, fn){
+ /**
+ * A TableRow object represents a single row of data values,
+ * stored in columns, from a table.
+ *
+ * A Table Row contains both an ordered array, and an unordered
+ * JSON object.
+ *
+ * @class p5.TableRow
+ * @constructor
+ * @param {String} [str] optional: populate the row with a
+ * string of values, separated by the
+ * separator
+ * @param {String} [separator] comma separated values (csv) by default
+ */
+ p5.TableRow = class {
+ constructor(str, separator){
+ let arr = [];
+ if (str) {
+ separator = separator || ',';
+ arr = str.split(separator);
+ }
-/**
- * A TableRow object represents a single row of data values,
- * stored in columns, from a table.
- *
- * A Table Row contains both an ordered array, and an unordered
- * JSON object.
- *
- * @class p5.TableRow
- * @constructor
- * @param {String} [str] optional: populate the row with a
- * string of values, separated by the
- * separator
- * @param {String} [separator] comma separated values (csv) by default
- */
-p5.TableRow = class {
- constructor(str, separator){
- let arr = [];
- if (str) {
- separator = separator || ',';
- arr = str.split(separator);
+ this.arr = arr;
+ this.obj = Object.fromEntries(arr.entries());
+ this.table = null;
}
- this.arr = arr;
- this.obj = Object.fromEntries(arr.entries());
- this.table = null;
- }
-
- /**
- * Stores a value in the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method set
- * @param {String|Integer} column Column ID (Number)
- * or Title (String)
- * @param {String|Number} value The value to be stored
- *
- * @example
- *
+ * // Given the CSV file "mammals.csv"
+ * // in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * //print the column names
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * print('column ' + c + ' is named ' + table.columns[c]);
+ * }
+ * }
+ *
+ *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let rows = table.getRows();
- * for (let r = 0; r < rows.length; r++) {
- * rows[r].set('name', 'Unicorn');
- * }
- *
- * //print the results
- * print(table.getArray());
- *
- * describe('no image displayed');
- * }
- *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].set('name', 'Unicorn');
+ * }
+ *
+ * //print the results
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let rows = table.getRows();
- * for (let r = 0; r < rows.length; r++) {
- * rows[r].setNum('id', r + 10);
- * }
- *
- * print(table.getArray());
- *
- * describe('no image displayed');
- * }
- *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let rows = table.getRows();
- * for (let r = 0; r < rows.length; r++) {
- * let name = rows[r].getString('name');
- * rows[r].setString('name', 'A ' + name + ' named George');
- * }
- *
- * print(table.getArray());
- *
- * describe('no image displayed');
- * }
- *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * rows[r].setNum('id', r + 10);
+ * }
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let names = [];
- * let rows = table.getRows();
- * for (let r = 0; r < rows.length; r++) {
- * names.push(rows[r].get('name'));
- * }
- *
- * print(names);
- *
- * describe('no image displayed');
- * }
- *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * let name = rows[r].getString('name');
+ * rows[r].setString('name', 'A ' + name + ' named George');
+ * }
+ *
+ * print(table.getArray());
+ *
+ * describe('no image displayed');
+ * }
+ *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let rows = table.getRows();
- * let minId = Infinity;
- * let maxId = -Infinity;
- * for (let r = 0; r < rows.length; r++) {
- * let id = rows[r].getNum('id');
- * minId = min(minId, id);
- * maxId = min(maxId, id);
- * }
- * print('minimum id = ' + minId + ', maximum id = ' + maxId);
- * describe('no image displayed');
- * }
- *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let names = [];
+ * let rows = table.getRows();
+ * for (let r = 0; r < rows.length; r++) {
+ * names.push(rows[r].get('name'));
+ * }
+ *
+ * print(names);
+ *
+ * describe('no image displayed');
+ * }
+ *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let minId = Infinity;
+ * let maxId = -Infinity;
+ * for (let r = 0; r < rows.length; r++) {
+ * let id = rows[r].getNum('id');
+ * minId = min(minId, id);
+ * maxId = min(maxId, id);
+ * }
+ * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * describe('no image displayed');
+ * }
+ *
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * let table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable('assets/mammals.csv', 'csv', 'header');
- * }
- *
- * function setup() {
- * let rows = table.getRows();
- * let longest = '';
- * for (let r = 0; r < rows.length; r++) {
- * let species = rows[r].getString('species');
- * if (longest.length < species.length) {
- * longest = species;
- * }
- * }
- *
- * print('longest: ' + longest);
- *
- * describe('no image displayed');
- * }
- *
+ * // Given the CSV file "mammals.csv" in the project's "assets" folder:
+ * //
+ * // id,species,name
+ * // 0,Capra hircus,Goat
+ * // 1,Panthera pardus,Leopard
+ * // 2,Equus zebra,Zebra
+ *
+ * let table;
+ *
+ * function preload() {
+ * //my table is comma separated value "csv"
+ * //and has a header specifying the columns labels
+ * table = loadTable('assets/mammals.csv', 'csv', 'header');
+ * }
+ *
+ * function setup() {
+ * let rows = table.getRows();
+ * let longest = '';
+ * for (let r = 0; r < rows.length; r++) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
+ * longest = species;
+ * }
+ * }
+ *
+ * print('longest: ' + longest);
+ *
+ * describe('no image displayed');
+ * }
+ *
- *
- */
-p5.XML = class {
- constructor(DOM){
- if (!DOM) {
- const xmlDoc = document.implementation.createDocument(null, 'doc');
- this.DOM = xmlDoc.createElement('root');
- } else {
- this.DOM = DOM;
+function xml(p5, fn){
+ /**
+ * A class to describe an XML object.
+ *
+ * Each `p5.XML` object provides an easy way to interact with XML data.
+ * Extensible Markup Language
+ * (XML)
+ * is a standard format for sending data between applications. Like HTML, the
+ * XML format is based on tags and attributes, as in
+ * `<time units="s">1234</time>`.
+ *
+ * Note: Use loadXML() to load external XML files.
+ *
+ * @class p5.XML
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get an array with all mammal tags.
- * let mammals = myXML.getChildren('mammal');
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the mammals array.
- * for (let i = 0; i < mammals.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Get the mammal's common name.
- * let name = mammals[i].getContent();
- *
- * // Display the mammal's name.
- * text(name, 20, y);
- * }
- *
- * describe(
- * 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ */
+ p5.XML = class {
+ constructor(DOM){
+ if (!DOM) {
+ const xmlDoc = document.implementation.createDocument(null, 'doc');
+ this.DOM = xmlDoc.createElement('root');
+ } else {
+ this.DOM = DOM;
+ }
}
- }
- /**
- * Returns the element's parent element as a new p5.XML
- * object.
- *
- * @return {p5.XML} parent element.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal tags.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the mammals array.
+ * for (let i = 0; i < mammals.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the mammal's common name.
+ * let name = mammals[i].getContent();
+ *
+ * // Display the mammal's name.
+ * text(name, 20, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- */
- getParent() {
- return new p5.XML(this.DOM.parentElement);
- }
+ /**
+ * Returns the element's parent element as a new p5.XML
+ * object.
+ *
+ * @return {p5.XML} parent element.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get an array with all mammal elements.
- * let mammals = myXML.getChildren('mammal');
- *
- * // Get the first mammal element.
- * let firstMammal = mammals[0];
- *
- * // Get the parent element.
- * let parent = firstMammal.getParent();
- *
- * // Get the parent element's name.
- * let name = parent.getName();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the parent element's name.
- * text(name, 50, 50);
- *
- * describe('The word "animals" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ getParent() {
+ return new p5.XML(this.DOM.parentElement);
+ }
- /**
- * Returns the element's name as a `String`.
- *
- * An XML element's name is given by its tag. For example, the element
- * `<language>JavaScript</language>` has the name `language`.
- *
- * @return {String} name of the element.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal elements.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Get the first mammal element.
+ * let firstMammal = mammals[0];
+ *
+ * // Get the parent element.
+ * let parent = firstMammal.getParent();
+ *
+ * // Get the parent element's name.
+ * let name = parent.getName();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the parent element's name.
+ * text(name, 50, 50);
+ *
+ * describe('The word "animals" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- getName() {
- return this.DOM.tagName;
- }
+ /**
+ * Returns the element's name as a `String`.
+ *
+ * An XML element's name is given by its tag. For example, the element
+ * `<language>JavaScript</language>` has the name `language`.
+ *
+ * @return {String} name of the element.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get an array with all mammal elements.
- * let mammals = myXML.getChildren('mammal');
- *
- * // Get the first mammal element.
- * let firstMammal = mammals[0];
- *
- * // Get the mammal element's name.
- * let name = firstMammal.getName();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's name.
- * text(name, 50, 50);
- *
- * describe('The word "mammal" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ getName() {
+ return this.DOM.tagName;
+ }
- /**
- * Sets the element's tag name.
- *
- * An XML element's name is given by its tag. For example, the element
- * `<language>JavaScript</language>` has the name `language`.
- *
- * The parameter, `name`, is the element's new name as a string. For example,
- * calling `myXML.setName('planet')` will make the element's new tag name
- * `<planet></planet>`.
- *
- * @param {String} name new tag name of the element.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array with all mammal elements.
+ * let mammals = myXML.getChildren('mammal');
+ *
+ * // Get the first mammal element.
+ * let firstMammal = mammals[0];
+ *
+ * // Get the mammal element's name.
+ * let name = firstMammal.getName();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's name.
+ * text(name, 50, 50);
+ *
+ * describe('The word "mammal" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- setName(name) {
- const content = this.DOM.innerHTML;
- const attributes = this.DOM.attributes;
- const xmlDoc = document.implementation.createDocument(null, 'default');
- const newDOM = xmlDoc.createElement(name);
- newDOM.innerHTML = content;
- for (let i = 0; i < attributes.length; i++) {
- newDOM.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
+ /**
+ * Sets the element's tag name.
+ *
+ * An XML element's name is given by its tag. For example, the element
+ * `<language>JavaScript</language>` has the name `language`.
+ *
+ * The parameter, `name`, is the element's new name as a string. For example,
+ * calling `myXML.setName('planet')` will make the element's new tag name
+ * `<planet></planet>`.
+ *
+ * @param {String} name new tag name of the element.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the element's original name.
- * let oldName = myXML.getName();
- *
- * // Set the element's name.
- * myXML.setName('monsters');
- *
- * // Get the element's new name.
- * let newName = myXML.getName();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's names.
- * text(oldName, 50, 33);
- * text(newName, 50, 67);
- *
- * describe(
- * 'The words "animals" and "monsters" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
+ *
+ */
+ setName(name) {
+ const content = this.DOM.innerHTML;
+ const attributes = this.DOM.attributes;
+ const xmlDoc = document.implementation.createDocument(null, 'default');
+ const newDOM = xmlDoc.createElement(name);
+ newDOM.innerHTML = content;
+ for (let i = 0; i < attributes.length; i++) {
+ newDOM.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
+ }
+ this.DOM = newDOM;
}
- this.DOM = newDOM;
- }
- /**
- * Returns `true` if the element has child elements and `false` if not.
- *
- * @return {boolean} whether the element has children.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the element's original name.
+ * let oldName = myXML.getName();
+ *
+ * // Set the element's name.
+ * myXML.setName('monsters');
+ *
+ * // Get the element's new name.
+ * let newName = myXML.getName();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's names.
+ * text(oldName, 50, 33);
+ * text(newName, 50, 67);
+ *
+ * describe(
+ * 'The words "animals" and "monsters" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
- *
- */
- hasChildren() {
- return this.DOM.children.length > 0;
- }
+ /**
+ * Returns `true` if the element has child elements and `false` if not.
+ *
+ * @return {boolean} whether the element has children.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Check whether the element has child elements.
- * let isParent = myXML.hasChildren();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Style the text.
- * if (isParent === true) {
- * text('Parent', 50, 50);
- * } else {
- * text('Not Parent', 50, 50);
- * }
- *
- * describe('The word "Parent" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ hasChildren() {
+ return this.DOM.children.length > 0;
+ }
- /**
- * Returns an array with the names of the element's child elements as
- * `String`s.
- *
- * @return {String[]} names of the child elements.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Check whether the element has child elements.
+ * let isParent = myXML.hasChildren();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Style the text.
+ * if (isParent === true) {
+ * text('Parent', 50, 50);
+ * } else {
+ * text('Not Parent', 50, 50);
+ * }
+ *
+ * describe('The word "Parent" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- listChildren() {
- const arr = [];
- for (let i = 0; i < this.DOM.childNodes.length; i++) {
- arr.push(this.DOM.childNodes[i].nodeName);
+ /**
+ * Returns an array with the names of the element's child elements as
+ * `String`s.
+ *
+ * @return {String[]} names of the child elements.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the names of the element's children as an array.
- * let children = myXML.listChildren();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < children.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Display the child element's name.
- * text(children[i], 10, y);
- * }
- *
- * describe(
- * 'The words "mammal", "mammal", "mammal", and "reptile" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ */
+ listChildren() {
+ const arr = [];
+ for (let i = 0; i < this.DOM.childNodes.length; i++) {
+ arr.push(this.DOM.childNodes[i].nodeName);
+ }
+ return arr;
}
- return arr;
- }
- /**
- * Returns an array with the element's child elements as new
- * p5.XML objects.
- *
- * The parameter, `name`, is optional. If a string is passed, as in
- * `myXML.getChildren('cat')`, then the method will only return child elements
- * with the tag `<cat>`.
- *
- * @param {String} [name] name of the elements to return.
- * @return {p5.XML[]} child elements.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the names of the element's children as an array.
+ * let children = myXML.listChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the child element's name.
+ * text(children[i], 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "mammal", "mammal", "mammal", and "reptile" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get an array of the child elements.
- * let children = myXML.getChildren();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < children.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 20;
- *
- * // Get the child element's content.
- * let content = children[i].getContent();
- *
- * // Display the child element's content.
- * text(content, 10, y);
- * }
- *
- * describe(
- * 'The words "Goat", "Leopard", "Zebra", and "Turtle" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
- *
- */
- getChildren(param) {
- if (param) {
- return elementsToP5XML(this.DOM.getElementsByTagName(param));
- } else {
- return elementsToP5XML(this.DOM.children);
+ /**
+ * Returns an array with the element's child elements as new
+ * p5.XML objects.
+ *
+ * The parameter, `name`, is optional. If a string is passed, as in
+ * `myXML.getChildren('cat')`, then the method will only return child elements
+ * with the tag `<cat>`.
+ *
+ * @param {String} [name] name of the elements to return.
+ * @return {p5.XML[]} child elements.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get an array of the child elements
- * // that are mammals.
- * let children = myXML.getChildren('mammal');
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < children.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 20;
- *
- * // Get the child element's content.
- * let content = children[i].getContent();
- *
- * // Display the child element's content.
- * text(content, 10, y);
- * }
- *
- * describe(
- * 'The words "Goat", "Leopard", and "Zebra" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array of the child elements.
+ * let children = myXML.getChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", "Zebra", and "Turtle" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ getChildren(param) {
+ if (param) {
+ return elementsToP5XML(this.DOM.getElementsByTagName(param));
+ } else {
+ return elementsToP5XML(this.DOM.children);
+ }
}
- }
- /**
- * Returns the first matching child element as a new
- * p5.XML object.
- *
- * The parameter, `name`, is optional. If a string is passed, as in
- * `myXML.getChild('cat')`, then the first child element with the tag
- * `<cat>` will be returned. If a number is passed, as in
- * `myXML.getChild(1)`, then the child element at that index will be returned.
- *
- * @param {String|Integer} name element name or index.
- * @return {p5.XML} child element.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get an array of the child elements
+ * // that are mammals.
+ * let children = myXML.getChildren('mammal');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Zebra" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first child element that is a mammal.
- * let goat = myXML.getChild('mammal');
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Get the child element's content.
- * let content = goat.getContent();
- *
- * // Display the child element's content.
- * text(content, 50, 50);
- *
- * describe('The word "Goat" written in black on a gray background.');
- * }
- *
- *
- *
- */
- getChild(param) {
- if (typeof param === 'string') {
- for (const child of this.DOM.children) {
- if (child.tagName === param) return new p5.XML(child);
+ /**
+ * Returns the first matching child element as a new
+ * p5.XML object.
+ *
+ * The parameter, `name`, is optional. If a string is passed, as in
+ * `myXML.getChild('cat')`, then the first child element with the tag
+ * `<cat>` will be returned. If a number is passed, as in
+ * `myXML.getChild(1)`, then the child element at that index will be returned.
+ *
+ * @param {String|Integer} name element name or index.
+ * @return {p5.XML} child element.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the child element at index 1.
- * let leopard = myXML.getChild(1);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Get the child element's content.
- * let content = leopard.getContent();
- *
- * // Display the child element's content.
- * text(content, 50, 50);
- *
- * describe('The word "Leopard" written in black on a gray background.');
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first child element that is a mammal.
+ * let goat = myXML.getChild('mammal');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Get the child element's content.
+ * let content = goat.getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 50, 50);
+ *
+ * describe('The word "Goat" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ getChild(param) {
+ if (typeof param === 'string') {
+ for (const child of this.DOM.children) {
+ if (child.tagName === param) return new p5.XML(child);
+ }
+ } else {
+ return new p5.XML(this.DOM.children[param]);
}
- } else {
- return new p5.XML(this.DOM.children[param]);
}
- }
- /**
- * Adds a new child element and returns a reference to it.
- *
- * The parameter, `child`, is the p5.XML object to add
- * as a child element. For example, calling `myXML.addChild(otherXML)` inserts
- * `otherXML` as a child element of `myXML`.
- *
- * @param {p5.XML} child child element to add.
- * @return {p5.XML} added child element.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the child element at index 1.
+ * let leopard = myXML.getChild(1);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Get the child element's content.
+ * let content = leopard.getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 50, 50);
+ *
+ * describe('The word "Leopard" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- addChild(node) {
- if (node instanceof p5.XML) {
- this.DOM.appendChild(node.DOM);
- } else {
- // PEND
+ /**
+ * Adds a new child element and returns a reference to it.
+ *
+ * The parameter, `child`, is the p5.XML object to add
+ * as a child element. For example, calling `myXML.addChild(otherXML)` inserts
+ * `otherXML` as a child element of `myXML`.
+ *
+ * @param {p5.XML} child child element to add.
+ * @return {p5.XML} added child element.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a new p5.XML object.
- * let newAnimal = new p5.XML();
- *
- * // Set its properties.
- * newAnimal.setName('hydrozoa');
- * newAnimal.setAttribute('id', 4);
- * newAnimal.setAttribute('species', 'Physalia physalis');
- * newAnimal.setContent('Bluebottle');
- *
- * // Add the child element.
- * myXML.addChild(newAnimal);
- *
- * // Get the first child element that is a hydrozoa.
- * let blueBottle = myXML.getChild('hydrozoa');
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Get the child element's content.
- * let content = blueBottle.getContent();
- *
- * // Display the child element's content.
- * text(content, 50, 50);
- *
- * describe('The word "Bluebottle" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ addChild(node) {
+ if (node instanceof p5.XML) {
+ this.DOM.appendChild(node.DOM);
+ } else {
+ // PEND
+ }
}
- }
- /**
- * Removes the first matching child element.
- *
- * The parameter, `name`, is the child element to remove. If a string is
- * passed, as in `myXML.removeChild('cat')`, then the first child element
- * with the tag `<cat>` will be removed. If a number is passed, as in
- * `myXML.removeChild(1)`, then the child element at that index will be
- * removed.
- *
- * @param {String|Integer} name name or index of the child element to remove.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a new p5.XML object.
+ * let newAnimal = new p5.XML();
+ *
+ * // Set its properties.
+ * newAnimal.setName('hydrozoa');
+ * newAnimal.setAttribute('id', 4);
+ * newAnimal.setAttribute('species', 'Physalia physalis');
+ * newAnimal.setContent('Bluebottle');
+ *
+ * // Add the child element.
+ * myXML.addChild(newAnimal);
+ *
+ * // Get the first child element that is a hydrozoa.
+ * let blueBottle = myXML.getChild('hydrozoa');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Get the child element's content.
+ * let content = blueBottle.getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 50, 50);
+ *
+ * describe('The word "Bluebottle" written in black on a gray background.');
+ * }
+ *
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Remove the first mammal element.
- * myXML.removeChild('mammal');
- *
- * // Get an array of child elements.
- * let children = myXML.getChildren();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < children.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Get the child element's content.
- * let content = children[i].getContent();
- *
- * // Display the child element's content.
- * text(content, 10, y);
- * }
- *
- * describe(
- * 'The words "Leopard", "Zebra", and "Turtle" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
- *
- */
- removeChild(param) {
- let ind = -1;
- if (typeof param === 'string') {
- for (let i = 0; i < this.DOM.children.length; i++) {
- if (this.DOM.children[i].tagName === param) {
- ind = i;
- break;
+ /**
+ * Removes the first matching child element.
+ *
+ * The parameter, `name`, is the child element to remove. If a string is
+ * passed, as in `myXML.removeChild('cat')`, then the first child element
+ * with the tag `<cat>` will be removed. If a number is passed, as in
+ * `myXML.removeChild(1)`, then the child element at that index will be
+ * removed.
+ *
+ * @param {String|Integer} name name or index of the child element to remove.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Remove the element at index 2.
- * myXML.removeChild(2);
- *
- * // Get an array of child elements.
- * let children = myXML.getChildren();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < children.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Get the child element's content.
- * let content = children[i].getContent();
- *
- * // Display the child element's content.
- * text(content, 10, y);
- * }
- *
- * describe(
- * 'The words "Goat", "Leopard", and "Turtle" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Remove the first mammal element.
+ * myXML.removeChild('mammal');
+ *
+ * // Get an array of child elements.
+ * let children = myXML.getChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Leopard", "Zebra", and "Turtle" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ removeChild(param) {
+ let ind = -1;
+ if (typeof param === 'string') {
+ for (let i = 0; i < this.DOM.children.length; i++) {
+ if (this.DOM.children[i].tagName === param) {
+ ind = i;
+ break;
+ }
}
+ } else {
+ ind = param;
+ }
+ if (ind !== -1) {
+ this.DOM.removeChild(this.DOM.children[ind]);
}
- } else {
- ind = param;
}
- if (ind !== -1) {
- this.DOM.removeChild(this.DOM.children[ind]);
+
+ /**
+ * Returns the number of attributes the element has.
+ *
+ * @return {Integer} number of attributes.
+ *
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Remove the element at index 2.
+ * myXML.removeChild(2);
+ *
+ * // Get an array of child elements.
+ * let children = myXML.getChildren();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < children.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Get the child element's content.
+ * let content = children[i].getContent();
+ *
+ * // Display the child element's content.
+ * text(content, 10, y);
+ * }
+ *
+ * describe(
+ * 'The words "Goat", "Leopard", and "Turtle" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ getAttributeCount() {
+ return this.DOM.attributes.length;
}
- }
- /**
- * Returns the number of attributes the element has.
- *
- * @return {Integer} number of attributes.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first child element.
+ * let first = myXML.getChild(0);
+ *
+ * // Get the number of attributes.
+ * let numAttributes = first.getAttributeCount();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the number of attributes.
+ * text(numAttributes, 50, 50);
+ *
+ * describe('The number "2" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- getAttributeCount() {
- return this.DOM.attributes.length;
- }
+ /**
+ * Returns an `Array` with the names of the element's attributes.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @return {String[]} attribute names.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first child element.
- * let first = myXML.getChild(0);
- *
- * // Get the number of attributes.
- * let numAttributes = first.getAttributeCount();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the number of attributes.
- * text(numAttributes, 50, 50);
- *
- * describe('The number "2" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ listAttributes() {
+ const arr = [];
- /**
- * Returns an `Array` with the names of the element's attributes.
- *
- * Note: Use
- * myXML.getString() or
- * myXML.getNum() to return an attribute's value.
- *
- * @return {String[]} attribute names.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first child element.
+ * let first = myXML.getChild(0);
+ *
+ * // Get the number of attributes.
+ * let attributes = first.listAttributes();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's attributes.
+ * text(attributes, 50, 50);
+ *
+ * describe('The text "id,species" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- listAttributes() {
- const arr = [];
+ for (const attribute of this.DOM.attributes) {
+ arr.push(attribute.nodeName);
+ }
- for (const attribute of this.DOM.attributes) {
- arr.push(attribute.nodeName);
+ return arr;
}
- return arr;
- }
+ /**
+ * Returns `true` if the element has a given attribute and `false` if not.
+ *
+ * The parameter, `name`, is a string with the name of the attribute being
+ * checked.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @param {String} name name of the attribute to be checked.
+ * @return {boolean} whether the element has the attribute.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first child element.
- * let first = myXML.getChild(0);
- *
- * // Get the number of attributes.
- * let attributes = first.listAttributes();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's attributes.
- * text(attributes, 50, 50);
- *
- * describe('The text "id,species" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ hasAttribute(name) {
+ const obj = {};
- /**
- * Returns `true` if the element has a given attribute and `false` if not.
- *
- * The parameter, `name`, is a string with the name of the attribute being
- * checked.
- *
- * Note: Use
- * myXML.getString() or
- * myXML.getNum() to return an attribute's value.
- *
- * @param {String} name name of the attribute to be checked.
- * @return {boolean} whether the element has the attribute.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first mammal child element.
+ * let mammal = myXML.getChild('mammal');
+ *
+ * // Check whether the element has an
+ * // species attribute.
+ * let hasSpecies = mammal.hasAttribute('species');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display whether the element has a species attribute.
+ * if (hasSpecies === true) {
+ * text('Species', 50, 50);
+ * } else {
+ * text('No species', 50, 50);
+ * }
+ *
+ * describe('The text "Species" written in black on a gray background.');
+ * }
+ *
+ *
- *
- */
- hasAttribute(name) {
- const obj = {};
+ for (const attribute of this.DOM.attributes) {
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
- for (const attribute of this.DOM.attributes) {
- obj[attribute.nodeName] = attribute.nodeValue;
+ return obj[name] ? true : false;
}
- return obj[name] ? true : false;
- }
+ /**
+ * Return an attribute's value as a `Number`.
+ *
+ * The first parameter, `name`, is a string with the name of the attribute
+ * being checked. For example, calling `myXML.getNum('id')` returns the
+ * element's `id` attribute as a number.
+ *
+ * The second parameter, `defaultValue`, is optional. If a number is passed,
+ * as in `myXML.getNum('id', -1)`, it will be returned if the attribute
+ * doesn't exist or can't be converted to a number.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @param {String} name name of the attribute to be checked.
+ * @param {Number} [defaultValue] value to return if the attribute doesn't exist.
+ * @return {Number} attribute value as a number.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first mammal child element.
- * let mammal = myXML.getChild('mammal');
- *
- * // Check whether the element has an
- * // species attribute.
- * let hasSpecies = mammal.hasAttribute('species');
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display whether the element has a species attribute.
- * if (hasSpecies === true) {
- * text('Species', 50, 50);
- * } else {
- * text('No species', 50, 50);
- * }
- *
- * describe('The text "Species" written in black on a gray background.');
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's ID.
+ * let id = reptile.getNum('id');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the ID attribute.
+ * text(`${content} is ${id + 1}th`, 5, 50, 90);
+ *
+ * describe(`The text "${content} is ${id + 1}th" written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ getNum(name, defaultValue) {
+ const obj = {};
- /**
- * Return an attribute's value as a `Number`.
- *
- * The first parameter, `name`, is a string with the name of the attribute
- * being checked. For example, calling `myXML.getNum('id')` returns the
- * element's `id` attribute as a number.
- *
- * The second parameter, `defaultValue`, is optional. If a number is passed,
- * as in `myXML.getNum('id', -1)`, it will be returned if the attribute
- * doesn't exist or can't be converted to a number.
- *
- * Note: Use
- * myXML.getString() or
- * myXML.getNum() to return an attribute's value.
- *
- * @param {String} name name of the attribute to be checked.
- * @param {Number} [defaultValue] value to return if the attribute doesn't exist.
- * @return {Number} attribute value as a number.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's size.
+ * let weight = reptile.getNum('weight', 135);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the ID attribute.
+ * text(`${content} is ${weight}kg`, 5, 50, 90);
+ *
+ * describe(
+ * `The text "${content} is ${weight}kg" written in black on a gray background.`
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Get the reptile's content.
- * let content = reptile.getContent();
- *
- * // Get the reptile's ID.
- * let id = reptile.getNum('id');
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the ID attribute.
- * text(`${content} is ${id + 1}th`, 5, 50, 90);
- *
- * describe(`The text "${content} is ${id + 1}th" written in black on a gray background.`);
- * }
- *
- *
- *
- */
- getNum(name, defaultValue) {
- const obj = {};
+ for (const attribute of this.DOM.attributes) {
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
- for (const attribute of this.DOM.attributes) {
- obj[attribute.nodeName] = attribute.nodeValue;
+ return Number(obj[name]) || defaultValue || 0;
}
- return Number(obj[name]) || defaultValue || 0;
- }
+ /**
+ * Return an attribute's value as a string.
+ *
+ * The first parameter, `name`, is a string with the name of the attribute
+ * being checked. For example, calling `myXML.getString('color')` returns the
+ * element's `id` attribute as a string.
+ *
+ * The second parameter, `defaultValue`, is optional. If a string is passed,
+ * as in `myXML.getString('color', 'deeppink')`, it will be returned if the
+ * attribute doesn't exist.
+ *
+ * Note: Use
+ * myXML.getString() or
+ * myXML.getNum() to return an attribute's value.
+ *
+ * @param {String} name name of the attribute to be checked.
+ * @param {Number} [defaultValue] value to return if the attribute doesn't exist.
+ * @return {String} attribute value as a string.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Get the reptile's content.
- * let content = reptile.getContent();
- *
- * // Get the reptile's size.
- * let weight = reptile.getNum('weight', 135);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the ID attribute.
- * text(`${content} is ${weight}kg`, 5, 50, 90);
- *
- * describe(
- * `The text "${content} is ${weight}kg" written in black on a gray background.`
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's species.
+ * let species = reptile.getString('species');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the species attribute.
+ * text(`${content}: ${species}`, 5, 50, 90);
+ *
+ * describe(`The text "${content}: ${species}" written in black on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ getString(name, defaultValue) {
+ const obj = {};
- /**
- * Return an attribute's value as a string.
- *
- * The first parameter, `name`, is a string with the name of the attribute
- * being checked. For example, calling `myXML.getString('color')` returns the
- * element's `id` attribute as a string.
- *
- * The second parameter, `defaultValue`, is optional. If a string is passed,
- * as in `myXML.getString('color', 'deeppink')`, it will be returned if the
- * attribute doesn't exist.
- *
- * Note: Use
- * myXML.getString() or
- * myXML.getNum() to return an attribute's value.
- *
- * @param {String} name name of the attribute to be checked.
- * @param {Number} [defaultValue] value to return if the attribute doesn't exist.
- * @return {String} attribute value as a string.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's color.
+ * let attribute = reptile.getString('color', 'green');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ * fill(attribute);
+ *
+ * // Display the element's content.
+ * text(content, 50, 50);
+ *
+ * describe(`The text "${content}" written in green on a gray background.`);
+ * }
+ *
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Get the reptile's content.
- * let content = reptile.getContent();
- *
- * // Get the reptile's species.
- * let species = reptile.getString('species');
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the species attribute.
- * text(`${content}: ${species}`, 5, 50, 90);
- *
- * describe(`The text "${content}: ${species}" written in black on a gray background.`);
- * }
- *
- *
- *
- */
- getString(name, defaultValue) {
- const obj = {};
+ for (const attribute of this.DOM.attributes) {
+ obj[attribute.nodeName] = attribute.nodeValue;
+ }
- for (const attribute of this.DOM.attributes) {
- obj[attribute.nodeName] = attribute.nodeValue;
+ return obj[name] ? String(obj[name]) : defaultValue || null;
}
- return obj[name] ? String(obj[name]) : defaultValue || null;
- }
-
- /**
- * Sets an attribute to a given value.
- *
- * The first parameter, `name`, is a string with the name of the attribute
- * being set.
- *
- * The second parameter, `value`, is the attribute's new value. For example,
- * calling `myXML.setAttribute('id', 123)` sets the `id` attribute to the
- * value 123.
- *
- * @param {String} name name of the attribute to be set.
- * @param {Number|String|Boolean} value attribute's new value.
- *
- * @example
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Get the reptile's content.
- * let content = reptile.getContent();
- *
- * // Get the reptile's color.
- * let attribute = reptile.getString('color', 'green');
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- * fill(attribute);
- *
- * // Display the element's content.
- * text(content, 50, 50);
- *
- * describe(`The text "${content}" written in green on a gray background.`);
- * }
- *
- *
- *
- */
- setAttribute(name, value) {
- this.DOM.setAttribute(name, value);
- }
+ /**
+ * Sets an attribute to a given value.
+ *
+ * The first parameter, `name`, is a string with the name of the attribute
+ * being set.
+ *
+ * The second parameter, `value`, is the attribute's new value. For example,
+ * calling `myXML.setAttribute('id', 123)` sets the `id` attribute to the
+ * value 123.
+ *
+ * @param {String} name name of the attribute to be set.
+ * @param {Number|String|Boolean} value attribute's new value.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Set the reptile's color.
- * reptile.setAttribute('color', 'green');
- *
- * // Get the reptile's content.
- * let content = reptile.getContent();
- *
- * // Get the reptile's color.
- * let attribute = reptile.getString('color');
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's content.
- * text(`${content} is ${attribute}`, 5, 50, 90);
- *
- * describe(
- * `The text "${content} is ${attribute}" written in green on a gray background.`
- * );
- * }
- *
- *
+ *
+ */
+ setAttribute(name, value) {
+ this.DOM.setAttribute(name, value);
+ }
- /**
- * Returns the element's content as a `String`.
- *
- * The parameter, `defaultValue`, is optional. If a string is passed, as in
- * `myXML.getContent('???')`, it will be returned if the element has no
- * content.
- *
- * @param {String} [defaultValue] value to return if the element has no
- * content.
- * @return {String} element's content as a string.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Set the reptile's color.
+ * reptile.setAttribute('color', 'green');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Get the reptile's color.
+ * let attribute = reptile.getString('color');
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's content.
+ * text(`${content} is ${attribute}`, 5, 50, 90);
+ *
+ * describe(
+ * `The text "${content} is ${attribute}" written in green on a gray background.`
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Get the reptile's content.
- * let content = reptile.getContent();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's content.
- * text(content, 5, 50, 90);
- *
- * describe(`The text "${content}" written in green on a gray background.`);
- * }
- *
- *
- *
- */
- getContent(defaultValue) {
- let str;
- str = this.DOM.textContent;
- str = str.replace(/\s\s+/g, ',');
- return str || defaultValue || null;
- }
+ /**
+ * Returns the element's content as a `String`.
+ *
+ * The parameter, `defaultValue`, is optional. If a string is passed, as in
+ * `myXML.getContent('???')`, it will be returned if the element has no
+ * content.
+ *
+ * @param {String} [defaultValue] value to return if the element has no
+ * content.
+ * @return {String} element's content as a string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a p5.XML object.
- * let blankSpace = new p5.XML();
- *
- * // Get the element's content and use a default value.
- * let content = blankSpace.getContent('Your name');
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's content.
- * text(content, 5, 50, 90);
- *
- * describe(`The text "${content}" written in green on a gray background.`);
- * }
- *
- *
+ *
+ *
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's content.
+ * let content = reptile.getContent();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's content.
+ * text(content, 5, 50, 90);
+ *
+ * describe(`The text "${content}" written in green on a gray background.`);
+ * }
+ *
+ *
+ *
+ */
+ getContent(defaultValue) {
+ let str;
+ str = this.DOM.textContent;
+ str = str.replace(/\s\s+/g, ',');
+ return str || defaultValue || null;
+ }
- /**
- * Sets the element's content.
- *
- * An element's content is the text between its tags. For example, the element
- * `<language>JavaScript</language>` has the content `JavaScript`.
- *
- * The parameter, `content`, is a string with the element's new content.
- *
- * @method setContent
- * @param {String} content new content for the element.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a p5.XML object.
+ * let blankSpace = new p5.XML();
+ *
+ * // Get the element's content and use a default value.
+ * let content = blankSpace.getContent('Your name');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's content.
+ * text(content, 5, 50, 90);
+ *
+ * describe(`The text "${content}" written in green on a gray background.`);
+ * }
+ *
+ *
- *
- */
- setContent(content) {
- if (!this.DOM.children.length) {
- this.DOM.textContent = content;
+ /**
+ * Sets the element's content.
+ *
+ * An element's content is the text between its tags. For example, the element
+ * `<language>JavaScript</language>` has the content `JavaScript`.
+ *
+ * The parameter, `content`, is a string with the element's new content.
+ *
+ * @method setContent
+ * @param {String} content new content for the element.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the first reptile child element.
- * let reptile = myXML.getChild('reptile');
- *
- * // Get the reptile's original content.
- * let oldContent = reptile.getContent();
- *
- * // Set the reptile's content.
- * reptile.setContent('Loggerhead');
- *
- * // Get the reptile's new content.
- * let newContent = reptile.getContent();
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(14);
- *
- * // Display the element's old and new content.
- * text(`${oldContent}: ${newContent}`, 5, 50, 90);
- *
- * describe(
- * `The text "${oldContent}: ${newContent}" written in green on a gray background.`
- * );
- * }
- *
- *
+ *
+ */
+ setContent(content) {
+ if (!this.DOM.children.length) {
+ this.DOM.textContent = content;
+ }
}
- }
- /**
- * Returns the element as a `String`.
- *
- * `myXML.serialize()` is useful for sending the element over the network or
- * saving it to a file.
- *
- * @return {String} element as a string.
- *
- * @example
- *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the first reptile child element.
+ * let reptile = myXML.getChild('reptile');
+ *
+ * // Get the reptile's original content.
+ * let oldContent = reptile.getContent();
+ *
+ * // Set the reptile's content.
+ * reptile.setContent('Loggerhead');
+ *
+ * // Get the reptile's new content.
+ * let newContent = reptile.getContent();
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(14);
+ *
+ * // Display the element's old and new content.
+ * text(`${oldContent}: ${newContent}`, 5, 50, 90);
+ *
+ * describe(
+ * `The text "${oldContent}: ${newContent}" written in green on a gray background.`
+ * );
+ * }
+ *
+ *
- *
- */
- serialize() {
- const xmlSerializer = new XMLSerializer();
- return xmlSerializer.serializeToString(this.DOM);
- }
-};
+ /**
+ * Returns the element as a `String`.
+ *
+ * `myXML.serialize()` is useful for sending the element over the network or
+ * saving it to a file.
+ *
+ * @return {String} element as a string.
+ *
+ * @example
+ *
- * let myXML;
- *
- * // Load the XML and create a p5.XML object.
- * function preload() {
- * myXML = loadXML('assets/animals.xml');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Display instructions.
- * text('Double-click to save', 5, 50, 90);
- *
- * describe('The text "Double-click to save" written in black on a gray background.');
- * }
- *
- * // Save the file when the user double-clicks.
- * function doubleClicked() {
- * // Create a p5.PrintWriter object.
- * // Use the file format .xml.
- * let myWriter = createWriter('animals', 'xml');
- *
- * // Serialize the XML data to a string.
- * let data = myXML.serialize();
- *
- * // Write the data to the print stream.
- * myWriter.write(data);
- *
- * // Save the file and close the print stream.
- * myWriter.close();
- * }
- *
- *
+ *
+ */
+ serialize() {
+ const xmlSerializer = new XMLSerializer();
+ return xmlSerializer.serializeToString(this.DOM);
+ }
+ };
-function elementsToP5XML(elements) {
- const arr = [];
- for (let i = 0; i < elements.length; i++) {
- arr.push(new p5.XML(elements[i]));
+ function elementsToP5XML(elements) {
+ const arr = [];
+ for (let i = 0; i < elements.length; i++) {
+ arr.push(new p5.XML(elements[i]));
+ }
+ return arr;
}
- return arr;
}
-export default p5;
+export default xml;
+
+if(typeof p5 !== 'undefined'){
+ xml(p5, p5.prototype);
+}
diff --git a/src/utilities/array_functions.js b/src/utilities/array_functions.js
index 3a701d7d1b..378810c715 100644
--- a/src/utilities/array_functions.js
+++ b/src/utilities/array_functions.js
@@ -5,413 +5,417 @@
* @requires core
*/
-import p5 from '../core/main';
+function arrayFunctions(p5, fn){
+ /**
+ * Adds a value to the end of an array. Extends the length of
+ * the array by one. Maps to Array.push().
+ *
+ * @method append
+ * @deprecated Use array.push(value) instead.
+ * @param {Array} array Array to append
+ * @param {Any} value to be added to the Array
+ * @return {Array} the array that was appended to
+ * @example
+ *
+ * let myXML;
+ *
+ * // Load the XML and create a p5.XML object.
+ * function preload() {
+ * myXML = loadXML('assets/animals.xml');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Display instructions.
+ * text('Double-click to save', 5, 50, 90);
+ *
+ * describe('The text "Double-click to save" written in black on a gray background.');
+ * }
+ *
+ * // Save the file when the user double-clicks.
+ * function doubleClicked() {
+ * // Create a p5.PrintWriter object.
+ * // Use the file format .xml.
+ * let myWriter = createWriter('animals', 'xml');
+ *
+ * // Serialize the XML data to a string.
+ * let data = myXML.serialize();
+ *
+ * // Write the data to the print stream.
+ * myWriter.write(data);
+ *
+ * // Save the file and close the print stream.
+ * myWriter.close();
+ * }
+ *
+ *
+ * function setup() {
+ * let myArray = ['Mango', 'Apple', 'Papaya'];
+ * print(myArray); // ['Mango', 'Apple', 'Papaya']
+ *
+ * append(myArray, 'Peach');
+ * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+ * }
+ *
- * function setup() {
- * let myArray = ['Mango', 'Apple', 'Papaya'];
- * print(myArray); // ['Mango', 'Apple', 'Papaya']
- *
- * append(myArray, 'Peach');
- * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
- * }
- *
+ * let src = ['A', 'B', 'C'];
+ * let dst = [1, 2, 3];
+ * let srcPosition = 1;
+ * let dstPosition = 0;
+ * let length = 2;
+ *
+ * print(src); // ['A', 'B', 'C']
+ * print(dst); // [ 1 , 2 , 3 ]
+ *
+ * arrayCopy(src, srcPosition, dst, dstPosition, length);
+ * print(dst); // ['B', 'C', 3]
+ *
- * let src = ['A', 'B', 'C'];
- * let dst = [1, 2, 3];
- * let srcPosition = 1;
- * let dstPosition = 0;
- * let length = 2;
- *
- * print(src); // ['A', 'B', 'C']
- * print(dst); // [ 1 , 2 , 3 ]
- *
- * arrayCopy(src, srcPosition, dst, dstPosition, length);
- * print(dst); // ['B', 'C', 3]
- *
+ * function setup() {
+ * let arr1 = ['A', 'B', 'C'];
+ * let arr2 = [1, 2, 3];
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1,2,3]
+ *
+ * let arr3 = concat(arr1, arr2);
+ *
+ * print(arr1); // ['A','B','C']
+ * print(arr2); // [1, 2, 3]
+ * print(arr3); // ['A','B','C', 1, 2, 3]
+ * }
+ *
- * function setup() {
- * let arr1 = ['A', 'B', 'C'];
- * let arr2 = [1, 2, 3];
- *
- * print(arr1); // ['A','B','C']
- * print(arr2); // [1,2,3]
- *
- * let arr3 = concat(arr1, arr2);
- *
- * print(arr1); // ['A','B','C']
- * print(arr2); // [1, 2, 3]
- * print(arr3); // ['A','B','C', 1, 2, 3]
- * }
- *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A','B','C']
+ *
+ * reverse(myArray);
+ * print(myArray); // ['C','B','A']
+ * }
+ *
- * function setup() {
- * let myArray = ['A', 'B', 'C'];
- * print(myArray); // ['A','B','C']
- *
- * reverse(myArray);
- * print(myArray); // ['C','B','A']
- * }
- *
+ * function setup() {
+ * let myArray = ['A', 'B', 'C'];
+ * print(myArray); // ['A', 'B', 'C']
+ * let newArray = shorten(myArray);
+ * print(myArray); // ['A','B','C']
+ * print(newArray); // ['A','B']
+ * }
+ *
- * function setup() {
- * let myArray = ['A', 'B', 'C'];
- * print(myArray); // ['A', 'B', 'C']
- * let newArray = shorten(myArray);
- * print(myArray); // ['A','B','C']
- * print(newArray); // ['A','B']
- * }
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of colors.
+ * let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+ *
+ * // Create a shuffled copy of the array.
+ * let shuffledColors = shuffle(colors);
+ *
+ * // Draw a row of circles using the original array.
+ * for (let i = 0; i < colors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 12.5;
+ *
+ * // Style the circle.
+ * let c = colors[i];
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(x, 33, 10);
+ * }
+ *
+ * // Draw a row of circles using the original array.
+ * for (let i = 0; i < shuffledColors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 12.5;
+ *
+ * // Style the circle.
+ * let c = shuffledColors[i];
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(x, 67, 10);
+ * }
+ *
+ * describe(
+ * 'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ fn.shuffle = function (arr, bool) {
+ const isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
+ arr = bool || isView ? arr : arr.slice();
-/**
- * Shuffles the elements of an array.
- *
- * The first parameter, `array`, is the array to be shuffled. For example,
- * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
- * default, the original array won’t be modified. Instead, a copy will be
- * created, shuffled, and returned.
- *
- * The second parameter, `modify`, is optional. If `true` is passed, as in
- * `shuffle(myArray, true)`, then the array will be shuffled in place without
- * making a copy.
- *
- * @method shuffle
- * @param {Array} array array to shuffle.
- * @param {Boolean} [bool] if `true`, shuffle the original array in place. Defaults to `false`.
- * @return {Array} shuffled array.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of colors.
+ * let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+ *
+ * // Shuffle the array.
+ * shuffle(colors, true);
+ *
+ * // Draw a row of circles using the original array.
+ * for (let i = 0; i < colors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 12.5;
+ *
+ * // Style the circle.
+ * let c = colors[i];
+ * fill(c);
+ *
+ * // Draw the circle.
+ * circle(x, 50, 10);
+ * }
+ *
+ * describe(
+ * 'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of colors.
- * let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
- *
- * // Create a shuffled copy of the array.
- * let shuffledColors = shuffle(colors);
- *
- * // Draw a row of circles using the original array.
- * for (let i = 0; i < colors.length; i += 1) {
- * // Calculate the x-coordinate.
- * let x = (i + 1) * 12.5;
- *
- * // Style the circle.
- * let c = colors[i];
- * fill(c);
- *
- * // Draw the circle.
- * circle(x, 33, 10);
- * }
- *
- * // Draw a row of circles using the original array.
- * for (let i = 0; i < shuffledColors.length; i += 1) {
- * // Calculate the x-coordinate.
- * let x = (i + 1) * 12.5;
- *
- * // Style the circle.
- * let c = shuffledColors[i];
- * fill(c);
- *
- * // Draw the circle.
- * circle(x, 67, 10);
- * }
- *
- * describe(
- * 'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
- * );
- * }
- *
- *
- *
- */
-p5.prototype.shuffle = function (arr, bool) {
- const isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
- arr = bool || isView ? arr : arr.slice();
+ let rnd,
+ tmp,
+ idx = arr.length;
+ while (idx > 1) {
+ rnd = (this.random(0, 1) * idx) | 0;
- let rnd,
- tmp,
- idx = arr.length;
- while (idx > 1) {
- rnd = (this.random(0, 1) * idx) | 0;
+ tmp = arr[--idx];
+ arr[idx] = arr[rnd];
+ arr[rnd] = tmp;
+ }
- tmp = arr[--idx];
- arr[idx] = arr[rnd];
- arr[rnd] = tmp;
- }
+ return arr;
+ };
- return arr;
-};
+ /**
+ * Sorts an array of numbers from smallest to largest, or puts an array of
+ * words in alphabetical order. The original array is not modified; a
+ * re-ordered array is returned. The count parameter states the number of
+ * elements to sort. For example, if there are 12 elements in an array and
+ * count is set to 5, only the first 5 elements in the array will be sorted.
+ *
+ * @method sort
+ * @deprecated Use array.sort() instead.
+ * @param {Array} list Array to sort
+ * @param {Integer} [count] number of elements to sort, starting from 0
+ * @return {Array} the sorted list
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of colors.
- * let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
- *
- * // Shuffle the array.
- * shuffle(colors, true);
- *
- * // Draw a row of circles using the original array.
- * for (let i = 0; i < colors.length; i += 1) {
- * // Calculate the x-coordinate.
- * let x = (i + 1) * 12.5;
- *
- * // Style the circle.
- * let c = colors[i];
- * fill(c);
- *
- * // Draw the circle.
- * circle(x, 50, 10);
- * }
- *
- * describe(
- * 'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
- * );
- * }
- *
- *
+ * function setup() {
+ * let words = ['banana', 'apple', 'pear', 'lime'];
+ * print(words); // ['banana', 'apple', 'pear', 'lime']
+ * let count = 4; // length of array
+ *
+ * words = sort(words, count);
+ * print(words); // ['apple', 'banana', 'lime', 'pear']
+ * }
+ *
+ * function setup() {
+ * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+ * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+ * let count = 5; // Less than the length of the array
+ *
+ * numbers = sort(numbers, count);
+ * print(numbers); // [1,2,5,6,14,9,8,12]
+ * }
+ *
- * function setup() {
- * let words = ['banana', 'apple', 'pear', 'lime'];
- * print(words); // ['banana', 'apple', 'pear', 'lime']
- * let count = 4; // length of array
- *
- * words = sort(words, count);
- * print(words); // ['apple', 'banana', 'lime', 'pear']
- * }
- *
- * function setup() {
- * let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
- * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
- * let count = 5; // Less than the length of the array
- *
- * numbers = sort(numbers, count);
- * print(numbers); // [1,2,5,6,14,9,8,12]
- * }
- *
+ * function setup() {
+ * let myArray = [0, 1, 2, 3, 4];
+ * let insArray = ['A', 'B', 'C'];
+ * print(myArray); // [0, 1, 2, 3, 4]
+ * print(insArray); // ['A','B','C']
+ *
+ * splice(myArray, insArray, 3);
+ * print(myArray); // [0,1,2,'A','B','C',3,4]
+ * }
+ *
- * function setup() {
- * let myArray = [0, 1, 2, 3, 4];
- * let insArray = ['A', 'B', 'C'];
- * print(myArray); // [0, 1, 2, 3, 4]
- * print(insArray); // ['A','B','C']
- *
- * splice(myArray, insArray, 3);
- * print(myArray); // [0,1,2,'A','B','C',3,4]
- * }
- *
+ * function setup() {
+ * let myArray = [1, 2, 3, 4, 5];
+ * print(myArray); // [1, 2, 3, 4, 5]
+ *
+ * let sub1 = subset(myArray, 0, 3);
+ * let sub2 = subset(myArray, 2, 2);
+ * print(sub1); // [1,2,3]
+ * print(sub2); // [3,4]
+ * }
+ *
- * function setup() {
- * let myArray = [1, 2, 3, 4, 5];
- * print(myArray); // [1, 2, 3, 4, 5]
- *
- * let sub1 = subset(myArray, 0, 3);
- * let sub2 = subset(myArray, 2, 2);
- * print(sub1); // [1,2,3]
- * print(sub2); // [3,4]
- * }
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let original = '12.3';
- *
- * // Convert the string to a number.
- * let converted = float(original);
- *
- * // Double the converted value.
- * let twice = converted * 2;
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(12);
- *
- * // Display the original and converted values.
- * text(`${original} × 2 = ${twice}`, 50, 50);
- *
- * describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method float
- * @param {String[]} ns array of strings to convert.
- * @return {Number[]} converted numbers.
- */
-p5.prototype.float = function(str) {
- if (str instanceof Array) {
- return str.map(parseFloat);
- }
- return parseFloat(str);
-};
-
-/**
- * Converts a `Boolean`, `String`, or decimal `Number` to an integer.
- *
- * `int()` converts values to integers. Integers are positive or negative
- * numbers without decimals. If the original value has decimals, as in -34.56,
- * they're removed to produce an integer such as -34.
- *
- * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
- * `int(false)` or `int(true)`, then the number 0 (`false`) or 1 (`true`) will
- * be returned. If `n` is a string or number, as in `int('45')` or
- * `int(67.89)`, then an integer will be returned. If an array is passed, as
- * in `int([12.34, 56.78])`, then an array of integers will be returned.
- *
- * Note: If a value can't be converted to a number, as in `int('giraffe')`,
- * then the value `NaN` (not a number) will be returned.
- *
- * @method int
- * @param {String|Boolean|Number} n value to convert.
- * @return {Number} converted number.
- *
- * @example
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of strings.
- * let original = ['60', '30', '15'];
- *
- * // Convert the strings to numbers.
- * let diameters = float(original);
- *
- * for (let d of diameters) {
- * // Draw a circle.
- * circle(50, 50, d);
- * }
- *
- * describe('Three white, concentric circles on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a Boolean variable.
- * let original = false;
- *
- * // Convert the Boolean to an integer.
- * let converted = int(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "false : 0" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let original = '12.34';
- *
- * // Convert the string to an integer.
- * let converted = int(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(14);
- *
- * // Display the original and converted values.
- * text(`${original} ≈ ${converted}`, 50, 50);
- *
- * describe('The text "12.34 ≈ 12" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a decimal number variable.
- * let original = 12.34;
- *
- * // Convert the decimal number to an integer.
- * let converted = int(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(14);
- *
- * // Display the original and converted values.
- * text(`${original} ≈ ${converted}`, 50, 50);
- *
- * describe('The text "12.34 ≈ 12" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method int
- * @param {Array} ns values to convert.
- * @return {Number[]} converted numbers.
- */
-p5.prototype.int = function(n, radix = 10) {
- if (n === Infinity || n === 'Infinity') {
- return Infinity;
- } else if (n === -Infinity || n === '-Infinity') {
- return -Infinity;
- } else if (typeof n === 'string') {
- return parseInt(n, radix);
- } else if (typeof n === 'number') {
- return n | 0;
- } else if (typeof n === 'boolean') {
- return n ? 1 : 0;
- } else if (n instanceof Array) {
- return n.map(n => p5.prototype.int(n, radix));
- }
-};
+function conversion(p5, fn){
+ /**
+ * Converts a `String` to a floating point (decimal) `Number`.
+ *
+ * `float()` converts strings that resemble numbers, such as `'12.34'`, into
+ * numbers.
+ *
+ * The parameter, `str`, is the string value to convert. For example, calling
+ * `float('12.34')` returns the number `12.34`. If an array of strings is
+ * passed, as in `float(['12.34', '56.78'])`, then an array of numbers will be
+ * returned.
+ *
+ * Note: If a string can't be converted to a number, as in `float('giraffe')`,
+ * then the value `NaN` (not a number) will be returned.
+ *
+ * @method float
+ * @param {String} str string to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of strings.
- * let original = ['60', '30', '15'];
- *
- * // Convert the strings to integers.
- * let diameters = int(original);
- *
- * for (let d of diameters) {
- * // Draw a circle.
- * circle(50, 50, d);
- * }
- *
- * describe('Three white, concentric circles on a gray background.');
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '12.3';
+ *
+ * // Convert the string to a number.
+ * let converted = float(original);
+ *
+ * // Double the converted value.
+ * let twice = converted * 2;
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(12);
+ *
+ * // Display the original and converted values.
+ * text(`${original} × 2 = ${twice}`, 50, 50);
+ *
+ * describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method float
+ * @param {String[]} ns array of strings to convert.
+ * @return {Number[]} converted numbers.
+ */
+ fn.float = function(str) {
+ if (str instanceof Array) {
+ return str.map(parseFloat);
+ }
+ return parseFloat(str);
+ };
-/**
- * Converts a `Boolean` or `Number` to `String`.
- *
- * `str()` converts values to strings. See the
- * String reference page for guidance on using
- * template literals instead.
- *
- * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
- * `str(false)` or `str(true)`, then the value will be returned as a string,
- * as in `'false'` or `'true'`. If `n` is a number, as in `str(123)`, then its
- * value will be returned as a string, as in `'123'`. If an array is passed,
- * as in `str([12.34, 56.78])`, then an array of strings will be returned.
- *
- * @method str
- * @param {String|Boolean|Number} n value to convert.
- * @return {String} converted string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let original = ['60', '30', '15'];
+ *
+ * // Convert the strings to numbers.
+ * let diameters = float(original);
+ *
+ * for (let d of diameters) {
+ * // Draw a circle.
+ * circle(50, 50, d);
+ * }
+ *
+ * describe('Three white, concentric circles on a gray background.');
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a Boolean variable.
- * let original = false;
- *
- * // Convert the Boolean to a string.
- * let converted = str(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "false : false" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let original = 123;
- *
- * // Convert the number to a string.
- * let converted = str(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} = ${converted}`, 50, 50);
- *
- * describe('The text "123 = 123" written in black on a gray background.');
- * }
- *
- *
- *
- */
-p5.prototype.str = function(n) {
- if (n instanceof Array) {
- return n.map(p5.prototype.str);
- } else {
- return String(n);
- }
-};
+ /**
+ * Converts a `Boolean`, `String`, or decimal `Number` to an integer.
+ *
+ * `int()` converts values to integers. Integers are positive or negative
+ * numbers without decimals. If the original value has decimals, as in -34.56,
+ * they're removed to produce an integer such as -34.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
+ * `int(false)` or `int(true)`, then the number 0 (`false`) or 1 (`true`) will
+ * be returned. If `n` is a string or number, as in `int('45')` or
+ * `int(67.89)`, then an integer will be returned. If an array is passed, as
+ * in `int([12.34, 56.78])`, then an array of integers will be returned.
+ *
+ * Note: If a value can't be converted to a number, as in `int('giraffe')`,
+ * then the value `NaN` (not a number) will be returned.
+ *
+ * @method int
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of numbers.
- * let original = [12, 34, 56];
- *
- * // Convert the numbers to strings.
- * let strings = str(original);
- *
- * // Create an empty string variable.
- * let final = '';
- *
- * // Concatenate all the strings.
- * for (let s of strings) {
- * final += s;
- * }
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the concatenated string.
- * text(final, 50, 50);
- *
- * describe('The text "123456" written in black on a gray background.');
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a Boolean variable.
+ * let original = false;
+ *
+ * // Convert the Boolean to an integer.
+ * let converted = int(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "false : 0" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '12.34';
+ *
+ * // Convert the string to an integer.
+ * let converted = int(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and converted values.
+ * text(`${original} ≈ ${converted}`, 50, 50);
+ *
+ * describe('The text "12.34 ≈ 12" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a decimal number variable.
+ * let original = 12.34;
+ *
+ * // Convert the decimal number to an integer.
+ * let converted = int(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and converted values.
+ * text(`${original} ≈ ${converted}`, 50, 50);
+ *
+ * describe('The text "12.34 ≈ 12" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method int
+ * @param {Array} ns values to convert.
+ * @return {Number[]} converted numbers.
+ */
+ fn.int = function(n, radix = 10) {
+ if (n === Infinity || n === 'Infinity') {
+ return Infinity;
+ } else if (n === -Infinity || n === '-Infinity') {
+ return -Infinity;
+ } else if (typeof n === 'string') {
+ return parseInt(n, radix);
+ } else if (typeof n === 'number') {
+ return n | 0;
+ } else if (typeof n === 'boolean') {
+ return n ? 1 : 0;
+ } else if (n instanceof Array) {
+ return n.map(n => fn.int(n, radix));
+ }
+ };
-/**
- * Converts a `String` or `Number` to a `Boolean`.
- *
- * `boolean()` converts values to `true` or `false`.
- *
- * The parameter, `n`, is the value to convert. If `n` is a string, then
- * `boolean('true')` will return `true` and every other string value will
- * return `false`. If `n` is a number, then `boolean(0)` will return `false`
- * and every other numeric value will return `true`. If an array is passed, as
- * `in boolean([0, 1, 'true', 'blue'])`, then an array of Boolean values will
- * be returned.
- *
- * @method boolean
- * @param {String|Boolean|Number} n value to convert.
- * @return {Boolean} converted Boolean value.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let original = ['60', '30', '15'];
+ *
+ * // Convert the strings to integers.
+ * let diameters = int(original);
+ *
+ * for (let d of diameters) {
+ * // Draw a circle.
+ * circle(50, 50, d);
+ * }
+ *
+ * describe('Three white, concentric circles on a gray background.');
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let original = 0;
- *
- * // Convert the number to a Boolean value.
- * let converted = boolean(original);
- *
- * // Style the circle based on the converted value.
- * if (converted === true) {
- * fill('blue');
- * } else {
- * fill('red');
- * }
- *
- * // Draw the circle.
- * circle(50, 50, 40);
- *
- * describe('A red circle on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let original = 'true';
- *
- * // Convert the string to a Boolean value.
- * let converted = boolean(original);
- *
- * // Style the circle based on the converted value.
- * if (converted === true) {
- * fill('blue');
- * } else {
- * fill('red');
- * }
- *
- * // Draw the circle.
- * circle(50, 50, 40);
- *
- * describe('A blue circle on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method boolean
- * @param {Array} ns values to convert.
- * @return {Boolean[]} converted Boolean values.
- */
-p5.prototype.boolean = function(n) {
- if (typeof n === 'number') {
- return n !== 0;
- } else if (typeof n === 'string') {
- return n.toLowerCase() === 'true';
- } else if (typeof n === 'boolean') {
- return n;
- } else if (n instanceof Array) {
- return n.map(p5.prototype.boolean);
- }
-};
+ /**
+ * Converts a `Boolean` or `Number` to `String`.
+ *
+ * `str()` converts values to strings. See the
+ * String reference page for guidance on using
+ * template literals instead.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
+ * `str(false)` or `str(true)`, then the value will be returned as a string,
+ * as in `'false'` or `'true'`. If `n` is a number, as in `str(123)`, then its
+ * value will be returned as a string, as in `'123'`. If an array is passed,
+ * as in `str([12.34, 56.78])`, then an array of strings will be returned.
+ *
+ * @method str
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {String} converted string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of values.
- * let original = [0, 'hi', 123, 'true'];
- *
- * // Convert the array to a Boolean values.
- * let converted = boolean(original);
- *
- * // Iterate over the array of converted Boolean values.
- * for (let i = 0; i < converted.length; i += 1) {
- *
- * // Style the circle based on the converted value.
- * if (converted[i] === true) {
- * fill('blue');
- * } else {
- * fill('red');
- * }
- *
- * // Calculate the x-coordinate.
- * let x = (i + 1) * 20;
- *
- * // Draw the circle.
- * circle(x, 50, 15);
- * }
- *
- * describe(
- * 'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a Boolean variable.
+ * let original = false;
+ *
+ * // Convert the Boolean to a string.
+ * let converted = str(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "false : false" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 123;
+ *
+ * // Convert the number to a string.
+ * let converted = str(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "123 = 123" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ fn.str = function(n) {
+ if (n instanceof Array) {
+ return n.map(fn.str);
+ } else {
+ return String(n);
+ }
+ };
-/**
- * Converts a `Boolean`, `String`, or `Number` to its byte value.
- *
- * `byte()` converts a value to an integer (whole number) between -128 and
- * 127. Values greater than 127 wrap around while negative values are
- * unchanged. For example, 128 becomes -128 and -129 remains the same.
- *
- * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
- * `byte(false)` or `byte(true)`, the number 0 (`false`) or 1 (`true`) will be
- * returned. If `n` is a string or number, as in `byte('256')` or `byte(256)`,
- * then the byte value will be returned. Decimal values are ignored. If an
- * array is passed, as in `byte([true, 123, '456'])`, then an array of byte
- * values will be returned.
- *
- * Note: If a value can't be converted to a number, as in `byte('giraffe')`,
- * then the value `NaN` (not a number) will be returned.
- *
- * @method byte
- * @param {String|Boolean|Number} n value to convert.
- * @return {Number} converted byte value.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = [12, 34, 56];
+ *
+ * // Convert the numbers to strings.
+ * let strings = str(original);
+ *
+ * // Create an empty string variable.
+ * let final = '';
+ *
+ * // Concatenate all the strings.
+ * for (let s of strings) {
+ * final += s;
+ * }
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the concatenated string.
+ * text(final, 50, 50);
+ *
+ * describe('The text "123456" written in black on a gray background.');
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a Boolean variable.
- * let original = true;
- *
- * // Convert the Boolean to its byte value.
- * let converted = byte(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "true : 1" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let original = '256';
- *
- * // Convert the string to its byte value.
- * let converted = byte(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "256 : 0" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let original = 256;
- *
- * // Convert the number to its byte value.
- * let converted = byte(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "256 : 0" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method byte
- * @param {Array} ns values to convert.
- * @return {Number[]} converted byte values.
- */
-p5.prototype.byte = function(n) {
- const nn = p5.prototype.int(n, 10);
- if (typeof nn === 'number') {
- return (nn + 128) % 256 - 128;
- } else if (nn instanceof Array) {
- return nn.map(p5.prototype.byte);
- }
-};
+ /**
+ * Converts a `String` or `Number` to a `Boolean`.
+ *
+ * `boolean()` converts values to `true` or `false`.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a string, then
+ * `boolean('true')` will return `true` and every other string value will
+ * return `false`. If `n` is a number, then `boolean(0)` will return `false`
+ * and every other numeric value will return `true`. If an array is passed, as
+ * `in boolean([0, 1, 'true', 'blue'])`, then an array of Boolean values will
+ * be returned.
+ *
+ * @method boolean
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {Boolean} converted Boolean value.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of values.
- * let original = [false, '64', 383];
- *
- * // Convert the array elements to their byte values.
- * let converted = byte(original);
- *
- * // Iterate over the converted array elements.
- * for (let i = 0; i < converted.length; i += 1) {
- *
- * // Style the circle.
- * fill(converted[i]);
- *
- * // Calculate the x-coordinate.
- * let x = (i + 1) * 25;
- *
- * // Draw the circle.
- * circle(x, 50, 20);
- * }
- *
- * describe(
- * 'Three gray circles on a gray background. The circles get lighter from left to right.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 0;
+ *
+ * // Convert the number to a Boolean value.
+ * let converted = boolean(original);
+ *
+ * // Style the circle based on the converted value.
+ * if (converted === true) {
+ * fill('blue');
+ * } else {
+ * fill('red');
+ * }
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe('A red circle on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = 'true';
+ *
+ * // Convert the string to a Boolean value.
+ * let converted = boolean(original);
+ *
+ * // Style the circle based on the converted value.
+ * if (converted === true) {
+ * fill('blue');
+ * } else {
+ * fill('red');
+ * }
+ *
+ * // Draw the circle.
+ * circle(50, 50, 40);
+ *
+ * describe('A blue circle on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method boolean
+ * @param {Array} ns values to convert.
+ * @return {Boolean[]} converted Boolean values.
+ */
+ fn.boolean = function(n) {
+ if (typeof n === 'number') {
+ return n !== 0;
+ } else if (typeof n === 'string') {
+ return n.toLowerCase() === 'true';
+ } else if (typeof n === 'boolean') {
+ return n;
+ } else if (n instanceof Array) {
+ return n.map(fn.boolean);
+ }
+ };
-/**
- * Converts a `Number` or `String` to a single-character `String`.
- *
- * `char()` converts numbers to their single-character string representations.
- *
- * The parameter, `n`, is the value to convert. If a number is passed, as in
- * `char(65)`, the corresponding single-character string is returned. If a
- * string is passed, as in `char('65')`, the string is converted to an integer
- * (whole number) and the corresponding single-character string is returned.
- * If an array is passed, as in `char([65, 66, 67])`, an array of
- * single-character strings is returned.
- *
- * See MDN
- * for more information about conversions.
- *
- * @method char
- * @param {String|Number} n value to convert.
- * @return {String} converted single-character string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of values.
+ * let original = [0, 'hi', 123, 'true'];
+ *
+ * // Convert the array to a Boolean values.
+ * let converted = boolean(original);
+ *
+ * // Iterate over the array of converted Boolean values.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Style the circle based on the converted value.
+ * if (converted[i] === true) {
+ * fill('blue');
+ * } else {
+ * fill('red');
+ * }
+ *
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 20;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 15);
+ * }
+ *
+ * describe(
+ * 'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let original = 65;
- *
- * // Convert the number to a char.
- * let converted = char(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "65 : A" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let original = '65';
- *
- * // Convert the string to a char.
- * let converted = char(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "65 : A" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method char
- * @param {Array} ns values to convert.
- * @return {String[]} converted single-character strings.
- */
-p5.prototype.char = function(n) {
- if (typeof n === 'number' && !isNaN(n)) {
- return String.fromCharCode(n);
- } else if (n instanceof Array) {
- return n.map(p5.prototype.char);
- } else if (typeof n === 'string') {
- return p5.prototype.char(parseInt(n, 10));
- }
-};
+ /**
+ * Converts a `Boolean`, `String`, or `Number` to its byte value.
+ *
+ * `byte()` converts a value to an integer (whole number) between -128 and
+ * 127. Values greater than 127 wrap around while negative values are
+ * unchanged. For example, 128 becomes -128 and -129 remains the same.
+ *
+ * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
+ * `byte(false)` or `byte(true)`, the number 0 (`false`) or 1 (`true`) will be
+ * returned. If `n` is a string or number, as in `byte('256')` or `byte(256)`,
+ * then the byte value will be returned. Decimal values are ignored. If an
+ * array is passed, as in `byte([true, 123, '456'])`, then an array of byte
+ * values will be returned.
+ *
+ * Note: If a value can't be converted to a number, as in `byte('giraffe')`,
+ * then the value `NaN` (not a number) will be returned.
+ *
+ * @method byte
+ * @param {String|Boolean|Number} n value to convert.
+ * @return {Number} converted byte value.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of numbers.
- * let original = ['65', 66, '67'];
- *
- * // Convert the string to a char.
- * let converted = char(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Iterate over elements of the converted array.
- * for (let i = 0; i < converted.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Display the original and converted values.
- * text(`${original[i]} : ${converted[i]}`, 50, y);
- * }
- *
- * describe(
- * 'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a Boolean variable.
+ * let original = true;
+ *
+ * // Convert the Boolean to its byte value.
+ * let converted = byte(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "true : 1" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '256';
+ *
+ * // Convert the string to its byte value.
+ * let converted = byte(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "256 : 0" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 256;
+ *
+ * // Convert the number to its byte value.
+ * let converted = byte(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "256 : 0" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method byte
+ * @param {Array} ns values to convert.
+ * @return {Number[]} converted byte values.
+ */
+ fn.byte = function(n) {
+ const nn = fn.int(n, 10);
+ if (typeof nn === 'number') {
+ return (nn + 128) % 256 - 128;
+ } else if (nn instanceof Array) {
+ return nn.map(fn.byte);
+ }
+ };
-/**
- * Converts a single-character `String` to a `Number`.
- *
- * `unchar()` converts single-character strings to their corresponding
- * integer (whole number).
- *
- * The parameter, `n`, is the character to convert. For example,
- * `unchar('A')`, returns the number 65. If an array is passed, as in
- * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
- *
- * @method unchar
- * @param {String} n value to convert.
- * @return {Number} converted number.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of values.
+ * let original = [false, '64', 383];
+ *
+ * // Convert the array elements to their byte values.
+ * let converted = byte(original);
+ *
+ * // Iterate over the converted array elements.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Style the circle.
+ * fill(converted[i]);
+ *
+ * // Calculate the x-coordinate.
+ * let x = (i + 1) * 25;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 20);
+ * }
+ *
+ * describe(
+ * 'Three gray circles on a gray background. The circles get lighter from left to right.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let original = 'A';
- *
- * // Convert the string to a number.
- * let converted = unchar(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} : ${converted}`, 50, 50);
- *
- * describe('The text "A : 65" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method unchar
- * @param {String[]} ns values to convert.
- * @return {Number[]} converted numbers.
- */
-p5.prototype.unchar = function(n) {
- if (typeof n === 'string' && n.length === 1) {
- return n.charCodeAt(0);
- } else if (n instanceof Array) {
- return n.map(p5.prototype.unchar);
- }
-};
+ /**
+ * Converts a `Number` or `String` to a single-character `String`.
+ *
+ * `char()` converts numbers to their single-character string representations.
+ *
+ * The parameter, `n`, is the value to convert. If a number is passed, as in
+ * `char(65)`, the corresponding single-character string is returned. If a
+ * string is passed, as in `char('65')`, the string is converted to an integer
+ * (whole number) and the corresponding single-character string is returned.
+ * If an array is passed, as in `char([65, 66, 67])`, an array of
+ * single-character strings is returned.
+ *
+ * See MDN
+ * for more information about conversions.
+ *
+ * @method char
+ * @param {String|Number} n value to convert.
+ * @return {String} converted single-character string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of characters.
- * let original = ['A', 'B', 'C'];
- *
- * // Convert the string to a number.
- * let converted = unchar(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Iterate over elements of the converted array.
- * for (let i = 0; i < converted.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Display the original and converted values.
- * text(`${original[i]} : ${converted[i]}`, 50, y);
- * }
- *
- * describe(
- * 'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 65;
+ *
+ * // Convert the number to a char.
+ * let converted = char(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "65 : A" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = '65';
+ *
+ * // Convert the string to a char.
+ * let converted = char(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "65 : A" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method char
+ * @param {Array} ns values to convert.
+ * @return {String[]} converted single-character strings.
+ */
+ fn.char = function(n) {
+ if (typeof n === 'number' && !isNaN(n)) {
+ return String.fromCharCode(n);
+ } else if (n instanceof Array) {
+ return n.map(fn.char);
+ } else if (typeof n === 'string') {
+ return fn.char(parseInt(n, 10));
+ }
+ };
-/**
- * Converts a `Number` to a `String` with its hexadecimal value.
- *
- * `hex()` converts a number to a string with its hexadecimal number value.
- * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
- * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
- * number `11` (eleven) in base-10 is written as the letter `B` in hex.
- *
- * The first parameter, `n`, is the number to convert. For example, `hex(20)`,
- * returns the string `'00000014'`. If an array is passed, as in
- * `hex([1, 10, 100])`, an array of hexadecimal strings is returned.
- *
- * The second parameter, `digits`, is optional. If a number is passed, as in
- * `hex(20, 2)`, it sets the number of hexadecimal digits to display. For
- * example, calling `hex(20, 2)` returns the string `'14'`.
- *
- * @method hex
- * @param {Number} n value to convert.
- * @param {Number} [digits] number of digits to include.
- * @return {String} converted hexadecimal value.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = ['65', 66, '67'];
+ *
+ * // Convert the string to a char.
+ * let converted = char(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over elements of the converted array.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${original[i]} : ${converted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let original = 20;
- *
- * // Convert the number to a hex string.
- * let converted = hex(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(14);
- *
- * // Display the original and converted values.
- * text(`${original} = ${converted}`, 50, 50);
- *
- * describe('The text "20 = 00000014" written in black on a gray background.');
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let original = 20;
- *
- * // Convert the number to a hex string.
- * // Only display two hex digits.
- * let converted = hex(original, 2);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} = ${converted}`, 50, 50);
- *
- * describe('The text "20 = 14" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method hex
- * @param {Number[]} ns values to convert.
- * @param {Number} [digits]
- * @return {String[]} converted hexadecimal values.
- */
-p5.prototype.hex = function(n, digits) {
- digits = digits === undefined || digits === null ? (digits = 8) : digits;
- if (n instanceof Array) {
- return n.map(n => p5.prototype.hex(n, digits));
- } else if (n === Infinity || n === -Infinity) {
- const c = n === Infinity ? 'F' : '0';
- return c.repeat(digits);
- } else if (typeof n === 'number') {
- if (n < 0) {
- n = 0xffffffff + n + 1;
+ /**
+ * Converts a single-character `String` to a `Number`.
+ *
+ * `unchar()` converts single-character strings to their corresponding
+ * integer (whole number).
+ *
+ * The parameter, `n`, is the character to convert. For example,
+ * `unchar('A')`, returns the number 65. If an array is passed, as in
+ * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
+ *
+ * @method unchar
+ * @param {String} n value to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of numbers.
- * let original = [1, 10, 100];
- *
- * // Convert the numbers to hex strings.
- * // Only use two hex digits.
- * let converted = hex(original, 2);
- *
- * // Style the text.
- * textAlign(RIGHT, CENTER);
- * textSize(16);
- *
- * // Iterate over the converted values.
- * for (let i = 0; i < converted.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Display the original and converted values.
- * text(`${ original[i]} = ${converted[i]}`, 75, y);
- * }
- *
- * describe(
- * 'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let original = 'A';
+ *
+ * // Convert the string to a number.
+ * let converted = unchar(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} : ${converted}`, 50, 50);
+ *
+ * describe('The text "A : 65" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method unchar
+ * @param {String[]} ns values to convert.
+ * @return {Number[]} converted numbers.
+ */
+ fn.unchar = function(n) {
+ if (typeof n === 'string' && n.length === 1) {
+ return n.charCodeAt(0);
+ } else if (n instanceof Array) {
+ return n.map(fn.unchar);
}
- let hex = Number(n)
- .toString(16)
- .toUpperCase();
- while (hex.length < digits) {
- hex = `0${hex}`;
+ };
+
+ /**
+ * Converts a `Number` to a `String` with its hexadecimal value.
+ *
+ * `hex()` converts a number to a string with its hexadecimal number value.
+ * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+ * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+ * number `11` (eleven) in base-10 is written as the letter `B` in hex.
+ *
+ * The first parameter, `n`, is the number to convert. For example, `hex(20)`,
+ * returns the string `'00000014'`. If an array is passed, as in
+ * `hex([1, 10, 100])`, an array of hexadecimal strings is returned.
+ *
+ * The second parameter, `digits`, is optional. If a number is passed, as in
+ * `hex(20, 2)`, it sets the number of hexadecimal digits to display. For
+ * example, calling `hex(20, 2)` returns the string `'14'`.
+ *
+ * @method hex
+ * @param {Number} n value to convert.
+ * @param {Number} [digits] number of digits to include.
+ * @return {String} converted hexadecimal value.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of characters.
+ * let original = ['A', 'B', 'C'];
+ *
+ * // Convert the string to a number.
+ * let converted = unchar(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over elements of the converted array.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${original[i]} : ${converted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 20;
+ *
+ * // Convert the number to a hex string.
+ * let converted = hex(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "20 = 00000014" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let original = 20;
+ *
+ * // Convert the number to a hex string.
+ * // Only display two hex digits.
+ * let converted = hex(original, 2);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "20 = 14" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method hex
+ * @param {Number[]} ns values to convert.
+ * @param {Number} [digits]
+ * @return {String[]} converted hexadecimal values.
+ */
+ fn.hex = function(n, digits) {
+ digits = digits === undefined || digits === null ? (digits = 8) : digits;
+ if (n instanceof Array) {
+ return n.map(n => fn.hex(n, digits));
+ } else if (n === Infinity || n === -Infinity) {
+ const c = n === Infinity ? 'F' : '0';
+ return c.repeat(digits);
+ } else if (typeof n === 'number') {
+ if (n < 0) {
+ n = 0xffffffff + n + 1;
+ }
+ let hex = Number(n)
+ .toString(16)
+ .toUpperCase();
+ while (hex.length < digits) {
+ hex = `0${hex}`;
+ }
+ if (hex.length >= digits) {
+ hex = hex.substring(hex.length - digits, hex.length);
+ }
+ return hex;
}
- if (hex.length >= digits) {
- hex = hex.substring(hex.length - digits, hex.length);
+ };
+
+ /**
+ * Converts a `String` with a hexadecimal value to a `Number`.
+ *
+ * `unhex()` converts a string with its hexadecimal number value to a number.
+ * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+ * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+ * number `11` (eleven) in base-10 is written as the letter `B` in hex.
+ *
+ * The first parameter, `n`, is the hex string to convert. For example,
+ * `unhex('FF')`, returns the number 255. If an array is passed, as in
+ * `unhex(['00', '80', 'FF'])`, an array of numbers is returned.
+ *
+ * @method unhex
+ * @param {String} n value to convert.
+ * @return {Number} converted number.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = [1, 10, 100];
+ *
+ * // Convert the numbers to hex strings.
+ * // Only use two hex digits.
+ * let converted = hex(original, 2);
+ *
+ * // Style the text.
+ * textAlign(RIGHT, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over the converted values.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${ original[i]} = ${converted[i]}`, 75, y);
+ * }
+ *
+ * describe(
+ * 'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a a hex string variable
+ * let original = 'FF';
+ *
+ * // Convert the hex string to a number.
+ * let converted = unhex(original);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the original and converted values.
+ * text(`${original} = ${converted}`, 50, 50);
+ *
+ * describe('The text "FF = 255" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method unhex
+ * @param {String[]} ns values to convert.
+ * @return {Number[]} converted numbers.
+ */
+ fn.unhex = function(n) {
+ if (n instanceof Array) {
+ return n.map(fn.unhex);
+ } else {
+ return parseInt(`0x${n}`, 16);
}
- return hex;
- }
-};
+ };
+}
-/**
- * Converts a `String` with a hexadecimal value to a `Number`.
- *
- * `unhex()` converts a string with its hexadecimal number value to a number.
- * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
- * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
- * number `11` (eleven) in base-10 is written as the letter `B` in hex.
- *
- * The first parameter, `n`, is the hex string to convert. For example,
- * `unhex('FF')`, returns the number 255. If an array is passed, as in
- * `unhex(['00', '80', 'FF'])`, an array of numbers is returned.
- *
- * @method unhex
- * @param {String} n value to convert.
- * @return {Number} converted number.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let original = ['00', '80', 'FF'];
+ *
+ * // Convert the numbers to hex strings.
+ * // Only use two hex digits.
+ * let converted = unhex(original, 2);
+ *
+ * // Style the text.
+ * textAlign(RIGHT, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over the converted values.
+ * for (let i = 0; i < converted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the original and converted values.
+ * text(`${ original[i]} = ${converted[i]}`, 80, y);
+ * }
+ *
+ * describe(
+ * 'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a a hex string variable
- * let original = 'FF';
- *
- * // Convert the hex string to a number.
- * let converted = unhex(original);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the original and converted values.
- * text(`${original} = ${converted}`, 50, 50);
- *
- * describe('The text "FF = 255" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method unhex
- * @param {String[]} ns values to convert.
- * @return {Number[]} converted numbers.
- */
-p5.prototype.unhex = function(n) {
- if (n instanceof Array) {
- return n.map(p5.prototype.unhex);
- } else {
- return parseInt(`0x${n}`, 16);
- }
-};
+export default conversion;
-export default p5;
+if(typeof p5 !== 'undefined'){
+ conversion(p5, p5.prototype);
+}
diff --git a/src/utilities/index.js b/src/utilities/index.js
new file mode 100644
index 0000000000..b05893fb44
--- /dev/null
+++ b/src/utilities/index.js
@@ -0,0 +1,11 @@
+import arrayFunctions from './array_functions.js';
+import conversion from './conversion.js';
+import stringFunctions from './string_functions.js';
+import timeDate from './time_date.js';
+
+export default function(p5){
+ p5.registerAddon(arrayFunctions);
+ p5.registerAddon(conversion);
+ p5.registerAddon(stringFunctions);
+ p5.registerAddon(timeDate);
+}
diff --git a/src/utilities/string_functions.js b/src/utilities/string_functions.js
index 9da5871826..07bb5dc073 100644
--- a/src/utilities/string_functions.js
+++ b/src/utilities/string_functions.js
@@ -5,985 +5,986 @@
* @requires core
*/
-import p5 from '../core/main';
-import '../core/friendly_errors/validate_params';
-import '../core/friendly_errors/file_errors';
-import '../core/friendly_errors/fes_core';
+function stringFunctions(p5, fn){
+ /**
+ * Combines an array of strings into one string.
+ *
+ * The first parameter, `list`, is the array of strings to join.
+ *
+ * The second parameter, `separator`, is the character(s) that should be used
+ * to separate the combined strings. For example, calling
+ * `join(myWords, ' : ')` would return a string of words each separated by a
+ * colon and spaces.
+ *
+ * @method join
+ * @param {Array} list array of strings to combine.
+ * @param {String} separator character(s) to place between strings when they're combined.
+ * @return {String} combined string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of numbers.
- * let original = ['00', '80', 'FF'];
- *
- * // Convert the numbers to hex strings.
- * // Only use two hex digits.
- * let converted = unhex(original, 2);
- *
- * // Style the text.
- * textAlign(RIGHT, CENTER);
- * textSize(16);
- *
- * // Iterate over the converted values.
- * for (let i = 0; i < converted.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Display the original and converted values.
- * text(`${ original[i]} = ${converted[i]}`, 80, y);
- * }
- *
- * describe(
- * 'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ */
+ fn.join = function(list, separator) {
+ p5._validateParameters('join', arguments);
+ return list.join(separator);
+ };
-/**
- * Combines an array of strings into one string.
- *
- * The first parameter, `list`, is the array of strings to join.
- *
- * The second parameter, `separator`, is the character(s) that should be used
- * to separate the combined strings. For example, calling
- * `join(myWords, ' : ')` would return a string of words each separated by a
- * colon and spaces.
- *
- * @method join
- * @param {Array} list array of strings to combine.
- * @param {String} separator character(s) to place between strings when they're combined.
- * @return {String} combined string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let myWords = ['one', 'two', 'three'];
+ *
+ * // Create a combined string
+ * let combined = join(myWords, ' : ');
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ *
+ * // Display the combined string.
+ * text(combined, 50, 50);
+ *
+ * describe('The text "one : two : three" written in black on a gray canvas.');
+ * }
+ *
+ *
- *
- */
-p5.prototype.join = function(list, separator) {
- p5._validateParameters('join', arguments);
- return list.join(separator);
-};
-
-/**
- * Applies a regular expression to a string and returns an array with the
- * first match.
- *
- * `match()` uses regular expressions (regex) to match patterns in text. For
- * example, the regex `abc` can be used to search a string for the exact
- * sequence of characters `abc`. See
- * MDN.
- * for more information about regexes.
- *
- * The first parameter, `str`, is the string to search.
- *
- * The second parameter, `regex`, is a string with the regular expression to
- * apply. For example, calling `match('Hello, p5*js!', '[a-z][0-9]')` would
- * return the array `['p5']`.
- *
- * Note: If no matches are found, `null` is returned.
- *
- * @method match
- * @param {String} str string to search.
- * @param {String} regexp regular expression to match.
- * @return {String[]} match if found.
- *
- * @example
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of strings.
- * let myWords = ['one', 'two', 'three'];
- *
- * // Create a combined string
- * let combined = join(myWords, ' : ');
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- *
- * // Display the combined string.
- * text(combined, 50, 50);
- *
- * describe('The text "one : two : three" written in black on a gray canvas.');
- * }
- *
- *
- *
- */
-p5.prototype.match = function(str, reg) {
- p5._validateParameters('match', arguments);
- return str.match(reg);
-};
+ /**
+ * Applies a regular expression to a string and returns an array with the
+ * first match.
+ *
+ * `match()` uses regular expressions (regex) to match patterns in text. For
+ * example, the regex `abc` can be used to search a string for the exact
+ * sequence of characters `abc`. See
+ * MDN.
+ * for more information about regexes.
+ *
+ * The first parameter, `str`, is the string to search.
+ *
+ * The second parameter, `regex`, is a string with the regular expression to
+ * apply. For example, calling `match('Hello, p5*js!', '[a-z][0-9]')` would
+ * return the array `['p5']`.
+ *
+ * Note: If no matches are found, `null` is returned.
+ *
+ * @method match
+ * @param {String} str string to search.
+ * @param {String} regexp regular expression to match.
+ * @return {String[]} match if found.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = 'Hello, p5*js!';
- *
- * // Match the characters that are lowercase
- * // letters followed by digits.
- * let matches = match(string, '[a-z][0-9]');
- *
- * // Print the matches array to the console:
- * // ['p5']
- * print(matches);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the matches.
- * text(matches, 50, 50);
- *
- * describe('The text "p5" written in black on a gray canvas.');
- * }
- *
- *
+ *
+ */
+ fn.match = function(str, reg) {
+ p5._validateParameters('match', arguments);
+ return str.match(reg);
+ };
-/**
- * Applies a regular expression to a string and returns an array of matches.
- *
- * `match()` uses regular expressions (regex) to match patterns in text. For
- * example, the regex `abc` can be used to search a string for the exact
- * sequence of characters `abc`. See
- * MDN.
- * for more information about regexes. `matchAll()` is different from
- * match() because it returns every match, not just
- * the first.
- *
- * The first parameter, `str`, is the string to search.
- *
- * The second parameter, `regex`, is a string with the regular expression to
- * apply. For example, calling
- * `matchAll('p5*js is easier than abc123', '[a-z][0-9]')` would return the
- * 2D array `[['p5'], ['c1']]`.
- *
- * Note: If no matches are found, an empty array `[]` is returned.
- *
- * @method matchAll
- * @param {String} str string to search.
- * @param {String} regexp regular expression to match.
- * @return {String[]} matches found.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'Hello, p5*js!';
+ *
+ * // Match the characters that are lowercase
+ * // letters followed by digits.
+ * let matches = match(string, '[a-z][0-9]');
+ *
+ * // Print the matches array to the console:
+ * // ['p5']
+ * print(matches);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the matches.
+ * text(matches, 50, 50);
+ *
+ * describe('The text "p5" written in black on a gray canvas.');
+ * }
+ *
+ *
- *
- */
-p5.prototype.matchAll = function(str, reg) {
- p5._validateParameters('matchAll', arguments);
- const re = new RegExp(reg, 'g');
- let match = re.exec(str);
- const matches = [];
- while (match !== null) {
- matches.push(match);
- // matched text: match[0]
- // match start: match.index
- // capturing group n: match[n]
- match = re.exec(str);
- }
- return matches;
-};
+ /**
+ * Applies a regular expression to a string and returns an array of matches.
+ *
+ * `match()` uses regular expressions (regex) to match patterns in text. For
+ * example, the regex `abc` can be used to search a string for the exact
+ * sequence of characters `abc`. See
+ * MDN.
+ * for more information about regexes. `matchAll()` is different from
+ * match() because it returns every match, not just
+ * the first.
+ *
+ * The first parameter, `str`, is the string to search.
+ *
+ * The second parameter, `regex`, is a string with the regular expression to
+ * apply. For example, calling
+ * `matchAll('p5*js is easier than abc123', '[a-z][0-9]')` would return the
+ * 2D array `[['p5'], ['c1']]`.
+ *
+ * Note: If no matches are found, an empty array `[]` is returned.
+ *
+ * @method matchAll
+ * @param {String} str string to search.
+ * @param {String} regexp regular expression to match.
+ * @return {String[]} matches found.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = 'p5*js is easier than abc123';
- *
- * // Match the character sequences that are
- * // lowercase letters followed by digits.
- * let matches = matchAll(string, '[a-z][0-9]');
- *
- * // Print the matches array to the console:
- * // [['p5'], ['c1']]
- * print(matches);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Iterate over the matches array.
- * for (let i = 0; i < matches.length; i += 1) {
- *
- * // Calculate the y-coordainate.
- * let y = (i + 1) * 33;
- *
- * // Display the match.
- * text(matches[i], 50, y);
- * }
- *
- * describe(
- * 'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ */
+ fn.matchAll = function(str, reg) {
+ p5._validateParameters('matchAll', arguments);
+ const re = new RegExp(reg, 'g');
+ let match = re.exec(str);
+ const matches = [];
+ while (match !== null) {
+ matches.push(match);
+ // matched text: match[0]
+ // match start: match.index
+ // capturing group n: match[n]
+ match = re.exec(str);
+ }
+ return matches;
+ };
-/**
- * Converts a `Number` into a `String` with a given number of digits.
- *
- * `nf()` converts numbers such as `123.45` into strings formatted with a set
- * number of digits, as in `'123.4500'`.
- *
- * The first parameter, `num`, is the number to convert to a string. For
- * example, calling `nf(123.45)` returns the string `'123.45'`. If an array of
- * numbers is passed, as in `nf([123.45, 67.89])`, an array of formatted
- * strings will be returned.
- *
- * The second parameter, `left`, is optional. If a number is passed, as in
- * `nf(123.45, 4)`, it sets the minimum number of digits to include to the
- * left of the decimal place. If `left` is larger than the number of digits in
- * `num`, then unused digits will be set to 0. For example, calling
- * `nf(123.45, 4)` returns the string `'0123.45'`.
- *
- * The third parameter, `right`, is also optional. If a number is passed, as
- * in `nf(123.45, 4, 1)`, it sets the minimum number of digits to include to
- * the right of the decimal place. If `right` is smaller than the number of
- * decimal places in `num`, then `num` will be rounded to the given number of
- * decimal places. For example, calling `nf(123.45, 4, 1)` returns the string
- * `'0123.5'`. If right is larger than the number of decimal places in `num`,
- * then unused decimal places will be set to 0. For example, calling
- * `nf(123.45, 4, 3)` returns the string `'0123.450'`.
- *
- * @method nf
- * @param {Number|String} num number to format.
- * @param {Integer|String} [left] number of digits to include to the left of
- * the decimal point.
- * @param {Integer|String} [right] number of digits to include to the right
- * of the decimal point.
- * @return {String} formatted string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'p5*js is easier than abc123';
+ *
+ * // Match the character sequences that are
+ * // lowercase letters followed by digits.
+ * let matches = matchAll(string, '[a-z][0-9]');
+ *
+ * // Print the matches array to the console:
+ * // [['p5'], ['c1']]
+ * print(matches);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Iterate over the matches array.
+ * for (let i = 0; i < matches.length; i += 1) {
+ *
+ * // Calculate the y-coordainate.
+ * let y = (i + 1) * 33;
+ *
+ * // Display the match.
+ * text(matches[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- */
-/**
- * @method nf
- * @param {Number[]} nums numbers to format.
- * @param {Integer|String} [left]
- * @param {Integer|String} [right]
- * @return {String[]} formatted strings.
- */
-p5.prototype.nf = function(nums, left, right) {
- p5._validateParameters('nf', arguments);
- if (nums instanceof Array) {
- return nums.map(x => doNf(x, left, right));
- } else {
- const typeOfFirst = Object.prototype.toString.call(nums);
- if (typeOfFirst === '[object Arguments]') {
- if (nums.length === 3) {
- return this.nf(nums[0], nums[1], nums[2]);
- } else if (nums.length === 2) {
- return this.nf(nums[0], nums[1]);
+ /**
+ * Converts a `Number` into a `String` with a given number of digits.
+ *
+ * `nf()` converts numbers such as `123.45` into strings formatted with a set
+ * number of digits, as in `'123.4500'`.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nf(123.45)` returns the string `'123.45'`. If an array of
+ * numbers is passed, as in `nf([123.45, 67.89])`, an array of formatted
+ * strings will be returned.
+ *
+ * The second parameter, `left`, is optional. If a number is passed, as in
+ * `nf(123.45, 4)`, it sets the minimum number of digits to include to the
+ * left of the decimal place. If `left` is larger than the number of digits in
+ * `num`, then unused digits will be set to 0. For example, calling
+ * `nf(123.45, 4)` returns the string `'0123.45'`.
+ *
+ * The third parameter, `right`, is also optional. If a number is passed, as
+ * in `nf(123.45, 4, 1)`, it sets the minimum number of digits to include to
+ * the right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nf(123.45, 4, 1)` returns the string
+ * `'0123.5'`. If right is larger than the number of decimal places in `num`,
+ * then unused decimal places will be set to 0. For example, calling
+ * `nf(123.45, 4, 3)` returns the string `'0123.450'`.
+ *
+ * @method nf
+ * @param {Number|String} num number to format.
+ * @param {Integer|String} [left] number of digits to include to the left of
+ * the decimal point.
+ * @param {Integer|String} [right] number of digits to include to the right
+ * of the decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(16);
- *
- * // Create a number variable.
- * let number = 123.45;
- *
- * // Display the number as a string.
- * let formatted = nf(number);
- * text(formatted, 20, 25);
- *
- * // Display the number with four digits
- * // to the left of the decimal.
- * let left = nf(number, 4);
- * text(left, 20, 50);
- *
- * // Display the number with four digits
- * // to the left of the decimal and one
- * // to the right.
- * let right = nf(number, 4, 1);
- * text(right, 20, 75);
- *
- * describe(
- * 'The numbers "123.45", "0123.45", and "0123.5" written on three separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ */
+ /**
+ * @method nf
+ * @param {Number[]} nums numbers to format.
+ * @param {Integer|String} [left]
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted strings.
+ */
+ fn.nf = function(nums, left, right) {
+ p5._validateParameters('nf', arguments);
+ if (nums instanceof Array) {
+ return nums.map(x => doNf(x, left, right));
+ } else {
+ const typeOfFirst = Object.prototype.toString.call(nums);
+ if (typeOfFirst === '[object Arguments]') {
+ if (nums.length === 3) {
+ return this.nf(nums[0], nums[1], nums[2]);
+ } else if (nums.length === 2) {
+ return this.nf(nums[0], nums[1]);
+ } else {
+ return this.nf(nums[0]);
+ }
} else {
- return this.nf(nums[0]);
+ return doNf(nums, left, right);
}
- } else {
- return doNf(nums, left, right);
}
- }
-};
+ };
-function doNf(num, left, right) {
- let [leftPart, rightPart] = num.toString().split('.');
+ function doNf(num, left, right) {
+ let [leftPart, rightPart] = num.toString().split('.');
- if (typeof right === 'undefined') {
- leftPart = leftPart.padStart(left, '0');
- return rightPart ? leftPart + '.' + rightPart : leftPart;
- } else {
- let roundedOff = num.toFixed(right);
- [leftPart, rightPart] = roundedOff.toString().split('.');
- leftPart = leftPart.padStart(left, '0');
- if(typeof rightPart === 'undefined'){
- return leftPart;
- }else{
- return leftPart + '.' + rightPart;
+ if (typeof right === 'undefined') {
+ leftPart = leftPart.padStart(left, '0');
+ return rightPart ? leftPart + '.' + rightPart : leftPart;
+ } else {
+ let roundedOff = num.toFixed(right);
+ [leftPart, rightPart] = roundedOff.toString().split('.');
+ leftPart = leftPart.padStart(left, '0');
+ if(typeof rightPart === 'undefined'){
+ return leftPart;
+ }else{
+ return leftPart + '.' + rightPart;
+ }
}
}
-}
-/**
- * Converts a `Number` into a `String` with commas to mark units of 1,000.
- *
- * `nfc()` converts numbers such as 12345 into strings formatted with commas
- * to mark the thousands place, as in `'12,345'`.
- *
- * The first parameter, `num`, is the number to convert to a string. For
- * example, calling `nfc(12345)` returns the string `'12,345'`.
- *
- * The second parameter, `right`, is optional. If a number is passed, as in
- * `nfc(12345, 1)`, it sets the minimum number of digits to include to the
- * right of the decimal place. If `right` is smaller than the number of
- * decimal places in `num`, then `num` will be rounded to the given number of
- * decimal places. For example, calling `nfc(12345.67, 1)` returns the string
- * `'12,345.7'`. If `right` is larger than the number of decimal places in
- * `num`, then unused decimal places will be set to 0. For example, calling
- * `nfc(12345.67, 3)` returns the string `'12,345.670'`.
- *
- * @method nfc
- * @param {Number|String} num number to format.
- * @param {Integer|String} [right] number of digits to include to the right
- * of the decimal point.
- * @return {String} formatted string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(16);
+ *
+ * // Create a number variable.
+ * let number = 123.45;
+ *
+ * // Display the number as a string.
+ * let formatted = nf(number);
+ * text(formatted, 20, 25);
+ *
+ * // Display the number with four digits
+ * // to the left of the decimal.
+ * let left = nf(number, 4);
+ * text(left, 20, 50);
+ *
+ * // Display the number with four digits
+ * // to the left of the decimal and one
+ * // to the right.
+ * let right = nf(number, 4, 1);
+ * text(right, 20, 75);
+ *
+ * describe(
+ * 'The numbers "123.45", "0123.45", and "0123.5" written on three separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(16);
- *
- * // Create a number variable.
- * let number = 12345;
- *
- * // Display the number as a string.
- * let commas = nfc(number);
- * text(commas, 15, 33);
- *
- * // Display the number with four digits
- * // to the left of the decimal.
- * let decimals = nfc(number, 2);
- * text(decimals, 15, 67);
- *
- * describe(
- * 'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
- *
- */
-/**
- * @method nfc
- * @param {Number[]} nums numbers to format.
- * @param {Integer|String} [right]
- * @return {String[]} formatted strings.
- */
-p5.prototype.nfc = function(num, right) {
- p5._validateParameters('nfc', arguments);
- if (num instanceof Array) {
- return num.map(x => doNfc(x, right));
- } else {
- return doNfc(num, right);
- }
-};
-function doNfc(num, right) {
- num = num.toString();
- const dec = num.indexOf('.');
- let rem = dec !== -1 ? num.substring(dec) : '';
- let n = dec !== -1 ? num.substring(0, dec) : num;
- n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
- if (right === 0) {
- rem = '';
- } else if (typeof right !== 'undefined') {
- if (right > rem.length) {
- rem += dec === -1 ? '.' : '';
- const len = right - rem.length + 1;
- for (let i = 0; i < len; i++) {
- rem += '0';
- }
+ /**
+ * Converts a `Number` into a `String` with commas to mark units of 1,000.
+ *
+ * `nfc()` converts numbers such as 12345 into strings formatted with commas
+ * to mark the thousands place, as in `'12,345'`.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nfc(12345)` returns the string `'12,345'`.
+ *
+ * The second parameter, `right`, is optional. If a number is passed, as in
+ * `nfc(12345, 1)`, it sets the minimum number of digits to include to the
+ * right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nfc(12345.67, 1)` returns the string
+ * `'12,345.7'`. If `right` is larger than the number of decimal places in
+ * `num`, then unused decimal places will be set to 0. For example, calling
+ * `nfc(12345.67, 3)` returns the string `'12,345.670'`.
+ *
+ * @method nfc
+ * @param {Number|String} num number to format.
+ * @param {Integer|String} [right] number of digits to include to the right
+ * of the decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of numbers.
- * let numbers = [12345, 6789];
- *
- * // Convert the numbers to formatted strings.
- * let formatted = nfc(numbers);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < formatted.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 33;
- *
- * // Display the original and formatted numbers.
- * text(`${numbers[i]} : ${formatted[i]}`, 50, y);
- * }
- *
- * describe(
- * 'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(16);
+ *
+ * // Create a number variable.
+ * let number = 12345;
+ *
+ * // Display the number as a string.
+ * let commas = nfc(number);
+ * text(commas, 15, 33);
+ *
+ * // Display the number with four digits
+ * // to the left of the decimal.
+ * let decimals = nfc(number, 2);
+ * text(decimals, 15, 67);
+ *
+ * describe(
+ * 'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfc
+ * @param {Number[]} nums numbers to format.
+ * @param {Integer|String} [right]
+ * @return {String[]} formatted strings.
+ */
+ fn.nfc = function(num, right) {
+ p5._validateParameters('nfc', arguments);
+ if (num instanceof Array) {
+ return num.map(x => doNfc(x, right));
} else {
- rem = rem.substring(0, right + 1);
+ return doNfc(num, right);
}
+ };
+ function doNfc(num, right) {
+ num = num.toString();
+ const dec = num.indexOf('.');
+ let rem = dec !== -1 ? num.substring(dec) : '';
+ let n = dec !== -1 ? num.substring(0, dec) : num;
+ n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+ if (right === 0) {
+ rem = '';
+ } else if (typeof right !== 'undefined') {
+ if (right > rem.length) {
+ rem += dec === -1 ? '.' : '';
+ const len = right - rem.length + 1;
+ for (let i = 0; i < len; i++) {
+ rem += '0';
+ }
+ } else {
+ rem = rem.substring(0, right + 1);
+ }
+ }
+ return n + rem;
}
- return n + rem;
-}
-/**
- * Converts a `Number` into a `String` with a plus or minus sign.
- *
- * `nfp()` converts numbers such as 123 into strings formatted with a `+` or
- * `-` symbol to mark whether they're positive or negative, as in `'+123'`.
- *
- * The first parameter, `num`, is the number to convert to a string. For
- * example, calling `nfp(123.45)` returns the string `'+123.45'`. If an array
- * of numbers is passed, as in `nfp([123.45, -6.78])`, an array of formatted
- * strings will be returned.
- *
- * The second parameter, `left`, is optional. If a number is passed, as in
- * `nfp(123.45, 4)`, it sets the minimum number of digits to include to the
- * left of the decimal place. If `left` is larger than the number of digits in
- * `num`, then unused digits will be set to 0. For example, calling
- * `nfp(123.45, 4)` returns the string `'+0123.45'`.
- *
- * The third parameter, `right`, is also optional. If a number is passed, as
- * in `nfp(123.45, 4, 1)`, it sets the minimum number of digits to include to
- * the right of the decimal place. If `right` is smaller than the number of
- * decimal places in `num`, then `num` will be rounded to the given number of
- * decimal places. For example, calling `nfp(123.45, 4, 1)` returns the
- * string `'+0123.5'`. If `right` is larger than the number of decimal places
- * in `num`, then unused decimal places will be set to 0. For example,
- * calling `nfp(123.45, 4, 3)` returns the string `'+0123.450'`.
- *
- * @method nfp
- * @param {Number} num number to format.
- * @param {Integer} [left] number of digits to include to the left of the
- * decimal point.
- * @param {Integer} [right] number of digits to include to the right of the
- * decimal point.
- * @return {String} formatted string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of numbers.
+ * let numbers = [12345, 6789];
+ *
+ * // Convert the numbers to formatted strings.
+ * let formatted = nfc(numbers);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < formatted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 33;
+ *
+ * // Display the original and formatted numbers.
+ * text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create number variables.
- * let positive = 123;
- * let negative = -123;
- *
- * // Convert the positive number to a formatted string.
- * let p = nfp(positive);
- *
- * // Convert the negative number to a formatted string
- * // with four digits to the left of the decimal
- * // and two digits to the right of the decimal.
- * let n = nfp(negative, 4, 2);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(14);
- *
- * // Display the original and formatted numbers.
- * text(`${positive} : ${p}`, 50, 33);
- * text(`${negative} : ${n}`, 50, 67);
- *
- * describe(
- * 'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
- *
- */
-/**
- * @method nfp
- * @param {Number[]} nums numbers to format.
- * @param {Integer} [left]
- * @param {Integer} [right]
- * @return {String[]} formatted strings.
- */
-p5.prototype.nfp = function(...args) {
- p5._validateParameters('nfp', args);
- const nfRes = p5.prototype.nf.apply(this, args);
- if (nfRes instanceof Array) {
- return nfRes.map(addNfp);
- } else {
- return addNfp(nfRes);
+ /**
+ * Converts a `Number` into a `String` with a plus or minus sign.
+ *
+ * `nfp()` converts numbers such as 123 into strings formatted with a `+` or
+ * `-` symbol to mark whether they're positive or negative, as in `'+123'`.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nfp(123.45)` returns the string `'+123.45'`. If an array
+ * of numbers is passed, as in `nfp([123.45, -6.78])`, an array of formatted
+ * strings will be returned.
+ *
+ * The second parameter, `left`, is optional. If a number is passed, as in
+ * `nfp(123.45, 4)`, it sets the minimum number of digits to include to the
+ * left of the decimal place. If `left` is larger than the number of digits in
+ * `num`, then unused digits will be set to 0. For example, calling
+ * `nfp(123.45, 4)` returns the string `'+0123.45'`.
+ *
+ * The third parameter, `right`, is also optional. If a number is passed, as
+ * in `nfp(123.45, 4, 1)`, it sets the minimum number of digits to include to
+ * the right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nfp(123.45, 4, 1)` returns the
+ * string `'+0123.5'`. If `right` is larger than the number of decimal places
+ * in `num`, then unused decimal places will be set to 0. For example,
+ * calling `nfp(123.45, 4, 3)` returns the string `'+0123.450'`.
+ *
+ * @method nfp
+ * @param {Number} num number to format.
+ * @param {Integer} [left] number of digits to include to the left of the
+ * decimal point.
+ * @param {Integer} [right] number of digits to include to the right of the
+ * decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create number variables.
- * let numbers = [123, -4.56];
- *
- * // Convert the numbers to formatted strings
- * // with four digits to the left of the decimal
- * // and one digit to the right of the decimal.
- * let formatted = nfp(numbers, 4, 1);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(14);
- *
- * // Iterate over the array.
- * for (let i = 0; i < formatted.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 33;
- *
- * // Display the original and formatted numbers.
- * text(`${numbers[i]} : ${formatted[i]}`, 50, y);
- * }
- *
- * describe(
- * 'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create number variables.
+ * let positive = 123;
+ * let negative = -123;
+ *
+ * // Convert the positive number to a formatted string.
+ * let p = nfp(positive);
+ *
+ * // Convert the negative number to a formatted string
+ * // with four digits to the left of the decimal
+ * // and two digits to the right of the decimal.
+ * let n = nfp(negative, 4, 2);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Display the original and formatted numbers.
+ * text(`${positive} : ${p}`, 50, 33);
+ * text(`${negative} : ${n}`, 50, 67);
+ *
+ * describe(
+ * 'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfp
+ * @param {Number[]} nums numbers to format.
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted strings.
+ */
+ fn.nfp = function(...args) {
+ p5._validateParameters('nfp', args);
+ const nfRes = fn.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfp);
+ } else {
+ return addNfp(nfRes);
+ }
+ };
+
+ function addNfp(num) {
+ return parseFloat(num) > 0 ? `+${num.toString()}` : num.toString();
}
-};
-function addNfp(num) {
- return parseFloat(num) > 0 ? `+${num.toString()}` : num.toString();
-}
+ /**
+ * Converts a positive `Number` into a `String` with an extra space in front.
+ *
+ * `nfs()` converts positive numbers such as 123.45 into strings formatted
+ * with an extra space in front, as in ' 123.45'. Doing so can be helpful for
+ * aligning positive and negative numbers.
+ *
+ * The first parameter, `num`, is the number to convert to a string. For
+ * example, calling `nfs(123.45)` returns the string `' 123.45'`.
+ *
+ * The second parameter, `left`, is optional. If a number is passed, as in
+ * `nfs(123.45, 4)`, it sets the minimum number of digits to include to the
+ * left of the decimal place. If `left` is larger than the number of digits in
+ * `num`, then unused digits will be set to 0. For example, calling
+ * `nfs(123.45, 4)` returns the string `' 0123.45'`.
+ *
+ * The third parameter, `right`, is also optional. If a number is passed, as
+ * in `nfs(123.45, 4, 1)`, it sets the minimum number of digits to include to
+ * the right of the decimal place. If `right` is smaller than the number of
+ * decimal places in `num`, then `num` will be rounded to the given number of
+ * decimal places. For example, calling `nfs(123.45, 4, 1)` returns the
+ * string `' 0123.5'`. If `right` is larger than the number of decimal places
+ * in `num`, then unused decimal places will be set to 0. For example,
+ * calling `nfs(123.45, 4, 3)` returns the string `' 0123.450'`.
+ *
+ * @method nfs
+ * @param {Number} num number to format.
+ * @param {Integer} [left] number of digits to include to the left of the
+ * decimal point.
+ * @param {Integer} [right] number of digits to include to the right of the
+ * decimal point.
+ * @return {String} formatted string.
+ *
+ * @example
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create number variables.
+ * let numbers = [123, -4.56];
+ *
+ * // Convert the numbers to formatted strings
+ * // with four digits to the left of the decimal
+ * // and one digit to the right of the decimal.
+ * let formatted = nfp(numbers, 4, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(14);
+ *
+ * // Iterate over the array.
+ * for (let i = 0; i < formatted.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 33;
+ *
+ * // Display the original and formatted numbers.
+ * text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+ * }
+ *
+ * describe(
+ * 'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create number variables.
+ * let positive = 123;
+ * let negative = -123;
+ *
+ * // Convert the positive number to a formatted string.
+ * let formatted = nfs(positive);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display the negative number and the formatted positive number.
+ * text(negative, 50, 33);
+ * text(formatted, 50, 67);
+ *
+ * describe(
+ * 'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method nfs
+ * @param {Array} nums numbers to format.
+ * @param {Integer} [left]
+ * @param {Integer} [right]
+ * @return {String[]} formatted strings.
+ */
+ fn.nfs = function(...args) {
+ p5._validateParameters('nfs', args);
+ const nfRes = fn.nf.apply(this, args);
+ if (nfRes instanceof Array) {
+ return nfRes.map(addNfs);
+ } else {
+ return addNfs(nfRes);
+ }
+ };
-/**
- * Converts a positive `Number` into a `String` with an extra space in front.
- *
- * `nfs()` converts positive numbers such as 123.45 into strings formatted
- * with an extra space in front, as in ' 123.45'. Doing so can be helpful for
- * aligning positive and negative numbers.
- *
- * The first parameter, `num`, is the number to convert to a string. For
- * example, calling `nfs(123.45)` returns the string `' 123.45'`.
- *
- * The second parameter, `left`, is optional. If a number is passed, as in
- * `nfs(123.45, 4)`, it sets the minimum number of digits to include to the
- * left of the decimal place. If `left` is larger than the number of digits in
- * `num`, then unused digits will be set to 0. For example, calling
- * `nfs(123.45, 4)` returns the string `' 0123.45'`.
- *
- * The third parameter, `right`, is also optional. If a number is passed, as
- * in `nfs(123.45, 4, 1)`, it sets the minimum number of digits to include to
- * the right of the decimal place. If `right` is smaller than the number of
- * decimal places in `num`, then `num` will be rounded to the given number of
- * decimal places. For example, calling `nfs(123.45, 4, 1)` returns the
- * string `' 0123.5'`. If `right` is larger than the number of decimal places
- * in `num`, then unused decimal places will be set to 0. For example,
- * calling `nfs(123.45, 4, 3)` returns the string `' 0123.450'`.
- *
- * @method nfs
- * @param {Number} num number to format.
- * @param {Integer} [left] number of digits to include to the left of the
- * decimal point.
- * @param {Integer} [right] number of digits to include to the right of the
- * decimal point.
- * @return {String} formatted string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a number variable.
+ * let number = 123.45;
+ *
+ * // Convert the positive number to a formatted string.
+ * // Use four digits to the left of the decimal and
+ * // one digit to the right.
+ * let formatted = nfs(number, 4, 1);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Display a negative version of the number and
+ * // the formatted positive version.
+ * text('-0123.5', 50, 33);
+ * text(formatted, 50, 67);
+ *
+ * describe(
+ * 'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create number variables.
- * let positive = 123;
- * let negative = -123;
- *
- * // Convert the positive number to a formatted string.
- * let formatted = nfs(positive);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(16);
- *
- * // Display the negative number and the formatted positive number.
- * text(negative, 50, 33);
- * text(formatted, 50, 67);
- *
- * describe(
- * 'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
- * );
- * }
- *
- *
- *
- */
-/**
- * @method nfs
- * @param {Array} nums numbers to format.
- * @param {Integer} [left]
- * @param {Integer} [right]
- * @return {String[]} formatted strings.
- */
-p5.prototype.nfs = function(...args) {
- p5._validateParameters('nfs', args);
- const nfRes = p5.prototype.nf.apply(this, args);
- if (nfRes instanceof Array) {
- return nfRes.map(addNfs);
- } else {
- return addNfs(nfRes);
+ function addNfs(num) {
+ return parseFloat(num) >= 0 ? ` ${num.toString()}` : num.toString();
}
-};
-function addNfs(num) {
- return parseFloat(num) >= 0 ? ` ${num.toString()}` : num.toString();
-}
+ /**
+ * Splits a `String` into pieces and returns an array containing the pieces.
+ *
+ * The first parameter, `value`, is the string to split.
+ *
+ * The second parameter, `delim`, is the character(s) that should be used to
+ * split the string. For example, calling
+ * `split('rock...paper...scissors', '...')` would return the array
+ * `['rock', 'paper', 'scissors']` because there are three periods `...`
+ * between each word.
+ *
+ * @method split
+ * @param {String} value the String to be split
+ * @param {String} delim the String used to separate the data
+ * @return {String[]} Array of Strings
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a number variable.
- * let number = 123.45;
- *
- * // Convert the positive number to a formatted string.
- * // Use four digits to the left of the decimal and
- * // one digit to the right.
- * let formatted = nfs(number, 4, 1);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(16);
- *
- * // Display a negative version of the number and
- * // the formatted positive version.
- * text('-0123.5', 50, 33);
- * text(formatted, 50, 67);
- *
- * describe(
- * 'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
- * );
- * }
- *
- *
+ *
+ */
+ fn.split = function(str, delim) {
+ p5._validateParameters('split', arguments);
+ return str.split(delim);
+ };
-/**
- * Splits a `String` into pieces and returns an array containing the pieces.
- *
- * The first parameter, `value`, is the string to split.
- *
- * The second parameter, `delim`, is the character(s) that should be used to
- * split the string. For example, calling
- * `split('rock...paper...scissors', '...')` would return the array
- * `['rock', 'paper', 'scissors']` because there are three periods `...`
- * between each word.
- *
- * @method split
- * @param {String} value the String to be split
- * @param {String} delim the String used to separate the data
- * @return {String[]} Array of Strings
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock...paper...scissors';
+ *
+ * // Split the string at each ...
+ * let words = split(string, '...');
+ *
+ * // Print the array to the console:
+ * // ["rock", "paper", "scissors"]
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 25;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- */
-p5.prototype.split = function(str, delim) {
- p5._validateParameters('split', arguments);
- return str.split(delim);
-};
+ /**
+ * Splits a `String` into pieces and returns an array containing the pieces.
+ *
+ * `splitTokens()` is an enhanced version of
+ * split(). It can split a string when any characters
+ * from a list are detected.
+ *
+ * The first parameter, `value`, is the string to split.
+ *
+ * The second parameter, `delim`, is optional. It sets the character(s) that
+ * should be used to split the string. `delim` can be a single string, as in
+ * `splitTokens('rock...paper...scissors...shoot', '...')`, or an array of
+ * strings, as in
+ * `splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])`. By default,
+ * if no `delim` characters are specified, then any whitespace character is
+ * used to split. Whitespace characters include tab (`\t`), line feed (`\n`),
+ * carriage return (`\r`), form feed (`\f`), and space.
+ *
+ * @method splitTokens
+ * @param {String} value string to split.
+ * @param {String} [delim] character(s) to use for splitting the string.
+ * @return {String[]} separated strings.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = 'rock...paper...scissors';
- *
- * // Split the string at each ...
- * let words = split(string, '...');
- *
- * // Print the array to the console:
- * // ["rock", "paper", "scissors"]
- * print(words);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(16);
- *
- * // Iterate over the words array.
- * for (let i = 0; i < words.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 25;
- *
- * // Display the word.
- * text(words[i], 50, y);
- * }
- *
- * describe(
- * 'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock paper scissors shoot';
+ *
+ * // Split the string at each space.
+ * let words = splitTokens(string);
+ *
+ * // Print the array to the console.
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock...paper...scissors...shoot';
+ *
+ * // Split the string at each ...
+ * let words = splitTokens(string, '...');
+ *
+ * // Print the array to the console.
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
+ *
+ */
+ fn.splitTokens = function(value, delims) {
+ p5._validateParameters('splitTokens', arguments);
+ let d;
+ if (typeof delims !== 'undefined') {
+ let str = delims;
+ const sqc = /\]/g.exec(str);
+ let sqo = /\[/g.exec(str);
+ if (sqo && sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ sqo = /\[/g.exec(str);
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp(`[\\[${str}\\]]`, 'g');
+ } else if (sqc) {
+ str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
+ d = new RegExp(`[${str}\\]]`, 'g');
+ } else if (sqo) {
+ str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
+ d = new RegExp(`[${str}\\[]`, 'g');
+ } else {
+ d = new RegExp(`[${str}]`, 'g');
+ }
+ } else {
+ d = /\s/g;
+ }
+ return value.split(d).filter(n => n);
+ };
-/**
- * Splits a `String` into pieces and returns an array containing the pieces.
- *
- * `splitTokens()` is an enhanced version of
- * split(). It can split a string when any characters
- * from a list are detected.
- *
- * The first parameter, `value`, is the string to split.
- *
- * The second parameter, `delim`, is optional. It sets the character(s) that
- * should be used to split the string. `delim` can be a single string, as in
- * `splitTokens('rock...paper...scissors...shoot', '...')`, or an array of
- * strings, as in
- * `splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])`. By default,
- * if no `delim` characters are specified, then any whitespace character is
- * used to split. Whitespace characters include tab (`\t`), line feed (`\n`),
- * carriage return (`\r`), form feed (`\f`), and space.
- *
- * @method splitTokens
- * @param {String} value string to split.
- * @param {String} [delim] character(s) to use for splitting the string.
- * @return {String[]} separated strings.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = 'rock;paper,scissors...shoot';
+ *
+ * // Split the string at each semicolon, comma, or ...
+ * let words = splitTokens(string, [';', ',', '...']);
+ *
+ * // Print the array to the console.
+ * print(words);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(12);
+ *
+ * // Iterate over the words array.
+ * for (let i = 0; i < words.length; i += 1) {
+ *
+ * // Calculate the y-coordinate.
+ * let y = (i + 1) * 20;
+ *
+ * // Display the word.
+ * text(words[i], 50, y);
+ * }
+ *
+ * describe(
+ * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = 'rock paper scissors shoot';
- *
- * // Split the string at each space.
- * let words = splitTokens(string);
- *
- * // Print the array to the console.
- * print(words);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Iterate over the words array.
- * for (let i = 0; i < words.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 20;
- *
- * // Display the word.
- * text(words[i], 50, y);
- * }
- *
- * describe(
- * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = 'rock...paper...scissors...shoot';
- *
- * // Split the string at each ...
- * let words = splitTokens(string, '...');
- *
- * // Print the array to the console.
- * print(words);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Iterate over the words array.
- * for (let i = 0; i < words.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 20;
- *
- * // Display the word.
- * text(words[i], 50, y);
- * }
- *
- * describe(
- * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
- *
- */
-p5.prototype.splitTokens = function(value, delims) {
- p5._validateParameters('splitTokens', arguments);
- let d;
- if (typeof delims !== 'undefined') {
- let str = delims;
- const sqc = /\]/g.exec(str);
- let sqo = /\[/g.exec(str);
- if (sqo && sqc) {
- str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
- sqo = /\[/g.exec(str);
- str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
- d = new RegExp(`[\\[${str}\\]]`, 'g');
- } else if (sqc) {
- str = str.slice(0, sqc.index) + str.slice(sqc.index + 1);
- d = new RegExp(`[${str}\\]]`, 'g');
- } else if (sqo) {
- str = str.slice(0, sqo.index) + str.slice(sqo.index + 1);
- d = new RegExp(`[${str}\\[]`, 'g');
+ /**
+ * Removes whitespace from the start and end of a `String` without changing the middle.
+ *
+ * `trim()` trims
+ * whitespace characters
+ * such as spaces, carriage returns, tabs, Unicode "nbsp" character.
+ *
+ * The parameter, `str`, is the string to trim. If a single string is passed,
+ * as in `trim(' pad ')`, a single string is returned. If an array of
+ * strings is passed, as in `trim([' pad ', '\n space \n'])`, an array of
+ * strings is returned.
+ *
+ * @method trim
+ * @param {String} str string to trim.
+ * @return {String} trimmed string.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = 'rock;paper,scissors...shoot';
- *
- * // Split the string at each semicolon, comma, or ...
- * let words = splitTokens(string, [';', ',', '...']);
- *
- * // Print the array to the console.
- * print(words);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(12);
- *
- * // Iterate over the words array.
- * for (let i = 0; i < words.length; i += 1) {
- *
- * // Calculate the y-coordinate.
- * let y = (i + 1) * 20;
- *
- * // Display the word.
- * text(words[i], 50, y);
- * }
- *
- * describe(
- * 'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
- * );
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create a string variable.
+ * let string = ' p5*js ';
+ *
+ * // Trim the whitespace.
+ * let trimmed = trim(string);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(16);
+ *
+ * // Display the text.
+ * text(`Hello, ${trimmed}!`, 50, 50);
+ *
+ * describe('The text "Hello, p5*js!" written in black on a gray background.');
+ * }
+ *
+ *
+ *
+ */
+ /**
+ * @method trim
+ * @param {String[]} strs strings to trim.
+ * @return {String[]} trimmed strings.
+ */
+ fn.trim = function(str) {
+ p5._validateParameters('trim', arguments);
+ if (str instanceof Array) {
+ return str.map(this.trim);
} else {
- d = new RegExp(`[${str}]`, 'g');
+ return str.trim();
}
- } else {
- d = /\s/g;
- }
- return value.split(d).filter(n => n);
-};
+ };
+}
-/**
- * Removes whitespace from the start and end of a `String` without changing the middle.
- *
- * `trim()` trims
- * whitespace characters
- * such as spaces, carriage returns, tabs, Unicode "nbsp" character.
- *
- * The parameter, `str`, is the string to trim. If a single string is passed,
- * as in `trim(' pad ')`, a single string is returned. If an array of
- * strings is passed, as in `trim([' pad ', '\n space \n'])`, an array of
- * strings is returned.
- *
- * @method trim
- * @param {String} str string to trim.
- * @return {String} trimmed string.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Create an array of strings.
+ * let strings = [' wide ', '\n open ', '\n spaces '];
+ *
+ * // Trim the whitespace.
+ * let trimmed = trim(strings);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(10);
+ *
+ * // Display the text.
+ * text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
+ *
+ * describe('The text "wide open spaces" written in black on a gray background.');
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create a string variable.
- * let string = ' p5*js ';
- *
- * // Trim the whitespace.
- * let trimmed = trim(string);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textSize(16);
- *
- * // Display the text.
- * text(`Hello, ${trimmed}!`, 50, 50);
- *
- * describe('The text "Hello, p5*js!" written in black on a gray background.');
- * }
- *
- *
- *
- */
-/**
- * @method trim
- * @param {String[]} strs strings to trim.
- * @return {String[]} trimmed strings.
- */
-p5.prototype.trim = function(str) {
- p5._validateParameters('trim', arguments);
- if (str instanceof Array) {
- return str.map(this.trim);
- } else {
- return str.trim();
- }
-};
+export default stringFunctions;
-export default p5;
+if(typeof p5 !== 'undefined'){
+ stringFunctions(p5, p5.prototype);
+}
diff --git a/src/utilities/time_date.js b/src/utilities/time_date.js
index 88d91b3371..6177b7093f 100644
--- a/src/utilities/time_date.js
+++ b/src/utilities/time_date.js
@@ -5,341 +5,345 @@
* @requires core
*/
-import p5 from '../core/main';
+function timeDate(p5, fn){
+ /**
+ * Returns the current day as a number from 1–31.
+ *
+ * @method day
+ * @return {Integer} current day between 1 and 31.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Create an array of strings.
- * let strings = [' wide ', '\n open ', '\n spaces '];
- *
- * // Trim the whitespace.
- * let trimmed = trim(strings);
- *
- * // Style the text.
- * textAlign(CENTER, CENTER);
- * textFont('Courier New');
- * textSize(10);
- *
- * // Display the text.
- * text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
- *
- * describe('The text "wide open spaces" written in black on a gray background.');
- * }
- *
- *
+ *
+ */
+ fn.day = function() {
+ return new Date().getDate();
+ };
-/**
- * Returns the current day as a number from 1–31.
- *
- * @method day
- * @return {Integer} current day between 1 and 31.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current day.
+ * let d = day();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the day.
+ * text(`Current day: ${d}`, 20, 50, 60);
+ *
+ * describe(`The text 'Current day: ${d}' written in black on a gray background.`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.day = function() {
- return new Date().getDate();
-};
+ /**
+ * Returns the current hour as a number from 0–23.
+ *
+ * @method hour
+ * @return {Integer} current hour between 0 and 23.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the current day.
- * let d = day();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(12);
- * textFont('Courier New');
- *
- * // Display the day.
- * text(`Current day: ${d}`, 20, 50, 60);
- *
- * describe(`The text 'Current day: ${d}' written in black on a gray background.`);
- * }
- *
- *
+ *
+ */
+ fn.hour = function() {
+ return new Date().getHours();
+ };
-/**
- * Returns the current hour as a number from 0–23.
- *
- * @method hour
- * @return {Integer} current hour between 0 and 23.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current hour.
+ * let h = hour();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the hour.
+ * text(`Current hour: ${h}`, 20, 50, 60);
+ *
+ * describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.hour = function() {
- return new Date().getHours();
-};
+ /**
+ * Returns the current minute as a number from 0–59.
+ *
+ * @method minute
+ * @return {Integer} current minute between 0 and 59.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the current hour.
- * let h = hour();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(12);
- * textFont('Courier New');
- *
- * // Display the hour.
- * text(`Current hour: ${h}`, 20, 50, 60);
- *
- * describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
- * }
- *
- *
+ *
+ */
+ fn.minute = function() {
+ return new Date().getMinutes();
+ };
-/**
- * Returns the current minute as a number from 0–59.
- *
- * @method minute
- * @return {Integer} current minute between 0 and 59.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current minute.
+ * let m = minute();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the minute.
+ * text(`Current minute: ${m}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.minute = function() {
- return new Date().getMinutes();
-};
+ /**
+ * Returns the number of milliseconds since a sketch started running.
+ *
+ * `millis()` keeps track of how long a sketch has been running in
+ * milliseconds (thousandths of a second). This information is often
+ * helpful for timing events and animations.
+ *
+ * If a sketch has a
+ * setup() function, then `millis()` begins tracking
+ * time before the code in setup() runs. If a
+ * sketch includes a preload() function, then
+ * `millis()` begins tracking time as soon as the code in
+ * preload() starts running.
+ *
+ * @method millis
+ * @return {Number} number of milliseconds since starting the sketch.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the current minute.
- * let m = minute();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(12);
- * textFont('Courier New');
- *
- * // Display the minute.
- * text(`Current minute: ${m}`, 10, 50, 80);
- *
- * describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
- * }
- *
- *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the number of milliseconds the sketch has run.
+ * let ms = millis();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(10);
+ * textFont('Courier New');
+ *
+ * // Display how long it took setup() to be called.
+ * text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
+ *
+ * describe(
+ * `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
+ * );
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the number of seconds the sketch has run.
+ * let s = millis() / 1000;
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(10);
+ * textFont('Courier New');
+ *
+ * // Display how long the sketch has run.
+ * text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle oscillates left and right on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Get the number of seconds the sketch has run.
+ * let s = millis() / 1000;
+ *
+ * // Calculate an x-coordinate.
+ * let x = 30 * sin(s) + 50;
+ *
+ * // Draw the circle.
+ * circle(x, 50, 30);
+ * }
+ *
+ *
+ *
+ */
+ fn.millis = function() {
+ if (this._millisStart === -1) {
+ // Sketch has not started
+ return 0;
+ } else {
+ return window.performance.now() - this._millisStart;
+ }
+ };
-/**
- * Returns the number of milliseconds since a sketch started running.
- *
- * `millis()` keeps track of how long a sketch has been running in
- * milliseconds (thousandths of a second). This information is often
- * helpful for timing events and animations.
- *
- * If a sketch has a
- * setup() function, then `millis()` begins tracking
- * time before the code in setup() runs. If a
- * sketch includes a preload() function, then
- * `millis()` begins tracking time as soon as the code in
- * preload() starts running.
- *
- * @method millis
- * @return {Number} number of milliseconds since starting the sketch.
- *
- * @example
- *
+ * // Load the GeoJSON.
+ * function preload() {
+ * loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the number of milliseconds the sketch has run.
+ * let ms = millis();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textFont('Courier New');
+ * textSize(11);
+ *
+ * // Display how long it took to load the data.
+ * text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
+ *
+ * describe(
+ * `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
+ * );
+ * }
+ *
+ *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the number of milliseconds the sketch has run.
- * let ms = millis();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(10);
- * textFont('Courier New');
- *
- * // Display how long it took setup() to be called.
- * text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
- *
- * describe(
- * `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
- * );
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Get the number of seconds the sketch has run.
- * let s = millis() / 1000;
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(10);
- * textFont('Courier New');
- *
- * // Display how long the sketch has run.
- * text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
- * }
- *
- *
- *
- *
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe('A white circle oscillates left and right on a gray background.');
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Get the number of seconds the sketch has run.
- * let s = millis() / 1000;
- *
- * // Calculate an x-coordinate.
- * let x = 30 * sin(s) + 50;
- *
- * // Draw the circle.
- * circle(x, 50, 30);
- * }
- *
- *
- *
- */
-p5.prototype.millis = function() {
- if (this._millisStart === -1) {
- // Sketch has not started
- return 0;
- } else {
- return window.performance.now() - this._millisStart;
- }
-};
+ /**
+ * Returns the current month as a number from 1–12.
+ *
+ * @method month
+ * @return {Integer} current month between 1 and 12.
+ *
+ * @example
+ *
- * // Load the GeoJSON.
- * function preload() {
- * loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the number of milliseconds the sketch has run.
- * let ms = millis();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textFont('Courier New');
- * textSize(11);
- *
- * // Display how long it took to load the data.
- * text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
- *
- * describe(
- * `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
- * );
- * }
- *
- *
+ *
+ */
+ fn.month = function() {
+ //January is 0!
+ return new Date().getMonth() + 1;
+ };
-/**
- * Returns the current month as a number from 1–12.
- *
- * @method month
- * @return {Integer} current month between 1 and 12.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current month.
+ * let m = month();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the month.
+ * text(`Current month: ${m}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current month: ${m}' written in black on a gray background.`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.month = function() {
- //January is 0!
- return new Date().getMonth() + 1;
-};
+ /**
+ * Returns the current second as a number from 0–59.
+ *
+ * @method second
+ * @return {Integer} current second between 0 and 59.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the current month.
- * let m = month();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(12);
- * textFont('Courier New');
- *
- * // Display the month.
- * text(`Current month: ${m}`, 10, 50, 80);
- *
- * describe(`The text 'Current month: ${m}' written in black on a gray background.`);
- * }
- *
- *
+ *
+ */
+ fn.second = function() {
+ return new Date().getSeconds();
+ };
-/**
- * Returns the current second as a number from 0–59.
- *
- * @method second
- * @return {Integer} current second between 0 and 59.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current second.
+ * let s = second();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the second.
+ * text(`Current second: ${s}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current second: ${s}' written in black on a gray background.`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.second = function() {
- return new Date().getSeconds();
-};
+ /**
+ * Returns the current year as a number such as 1999.
+ *
+ * @method year
+ * @return {Integer} current year.
+ *
+ * @example
+ *
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the current second.
- * let s = second();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(12);
- * textFont('Courier New');
- *
- * // Display the second.
- * text(`Current second: ${s}`, 10, 50, 80);
- *
- * describe(`The text 'Current second: ${s}' written in black on a gray background.`);
- * }
- *
- *
+ *
+ */
+ fn.year = function() {
+ return new Date().getFullYear();
+ };
+}
-/**
- * Returns the current year as a number such as 1999.
- *
- * @method year
- * @return {Integer} current year.
- *
- * @example
- *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Get the current year.
+ * let y = year();
+ *
+ * // Style the text.
+ * textAlign(LEFT, CENTER);
+ * textSize(12);
+ * textFont('Courier New');
+ *
+ * // Display the year.
+ * text(`Current year: ${y}`, 10, 50, 80);
+ *
+ * describe(`The text 'Current year: ${y}' written in black on a gray background.`);
+ * }
+ *
+ *
- *
- */
-p5.prototype.year = function() {
- return new Date().getFullYear();
-};
+export default timeDate;
-export default p5;
+if(typeof p5 !== 'undefined'){
+ timeDate(p5, p5.prototype);
+}
diff --git a/vitest.workspace.mjs b/vitest.workspace.mjs
index 18ec5254c1..c5f497ce64 100644
--- a/vitest.workspace.mjs
+++ b/vitest.workspace.mjs
@@ -22,7 +22,7 @@ export default defineWorkspace([
exclude: [
'./test/unit/spec.js',
'./test/unit/assets/**/*',
- './test/unit/visual/visualTest.js',
+ './test/unit/visual/visualTest.js',
],
testTimeout: 1000,
globals: true,
- * function setup() {
- * createCanvas(100, 100);
- *
- * background(200);
- *
- * // Get the current year.
- * let y = year();
- *
- * // Style the text.
- * textAlign(LEFT, CENTER);
- * textSize(12);
- * textFont('Courier New');
- *
- * // Display the year.
- * text(`Current year: ${y}`, 10, 50, 80);
- *
- * describe(`The text 'Current year: ${y}' written in black on a gray background.`);
- * }
- *
- *