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

Color System

Name: tessl/npm-p5
Author: tessl

Comprehensive color handling with multiple color spaces (RGB, HSB, HSL), color manipulation, and advanced features like blending modes and color interpolation.

Capabilities

Color Creation

Functions for creating and working with colors in various formats.

/**
 * Create a p5.Color object from color values or string
 * @param {...(number|string|p5.Color)} args - Color values (r,g,b), (r,g,b,a), gray, hex string, or CSS color name
 * @returns {p5.Color} Color object
 */
function color(...args);

/**
 * Set the color interpretation mode
 * @param {string} mode - RGB, HSB, or HSL
 * @param {number} [max1] - Maximum value for first component (default 255 for RGB, 360 for HSB/HSL)
 * @param {number} [max2] - Maximum value for second component (default 255 for RGB, 100 for HSB/HSL)
 * @param {number} [max3] - Maximum value for third component (default 255 for RGB, 100 for HSB/HSL) 
 * @param {number} [maxA] - Maximum value for alpha component (default 255 for RGB, 1 for HSB/HSL)
 */
function colorMode(mode, max1, max2, max3, maxA);

Color Component Extraction

Functions for extracting individual color components from color objects.

/**
 * Extract the red component from a color
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Red component value
 */
function red(color);

/**
 * Extract the green component from a color
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Green component value
 */
function green(color);

/**
 * Extract the blue component from a color
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Blue component value
 */
function blue(color);

/**
 * Extract the alpha (transparency) component from a color
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Alpha component value
 */
function alpha(color);

/**
 * Extract the hue component from a color (HSB/HSL mode)
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Hue component value
 */
function hue(color);

/**
 * Extract the saturation component from a color (HSB/HSL mode)
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Saturation component value
 */
function saturation(color);

/**
 * Extract the brightness component from a color (HSB mode)
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Brightness component value
 */
function brightness(color);

/**
 * Extract the lightness component from a color (HSL mode)
 * @param {p5.Color|number[]|string} color - Color to extract from
 * @returns {number} Lightness component value
 */
function lightness(color);

Color Interpolation

Functions for blending and transitioning between colors.

/**
 * Interpolate between two colors
 * @param {p5.Color} c1 - First color
 * @param {p5.Color} c2 - Second color
 * @param {number} amt - Interpolation amount (0-1)
 * @returns {p5.Color} Interpolated color
 */
function lerpColor(c1, c2, amt);

/**
 * Interpolate through a palette of colors
 * @param {p5.Color[]} colors - Array of colors to interpolate through
 * @param {number} amt - Position in palette (0-1)
 * @returns {p5.Color} Interpolated color from palette
 */
function paletteLerp(colors, amt);

Background and Clear

Functions for setting the canvas background and clearing content.

/**
 * Set the background color of the canvas
 * @param {...(number|string|p5.Color)} args - Color value(s)
 */
function background(...args);

/**
 * Clear the entire canvas to transparent
 */
function clear();

Fill and Stroke Colors

Functions already covered in drawing-shapes.md but included here for completeness.

/**
 * Set the fill color for shapes
 * @param {...(number|string|p5.Color)} args - Color value(s)
 */
function fill(...args);

/**
 * Disable fill for shapes (transparent fill)
 */
function noFill();

/**
 * Set the stroke color for shape outlines
 * @param {...(number|string|p5.Color)} args - Color value(s)
 */
function stroke(...args);

/**
 * Disable stroke for shapes (no outline)
 */
function noStroke();

Blending Modes

Functions for controlling how new pixels blend with existing canvas content.

/**
 * Set the pixel blending mode for drawing operations
 * @param {string} mode - Blending mode constant
 * Available modes: BLEND (default), ADD, DARKEST, LIGHTEST, DIFFERENCE, 
 * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT,
 * DODGE, BURN, SUBTRACT
 */
function blendMode(mode);

Image Tinting

Functions for applying color tints to images.

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

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

Types

/**
 * Color object that stores color information
 */
class p5.Color {
  /**
   * String representation of the color
   * @returns {string} CSS color string
   */
  toString();
}

Constants

// Color mode constants
const RGB = 'rgb';
const HSB = 'hsb'; 
const HSL = 'hsl';

// Blend mode constants
const BLEND = 'source-over';
const ADD = 'lighter';
const DARKEST = 'darken';
const LIGHTEST = 'lighten';
const DIFFERENCE = 'difference';
const MULTIPLY = 'multiply';
const EXCLUSION = 'exclusion';
const SCREEN = 'screen';
const REPLACE = 'copy';
const OVERLAY = 'overlay';
const HARD_LIGHT = 'hard-light';
const SOFT_LIGHT = 'soft-light';
const DODGE = 'color-dodge';
const BURN = 'color-burn';
const SUBTRACT = 'subtract';

Usage Examples

Basic Color Usage:

function setup() {
  createCanvas(400, 300);
  
  // Different ways to specify colors
  background(220); // Grayscale
  fill(255, 0, 0); // RGB
  circle(100, 100, 80);
  
  fill('blue'); // CSS color name
  circle(200, 100, 80);
  
  fill('#FF00FF'); // Hex color
  circle(300, 100, 80);
  
  fill(color(0, 255, 0, 128)); // p5.Color with alpha
  circle(150, 180, 80);
}

Working with HSB Color Mode:

function setup() {
  createCanvas(400, 300);
  colorMode(HSB, 360, 100, 100); // Hue: 0-360, Sat: 0-100, Bright: 0-100
}

function draw() {
  background(0, 0, 20); // Dark background
  
  // Create a rainbow of circles
  for (let i = 0; i < 12; i++) {
    let hue = map(i, 0, 11, 0, 360);
    fill(hue, 80, 90); // High saturation and brightness
    let x = 50 + i * 30;
    circle(x, 150, 40);
  }
}

Color Interpolation:

let startColor, endColor;

function setup() {
  createCanvas(400, 300);
  startColor = color(255, 0, 0); // Red
  endColor = color(0, 0, 255);   // Blue
}

function draw() {
  background(220);
  
  // Create a gradient using lerpColor
  for (let i = 0; i <= width; i += 5) {
    let amt = map(i, 0, width, 0, 1);
    let c = lerpColor(startColor, endColor, amt);
    stroke(c);
    strokeWeight(5);
    line(i, 50, i, 250);
  }
}

Color Palette Interpolation:

let palette;

function setup() {
  createCanvas(400, 300);
  
  // Create a color palette
  palette = [
    color(255, 0, 0),    // Red
    color(255, 255, 0),  // Yellow
    color(0, 255, 0),    // Green
    color(0, 255, 255),  // Cyan
    color(0, 0, 255)     // Blue
  ];
}

function draw() {
  background(220);
  
  // Animate through the palette
  let t = (frameCount * 0.01) % 1;
  let c = paletteLerp(palette, t);
  
  fill(c);
  circle(width/2, height/2, 200);
  
  // Show the palette
  for (let i = 0; i < palette.length; i++) {
    fill(palette[i]);
    rect(i * 80, 20, 80, 30);
  }
}

Color Component Extraction:

function setup() {
  createCanvas(400, 300);
  
  let myColor = color(200, 100, 50);
  
  // Extract components
  let r = red(myColor);
  let g = green(myColor);
  let b = blue(myColor);
  
  console.log(`RGB: ${r}, ${g}, ${b}`);
  
  // Create new colors from components
  fill(r, 0, 0); // Pure red component
  rect(50, 50, 80, 80);
  
  fill(0, g, 0); // Pure green component
  rect(150, 50, 80, 80);
  
  fill(0, 0, b); // Pure blue component
  rect(250, 50, 80, 80);
  
  fill(myColor); // Original color
  rect(150, 150, 80, 80);
}

Blend Modes:

function draw() {
  background(50);
  
  // Draw overlapping circles with different blend modes
  fill(255, 0, 0, 150);
  circle(150, 150, 120);
  
  blendMode(ADD); // Additive blending
  fill(0, 255, 0, 150);
  circle(180, 150, 120);
  
  blendMode(MULTIPLY); // Multiply blending
  fill(0, 0, 255, 150);
  circle(165, 180, 120);
  
  blendMode(BLEND); // Reset to normal blending
}

Dynamic Color Analysis:

function draw() {
  background(220);
  
  // Create a color based on mouse position
  let r = map(mouseX, 0, width, 0, 255);
  let g = map(mouseY, 0, height, 0, 255);
  let b = 128;
  
  let currentColor = color(r, g, b);
  
  // Draw the color
  fill(currentColor);
  circle(width/2, height/2, 200);
  
  // Display color information
  fill(0);
  textSize(16);
  text(`Red: ${red(currentColor).toFixed(0)}`, 20, 30);
  text(`Green: ${green(currentColor).toFixed(0)}`, 20, 50);
  text(`Blue: ${blue(currentColor).toFixed(0)}`, 20, 70);
  
  // Show HSB values
  colorMode(HSB);
  text(`Hue: ${hue(currentColor).toFixed(0)}`, 20, 100);
  text(`Saturation: ${saturation(currentColor).toFixed(0)}`, 20, 120);
  text(`Brightness: ${brightness(currentColor).toFixed(0)}`, 20, 140);
  colorMode(RGB); // Reset to RGB mode
}

Install with Tessl CLI