Skip to content

Helper Functions

Utilities functions to help generate Float32Array for common line shapes.

circlePositions()

ts
circlePositions(segments?: number, radius?: number): Float32Array

Generates a Float32Array of [x, y, z] coordinates evenly spaced around a circle.

Parameters

  • segments (number, optional) — number of points around the circle. Default: 100.
  • radius (number, optional) — radius of the circle. Default: 1.

Returns

Float32Array containing vertex positions in XYZ format.

Example

javascript
import { circlePositions, MeshLine } from 'makio-meshline';

// Create a circle with 64 segments and a radius of 2unit
const circle = new MeshLine({ lines: circlePositions(64, 2), closed: true });

squarePositions()

ts
squarePositions(segments?: number): Float32Array

Generates a Float32Array of [x, y, z] points outlining a square.

Parameters

  • segments (number, optional) — number of segments per side. Default: 1.

Returns

Float32Array containing square vertex positions.

Example

javascript
import { squarePositions, MeshLine } from 'makio-meshline';

// Create a simple square
const square = new MeshLine({ lines: squarePositions(), closed: true });

// Create a square with more segments per side for smoother corners
const line = new MeshLine({ lines: squarePositions(4), closed: true });

sineWavePositions()

ts
sineWavePositions(wavelengths?: number, segments?: number, amplitude?: number, length?: number): Float32Array

Generates a Float32Array of [x, y, z] points forming a sine wave.

Parameters

  • wavelengths (number, optional) — number of complete wave cycles. Default: 2.
  • segments (number, optional) — number of points along the wave. Default: 100.
  • amplitude (number, optional) — height of the wave. Default: 1.
  • length (number, optional) — total length of the wave. Default: 4.

Returns

Float32Array containing sine wave vertex positions.

Example

javascript
import { sineWavePositions, MeshLine } from 'makio-meshline';

// Create a basic sine wave
const wave = new MeshLine({
  lines: sineWavePositions(),
  closed: false
});

// Create a wave with 3 cycles, higher amplitude
const line = new MeshLine({
  lines: sineWavePositions(3, 100, 2, 6),
  color: 0x00ff00
});

straightLine()

ts
straightLine(width?: number, segments?: number, isVertical?: boolean): Float32Array

Generates a Float32Array of [x, y, z] points forming a straight line.

Parameters

  • width (number, optional) — length of the line. Default: 1.
  • segments (number, optional) — number of segments along the line. Default: 2.
  • isVertical (boolean, optional) — whether the line is vertical (Y-axis) or horizontal (X-axis). Default: false.

Returns

Float32Array containing straight line vertex positions.

Example

javascript
import { straightLine, MeshLine } from 'makio-meshline';

// Create a horizontal line 5 units long with 10 segments
const horizontal = new MeshLine({ lines: straightLine(5, 10, false) });

// Create a vertical line 3 units long with 20 segments
const vertical = new MeshLine({ lines: straightLine(3, 20, true) });

// Create a simple horizontal line with default width and segments
const simple = new MeshLine({ lines: straightLine() });

straightLineBetween()

ts
straightLineBetween(start: Vector3 | [x, y, z], end: Vector3 | [x, y, z], segments?: number): Float32Array

Generates a Float32Array of [x, y, z] points forming a straight line between two points.

Parameters

  • start (Vector3 | array) — starting point as Vector3 object or [x, y, z] array.
  • end (Vector3 | array) — ending point as Vector3 object or [x, y, z] array.
  • segments (number, optional) — number of segments along the line. Default: 1.

Returns

Float32Array containing straight line vertex positions.

Example

javascript
import { straightLineBetween, MeshLine } from 'makio-meshline';
import * as THREE from 'three/webgpu';

// Line between two Vector3 points
const start = new THREE.Vector3(-2, 1, 0);
const end = new THREE.Vector3(3, -1, 2);
const line = new MeshLine({ lines: straightLineBetween(start, end, 20) });

// Line between array coordinates
const line2 = new MeshLine({ 
  lines: straightLineBetween([0, 0, 0], [5, 5, 5], 15) 
});