Function loadingDisplaying

src/image/loading_displaying.js:13–1406

(p5, fn)

import { GIFEncoder, quantize, nearestColorIndex } from 'gifenc';

function loadingDisplaying(p5, fn){
  /**
   * Loads an image to create a <a href="#/p5.Image">p5.Image</a> object.
   *
   * `loadImage()` interprets the first parameter one of three ways. If the path
   * to an image file is provided, `loadImage()` will load it. Paths to local
   * files should be relative, such as `'assets/thundercat.jpg'`. URLs such as
   * `'https://example.com/thundercat.jpg'` may be blocked due to browser
   * security. Raw image data can also be passed as a base64 encoded image in
   * the form `'data:image/png;base64,arandomsequenceofcharacters'`. The `path`
   * parameter can also be defined as a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
   * object for more advanced usage.
   *
   * The second parameter is optional. If a function is passed, it will be
   * called once the image has loaded. The callback function can optionally use
   * the new <a href="#/p5.Image">p5.Image</a> object. The return value of the
   * function will be used as the final return value of `loadImage()`.
   *
   * The third parameter is also optional. If a function is passed, it will be
   * called if the image fails to load. The callback function can optionally use
   * the event error. The return value of the function will be used as the final
   * return value of `loadImage()`.
   *
   * This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   *
   * @method loadImage
   * @param  {String|Request}      path  path of the image to be loaded or base64 encoded image.
   * @param  {function(p5.Image)} [successCallback] function called with
   *                               <a href="#/p5.Image">p5.Image</a> once it
   *                               loads.
   * @param  {function(Event)}    [failureCallback] function called with event
   *                               error if the image fails to load.
   * @return {Promise<p5.Image>}   the <a href="#/p5.Image">p5.Image</a> object.
   *
   * @example
   * let img;
   *
   * // Load the image and create a p5.Image object.
   * async function setup() {
   *   img = await loadImage('assets/laDefense.jpg');
   *   createCanvas(100, 100);
   *
   *   // Draw the image.
   *   image(img, 0, 0);
   *
   *   describe('Image of the underside of a white umbrella and a gridded ceiling.');
   * }
   *
   * @example
   * async function setup() {
   *   // Call handleImage() once the image loads.
   *   await loadImage('assets/laDefense.jpg', handleImage);
   *
   *   describe('Image of the underside of a white umbrella and a gridded ceiling.');
   * }
   *
   * // Display the image.