tessl/npm-p5

A free and open-source JavaScript library for accessible creative coding

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Image Processing

Name: tessl/npm-p5
Author: tessl

Image loading, display, manipulation, filtering, and pixel-level operations for creative image effects and multimedia applications.

Capabilities

Image Loading and Display

Functions for loading and displaying images on the canvas.

/**
 * Load an image from a file
 * @param {string} path - Path to image file
 * @param {function} [successCallback] - Called when image loads successfully
 * @param {function} [failureCallback] - Called if image fails to load
 * @returns {p5.Image} Image object
 */
function loadImage(path, successCallback, failureCallback);

/**
 * Display an image on the canvas
 * @param {p5.Image} img - Image to display
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 * @param {number} [width] - Display width
 * @param {number} [height] - Display height
 */
function image(img, x, y, width, height);

/**
 * Create a blank image
 * @param {number} width - Image width in pixels
 * @param {number} height - Image height in pixels
 * @returns {p5.Image} New blank image
 */
function createImage(width, height);

Image Tinting and Mode

Functions for applying color effects to images.

/**
 * Apply color tint to subsequently drawn images
 * @param {...(number|string|p5.Color)} args - Tint color values
 */
function tint(...args);

/**
 * Remove any applied tint
 */
function noTint();

/**
 * Set image drawing mode
 * @param {string} mode - CORNER, CORNERS, CENTER
 */
function imageMode(mode);

Pixel Manipulation

Direct pixel access and manipulation functions.

/**
 * Load pixel array for direct manipulation
 */
function loadPixels();

/**
 * Update canvas from modified pixel array
 * @param {number} [x] - X coordinate of region to update
 * @param {number} [y] - Y coordinate of region to update
 * @param {number} [w] - Width of region to update
 * @param {number} [h] - Height of region to update
 */
function updatePixels(x, y, w, h);

/**
 * Get pixel color or image region
 * @param {number} [x] - X coordinate
 * @param {number} [y] - Y coordinate
 * @param {number} [w] - Width of region
 * @param {number} [h] - Height of region
 * @returns {p5.Color|p5.Image} Color at point or image of region
 */
function get(x, y, w, h);

/**
 * Set pixel color
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 * @param {p5.Color|number|number[]} color - Color to set
 */
function set(x, y, color);

Image Filters

Built-in image filtering functions for visual effects.

/**
 * Apply filter to canvas
 * @param {string} filterType - Filter type constant
 * @param {number} [filterParam] - Filter parameter where applicable
 * Available filters: THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, 
 * BLUR, ERODE, DILATE
 */
function filter(filterType, filterParam);

p5.Image Class

Image object with manipulation capabilities.

/**
 * Image container class
 */
class p5.Image {
  /** Image width in pixels */
  width;
  /** Image height in pixels */
  height;
  /** Pixel array (RGBA values) */
  pixels;
  
  /**
   * Load pixel array for manipulation
   */
  loadPixels();
  
  /**
   * Update image from pixel array
   */
  updatePixels();
  
  /**
   * Get pixel color or region
   * @param {number} [x] - X coordinate
   * @param {number} [y] - Y coordinate
   * @param {number} [w] - Width of region
   * @param {number} [h] - Height of region
   * @returns {p5.Color|p5.Image} Color or image region
   */
  get(x, y, w, h);
  
  /**
   * Set pixel color
   * @param {number} x - X coordinate
   * @param {number} y - Y coordinate
   * @param {p5.Color|number|number[]} color - Color to set
   */
  set(x, y, color);
  
  /**
   * Resize image
   * @param {number} width - New width
   * @param {number} height - New height
   */
  resize(width, height);
  
  /**
   * Create copy of image
   * @returns {p5.Image} Copy of this image
   */
  copy();
  
  /**
   * Apply mask to image
   * @param {p5.Image} srcImage - Mask image
   */
  mask(srcImage);
  
  /**
   * Apply filter to image
   * @param {string} filterType - Filter type
   * @param {number} [filterParam] - Filter parameter
   */
  filter(filterType, filterParam);
  
  /**
   * Blend with another image
   * @param {p5.Image} srcImage - Source image
   * @param {number} dx - Destination X
   * @param {number} dy - Destination Y
   * @param {number} dw - Destination width
   * @param {number} dh - Destination height
   * @param {number} sx - Source X
   * @param {number} sy - Source Y
   * @param {number} sw - Source width
   * @param {number} sh - Source height
   * @param {string} blendMode - Blend mode
   */
  blend(srcImage, dx, dy, dw, dh, sx, sy, sw, sh, blendMode);
  
  /**
   * Save image to file
   * @param {string} filename - File name
   * @param {string} extension - File extension
   */
  save(filename, extension);
}

See complete usage examples and detailed documentation in the p5.js reference.

Install with Tessl CLI