Socket
Socket
Sign inDemoInstall

canvas-effects

Package Overview
Dependencies
3
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.2.0 to 0.2.1

docs/bundle.js
docs/index.html
docs/index.ts

7

lib/CanvasEffect/index.d.ts
import { Config } from '../types';
export default abstract class CanvasEffect<T extends Config> {
protected readonly config: T;
export default abstract class CanvasEffect<TConfig extends Config> {
protected readonly config: TConfig;
protected canvas: HTMLCanvasElement | null;

@@ -10,3 +10,3 @@ protected ctx: CanvasRenderingContext2D | null;

private timer?;
constructor(config: T);
constructor(config: TConfig);
protected init(): void;

@@ -20,4 +20,3 @@ protected abstract update(): void;

private createCanvas;
private hasValidDimensions;
private setCanvasSize;
}

50

lib/CanvasEffect/index.js

@@ -50,45 +50,27 @@ "use strict";

this.ctx = this.canvas.getContext('2d');
var container = document.querySelector(this.config.container);
if (container && container.nodeName == 'DIV') {
container.appendChild(this.canvas);
var el = document.querySelector(this.config.selector);
if (el) {
el.appendChild(this.canvas);
}
else {
throw new TypeError("Invalid container: ".concat(this.config.container, "."));
throw new TypeError("Invalid selector: ".concat(this.config.selector, "."));
}
};
CanvasEffect.prototype.hasValidDimensions = function (w, h) {
if (typeof w == 'number' || typeof w == 'string') {
if (typeof w == 'string' && w.slice(-1) != '%') {
return false;
}
return true;
}
if (typeof h == 'number' || typeof h == 'string') {
if (typeof h == 'string' && h.slice(-1) != '%') {
return false;
}
return true;
}
return false;
};
CanvasEffect.prototype.setCanvasSize = function () {
var width = this.config.width;
var height = this.config.height;
if (this.hasValidDimensions(width, height)) {
if (typeof width == 'string' || typeof height == 'string') {
var per = width.slice(0, -1);
if (typeof width == 'string') {
width = (per / 100) * window.innerWidth;
}
if (typeof height == 'string') {
height = (per / 100) * window.innerHeight;
}
window.addEventListener('resize', this.debounce.bind(this));
}
this.canvas.width = width;
this.canvas.height = height;
var listen = false;
if (!isFinite(width)) {
width = window.innerWidth;
listen = true;
}
else {
throw new TypeError("Invalid dimensions: ".concat(width, ", ").concat(height, "."));
if (!isFinite(height)) {
height = window.innerHeight;
listen = true;
}
if (listen) {
window.addEventListener('resize', this.debounce.bind(this));
}
this.canvas.width = width;
this.canvas.height = height;
};

@@ -95,0 +77,0 @@ return CanvasEffect;

7

lib/Delaunay/index.js

@@ -61,3 +61,2 @@ "use strict";

if (!validate.boolean(config.mouse) || config.mouse === true) {
console.log('MOUSE');
_this.canvas.addEventListener('mousemove', _this.onMouseMove.bind(_this), false);

@@ -109,5 +108,5 @@ }

var tp = [];
points.forEach(function (coord) {
tp.push(coord[0]);
tp.push(coord[1]);
points.forEach(function (p) {
tp.push(p[0]);
tp.push(p[1]);
});

@@ -114,0 +113,0 @@ var d = new delaunator_1.default(tp).triangles;

28

lib/Delaunay/Triangle.d.ts

@@ -1,24 +0,24 @@

import { DelaunayConfig, Point, Color } from '../types';
import { DelaunayConfig, Point3D, ColorRGBA } from '../types';
export default class Triangle {
ctx: CanvasRenderingContext2D;
light: Point;
a: Point;
b: Point;
c: Point;
color: Color;
hue: Color;
light: Point3D;
a: Point3D;
b: Point3D;
c: Point3D;
color: ColorRGBA;
hue: ColorRGBA;
max: number;
stroke: {
color?: Color;
color?: ColorRGBA;
width?: number;
};
constructor(ctx: CanvasRenderingContext2D, light: Point, a: Point, b: Point, c: Point);
constructor(ctx: CanvasRenderingContext2D, light: Point3D, a: Point3D, b: Point3D, c: Point3D);
init(config: DelaunayConfig): void;
update(light: Point): void;
update(light: Point3D): void;
render(): void;
shader(): void;
vector(p1: number[], p2: number[]): Point;
cross(v1: number[], v2: number[]): Point;
normalize(v: Point): Point;
shade(color: number[], i: number): Color;
vector(p1: number[], p2: number[]): Point3D;
cross(v1: number[], v2: number[]): Point3D;
normalize(v: Point3D): Point3D;
shade(color: number[], i: number): ColorRGBA;
getIntensity(power: number, max: number): number;

@@ -25,0 +25,0 @@ dotProduct(v1: number[], v2: number[]): number;

4

lib/Stars/index.js

@@ -100,3 +100,5 @@ "use strict";

this.lines[k] = new Line_1.default(this.ctx);
this.lines[k].init(this.config.line);
if (this.config.line) {
this.lines[k].init(this.config.line);
}
k++;

@@ -103,0 +105,0 @@ }

4

lib/Stars/Line.d.ts

@@ -1,2 +0,2 @@

import { LineConfig, Coord } from '../types';
import { LineConfig } from '../types';
export default class Line {

@@ -13,5 +13,5 @@ private ctx;

init(config?: LineConfig): void;
update(a: Coord, b: Coord): void;
update(a: [number, number], b: [number, number]): void;
render(): void;
private getDistance;
}

2

lib/Stars/Line.js

@@ -43,3 +43,3 @@ "use strict";

}
if (config.fade && validate.boolean(config.fade)) {
if (validate.boolean(config.fade)) {
this.fade = config.fade;

@@ -46,0 +46,0 @@ }

22

lib/types/index.d.ts
export interface Config {
container: string;
width: any;
height: any;
selector: string;
width: number;
height: number;
}
export declare type Coord = [number, number];
export declare type Point = [number, number, number];
export declare type Color = [number, number, number, number];
export declare type Point3D = [number, number, number];
export declare type ColorRGBA = [number, number, number, number];
export interface StarsConfig extends Config {
container: string;
width: any;
height: any;
seed?: number;

@@ -18,3 +14,3 @@ point?: PointConfig;

export interface PointConfig {
color?: [number, number, number, number];
color?: ColorRGBA;
radius?: [number, number];

@@ -24,3 +20,3 @@ velocity?: [number, number];

export interface LineConfig {
color?: [number, number, number, number];
color?: ColorRGBA;
fade?: boolean;

@@ -32,9 +28,9 @@ max?: number;

seed?: number;
color?: [number, number, number, number];
color?: ColorRGBA;
mouse?: boolean;
max?: number;
stroke?: {
color?: [number, number, number, number];
color?: ColorRGBA;
width?: number;
};
}

7

package.json
{
"name": "canvas-effects",
"description": "modular canvas visualizations",
"version": "0.2.0",
"version": "0.2.1",
"main": "./lib/index.js",

@@ -9,3 +9,4 @@ "types": "./lib/index.d.ts",

"start": "./node_modules/.bin/webpack-dev-server",
"build": "rm -r ./lib; ./node_modules/.bin/tsc"
"build": "rm -r ./lib; ./node_modules/.bin/tsc",
"demo": "./node_modules/.bin/webpack --mode=production"
},

@@ -17,3 +18,3 @@ "repository": {

"author": "Micah Cowell",
"license": "MIT",
"license": "BSD-2-Clause",
"bugs": {

@@ -20,0 +21,0 @@ "url": "https://github.com/micahco/canvas-effects/issues"

240

README.md
# canvas-effects
[![npm version](https://badge.fury.io/js/canvas-effects.svg)](https://badge.fury.io/js/canvas-effects)
A Javascript library of canvas visualizations. Written in Typescript.
BROKEN (moving to 0.2)
[DEMO](https://micahco.github.io/canvas-effects)
## Getting Started
Download and install the latest published version from npm:
install:
`npm install --save canvas-effects`
`yarn add canvas-effects`
Then import the effects you want into your project:
usage:
```
import { Efect } from 'canvas-effects';
import { Stars, Delaunay } from 'canvas-effects'
const foo = new Effect({
// ...
const foo = new Stars({
selector: '#stars',
width: 500,
height: 500,
point: {
color: [184, 142, 141, 1]
},
line: {
color: [216, 210, 225, 1]
}
});
const bar = new Delaunay({
selector: '#delaunay',
width: Infinity,
height: Infinity
});
```
# Config
These are **required** properties that must be present in the config for every effect.
These are the required properties.
#### container
**selector** : string
A CSS selector that points to a **\<div\>** element in your html.
**width** : number
```
const foo = new Effect({
container: '#selector'
});
```
**height** : number
#### width / height
Setting the width or height value to `Infinity` will fit the element to the page.
Declares the desired width and height of the element.
Can either be a fixed px value (number) or a percentage (string).
```
const foo = new Effect({
selector: '#selector'
width: 500,

@@ -60,3 +58,4 @@ height: 500

const bar = new Effect({
width: '100%',
selector: '.selector'
width: Infinity,
height: 400

@@ -66,201 +65,112 @@ });

All config properties listed from this point on are **optional**.
All config properties listed from this point on are *optional*.
# Stars
**seed** : number
# Constellations
```
import { Constellations } from 'canvas-effects';
const foo = new Constellations({
// ...
});
```
**seed**
Changes the amount of random points generated based on the area of the element. A smaller number will produce more points, resulting in lower performance.
`seed: <number> // Default: 8000`
Default: 8000
#### point
The point property is an object that allows the user to configure the vertices.
***point*** : {Object}
**color**
**color** : [number, number, number, number]
Sets the color (r, g, b, a) of the vertice.
ColorRGBA [r, g, b, a] of point.
`color: <number>[4] // Default: [0, 0, 0, 1]`
Default: [0, 0, 0, 1]
**radius**
**radius** : [number, number]
Sets the range (max, min) of the size of the vertices.
Range [max, min] of point radius.
`radius: <number>[2] // Default: [4, 2]`
Default: [4, 2]
**velocity**
**velocity** : [number, number]
Sets the range (max, min) of the velocity at which the vertices travel.
Range [max, min] of the velocity at which the vertices travel.
`velocity: <number>[2] // Default: [0.2, 0.1]`
Default: [0.2, 0.1]`
#### line
The line property is an object that allows the user to configure the lines connecting two vertices.
***line*** : {Object}
**color**
**color** : [number, number, number, number]
Sets the color (r, g, b, a) of the line.
ColorRGBA [r, g, b, a] of line.
`color: <number>[4] // Default: [0, 0, 0, 1]`
Default: [0, 0, 0, 1]
**fade**
**fade** : boolean
If true, the lines will slowly disappear as the become larger.
If true, the lines will slowly disappear as they become larger.
`fade: <boolean> // Default: true`
Default: true`
**max**
**max** : number
Sets the maximum length at which the line fades away and is no longer rendered.
Length at which the lines disappear.
`max: <number> // Default: 100`
Default: 100
**width**
**width** : number
Sets the width of the line.
`width: <number> // Default: 1`
Default: 1`
### Example
```
import { Constellations } from 'canvas-effects';
const foo = new Constellations({
container: '#bar',
width: '100%',
height: '100%',
seed: 8000,
point: {
color: [0, 0, 0, 1],
radius: [4, 2],
speed: [0.2, 0.1]
},
line: {
color: [0, 0, 0, 1],
fade: 0.05,
max: 100,
width: 1
}
});
```
# Polygonal
```
import { Polygonal } from 'canvas-effects';
**seed** : number
const foo = new Polygonal({
// ...
});
```
**seed**
Changes the amount of random points generated based on the area of the element. A smaller number will produce more points, resulting in lower performance.
`seed: <number> // Default: 16000`
Default: 8000
**color**
**color** : [number, number, number, number]
This will set the base color (r, g, b, a) of the polygons.
ColorRGBA [r, g, b, a].
`color: <number>[4] // Default: [255, 255, 255, 1]`
Default: [0, 0, 0, 1]
**mouse**
**mouse** : boolean
If true, the position of the light source will move with relation to the mouse pointer.
If true, the light source will move with the user's mouse.
`mouse: <boolean> // Default: true`
Default: true
**max**
**max** : number
A number from 0 to 1 representing the max shade value. If value is 1, then polygons will be completely black when hidden from the light source. If the value is 0, the light source will not affect the polygons at all.
`max: <number> // Default: 0.5`
Default: 0.5
#### stroke
***stroke*** : {Object}
The stroke property is an object that allows the user to configure the strokes of the polygons. By default this property is not initialized and therefore the stroke is the same color as the polygon fill.
**color**
**color** : [number, number, number, number]
Sets the color (r, g, b, a) of the stroke.
ColorRGBA [r, g, b, a] of the stroke.
`color: <number>[4] // Default: undefined`
Default: undefined
**width**
**width** : number
Sets the width of the stroke.
`width: <number> // Default: undefined`
Default: undefined`
### Example
```
import { Polygonal } from 'canvas-effects';
## Credits
const foo = new Polygonal({
container: '#bar',
width: '100%',
height: '100%',
seed: 8000,
color: [255, 255, 255, 0.5],
mouse: true,
max: 0.5,
stroke: {
color: [0,0,0,1],
width: 0
}
});
```
Math Formulas: [Daniel Avila](https://github.com/danthecodingman)
## License
# Credits
Math Formulas: [@danthecodingman](https://github.com/danthecodingman)
# License
Everything is under the [MIT License](https://opensource.org/licenses/MIT).
Copyright (c) 2017 Micah Cowell
[BSD-2-Clause](LICENSE)

8

webpack.config.ts
const path = require('path');
module.exports = {
entry: './dev/index.ts',
entry: './docs/index.ts',
mode: 'development',

@@ -19,9 +19,9 @@ module: {

output: {
filename: 'bundle.min.js',
filename: 'bundle.js',
publicPath: '/',
path: __dirname
path: path.join(__dirname, 'docs'),
},
devServer: {
static: {
directory: path.join(__dirname, 'dev'),
directory: path.join(__dirname, 'docs'),
},

@@ -28,0 +28,0 @@ compress: true,

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc