lazy-brush

The library implements a 'lazy area' around the brush. When the pointer moves, the distance between the pointer and the brush is calculated.

If the distance is greater than the defined radius, the brush moves by distance - radius pixels in the direction of the pointer. This creates a smooth, dampened drawing effect that allows for fluid lines even with imprecise input devices like a mouse.

You can install lazy-brush using your preferred package manager.

npm install --save lazy-brush

Use the following methods to access coordinate data:

• getBrushCoordinates(): Returns a Point object { x, y } representing the current brush position.
• getPointerCoordinates(): Returns a Point object { x, y } representing the current pointer position.
• getBrush(): Returns a LazyPoint object for the brush.
• getPointer(): Returns a LazyPoint object for the pointer.

LazyPoint objects include additional utility methods:

• getDistanceTo(point)
• getAngleTo(point)
• equalsTo(point)

Call update() whenever the pointer (mouse or touch) position changes.

update(pointer, options) takes two arguments:

1. pointer: A { x, y } object representing the current pointer position.
2. options (optional): An object containing:
   • friction (number): A value between 0 and 1. 0 is no friction (default). 1 is infinite friction (brush won't move). This reduces the speed at which the brush moves towards the pointer.
   • both (boolean): If true, the brush position is updated to match the pointer position simultaneously. This is useful for touch events to prevent the pointer from being 'stuck' inside the radius on touch start.

Returns a boolean indicating if either the brush or the pointer coordinates changed.

To use the library, instantiate the LazyBrush class. It acts as a proxy between user input (pointer) and your drawing logic.

Pass an options object to the constructor with the following properties:

• radius (number): The distance the pointer must move away from the brush before the brush starts moving.
• enabled (boolean): Whether the brush logic is active.
• initialPoint (object): An object with { x, y } coordinates to set the starting position.

const lazy = new LazyBrush({
  radius: 30,
  enabled: true,
  initialPoint: { x: 0, y: 0 }
})

You can dynamically toggle the smoothing effect or adjust the smoothing radius during runtime.

• enable(): Activates lazy brush calculations.
• disable(): Deactivates lazy brush calculations. When disabled, the brush will follow the pointer exactly.
• isEnabled(): Returns whether the brush is currently enabled.
• setRadius(radius: number): Updates the smoothing radius.
• getRadius(): Returns the current smoothing radius.

After calling update(), use these methods to retrieve the calculated coordinates and state for rendering your brush stroke.

Coordinate Methods

• getBrushCoordinates(): Returns the current brush position as a simple { x, y } object.
• getPointerCoordinates(): Returns the current raw pointer position as a simple { x, y } object.
• getBrush(): Returns the brush as a LazyPoint instance.
• getPointer(): Returns the pointer as a LazyPoint instance.

State and Metrics

• brushHasMoved(): Returns true if the brush position changed during the last update() call.
• getAngle(): Returns the angle (in radians) between the pointer and the brush.
• getDistance(): Returns the distance (in pixels) between the pointer and the brush.

Create a new LazyBrush instance to manage smooth drawing calculations. You can configure the smoothing radius, whether the brush is enabled by default, and the starting position.

Configuration Options

The Point interface defines a simple coordinate structure with x and y properties of type number. It is used as the base type for coordinate data throughout the library.

export interface Point {
  x: number
  y: number
}