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

DOM Manipulation

Name: tessl/npm-p5
Author: tessl

Create and control HTML elements, form inputs, and integrate p5.js with web page DOM for interactive web applications beyond the canvas.

Capabilities

Element Selection

Functions for selecting existing DOM elements.

/**
 * Select single DOM element by CSS selector
 * @param {string} selector - CSS selector string
 * @param {string|Element} [container] - Container element to search within
 * @returns {p5.Element|null} Element wrapper or null if not found
 */
function select(selector, container);

/**
 * Select multiple DOM elements by CSS selector
 * @param {string} selector - CSS selector string
 * @param {string|Element} [container] - Container element to search within
 * @returns {p5.Element[]} Array of element wrappers
 */
function selectAll(selector, container);

/**
 * Remove all p5-created DOM elements
 */
function removeElements();

Element Creation

Functions for creating new HTML elements.

/**
 * Create generic HTML element
 * @param {string} tag - HTML tag name
 * @param {string} [content] - Initial content
 * @returns {p5.Element} Element wrapper
 */
function createElement(tag, content);

/**
 * Create div element
 * @param {string} [html] - Initial HTML content
 * @returns {p5.Element} Div element wrapper
 */
function createDiv(html);

/**
 * Create paragraph element
 * @param {string} [html] - Initial HTML content
 * @returns {p5.Element} Paragraph element wrapper
 */
function createP(html);

/**
 * Create span element
 * @param {string} [html] - Initial HTML content
 * @returns {p5.Element} Span element wrapper
 */
function createSpan(html);

/**
 * Create image element
 * @param {string} src - Image source URL
 * @param {string} [alt] - Alt text
 * @param {string} [crossOrigin] - Cross-origin attribute
 * @param {function} [callback] - Load callback
 * @returns {p5.Element} Image element wrapper
 */
function createImg(src, alt, crossOrigin, callback);

/**
 * Create link element
 * @param {string} href - Link URL
 * @param {string} html - Link text/HTML
 * @param {string} [target] - Target attribute
 * @returns {p5.Element} Link element wrapper
 */
function createA(href, html, target);

Form Input Elements

Functions for creating interactive form elements.

/**
 * Create button element
 * @param {string} label - Button text
 * @param {string} [value] - Button value
 * @returns {p5.Element} Button element wrapper
 */
function createButton(label, value);

/**
 * Create checkbox input
 * @param {string} [label] - Checkbox label
 * @param {boolean} [value] - Initial checked state
 * @returns {p5.Element} Checkbox element wrapper
 */
function createCheckbox(label, value);

/**
 * Create select dropdown
 * @param {boolean} [multiple] - Allow multiple selections
 * @returns {p5.Element} Select element wrapper
 */
function createSelect(multiple);

/**
 * Create radio button group
 * @param {string|p5.Element} [containerElement] - Container for radio group
 * @param {string} [name] - Radio group name
 * @returns {p5.Element} Radio group wrapper
 */
function createRadio(containerElement, name);

/**
 * Create range slider
 * @param {number} min - Minimum value
 * @param {number} max - Maximum value
 * @param {number} [value] - Initial value
 * @param {number} [step] - Step size
 * @returns {p5.Element} Slider element wrapper
 */
function createSlider(min, max, value, step);

/**
 * Create text input
 * @param {string} [value] - Initial value
 * @param {string} [type] - Input type (text, password, email, etc.)
 * @returns {p5.Element} Input element wrapper
 */
function createInput(value, type);

/**
 * Create file input
 * @param {function} callback - File selection callback
 * @param {boolean} [multiple] - Allow multiple file selection
 * @returns {p5.Element} File input wrapper
 */
function createFileInput(callback, multiple);

/**
 * Create color picker
 * @param {string} [value] - Initial color value
 * @returns {p5.Element} Color picker wrapper
 */
function createColorPicker(value);

p5.Element Class

Wrapper class for DOM elements with p5-specific methods.

/**
 * DOM element wrapper with p5 integration
 */
class p5.Element {
  /** Reference to underlying DOM element */
  elt;
  
  /**
   * Get or set element's parent
   * @param {string|p5.Element|Element} [parent] - Parent element
   * @returns {p5.Element} Parent element when getting
   */
  parent(parent);
  
  /**
   * Get element ID
   * @param {string} [id] - ID to set
   * @returns {string} Element ID when getting
   */
  id(id);
  
  /**
   * Get or set CSS class
   * @param {string} [class] - CSS class to set
   * @returns {string} CSS class when getting
   */
  class(class);
  
  /**
   * Add CSS class
   * @param {string} class - CSS class to add
   * @returns {p5.Element} This element for chaining
   */
  addClass(class);
  
  /**
   * Remove CSS class
   * @param {string} class - CSS class to remove
   * @returns {p5.Element} This element for chaining
   */
  removeClass(class);
  
  /**
   * Check if element has CSS class
   * @param {string} class - CSS class to check
   * @returns {boolean} True if element has class
   */
  hasClass(class);
  
  /**
   * Toggle CSS class
   * @param {string} class - CSS class to toggle
   * @returns {p5.Element} This element for chaining
   */
  toggleClass(class);
  
  /**
   * Get or set element value
   * @param {*} [value] - Value to set
   * @returns {*} Element value when getting
   */
  value(value);
  
  /**
   * Get or set element HTML content
   * @param {string} [html] - HTML content to set
   * @param {boolean} [append] - Whether to append instead of replace
   * @returns {string} HTML content when getting
   */
  html(html, append);
  
  /**
   * Set element position
   * @param {number} x - X coordinate
   * @param {number} y - Y coordinate
   * @returns {p5.Element} This element for chaining
   */
  position(x, y);
  
  /**
   * Set element size
   * @param {number} width - Element width
   * @param {number} height - Element height
   * @returns {p5.Element} This element for chaining
   */
  size(width, height);
  
  /**
   * Apply CSS styles
   * @param {string} property - CSS property name
   * @param {string} [value] - CSS property value
   * @returns {string|p5.Element} Property value when getting, element when setting
   */
  style(property, value);
  
  /**
   * Get or set element attribute
   * @param {string} attr - Attribute name
   * @param {string} [value] - Attribute value to set
   * @returns {string|p5.Element} Attribute value when getting, element when setting
   */
  attribute(attr, value);
  
  /**
   * Remove element attribute
   * @param {string} attr - Attribute name to remove
   * @returns {p5.Element} This element for chaining
   */
  removeAttribute(attr);
  
  /**
   * Add event listener
   * @param {string} event - Event type
   * @param {function} callback - Event handler function
   * @param {boolean} [capture] - Use capture phase
   * @returns {p5.Element} This element for chaining
   */
  mousePressed(callback);
  mouseReleased(callback);
  mouseClicked(callback);
  mouseMoved(callback);
  mouseOver(callback);
  mouseOut(callback);
  touchStarted(callback);
  touchMoved(callback);
  touchEnded(callback);
  
  /**
   * Show element (set display: block)
   * @returns {p5.Element} This element for chaining
   */
  show();
  
  /**
   * Hide element (set display: none)
   * @returns {p5.Element} This element for chaining
   */
  hide();
  
  /**
   * Remove element from DOM
   */
  remove();
}

See complete usage examples and DOM integration patterns in the p5.js reference.

Install with Tessl CLI