Thpace

Thpace is a pretty canvas creation of mine. It makes a space animation out of triangles.

Example

Usage

You can install Thpace through NPM as a module, or through a CDN

NPM

yarn add thpace - or - npm install thpace

CDN

https://unpkg.com/thpace Will get you the minified build

Then, you can import:

<script src="https://unpkg.com/thpace"></script>

Ok but like what code do I write to use it?

import { ThpaceGL } from 'thpace';
// or
const { ThpaceGL } = require('thpace');
// or, if you used the CDN, skip those

const canvas = document.querySelector('#make-me-cool');

const settings = {
	colors: ['#4CB1EF', '#424959', '#FF4B44'],
	triangleSize: 100,
};

ThpaceGL.create(canvas, settings);

Some Info

Settings

Setting	Accepts	Default	Description
triangleSize	number	130	Triangle size (px)
bleed	number	120	Bleed amount over canvas edges (px)
noise	number	60	Noise used when calculating points (px)
colors	Array<string>	['rgba(11,135,147,1)', 'rgba(54,0,51,1)']	Array of colors to use for the gradient
pointVariationX	number	20	How much the points should shift on the x-axis (px)
pointVariationY	number	35	How much the points should shift on the y-axis (px)
pointAnimationSpeed	number	7500	How fast the points should complete a loop (ms)
animationOffset	number	250	Interval on the x-axis for the animation offset (px)
maxFps	number	144	Limit how many frames are drawn per second
automaticResize	boolean	true	Set to false to prevent Thpace from reacting to resize events
particleSettings	ParticleSettings	{}	Settings for the particles

Particle Settings

Setting	Accepts	Default	Description
count	number || [min, max]	[2, 5]	How many particles should be generated per 100 pixels
interval	number || [min, max]	[5000, 10000]	Interval for a particle to complete it's animation (ms)
radius	number || [min, max]	[1, 2]	Particle radius (px)
opacity	number || [min, max]	[.1, .7]	Particle opacity
variationX	number || [min, max]	[5, 15]	Variation in the particle animation on the x-axis (px)
variationY	number || [min, max]	[2.5, 7.5]	Variation in the particle animation on the y-axis (px)
color	string	#ffffff	Color of the particles