OpenLIME

Class: Transform

Transform

Implements a 2D affine transformation system for coordinate manipulation. Provides a complete set of operations for coordinate system conversions, camera transformations, and animation support.

Mathematical Model: Transformation of point P to P' follows the equation:

P' = z * R(a) * P + T

where:

  • z: scale factor
  • R(a): rotation matrix for angle 'a'
  • T: translation vector (x,y)

Key Features:

  • Full affine transformation support
  • Camera positioning utilities
  • Animation interpolation
  • Viewport projection
  • Coordinate system conversions
  • Bounding box transformations

Coordinate Systems and Transformations:

  1. Scene Space:
  • Origin at image center
  • Y-axis points up
  • Unit scale
  1. Viewport Space:
  • Origin at top-left
  • Y-axis points down
  • Pixel units [0..w-1, 0..h-1]
  1. WebGL Space:
  • Origin at center
  • Y-axis points up
  • Range [-1..1, -1..1]

Transform Pipeline:

Scene -> Transform -> Viewport -> WebGL

Animation System:

  • Time-based interpolation
  • Multiple easing functions
  • Smooth transitions

Performance Considerations:

  • Matrix operations optimized for 2D
  • Cached transformation results
  • Efficient composition

new Transform( [options])

Creates a new Transform instance

Parameters:
Name Type Argument Description
options TransformParameters <optional>

Transform configuration
Source:
Example
```javascript
// Create identity transform
const t1 = new Transform();

// Create custom transform
const t2 = new Transform({
    x: 100,    // Translate 100 units in x
    y: 50,     // Translate 50 units in y
    a: 45,     // Rotate 45 degrees
    z: 2       // Scale by factor of 2
});
```

Methods

<static> interpolate(source, target, time, easing)

Interpolates between two transforms

Parameters:
Name Type Description
source Transform

Starting transform
target Transform

Ending transform
time number

Current time for interpolation
easing EasingFunction

Easing function type
Source:
Returns:

Interpolated transform

Type
Transform
Example
```javascript
const start = new Transform({x: 0, y: 0});
const end = new Transform({x: 100, y: 100});
const mid = Transform.interpolate(start, end, 500, 'ease-out');
```

<static> normalizeAngle(a)

Normalizes angle to range [0, 360]

Parameters:
Name Type Description
a number

Angle in degrees
Source:
Returns:

Normalized angle

Type
number

<static> rotate(x, y, a)

Rotates point (x,y) by angle a around Z axis

Parameters:
Name Type Description
x number

X coordinate to rotate
y number

Y coordinate to rotate
a number

Rotation angle in degrees
Source:
Returns:

Rotated point

Type
Point

apply(x, y)

Applies transform to a point (x,y) Performs full affine transformation: scale, rotate, translate

Parameters:
Name Type Description
x number

X coordinate to transform
y number

Y coordinate to transform
Source:
Returns:

Transformed point

Type
Point
Example
```javascript
const transform = new Transform({x: 10, y: 20, a: 45, z: 2});
const result = transform.apply(5, 5);
// Returns rotated, scaled, and translated point
```

compose(transform)

Composes two transforms: this * transform Applies this transform first, then the provided transform

Parameters:
Name Type Description
transform Transform

Transform to compose with
Source:
Returns:

Combined transformation

Type
Transform
Example
```javascript
const t1 = new Transform({x: 10, a: 45});
const t2 = new Transform({z: 2});
const combined = t1.compose(t2);
// Results in rotation, then scale, then translation
```

copy()

Creates a deep copy of the transform

Source:
Returns:

New transform with identical parameters

Type
Transform

getInverseBox(viewport)

Computes viewport bounds in image space Accounts for coordinate system differences between viewport and image

Parameters:
Name Type Description
viewport Viewport

Current viewport
Source:
Returns:

Bounds in image space

Type
BoundingBox

inverse()

Computes inverse transformation Creates transform that undoes this transform's effects

Source:
Returns:

Inverse transform

Type
Transform

print( [str] [, precision])

Prints transform parameters for debugging

Parameters:
Name Type Argument Default Description
str string <optional>
 ""

Prefix string
precision number <optional>
 0

Decimal precision
Source:

projectionMatrix(viewport)

Generates WebGL projection matrix Combines transform with viewport for rendering

Parameters:
Name Type Description
viewport Viewport

Current viewport
Source:
Returns:

4x4 projection matrix in column-major order

Type
Array.<number>

sceneToViewportCoords(viewport, p)

Converts scene coordinates to viewport coordinates

Parameters:
Name Type Description
viewport Viewport

Current viewport
p APoint

Point in scene space
Source:
Returns:

Point in viewport space [0..w-1, 0..h-1]

Type
APoint

transformBox(box)

Transforms a bounding box through this transform

Parameters:
Name Type Description
box BoundingBox

Box to transform
Source:
Returns:

Transformed bounding box

Type
BoundingBox

viewportToSceneCoords(viewport, p)

Converts viewport coordinates to scene coordinates

Parameters:
Name Type Description
viewport Viewport

Current viewport
p APoint

Point in viewport space [0..w-1, 0..h-1]
Source:
Returns:

Point in scene space

Type
APoint