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

2D Drawing & Shapes

Name: tessl/npm-p5
Author: tessl

Complete 2D drawing capabilities including primitive shapes, curves, custom shapes, and drawing attributes for creating visual art and graphics.

Capabilities

Basic Shapes

Fundamental geometric shapes for drawing graphics.

/**
 * Draw a circle
 * @param {number} x - X coordinate of center
 * @param {number} y - Y coordinate of center  
 * @param {number} diameter - Circle diameter
 */
function circle(x, y, diameter);

/**
 * Draw an ellipse
 * @param {number} x - X coordinate of center
 * @param {number} y - Y coordinate of center
 * @param {number} w - Width of ellipse
 * @param {number} h - Height of ellipse
 * @param {number} [detail] - Number of segments (WebGL only)
 */
function ellipse(x, y, w, h, detail);

/**
 * Draw a rectangle
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 * @param {number} w - Width
 * @param {number} h - Height
 * @param {number} [tl] - Top-left corner radius
 * @param {number} [tr] - Top-right corner radius
 * @param {number} [br] - Bottom-right corner radius
 * @param {number} [bl] - Bottom-left corner radius
 */
function rect(x, y, w, h, tl, tr, br, bl);

/**
 * Draw a square
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 * @param {number} s - Side length
 * @param {number} [tl] - Top-left corner radius
 * @param {number} [tr] - Top-right corner radius
 * @param {number} [br] - Bottom-right corner radius  
 * @param {number} [bl] - Bottom-left corner radius
 */
function square(x, y, s, tl, tr, br, bl);

/**
 * Draw a triangle
 * @param {number} x1 - X coordinate of first vertex
 * @param {number} y1 - Y coordinate of first vertex
 * @param {number} x2 - X coordinate of second vertex
 * @param {number} y2 - Y coordinate of second vertex
 * @param {number} x3 - X coordinate of third vertex
 * @param {number} y3 - Y coordinate of third vertex
 */
function triangle(x1, y1, x2, y2, x3, y3);

/**
 * Draw a quadrilateral
 * @param {number} x1 - X coordinate of first vertex
 * @param {number} y1 - Y coordinate of first vertex
 * @param {number} x2 - X coordinate of second vertex
 * @param {number} y2 - Y coordinate of second vertex
 * @param {number} x3 - X coordinate of third vertex
 * @param {number} y3 - Y coordinate of third vertex
 * @param {number} x4 - X coordinate of fourth vertex
 * @param {number} y4 - Y coordinate of fourth vertex
 */
function quad(x1, y1, x2, y2, x3, y3, x4, y4);

Lines and Points

Basic line and point drawing functions.

/**
 * Draw a line between two points
 * @param {number} x1 - X coordinate of first point
 * @param {number} y1 - Y coordinate of first point
 * @param {number} x2 - X coordinate of second point
 * @param {number} y2 - Y coordinate of second point
 */
function line(x1, y1, x2, y2);

/**
 * Draw a single point (pixel)
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 */
function point(x, y);

/**
 * Draw an arc or pie slice
 * @param {number} x - X coordinate of center
 * @param {number} y - Y coordinate of center
 * @param {number} w - Width of arc's ellipse
 * @param {number} h - Height of arc's ellipse
 * @param {number} start - Start angle in radians
 * @param {number} stop - Stop angle in radians
 * @param {string} [mode] - OPEN, CHORD, or PIE
 * @param {number} [detail] - Number of segments (WebGL only)
 */
function arc(x, y, w, h, start, stop, mode, detail);

Curves

Bezier curves and spline curves for smooth organic shapes.

/**
 * Draw a cubic Bezier curve
 * @param {number} x1 - X coordinate of first anchor point
 * @param {number} y1 - Y coordinate of first anchor point
 * @param {number} x2 - X coordinate of first control point
 * @param {number} y2 - Y coordinate of first control point
 * @param {number} x3 - X coordinate of second control point
 * @param {number} y3 - Y coordinate of second control point
 * @param {number} x4 - X coordinate of second anchor point
 * @param {number} y4 - Y coordinate of second anchor point
 */
function bezier(x1, y1, x2, y2, x3, y3, x4, y4);

/**
 * Draw a Catmull-Rom spline curve
 * @param {number} x1 - X coordinate of first control point
 * @param {number} y1 - Y coordinate of first control point
 * @param {number} x2 - X coordinate of first anchor point
 * @param {number} y2 - Y coordinate of first anchor point
 * @param {number} x3 - X coordinate of second anchor point
 * @param {number} y3 - Y coordinate of second anchor point
 * @param {number} x4 - X coordinate of second control point
 * @param {number} y4 - Y coordinate of second control point
 */
function curve(x1, y1, x2, y2, x3, y3, x4, y4);

/**
 * Set the level of detail for Bezier curves
 * @param {number} detail - Number of segments
 */
function bezierDetail(detail);

/**
 * Set the level of detail for spline curves
 * @param {number} detail - Number of segments
 */
function curveDetail(detail);

/**
 * Set the tightness of spline curves
 * @param {number} amount - Tightness amount (0-1)
 */
function curveTightness(amount);

Curve Mathematics

Functions for calculating points and tangents on curves.

/**
 * Get a point on a Bezier curve
 * @param {number} a - First anchor point
 * @param {number} b - First control point
 * @param {number} c - Second control point
 * @param {number} d - Second anchor point
 * @param {number} t - Parameter value (0-1)
 * @returns {number} Coordinate value at parameter t
 */
function bezierPoint(a, b, c, d, t);

/**
 * Get a tangent on a Bezier curve
 * @param {number} a - First anchor point
 * @param {number} b - First control point
 * @param {number} c - Second control point
 * @param {number} d - Second anchor point
 * @param {number} t - Parameter value (0-1)
 * @returns {number} Tangent value at parameter t
 */
function bezierTangent(a, b, c, d, t);

/**
 * Get a point on a spline curve
 * @param {number} a - First control point
 * @param {number} b - First anchor point
 * @param {number} c - Second anchor point
 * @param {number} d - Second control point
 * @param {number} t - Parameter value (0-1)
 * @returns {number} Coordinate value at parameter t
 */
function curvePoint(a, b, c, d, t);

/**
 * Get a tangent on a spline curve
 * @param {number} a - First control point
 * @param {number} b - First anchor point
 * @param {number} c - Second anchor point
 * @param {number} d - Second control point
 * @param {number} t - Parameter value (0-1)
 * @returns {number} Tangent value at parameter t
 */
function curveTangent(a, b, c, d, t);

Custom Shapes with Vertices

System for creating complex custom shapes using vertices.

/**
 * Begin creating a custom shape
 * @param {string} [kind] - Shape kind (POINTS, LINES, TRIANGLES, etc.)
 */
function beginShape(kind);

/**
 * End the current custom shape
 * @param {string} [mode] - CLOSE to connect last vertex to first
 */
function endShape(mode);

/**
 * Add a vertex to the current shape
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 */
function vertex(x, y);

/**
 * Add a Bezier curve vertex to the current shape
 * @param {number} x2 - X coordinate of first control point
 * @param {number} y2 - Y coordinate of first control point
 * @param {number} x3 - X coordinate of second control point
 * @param {number} y3 - Y coordinate of second control point
 * @param {number} x4 - X coordinate of anchor point
 * @param {number} y4 - Y coordinate of anchor point
 */
function bezierVertex(x2, y2, x3, y3, x4, y4);

/**
 * Add a quadratic curve vertex to the current shape
 * @param {number} cx - X coordinate of control point
 * @param {number} cy - Y coordinate of control point
 * @param {number} x3 - X coordinate of anchor point
 * @param {number} y3 - Y coordinate of anchor point
 */
function quadraticVertex(cx, cy, x3, y3);

/**
 * Add a curve vertex to the current shape
 * @param {number} x - X coordinate
 * @param {number} y - Y coordinate
 */
function curveVertex(x, y);

/**
 * Begin a contour (hole) within a shape
 */
function beginContour();

/**
 * End the current contour
 */
function endContour();

Fill and Stroke Settings

Functions for controlling how shapes are filled and outlined.

/**
 * 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();

/**
 * Set the thickness of stroke lines
 * @param {number} weight - Stroke thickness in pixels
 */
function strokeWeight(weight);

/**
 * Set the style of line endpoints
 * @param {string} cap - ROUND, SQUARE, or PROJECT
 */
function strokeCap(cap);

/**
 * Set the style of line joints
 * @param {string} join - MITER, BEVEL, or ROUND
 */
function strokeJoin(join);

Shape Drawing Modes

Functions for controlling how shape coordinates are interpreted.

/**
 * Set the mode for interpreting rectangle coordinates
 * @param {string} mode - CORNER, CORNERS, CENTER, or RADIUS
 */
function rectMode(mode);

/**
 * Set the mode for interpreting ellipse coordinates
 * @param {string} mode - CENTER, RADIUS, CORNER, or CORNERS
 */
function ellipseMode(mode);

Advanced Drawing Features

Special drawing modes and effects.

/**
 * Switch to eraser mode - subsequent drawing removes pixels
 * @param {number} [fillOpacity] - Opacity for fill erasing (0-255)
 * @param {number} [strokeOpacity] - Opacity for stroke erasing (0-255)
 */
function erase(fillOpacity, strokeOpacity);

/**
 * Exit eraser mode and return to normal drawing
 */
function noErase();

/**
 * Begin a clipping mask - subsequent drawing will be clipped
 * @param {object} [options] - Clipping options
 */
function beginClip(options);

/**
 * End the current clipping mask
 */
function endClip();

/**
 * Apply a clipping mask using a callback function
 * @param {function} callback - Function that draws the clipping shape
 * @param {object} [options] - Clipping options
 */
function clip(callback, options);

Usage Examples

Basic Shapes:

function draw() {
  background(220);
  
  // Set drawing attributes
  fill('red');
  stroke('blue');
  strokeWeight(3);
  
  // Draw basic shapes
  circle(100, 100, 80);
  rect(200, 60, 80, 80, 10); // Rounded corners
  triangle(350, 60, 320, 140, 380, 140);
  
  // Shape without fill
  noFill();
  stroke('green');
  ellipse(100, 250, 120, 60);
}

Custom Shape with Vertices:

function draw() {
  background(220);
  
  fill('purple');
  stroke('black');
  
  // Create a star shape
  beginShape();
  vertex(200, 50);
  vertex(220, 100);
  vertex(270, 100);
  vertex(235, 130);
  vertex(250, 180);
  vertex(200, 150);
  vertex(150, 180);
  vertex(165, 130);
  vertex(130, 100);
  vertex(180, 100);
  endShape(CLOSE);
}

Bezier Curves:

function draw() {
  background(220);
  
  stroke('red');
  strokeWeight(2);
  noFill();
  
  // Draw a smooth curve
  bezier(85, 20, 10, 10, 90, 90, 15, 80);
  
  // Show control points
  stroke('blue');
  strokeWeight(5);
  point(85, 20); // First anchor
  point(15, 80); // Second anchor
  
  stroke('gray');
  strokeWeight(1);
  line(85, 20, 10, 10); // First control line
  line(15, 80, 90, 90); // Second control line
}

Shape Modes:

function draw() {
  background(220);
  
  fill('orange');
  
  // Different rectangle modes
  rectMode(CORNER);
  rect(50, 50, 80, 60); // x, y, width, height
  
  rectMode(CENTER);
  rect(200, 80, 80, 60); // centerX, centerY, width, height
  
  rectMode(CORNERS);
  rect(300, 50, 380, 110); // x1, y1, x2, y2
}

Eraser Mode:

let shapes = [];

function setup() {
  createCanvas(400, 300);
  
  // Create some shapes to erase
  for (let i = 0; i < 10; i++) {
    shapes.push({
      x: random(width),
      y: random(height),
      size: random(30, 80)
    });
  }
}

function draw() {
  background(100);
  
  // Draw shapes
  fill('yellow');
  noStroke();
  for (let shape of shapes) {
    circle(shape.x, shape.y, shape.size);
  }
  
  // Erase where mouse is
  if (mouseIsPressed) {
    erase();
    circle(mouseX, mouseY, 50);
    noErase();
  }
}

Install with Tessl CLI