Wire Frame Landscape

Description

This project is an animation configurable using Html5 canvas. You can change the size, the colors, the animation of the edges and add animations like rotation.

Installation

you can add it to your project with git

$ git clone [email protected]:nenlaith/wire-frame-landscape.git

or with npm

$ npm install --save wire-frame-landscape

Usage

Factory

To create a new wire frame, you need to call the create with the ID of the canvas wrapper or the HTMLElement and a framerate.

let wfl = WFL.create("canvas-wrapper", 42);

WFL Object

After creating the instance of a wire frame, it is already set up with default parameters but you can change them to.

functions

setLineWidth(lineWidth: integer)

SetColors(backgroundColor: string, wireColor: string): the parameters can be html color code (ex: "#3c003d") or HTML color names ( "white", "blue" etc... )

setRotation(roll: float, pitch: float, yaw: float)

setDimensions(width: number, height: number)

setDimensionsType(type: string, params: object): they are only two types: STATIC and FILL. when using STATIC, you need to set the dimensions with setDimensions(). Even if the wrapper's size, the animation will keep the same size. If you want to use FILL you need to provide the params object.

params = {
	x: number,
	y: number,
	multiplier: number
}

the multiplier is used to extend the size of the wire frame.

setPosition(x: number, y: number)

setPositionType(type: string): they are only two types: STATIC and CENTER. When using STATIC, you need to set the position with setPosition(). Even if the wrapper's size, the animation will keep the same position. the CENTER keep automatically the wire frame at the center of the canvas.

Animations Functions

The library will contain a set of animations which can control the behaviour of rotation, position, colors, dimensions. They are stored in the WFL.Animation object.

functions

linearSingleRotation(rotationAxis :string, from: number, to: number, speed: number)

Magnitudes Functions

The library will contain a set of animations which can control the behaviour of the edges. They are stored in the WFL.Magnitude object.

functions

randomSawtoothWave(amplitude_min: number, amplitude_max: number, speed: number)

Example

let wfl = WFL.create("canvas-wrapper", 42);
wfl.setSplittings(17, 17)
  .setColors("white", "blue")
  .setLineWidth(5)
  .setRotation(Math.PI / 7, - Math.PI / 7, Math.PI / 7.0)
  .setDimensionsType("FILL", { x: 1, y: 1, multiplier: 2 })
  .setAmplitudeFunction(WFL.Magnitude.randomSawtoothWave(-30, 30, 30 / 1500))
  .addAnimation(WFL.Animation.linearSingleRotation("yaw", - Math.PI / 4.0, Math.PI / 4.0, ( Math.PI / 2.0 ) / 50000))
  .addAnimation(WFL.Animation.linearSingleRotation("roll", 0, Math.PI / 10.0, ( Math.PI / 10.0 ) / 10000))
  .start();