Socket
Socket
Sign inDemoInstall

canvas-effects

Package Overview
Dependencies
9
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.1.2 to 0.1.4

lib/CanvasEffect/validate.js
lib/Polygonal/index.js
lib/Polygonal/Triangle.js

61

lib/CanvasEffect/index.js

@@ -11,2 +11,8 @@ 'use strict';

var _ismobilejs = require('ismobilejs');
var _ismobilejs2 = _interopRequireDefault(_ismobilejs);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -32,2 +38,24 @@

_createClass(CanvasEffect, [{
key: 'init',
value: function init() {
if (!this.requestId) {
this.main();
}
}
}, {
key: 'main',
value: function main() {
this.requestId = (0, _requestAnimationFrame.requestAnimFrame)(this.main.bind(this));
this.update();
this.render();
}
}, {
key: 'update',
value: function update() {}
}, {
key: 'render',
value: function render() {
this.clear();
}
}, {
key: 'createCanvas',

@@ -48,4 +76,4 @@ value: function createCanvas() {

}, {
key: 'isValidDimensions',
value: function isValidDimensions(w, h) {
key: 'hasValidDimensions',
value: function hasValidDimensions(w, h) {
if (typeof w == 'number' || typeof w == 'string') {

@@ -70,3 +98,3 @@ if (typeof w == 'string' && w.slice(-1) != '%') {

var height = this.config.height;
if (this.isValidDimensions(width, height)) {
if (this.hasValidDimensions(width, height)) {
if (typeof width == 'string' || typeof height == 'string') {

@@ -81,4 +109,5 @@ if (typeof width == 'string') {

}
document.body.style.overflowX = 'hidden';
window.addEventListener('resize', this.debounce.bind(this));
if (!_ismobilejs2.default.apple.device) {
window.addEventListener('resize', this.debounce.bind(this));
}
}

@@ -113,24 +142,2 @@ this.canvas.width = width;

}
}, {
key: 'init',
value: function init() {
if (!this.requestId) {
this.main();
}
}
}, {
key: 'main',
value: function main() {
this.requestId = (0, _requestAnimationFrame.requestAnimFrame)(this.main.bind(this));
this.update();
this.render();
}
}, {
key: 'update',
value: function update() {}
}, {
key: 'render',
value: function render() {
this.clear();
}
}]);

@@ -137,0 +144,0 @@

70

lib/Constellations/index.js

@@ -23,2 +23,8 @@ 'use strict';

var _validate = require('../CanvasEffect/validate');
var validate = _interopRequireWildcard(_validate);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -41,4 +47,5 @@

_this.complexity;
_this.lines;
_this.points;
_this.lines;
_this.seed = 8000;
_this.init();

@@ -49,24 +56,12 @@ return _this;

_createClass(Constellations, [{
key: 'getComplexity',
value: function getComplexity(seed) {
return this.canvas.width * this.canvas.height / seed;
}
}, {
key: 'init',
value: function init() {
this.complexity = this.getComplexity(this.config.seed || 8000);
if (validate.number(this.config.seed)) {
this.complexity = this.getComplexity(this.config.seed);
} else {
this.complexity = this.getComplexity(this.seed);
}
this.lines = [];
this.points = [];
this.lines = [];
var k = 0;
for (var i = 0; i < this.complexity; i++) {
var x = Math.random() * this.canvas.width;
var y = Math.random() * this.canvas.height;
this.points[i] = new _Point2.default(this.ctx, x, y);
this.points[i].init(this.config.point);
for (var j = i + 1; j < this.complexity; j++) {
this.lines[k] = new _Line2.default(this.ctx);
this.lines[k].init(this.config.line);
k++;
}
}
this.generate();
_get(Constellations.prototype.__proto__ || Object.getPrototypeOf(Constellations.prototype), 'init', this).call(this);

@@ -83,7 +78,7 @@ }

for (var j = i + 1; j < this.complexity; j++) {
var x1 = this.points[i].x;
var y1 = this.points[i].y;
var x2 = this.points[j].x;
var y2 = this.points[j].y;
this.lines[l].update(x1, y1, x2, y2);
var x1 = this.points[i].pos[0];
var y1 = this.points[i].pos[1];
var x2 = this.points[j].pos[0];
var y2 = this.points[j].pos[1];
this.lines[l].update([x1, y1], [x2, y2]);
l++;

@@ -97,7 +92,28 @@ }

_get(Constellations.prototype.__proto__ || Object.getPrototypeOf(Constellations.prototype), 'render', this).call(this);
for (var i = 0; i < this.points.length; i++) {
this.points[i].render();
}
for (var j = 0; j < this.lines.length; j++) {
this.lines[j].render();
}
for (var i = 0; i < this.points.length; i++) {
this.points[i].render();
}
}, {
key: 'getComplexity',
value: function getComplexity(seed) {
return Math.round(this.canvas.width * this.canvas.height / seed);
}
}, {
key: 'generate',
value: function generate() {
var k = 0;
for (var i = 0; i < this.complexity; i++) {
var x = Math.random() * this.canvas.width;
var y = Math.random() * this.canvas.height;
this.points[i] = new _Point2.default(this.ctx, [x, y]);
this.points[i].init(this.config.point);
for (var j = i + 1; j < this.complexity; j++) {
this.lines[k] = new _Line2.default(this.ctx);
this.lines[k].init(this.config.line);
k++;
}
}

@@ -104,0 +120,0 @@ }

72

lib/Constellations/Line.js

@@ -9,50 +9,30 @@ 'use strict';

var _Entity2 = require('../CanvasEffect/Entity');
var _validate = require('../CanvasEffect/validate');
var _Entity3 = _interopRequireDefault(_Entity2);
var validate = _interopRequireWildcard(_validate);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Line = function (_Entity) {
_inherits(Line, _Entity);
var Line = function () {
function Line(ctx) {
_classCallCheck(this, Line);
var _this = _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).call(this, ctx));
_this.alpha = 0;
_this.color = [0, 0, 0, 1];
_this.fade = true;
_this.max = 100;
_this.width = 1;
return _this;
this.ctx = ctx;
this.alpha = 0;
this.color = [0, 0, 0, 1];
this.fade = true;
this.max = 100;
this.width = 1;
}
_createClass(Line, [{
key: 'getDistance',
value: function getDistance() {
return Math.sqrt((this.x1 - this.x2) * (this.x1 - this.x2) + (this.y1 - this.y2) * (this.y1 - this.y2));
}
}, {
key: 'isValidRGBA',
value: function isValidRGBA(array) {
return array[0] <= 255 && array[1] <= 255 && array[2] <= 255 && array[3] <= 1;
}
}, {
key: 'init',
value: function init(config) {
if (config) {
if (config.color && config.color.length == 4 && this.isValidRGBA(config.color)) {
this.color = config.color;
}
this.fade = config.fade < 1 ? config.fade : this.fade;
this.max = config.max || this.max;
this.width = config.width || this.width;
this.color = validate.color(config.color) ? config.color : this.color;
this.fade = validate.boolean(config.fade) ? config.fade : this.fade;
this.max = validate.number(config.max) ? config.max : this.max;
this.width = validate.number(config.width) ? config.width : this.width;
}

@@ -62,7 +42,5 @@ }

key: 'update',
value: function update(x1, y1, x2, y2) {
this.x1 = x1;
this.x2 = x2;
this.y1 = y1;
this.y2 = y2;
value: function update(a, b) {
this.a = a;
this.b = b;
}

@@ -85,12 +63,22 @@ }, {

this.ctx.beginPath();
this.ctx.moveTo(this.x1, this.y1);
this.ctx.lineTo(this.x2, this.y2);
this.ctx.moveTo(this.a[0], this.a[1]);
this.ctx.lineTo(this.b[0], this.b[1]);
this.ctx.stroke();
}
}
}, {
key: 'getDistance',
value: function getDistance() {
return Math.sqrt((this.a[0] - this.b[0]) * (this.a[0] - this.b[0]) + (this.a[1] - this.b[1]) * (this.a[1] - this.b[1]));
}
}, {
key: 'isValidRGBA',
value: function isValidRGBA(array) {
return array[0] <= 255 && array[1] <= 255 && array[2] <= 255 && array[3] <= 1;
}
}]);
return Line;
}(_Entity3.default);
}();
exports.default = Line;

81

lib/Constellations/Point.js

@@ -9,51 +9,38 @@ 'use strict';

var _Entity2 = require('../CanvasEffect/Entity');
var _validate = require('../CanvasEffect/validate');
var _Entity3 = _interopRequireDefault(_Entity2);
var validate = _interopRequireWildcard(_validate);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Point = function (_Entity) {
_inherits(Point, _Entity);
function Point(ctx, x, y) {
var Point = function () {
function Point(ctx, pos) {
_classCallCheck(this, Point);
var _this = _possibleConstructorReturn(this, (Point.__proto__ || Object.getPrototypeOf(Point)).call(this, ctx));
_this.x = x;
_this.y = y;
_this.color = '#000000';
_this.radius = _this.getRandomArbitrary(4, 2);
_this.speed = _this.getRandomArbitrary(0.2, 0.1);
_this.theta = _this.getRandomTheta();
return _this;
this.ctx = ctx;
this.pos = pos;
this.cw = this.ctx.canvas.width;
this.ch = this.ctx.canvas.height;
this.color = [0, 0, 0, 1];
this.radius = this.getRandomArbitrary(4, 2);
this.velocity = this.getRandomArbitrary(0.2, 0.1);
this.theta = this.getRandomTheta();
}
_createClass(Point, [{
key: 'getRandomArbitrary',
value: function getRandomArbitrary(max, min) {
return Math.random() * (max - min) + min;
}
}, {
key: 'getRandomTheta',
value: function getRandomTheta() {
return Math.random() * 2 * Math.PI;
}
}, {
key: 'init',
value: function init(config) {
if (config) {
this.color = config.color || this.color;
if (config.radius && config.radius.length == 2 && config.radius[0] > config.radius[1]) {
this.radius = this.getRandomArbitrary(config.radius[0], config.radius[1]);
this.color = validate.color(config.color) ? config.color : this.color;
if (validate.array(config.radius, 2)) {
if (config.radius[0] > config.radius[1]) {
this.radius = this.getRandomArbitrary(config.radius[0], config.radius[1]);
}
}
if (config.speed && config.speed.length == 2 && config.speed[0] > config.speed[1]) {
this.speed = this.getRandomArbitrary(config.speed[0], config.speed[1]);
if (validate.array(config.velocity, 2)) {
if (config.velocity[0] > config.velocity[1]) {
this.velocity = this.getRandomArbitrary(config.velocity[0], config.velocity[1]);
}
}

@@ -65,10 +52,10 @@ }

value: function update() {
if (this.x <= 0 + this.radius || this.x >= this.cw - this.radius) {
if (this.pos[0] <= 0 + this.radius || this.pos[0] >= this.cw - this.radius) {
this.theta = Math.PI - this.theta;
}
if (this.y <= 0 + this.radius || this.y >= this.ch - this.radius) {
if (this.pos[1] <= 0 + this.radius || this.pos[1] >= this.ch - this.radius) {
this.theta = 2 * Math.PI - this.theta;
}
this.x += Math.cos(this.theta) * this.speed;
this.y += Math.sin(this.theta) * this.speed;
this.pos[0] += Math.cos(this.theta) * this.velocity;
this.pos[1] += Math.sin(this.theta) * this.velocity;
}

@@ -78,12 +65,22 @@ }, {

value: function render() {
this.ctx.fillStyle = this.color;
this.ctx.fillStyle = 'rgba(' + this.color[0] + ',' + this.color[1] + ',' + this.color[2] + ',' + this.color[3] + ')';
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
this.ctx.arc(this.pos[0], this.pos[1], this.radius, 0, 2 * Math.PI);
this.ctx.fill();
}
}, {
key: 'getRandomArbitrary',
value: function getRandomArbitrary(max, min) {
return Math.random() * (max - min) + min;
}
}, {
key: 'getRandomTheta',
value: function getRandomTheta() {
return Math.random() * 2 * Math.PI;
}
}]);
return Point;
}(_Entity3.default);
}();
exports.default = Point;

8

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';

});
exports.Test = exports.Constellations = undefined;
exports.Polygonal = exports.Constellations = undefined;

@@ -13,5 +13,5 @@ var _Constellations = require('./Constellations');

var _Test = require('./Test');
var _Polygonal = require('./Polygonal');
var _Test2 = _interopRequireDefault(_Test);
var _Polygonal2 = _interopRequireDefault(_Polygonal);

@@ -21,2 +21,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.Constellations = _Constellations2.default;
exports.Test = _Test2.default;
exports.Polygonal = _Polygonal2.default;

8

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

@@ -28,3 +28,9 @@ "scripts": {

"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"color": "^1.0.3",
"faster-delaunay": "^1.0.0",
"ismobilejs": "^0.4.1",
"three": "^0.87.1"
}
}

210

README.md

@@ -1,14 +0,13 @@

# canvas-effects
# canvas-effects *WIP*
[![npm version](https://badge.fury.io/js/canvas-effects.svg)](https://badge.fury.io/js/canvas-effects)
**BETA:** Expect everything to change.
A Javascript library of canvas visualizations.
## Getting Started
Download and install the latest version from npm:
Download and install the latest published version from npm:
`npm install --save canvas-effects`
Or you can test the alpha from Github:
Or you can test the version from Github:

@@ -27,7 +26,10 @@ `npm install --save getmicah/canvas-effects`

## Config
These are global parameters that must be included in the config of every effect.
# Config
##### container
A CSS selector that represents a **\<div\>** element.
These are global parameters that **must** be included in the config of every effect.
#### container
A CSS selector that points to a **\<div\>** element in your html.
```

@@ -39,4 +41,8 @@ const foo = new Effect({

##### width / height
#### width / height
Declares the desired width and height of the element.
Can either be a fixed px value or a percentage.
```

@@ -54,7 +60,11 @@ const foo = new Effect({

All config options listed from this point on are **optional**.
## Constellations
[Demo](http://micahcowell.com/)
Instantiate:
# Constellations
```

@@ -68,21 +78,79 @@ import { Constellations } from 'canvas-effects';

### Config
All of the following config options are optional and contain default values.
#### seed
##### seed
Changes the amount of random points generated based on the area of the element. A smaller number will produce more points, resulting in less performance.
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`
#### point
The point property is an object that allows the user to configure the vertices.
**color**
Sets the color (r, g, b, a) of the vertice.
`color: <Number>[4] // Default: [0, 0, 0, 1]`
**radius**
Sets the range (max, min) of the size of the vertices.
`radius: <Number>[2] // Default: [4, 2]`
**velocity**
Sets the range (max, min) of the velocity at which the vertices travel.
`velocity: <Number>[2] // Default: [0.2, 0.1]`
#### line
The line property is an object that allows the user to configure the lines connecting two vertices.
**color**
Sets the color (r, g, b, a) of the line.
`color: <Number>[4] // Default: [0, 0, 0, 1]`
**fade**
If true, the lines will slowly disappear as the become larger.
`fade: <Boolean> // Default: true`
**max**
Sets the maximum length at which the line fades away and is no longer rendered.
`max: <Number> // Default: 100`
**width**
Sets the width of the line.
`width: <Number> // Default: 1`
### Example
```
const foo = new Constellations({
seed: int // Default: 8000
});
```
import { Constellations } from 'canvas-effects';
##### point
Changes the properties of the randomly generated points on the canvas which act as vertices for the constellations.
```
const foo = new Constellations({
point: { // Defaults:
color: String, // '#000000'
radius: [max,min], // [4, 2]
speed: [max,min] // [0.2, 0.1]
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
}

@@ -92,41 +160,77 @@ });

##### line
Changes the properties of lines that connect each point. The code generates every line then programmatically decides whether to render it.
# Polygonal
```
const foo = new Constellations({
line: { // Defaults:
color: [r,g,b,a], // [0, 0, 0, 1]
fade: int, // 0.05
max: int, // 100
width: int // 1
}
import { Polygonal } from 'canvas-effects';
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: 8000`
**color**
This will set the base color (r, g, b, a) of the polygons.
`color: <Number>[4] // Default: [255, 255, 255, 1]`
**debug**
Allows developer to view the height (z value) of each vertex.
Defaults to red (255,0,0) text and there's currently no way to change it with the config.
`debug: <Boolean> // Default: false`
**mouse**
If true, the position of the light source will move with relation to the mouse pointer.
`mouse: <Boolean> // Default: true`
### Example
```
import { Constellations } from 'canvas-effects';
import { Polygonal } from 'canvas-effects';
const foo = new Constellations({
const foo = new Polygonal({
container: '#bar',
width: '100%',
height: 400,
seed: 4000,
point: {
color: 'rgba(0,0,255,0.5)',
radius: [8,4],
speed: [0.8,0.4]
},
line: {
color: [255,0,0,0.1],
fade: 0.01,
max: 150,
width: 4
}
height: '100%',
seed: 8000,
color: [255, 255, 255, 0.5],
debug: false,
power: 1000
});
```
## 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
.npmignore
lib/CanvasEffect/Entity.js
lib/Test/index.js
lib/Test/Line.js
yarn.lock
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