1.1.1 • Published 10 months ago

layered-sine v1.1.1

Weekly downloads
-
License
GPL-3.0-or-later
Repository
github
Last release
10 months ago

Layered Sine

Fills a canvas with sine wave(s), and generates animation, using the canvas package.

Usage

Install this package by:

npm i layered-sine

Import the package in your script by:

import { SineWave, FillMode, animateSines, animateSinesFrames, drawSine } from "layered-sine"

The functions and classes are defined as follows:

// Generates an animation of sine wave(s) moving. Returns the buffer of an APNG file. Save it as PNG my friend.
function animateSines(waves: SineWave[], canvas: Canvas, fps: number): ArrayBuffer
// Generates frames for the animation and saves them in <path> as PNGs. Returns the number of PNGs generated.
function animateSinesFrames(waves: SineWave[], canvas: Canvas, fps: number, path: string): number
// Draws a sine wave onto the canvas. Returns the drawn canvas.
function drawSine(wave: SineWave, canvas: Canvas, t = 0): Canvas
  • wave/waves: Sine wave(s) to draw.
  • canvas: Background canvas.
  • fps: Framerate of animation.
  • path: Path to store the frames.
  • t: Time. Also determines the phase of wave.
class SineWave {
	amplitude: number;
	wavelength: number;
	waveNum: number;
	period: number;
	nFreq: number;
	phase: number;
	y: number;
	fill: FillMode;
	color: number;

	constructor(amplitude: number, wavelength: number, period: number, phase: number, y: number) {
		this.amplitude = amplitude;
		this.wavelength = wavelength;
		this.waveNum = 2 * Math.PI / wavelength;
		this.period = period;
		this.nFreq = 2 * Math.PI / period;
		this.phase = phase;
		this.y = y;
	}
}

This is in the form of A sin( kx - wt + p ) + y, where:

  • A (Amplitude) = amplitude
  • k (Wave Number) = 2π / wavelength
  • w (Natural Frequency) = 2π / period
  • p (Phase) = phase (in radian)
  • y (Y Offset) = y (Y-axis is flipped in rendering)

Other properties of SineWave class:

  • fill: FillMode of the wave, can be LINE (0), UP (1) or DOWN (2).
  • color: Color of the wave. Must be between 0x000000 and 0xFFFFFF.

Here's the FillMode enum:

enum FillMode {
	LINE = 0,
	UP = 1,
	DOWN = 2
}

Example/Testing

Check test/test.ts for example. 1. Clone this repo. 2. Run npm i. 3. Run npm run build. 4. Run npm test. This will execute test/test.ts.

License

GNU GPL v3

1.1.1

10 months ago

1.1.0

10 months ago

1.0.1

1 year ago

1.0.0

1 year ago