U-Helper Demo

Hash Generation & Utility

Overview

make_hash(string) → number
Generates a unique hash value from any input string for use as identifiers or keys.
first(...args) → any
Returns the first non-empty value from arguments
isset(value) → boolean
Checks if a value is defined (not undefined)

Examples

// Hash generation
const hash = make_hash('player_123');

// Get first valid value
const name = first('', null, 'Player');

// Check if defined
if (isset(config.debug)) {
  console.log('Debug mode');
}

Color Functions

RGB Color Generation

Colors

Color Functions

rgb(r, g, b) → number
Converts RGB values (0-255) to color integer
frgb(r, g, b) → number
Converts floating RGB values (0.0-1.0) to color integer

Usage Examples

// Integer RGB values
const red = rgb(255, 0, 0);

// Floating point RGB values
const blue = frgb(0.0, 0.0, 1.0);

// Use in graphics contexts
ctx.fillStyle = '#' + red.toString(16);

Mathematical Functions

Linear Interpolation

Value Clamping

Math

Mathematical Functions

lerp(a, b, t) → number
Linear interpolation between two values
clamp(value, min, max) → number
Constrains value between min and max
dist(x1, y1, x2, y2) → number
Calculates Euclidean distance between points

Math Examples

// Smooth transitions
const position = lerp(startPos, endPos, time);

// Keep values in bounds
const health = clamp(currentHealth, 0, 100);

// Calculate distances
const distance = dist(player.x, player.y, enemy.x, enemy.y);

Geometry

Bresenham Line Algorithm

Lerp

T: 0.5

Geometry

Line Generation

bresenham_line(x0, y0, x1, y1) → Array
Generates pixel-perfect line points using Bresenham's algorithm. Returns array of [x, y] coordinate pairs. 
// Generate line for raycast
const line = bresenham_line(startX, startY, endX, endY);
line.forEach(([x, y]) => {
  if (hitWall(x, y)) return;
  drawPixel(x, y);
});

// Check collision along path
const path = bresenham_line(from.x, from.y, to.x, to.y);
const blocked = path.some(([x, y]) => grid[y][x]);

Vector Operations

Angle: 0°

Vectors

normalize(x, y) → Array[2]
Returns unit vector with length 1
dot(x1, y1, x2, y2) → number
Dot product of two vectors
cross(x1, y1, x2, y2) → number
Cross product (scalar for 2D)
magnitude(x, y) → number
Length of vector
angle_between_vectors(x1, y1, x2, y2) → number
Angle between vectors in radians
rotate_vector(x, y, angle) → Array[2]
Rotate vector by angle (radians)

Vector Examples

// Normalize movement vector
const [dx, dy] = normalize(inputX, inputY);
player.x += dx * speed;

// Check if vectors point same direction
const dotProduct = dot(v1x, v1y, v2x, v2y);
const sameDirection = dotProduct > 0;

// Rotate sprite direction
const [newX, newY] = rotate_vector(dirX, dirY, angle);

Collision Detection

Interactive Collision Testing

Click and drag to create shapes. Watch for collision detection!

Collision Calculator

Collision

Collision Functions

point_in_rect(px, py, rx, ry, rw, rh) → boolean
Check if point is inside rectangle
point_in_circle(px, py, cx, cy, radius) → boolean
Check if point is inside circle
rect_overlap(r1x, r1y, r1w, r1h, r2x, r2y, r2w, r2h) → boolean
Check if two rectangles overlap
circle_overlap(c1x, c1y, r1, c2x, c2y, r2) → boolean
Check if two circles overlap
circle_rect_overlap(cx, cy, radius, rx, ry, rw, rh) → boolean
Check if circle and rectangle overlap
line_circle_intersect(x1, y1, x2, y2, cx, cy, radius) → boolean
Check if line intersects circle

Collision Examples

// Mouse click detection
if (point_in_rect(mouseX, mouseY, button.x, button.y, button.w, button.h)) {
  button.onClick();
}

// Enemy collision
if (circle_overlap(player.x, player.y, player.radius, 
                    enemy.x, enemy.y, enemy.radius)) {
  takeDamage();
}

// Projectile vs wall
if (line_circle_intersect(bullet.prevX, bullet.prevY, 
                        bullet.x, bullet.y, wall.x, wall.y, wall.radius)) {
  bullet.explode();
}