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

Transform System

Name: tessl/npm-p5
Author: tessl

Coordinate transformations including translation, rotation, scaling, and matrix operations for advanced graphics positioning and animation effects.

Capabilities

Basic Transformations

Core transformation functions for repositioning and orienting graphics.

/**
 * Move the coordinate system origin
 * @param {number} x - Horizontal translation
 * @param {number} y - Vertical translation
 * @param {number} [z] - Depth translation (3D mode only)
 */
function translate(x, y, z);

/**
 * Rotate the coordinate system
 * @param {number} angle - Rotation angle in current angle mode
 */
function rotate(angle);

/**
 * Rotate around X-axis (3D mode only)
 * @param {number} angle - Rotation angle in current angle mode
 */
function rotateX(angle);

/**
 * Rotate around Y-axis (3D mode only)
 * @param {number} angle - Rotation angle in current angle mode
 */
function rotateY(angle);

/**
 * Rotate around Z-axis (3D mode only)
 * @param {number} angle - Rotation angle in current angle mode
 */
function rotateZ(angle);

/**
 * Scale the coordinate system
 * @param {number} s - Uniform scale factor, or X-axis scale
 * @param {number} [y] - Y-axis scale factor
 * @param {number} [z] - Z-axis scale factor (3D mode only)
 */
function scale(s, y, z);

/**
 * Shear along the X-axis
 * @param {number} angle - Shear angle in current angle mode
 */
function shearX(angle);

/**
 * Shear along the Y-axis
 * @param {number} angle - Shear angle in current angle mode
 */
function shearY(angle);

Matrix Operations

Advanced matrix operations for complex transformations.

/**
 * Apply a transformation matrix directly
 * @param {number} a - Horizontal scaling
 * @param {number} b - Horizontal skewing
 * @param {number} c - Vertical skewing
 * @param {number} d - Vertical scaling
 * @param {number} e - Horizontal translation
 * @param {number} f - Vertical translation
 */
function applyMatrix(a, b, c, d, e, f);

/**
 * Reset the transformation matrix to identity
 * Removes all transformations
 */
function resetMatrix();

Transform State Management

Functions to save and restore transformation states.

/**
 * Save current transformation state and drawing styles
 * Must be paired with pop()
 */
function push();

/**
 * Restore previously saved transformation state and styles
 */
function pop();

Usage Examples

Basic Translation and Rotation:

function draw() {
  background(220);
  
  // Draw at origin (no transform)
  fill('red');
  rect(0, 0, 50, 50);
  
  // Translate and draw
  translate(100, 100);
  fill('blue');
  rect(0, 0, 50, 50); // This appears at (100, 100)
  
  // Rotate and draw
  rotate(PI / 4); // 45 degrees
  fill('green');
  rect(0, 0, 50, 50); // This is rotated
}

Using Push and Pop for Isolated Transforms:

function draw() {
  background(220);
  
  // First shape - no transform
  fill('red');
  rect(50, 50, 40, 40);
  
  push(); // Save current state
  translate(150, 100);
  rotate(frameCount * 0.02);
  fill('blue');
  rect(-20, -20, 40, 40); // Centered on rotation point
  pop(); // Restore state
  
  // Third shape - back to no transform
  fill('green');
  rect(250, 50, 40, 40);
  
  push(); // Another isolated transform
  translate(300, 150);
  scale(sin(frameCount * 0.03) + 1.5);
  fill('purple');
  rect(-15, -15, 30, 30);
  pop();
}

Scaling Animations:

function draw() {
  background(220);
  translate(width/2, height/2);
  
  // Pulsing scale effect
  let scaleAmount = map(sin(frameCount * 0.05), -1, 1, 0.5, 2);
  scale(scaleAmount);
  
  fill('orange');
  rect(-50, -50, 100, 100);
  
  // Draw smaller shapes that scale with the main shape
  fill('red');
  circle(-25, -25, 20);
  circle(25, -25, 20);
  circle(-25, 25, 20);
  circle(25, 25, 20);
}

Hierarchical Transformations (Solar System):

function draw() {
  background(0);
  translate(width/2, height/2);
  
  // Sun
  fill('yellow');
  circle(0, 0, 60);
  
  // Earth orbit
  push();
  rotate(frameCount * 0.01); // Earth's orbit around sun
  translate(120, 0);
  
  fill('blue');
  circle(0, 0, 30); // Earth
  
  // Moon orbit (relative to Earth)
  push();
  rotate(frameCount * 0.05); // Moon's orbit around Earth
  translate(40, 0);
  
  fill('gray');
  circle(0, 0, 10); // Moon
  pop(); // End moon transform
  
  pop(); // End Earth transform
  
  // Mars orbit
  push();
  rotate(frameCount * 0.007); // Mars orbits slower
  translate(200, 0);
  
  fill('red');
  circle(0, 0, 25); // Mars
  pop();
}

Complex Shearing and Skewing:

function draw() {
  background(220);
  
  // Normal rectangles for comparison
  fill('lightgray');
  rect(50, 50, 80, 60);
  rect(50, 150, 80, 60);
  rect(50, 250, 80, 60);
  
  // Shear X
  push();
  translate(200, 50);
  shearX(PI / 6); // 30 degrees
  fill('red');
  rect(0, 0, 80, 60);
  pop();
  
  // Shear Y
  push();
  translate(200, 150);
  shearY(PI / 8); // 22.5 degrees
  fill('blue');
  rect(0, 0, 80, 60);
  pop();
  
  // Combined shearing
  push();
  translate(200, 250);
  shearX(PI / 8);
  shearY(-PI / 12);
  fill('green');
  rect(0, 0, 80, 60);
  pop();
}

Matrix Transformations:

function draw() {
  background(220);
  
  // Custom transformation matrix
  // This creates a combination of scale, rotation, and translation
  let angle = frameCount * 0.02;
  let scaleX = 1.5;
  let scaleY = 1.0;
  let cos_a = cos(angle) * scaleX;
  let sin_a = sin(angle) * scaleX;
  let cos_b = -sin(angle) * scaleY;
  let sin_b = cos(angle) * scaleY;
  let tx = width/2;
  let ty = height/2;
  
  applyMatrix(cos_a, sin_a, cos_b, sin_b, tx, ty);
  
  fill('purple');
  rect(-40, -30, 80, 60);
  
  // Reset matrix and draw comparison shape
  resetMatrix();
  fill('gray');
  rect(width/2 - 40, height/2 - 30, 80, 60);
}

Nested Transformations with Multiple Objects:

let flowers = [];

function setup() {
  createCanvas(600, 400);
  
  // Create flower data
  for (let i = 0; i < 5; i++) {
    flowers.push({
      x: random(100, width - 100),
      y: random(100, height - 100),
      rotation: random(TWO_PI),
      petals: random(5, 9),
      size: random(0.5, 1.2)
    });
  }
}

function draw() {
  background(50, 100, 50); // Dark green background
  
  for (let flower of flowers) {
    drawFlower(flower);
  }
}

function drawFlower(flower) {
  push();
  translate(flower.x, flower.y);
  rotate(flower.rotation + frameCount * 0.002);
  scale(flower.size);
  
  // Draw petals
  fill('pink');
  for (let i = 0; i < flower.petals; i++) {
    push();
    rotate(TWO_PI / flower.petals * i);
    ellipse(0, -20, 15, 30);
    pop();
  }
  
  // Draw center
  fill('yellow');
  circle(0, 0, 20);
  
  pop();
}

Transform-based Animation Patterns:

function draw() {
  background(20);
  
  // Grid of animated elements
  for (let x = 0; x < 6; x++) {
    for (let y = 0; y < 4; y++) {
      push();
      
      // Position in grid
      translate(50 + x * 80, 50 + y * 80);
      
      // Individual animation offset
      let offset = (x + y * 6) * 0.5;
      let time = frameCount * 0.03 + offset;
      
      // Rotation
      rotate(sin(time) * 0.5);
      
      // Scale pulsing
      let pulse = map(sin(time * 2), -1, 1, 0.7, 1.3);
      scale(pulse);
      
      // Color based on position and time
      let hue = map(x + y, 0, 9, 0, 360);
      colorMode(HSB);
      fill(hue, 80, 90);
      colorMode(RGB);
      
      // Draw shape
      rect(-15, -15, 30, 30);
      
      pop();
    }
  }
}

3D Transformations (WebGL mode):

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(50);
  
  // Enable lighting
  ambientLight(60);
  directionalLight(255, 255, 255, -1, 0.5, -1);
  
  // Main rotation
  rotateY(frameCount * 0.01);
  rotateX(frameCount * 0.008);
  
  // Draw multiple boxes at different positions
  for (let i = 0; i < 5; i++) {
    push();
    
    // Position each box
    let angle = (TWO_PI / 5) * i;
    translate(cos(angle) * 100, sin(angle * 2) * 50, sin(angle) * 100);
    
    // Individual rotation
    rotateZ(frameCount * 0.02 + i);
    
    // Individual scale
    let scaleAmt = map(sin(frameCount * 0.03 + i), -1, 1, 0.5, 1.5);
    scale(scaleAmt);
    
    // Color
    fill(map(i, 0, 4, 100, 255), 100, 200);
    
    box(30);
    
    pop();
  }
}

Install with Tessl CLI