canvas-effects - npm Package Compare versions

lib/CanvasEffect/index.d.ts

lib/CanvasEffect/requestAnimationFrame.d.ts

lib/CanvasEffect/validate.d.ts

lib/Constellations/index.d.ts

lib/Constellations/Line.d.ts

lib/Constellations/Point.d.ts

lib/index.d.ts

lib/Polygonal/index.d.ts

lib/Polygonal/Triangle.d.ts

235

lib/CanvasEffect/index.js

		@@ -1,142 +0,93 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _requestAnimationFrame = require('./requestAnimationFrame');

		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"); } }

		var CanvasEffect = function () {
		function CanvasEffect(config) {
		_classCallCheck(this, CanvasEffect);

		if (this.constructor === CanvasEffect) {
		throw new TypeError('Abstract class "CanvasEffect" cannot be instantiated directly.');
		}
		this.config = config ? config : {};
		this.canvas;
		this.ctx;
		this.delay = 250;
		this.requestId;
		this.timer;
		this.createCanvas();
		this.setCanvasSize();
		}

		_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',
		value: function createCanvas() {
		this.canvas = document.createElement('canvas');
		this.ctx = this.canvas.getContext('2d');
		if (this.config.backgroundColor) {
		this.canvas.style.backgroundColor = this.config.backgroundColor;
		}
		var container = document.querySelector(this.config.container);
		if (container && container.nodeName == 'DIV') {
		container.appendChild(this.canvas);
		} else {
		throw new TypeError('Invalid container: ' + this.config.container + '.');
		}
		}
		}, {
		key: 'hasValidDimensions',
		value: function hasValidDimensions(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;
		}
		}, {
		key: 'setCanvasSize',
		value: function setCanvasSize() {
		var width = this.config.width;
		var height = this.config.height;
		if (this.hasValidDimensions(width, height)) {
		if (typeof width == 'string' \|\| typeof height == 'string') {
		if (typeof width == 'string') {
		var per = width.slice(0, -1);
		width = per / 100 * window.innerWidth;
		}
		if (typeof height == 'string') {
		var _per = height.slice(0, -1);
		height = _per / 100 * window.innerHeight;
		}
		if (!_ismobilejs2.default.apple.device) {
		window.addEventListener('resize', this.debounce.bind(this));
		}
		}
		this.canvas.width = width;
		this.canvas.height = height;
		} else {
		throw new TypeError('Invalid dimensions: ' + width + ', ' + height + '.');
		}
		}
		}, {
		key: 'debounce',
		value: function debounce() {
		if (this.requestId) {
		cancelAnimationFrame(this.requestId);
		this.requestId = undefined;
		}
		clearTimeout(this.timer);
		this.timer = setTimeout(this.resize.bind(this), this.delay);
		this.clear();
		}
		}, {
		key: 'resize',
		value: function resize() {
		this.setCanvasSize();
		this.init();
		}
		}, {
		key: 'clear',
		value: function clear() {
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		}
		}]);

		return CanvasEffect;
		}();

		exports.default = CanvasEffect;
		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var requestAnimationFrame_1 = require("./requestAnimationFrame");
		var CanvasEffect = /** @class */ (function () {
		function CanvasEffect(config) {
		this.config = config;
		this.canvas;
		this.ctx;
		this.delay = 200;
		this.requestId;
		this.timer;
		this.createCanvas();
		this.setCanvasSize();
		}
		CanvasEffect.prototype.init = function () {
		if (!this.requestId) {
		this.main();
		}
		};
		CanvasEffect.prototype.main = function () {
		this.requestId = requestAnimationFrame_1.requestAnimFrame(this.main.bind(this));
		this.update();
		this.render();
		};
		CanvasEffect.prototype.render = function () {
		this.clear();
		};
		CanvasEffect.prototype.debounce = function () {
		if (this.requestId) {
		cancelAnimationFrame(this.requestId);
		this.requestId = undefined;
		}
		clearTimeout(this.timer);
		this.timer = setTimeout(this.resize.bind(this), this.delay);
		this.clear();
		};
		CanvasEffect.prototype.resize = function () {
		this.setCanvasSize();
		this.init();
		};
		CanvasEffect.prototype.clear = function () {
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		};
		CanvasEffect.prototype.createCanvas = function () {
		this.canvas = document.createElement('canvas');
		this.ctx = this.canvas.getContext('2d');
		var container = document.querySelector(this.config.container);
		if (container && container.nodeName == 'DIV') {
		container.appendChild(this.canvas);
		}
		else {
		throw new TypeError("Invalid container: " + this.config.container + ".");
		}
		};
		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;
		}
		else {
		throw new TypeError("Invalid dimensions: " + width + ", " + height + ".");
		}
		};
		return CanvasEffect;
		}());
		exports.default = CanvasEffect;

22

lib/CanvasEffect/requestAnimationFrame.js

		"use strict";

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.requestAnimFrame = requestAnimFrame;
		exports.cancelAnimFrame = cancelAnimFrame;
		Object.defineProperty(exports, "__esModule", { value: true });
		function requestAnimFrame(callback) {
		return requestAnimationFrame(callback) \|\| webkitRequestAnimationFrame(callback) \|\| mozRequestAnimationFrame(callback) \|\| oRequestAnimationFrame(callback) \|\| msRequestAnimationFrame(callback) \|\| function (callback) {
		setTimeout(callback, 1000 / 60);
		};
		return requestAnimationFrame(callback) \|\|
		webkitRequestAnimationFrame(callback) \|\|
		function (callback) {
		setTimeout(callback, 1000 / 60);
		};
		}

		exports.requestAnimFrame = requestAnimFrame;
		function cancelAnimFrame(callback) {
		return cancelAnimationFrame(callback) \|\| cancelTimeout(callback);
		}
		return cancelAnimationFrame(callback);
		}
		exports.cancelAnimFrame = cancelAnimFrame;

102

lib/CanvasEffect/validate.js

		@@ -1,62 +0,58 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.initialized = initialized;
		exports.array = array;
		exports.boolean = boolean;
		exports.number = number;
		exports.color = color;
		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		function initialized(prop) {
		return typeof prop !== 'undefined';
		return typeof prop !== 'undefined';
		}

		exports.initialized = initialized;
		function array(prop, length) {
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Array) {
		return false;
		}
		if (prop.length != length) {
		return false;
		}
		return true;
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Array) {
		return false;
		}
		if (prop.length != length) {
		return false;
		}
		return true;
		}

		exports.array = array;
		function boolean(prop) {
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Boolean) {
		return false;
		}
		return true;
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Boolean) {
		return false;
		}
		return true;
		}

		exports.boolean = boolean;
		function number(prop) {
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Number) {
		return false;
		}
		return true;
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Number) {
		return false;
		}
		return true;
		}

		exports.number = number;
		function color(prop) {
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Array) {
		return false;
		}
		if (prop.length != 4) {
		return false;
		}
		if (!(prop[0] >= 0 && prop[0] <= 255 && prop[1] >= 0 && prop[1] <= 255 && prop[2] >= 0 && prop[2] <= 255 && prop[3] >= 0 && prop[3] <= 1)) {
		return false;
		}
		return true;
		}
		if (!initialized(prop)) {
		return false;
		}
		if (prop.constructor !== Array) {
		return false;
		}
		if (prop.length != 4) {
		return false;
		}
		if (!((prop[0] >= 0 && prop[0] <= 255) &&
		(prop[1] >= 0 && prop[1] <= 255) &&
		(prop[2] >= 0 && prop[2] <= 255) &&
		(prop[3] >= 0 && prop[3] <= 1))) {
		return false;
		}
		return true;
		}
		exports.color = color;

205

lib/Constellations/index.js

		@@ -1,121 +0,84 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

		var _CanvasEffect2 = require('../CanvasEffect');

		var _CanvasEffect3 = _interopRequireDefault(_CanvasEffect2);

		var _Point = require('./Point');

		var _Point2 = _interopRequireDefault(_Point);

		var _Line = require('./Line');

		var _Line2 = _interopRequireDefault(_Line);

		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 }; }

		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 Constellations = function (_CanvasEffect) {
		_inherits(Constellations, _CanvasEffect);

		function Constellations(config) {
		_classCallCheck(this, Constellations);

		var _this = _possibleConstructorReturn(this, (Constellations.__proto__ \|\| Object.getPrototypeOf(Constellations)).call(this, config));

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

		_createClass(Constellations, [{
		key: 'init',
		value: function init() {
		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.generate();
		_get(Constellations.prototype.__proto__ \|\| Object.getPrototypeOf(Constellations.prototype), 'init', this).call(this);
		}
		}, {
		key: 'update',
		value: function update() {
		for (var p = 0; p < this.complexity; p++) {
		this.points[p].update();
		}
		var l = 0;
		for (var i = 0; i < this.complexity; i++) {
		for (var j = i + 1; j < this.complexity; j++) {
		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++;
		}
		}
		}
		}, {
		key: 'render',
		value: function render() {
		_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();
		}
		}
		}, {
		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++;
		}
		}
		}
		}]);

		return Constellations;
		}(_CanvasEffect3.default);

		exports.default = Constellations;
		"use strict";
		var __extends = (this && this.__extends) \|\| (function () {
		var extendStatics = Object.setPrototypeOf \|\|
		({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
		function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
		return function (d, b) {
		extendStatics(d, b);
		function __() { this.constructor = d; }
		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
		};
		})();
		Object.defineProperty(exports, "__esModule", { value: true });
		var CanvasEffect_1 = require("../CanvasEffect");
		var Point_1 = require("./Point");
		var Line_1 = require("./Line");
		var validate = require("../CanvasEffect/validate");
		var Constellations = /** @class */ (function (_super) {
		__extends(Constellations, _super);
		function Constellations(config) {
		var _this = _super.call(this, config) \|\| this;
		_this.complexity;
		_this.lines;
		_this.points;
		_this.seed = 8000;
		_this.init();
		return _this;
		}
		Constellations.prototype.init = function () {
		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.generate();
		_super.prototype.init.call(this);
		};
		Constellations.prototype.update = function () {
		for (var p = 0; p < this.complexity; p++) {
		this.points[p].update();
		}
		var l = 0;
		for (var i = 0; i < this.complexity; i++) {
		for (var j = i + 1; j < this.complexity; j++) {
		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++;
		}
		}
		};
		Constellations.prototype.render = function () {
		_super.prototype.render.call(this);
		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();
		}
		};
		Constellations.prototype.generate = function () {
		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 Point_1.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 Line_1.default(this.ctx);
		this.lines[k].init(this.config.line);
		k++;
		}
		}
		};
		Constellations.prototype.getComplexity = function (seed) {
		return Math.floor(this.canvas.width * this.canvas.height / seed);
		};
		return Constellations;
		}(CanvasEffect_1.default));
		exports.default = Constellations;

134

lib/Constellations/Line.js

		@@ -1,81 +0,53 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		var Line = function () {
		function Line(ctx) {
		_classCallCheck(this, Line);

		this.ctx = ctx;
		this.alpha = 0;
		this.color = [0, 0, 0, 1];
		this.fade = true;
		this.max = 100;
		this.width = 1;
		}

		_createClass(Line, [{
		key: 'init',
		value: function init(config) {
		if (config) {
		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;
		}
		}
		}, {
		key: 'update',
		value: function update(a, b) {
		this.a = a;
		this.b = b;
		}
		}, {
		key: 'render',
		value: function render() {
		if (this.getDistance() < this.max) {
		if (this.fade) {
		this.alpha = 1 - this.getDistance() / this.max;
		} else {
		this.alpha = 1;
		}
		} else {
		this.alpha = 0;
		}
		if (this.alpha > 0) {
		this.ctx.strokeStyle = 'rgba(' + this.color[0] + ',' + this.color[1] + ',' + this.color[2] + ',' + this.alpha + ')';
		this.ctx.lineWidth = this.width;
		this.ctx.beginPath();
		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;
		}();

		exports.default = Line;
		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var validate = require("../CanvasEffect/validate");
		var Line = /** @class */ (function () {
		function Line(ctx) {
		this.ctx = ctx;
		this.a;
		this.b;
		this.alpha = 0;
		this.color = [0, 0, 0, 1];
		this.fade = true;
		this.max = 100;
		this.width = 1;
		}
		Line.prototype.init = function (config) {
		if (config) {
		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;
		}
		};
		Line.prototype.update = function (a, b) {
		this.a = a;
		this.b = b;
		};
		Line.prototype.render = function () {
		if (this.getDistance() < this.max) {
		if (this.fade) {
		this.alpha = 1 - (this.getDistance() / this.max);
		}
		else {
		this.alpha = this.color[3];
		}
		}
		else {
		this.alpha = 0;
		}
		if (this.alpha > 0) {
		this.ctx.strokeStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.alpha + ")";
		this.ctx.lineWidth = this.width;
		this.ctx.beginPath();
		this.ctx.moveTo(this.a[0], this.a[1]);
		this.ctx.lineTo(this.b[0], this.b[1]);
		this.ctx.stroke();
		}
		};
		Line.prototype.getDistance = function () {
		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]));
		};
		return Line;
		}());
		exports.default = Line;

137

lib/Constellations/Point.js

		@@ -1,83 +0,54 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		var Point = function () {
		function Point(ctx, pos) {
		_classCallCheck(this, Point);

		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: 'init',
		value: function init(config) {
		if (config) {
		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 (validate.array(config.velocity, 2)) {
		if (config.velocity[0] > config.velocity[1]) {
		this.velocity = this.getRandomArbitrary(config.velocity[0], config.velocity[1]);
		}
		}
		}
		}
		}, {
		key: 'update',
		value: function update() {
		if (this.pos[0] <= 0 + this.radius \|\| this.pos[0] >= this.cw - this.radius) {
		this.theta = Math.PI - this.theta;
		}
		if (this.pos[1] <= 0 + this.radius \|\| this.pos[1] >= this.ch - this.radius) {
		this.theta = 2 * Math.PI - this.theta;
		}
		this.pos[0] += Math.cos(this.theta) * this.velocity;
		this.pos[1] += Math.sin(this.theta) * this.velocity;
		}
		}, {
		key: 'render',
		value: function render() {
		this.ctx.fillStyle = 'rgba(' + this.color[0] + ',' + this.color[1] + ',' + this.color[2] + ',' + this.color[3] + ')';
		this.ctx.beginPath();
		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;
		}();

		exports.default = Point;
		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var validate = require("../CanvasEffect/validate");
		var Point = /** @class */ (function () {
		function Point(ctx, pos) {
		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();
		}
		Point.prototype.init = function (config) {
		if (config) {
		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 (validate.array(config.velocity, 2)) {
		if (config.velocity[0] > config.velocity[1]) {
		this.velocity = this.getRandomArbitrary(config.velocity[0], config.velocity[1]);
		}
		}
		}
		};
		Point.prototype.update = function () {
		if (this.pos[0] <= 0 + this.radius \|\| this.pos[0] >= this.cw - this.radius) {
		this.theta = Math.PI - this.theta;
		}
		if (this.pos[1] <= 0 + this.radius \|\| this.pos[1] >= this.ch - this.radius) {
		this.theta = 2 * Math.PI - this.theta;
		}
		this.pos[0] += Math.cos(this.theta) * this.velocity;
		this.pos[1] += Math.sin(this.theta) * this.velocity;
		};
		Point.prototype.render = function () {
		this.ctx.fillStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + this.color[3] + ")";
		this.ctx.beginPath();
		this.ctx.arc(this.pos[0], this.pos[1], this.radius, 0, 2 * Math.PI);
		this.ctx.fill();
		};
		Point.prototype.getRandomArbitrary = function (max, min) {
		return Math.random() * (max - min) + min;
		};
		Point.prototype.getRandomTheta = function () {
		return Math.random() * 2 * Math.PI;
		};
		return Point;
		}());
		exports.default = Point;

25

lib/index.js

		@@ -1,19 +0,6 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.Polygonal = exports.Constellations = undefined;

		var _Constellations = require('./Constellations');

		var _Constellations2 = _interopRequireDefault(_Constellations);

		var _Polygonal = require('./Polygonal');

		var _Polygonal2 = _interopRequireDefault(_Polygonal);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.Constellations = _Constellations2.default;
		exports.Polygonal = _Polygonal2.default;
		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var Constellations_1 = require("./Constellations");
		exports.Constellations = Constellations_1.default;
		var Polygonal_1 = require("./Polygonal");
		exports.Polygonal = Polygonal_1.default;

294

lib/Polygonal/index.js

		@@ -1,163 +0,131 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

		var _CanvasEffect2 = require('../CanvasEffect');

		var _CanvasEffect3 = _interopRequireDefault(_CanvasEffect2);

		var _Triangle = require('./Triangle');

		var _Triangle2 = _interopRequireDefault(_Triangle);

		var _fasterDelaunay = require('faster-delaunay');

		var _fasterDelaunay2 = _interopRequireDefault(_fasterDelaunay);

		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 }; }

		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 Polygonal = function (_CanvasEffect) {
		_inherits(Polygonal, _CanvasEffect);

		function Polygonal(config) {
		_classCallCheck(this, Polygonal);

		var _this = _possibleConstructorReturn(this, (Polygonal.__proto__ \|\| Object.getPrototypeOf(Polygonal)).call(this, config));

		_this.complexity;
		_this.debug = false;
		_this.light = [0, 0, 1000];
		_this.mouse = true;
		_this.seed = 8000;
		_this.triangles;
		_this.vertices;
		_this.init();
		return _this;
		}

		_createClass(Polygonal, [{
		key: 'init',
		value: function init() {
		if (validate.number(this.config.seed)) {
		this.complexity = this.getComplexity(this.config.seed);
		} else {
		this.complexity = this.getComplexity(this.seed);
		}
		this.debug = validate.boolean(this.config.debug) ? this.config.debug : this.debug;
		this.mouse = validate.boolean(this.config.mouse) ? this.config.mouse : this.mouse;
		this.triangles = [];
		this.generate();
		if (this.mouse) {
		addEventListener('mousemove', this.onMouseMove.bind(this), false);
		}
		_get(Polygonal.prototype.__proto__ \|\| Object.getPrototypeOf(Polygonal.prototype), 'init', this).call(this);
		}
		}, {
		key: 'update',
		value: function update() {
		for (var i = 0; i < this.triangles.length; i++) {
		this.triangles[i].update(this.light);
		}
		}
		}, {
		key: 'render',
		value: function render() {
		_get(Polygonal.prototype.__proto__ \|\| Object.getPrototypeOf(Polygonal.prototype), 'render', this).call(this);
		for (var i = 0; i < this.triangles.length; i++) {
		this.triangles[i].render();
		}
		if (this.debug) {
		for (var j = 0; j < this.vertices.length; j++) {
		this.ctx.font = "12px monospace";
		this.ctx.fillStyle = 'red';
		this.ctx.fillText(parseInt(this.vertices[j][2]), this.vertices[j][0], this.vertices[j][1]);
		}
		}
		}
		}, {
		key: 'elevate',
		value: function elevate(v) {
		for (var i = 0; i < v.length; i++) {
		var h = this.getRandomArbitrary(1000, 0);
		if (!v[i][2]) {
		for (var j = i + 1; j < v.length; j++) {
		if (v[i] == v[j]) {
		v[j][2] = h;
		}
		}
		v[i][2] = h;
		}
		}
		return v;
		}
		}, {
		key: 'generate',
		value: function generate() {
		var p = [];
		var pad = 200;
		var cw = this.canvas.width + pad * 2;
		var ch = this.canvas.height + pad * 2;
		var iy = ch / Math.round(Math.sqrt(ch * this.complexity / cw));
		var ix = cw / Math.round(this.complexity / Math.sqrt(ch * this.complexity / cw));
		var i = 0;
		for (var y = -pad; y < this.canvas.height + pad; y += iy) {
		for (var x = -pad; x < this.canvas.width + pad; x += ix) {
		p[i] = [this.getRandomArbitrary(x, x + ix), this.getRandomArbitrary(y, y + iy)];
		i++;
		}
		}
		var t = new _fasterDelaunay2.default(p).triangulate();
		this.vertices = this.elevate(t);
		var j = 0;
		for (var k = 0; k < this.vertices.length; k += 3) {
		this.triangles[j] = new _Triangle2.default(this.ctx, this.light, this.vertices[k], this.vertices[k + 1], this.vertices[k + 2]);
		this.triangles[j].init(this.config);
		j++;
		}
		}
		}, {
		key: 'getComplexity',
		value: function getComplexity(seed) {
		return Math.round(this.canvas.width * this.canvas.height / seed);
		}
		}, {
		key: 'getRandomArbitrary',
		value: function getRandomArbitrary(max, min) {
		return Math.random() * (max - min) + min;
		}
		}, {
		key: 'getMousePosition',
		value: function getMousePosition(e) {
		var rect = this.canvas.getBoundingClientRect();
		return [e.clientX, e.clientY];
		}
		}, {
		key: 'onMouseMove',
		value: function onMouseMove(e) {
		var pos = this.getMousePosition(e);
		this.light = [pos[0] / this.canvas.width * this.light[2], pos[1] / this.canvas.height * this.light[2], this.light[2]];
		}
		}]);

		return Polygonal;
		}(_CanvasEffect3.default);

		exports.default = Polygonal;
		"use strict";
		var __extends = (this && this.__extends) \|\| (function () {
		var extendStatics = Object.setPrototypeOf \|\|
		({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
		function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
		return function (d, b) {
		extendStatics(d, b);
		function __() { this.constructor = d; }
		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
		};
		})();
		Object.defineProperty(exports, "__esModule", { value: true });
		var CanvasEffect_1 = require("../CanvasEffect");
		var Triangle_1 = require("./Triangle");
		var validate = require("../CanvasEffect/validate");
		var Delaunator = require("delaunator");
		var open_simplex_noise_1 = require("open-simplex-noise");
		var Polygonal = /** @class */ (function (_super) {
		__extends(Polygonal, _super);
		function Polygonal(config) {
		var _this = _super.call(this, config) \|\| this;
		_this.complexity;
		_this.light = _this.getLightSource();
		_this.mouse = true;
		_this.seed = 8000;
		_this.triangles;
		_this.init();
		return _this;
		}
		Polygonal.prototype.init = function () {
		if (validate.number(this.config.seed)) {
		this.complexity = this.getComplexity(this.config.seed);
		}
		else {
		this.complexity = this.getComplexity(this.seed);
		}
		this.mouse = validate.boolean(this.config.mouse) ? this.config.mouse : this.mouse;
		this.triangles = [];
		this.generate();
		if (this.mouse) {
		addEventListener('mousemove', this.onMouseMove.bind(this), false);
		}
		_super.prototype.init.call(this);
		};
		Polygonal.prototype.update = function () {
		for (var i = 0; i < this.triangles.length; i++) {
		this.triangles[i].update(this.light);
		}
		};
		Polygonal.prototype.render = function () {
		_super.prototype.render.call(this);
		for (var i = 0; i < this.triangles.length; i++) {
		this.triangles[i].render();
		}
		};
		Polygonal.prototype.generate = function () {
		var points = [];
		var pad = (this.canvas.width + this.canvas.height) / 10;
		var cw = Math.floor(this.canvas.width + pad * 2);
		var ch = Math.floor(this.canvas.height + pad * 2);
		var iy = ch / Math.round(Math.sqrt((ch * this.complexity) / cw));
		var ix = cw / Math.round(this.complexity / Math.sqrt((ch * this.complexity) / cw));
		var i = 0;
		for (var y = -pad; y < this.canvas.height + pad; y += iy) {
		for (var x = -pad; x < this.canvas.width + pad; x += ix) {
		points[i] = [
		this.getRandomArbitrary(x, x + ix),
		this.getRandomArbitrary(y, y + iy),
		];
		i++;
		}
		}
		var height = (this.canvas.height + this.canvas.width) / 2;
		points = this.triangulate(points);
		points = this.elevate(points, height);
		var j = 0;
		for (var k = 0; k < points.length; k += 3) {
		this.triangles[j] = new Triangle_1.default(this.ctx, this.light, points[k], points[k + 1], points[k + 2]);
		this.triangles[j].init(this.config);
		j++;
		}
		};
		Polygonal.prototype.triangulate = function (points) {
		var d = new Delaunator(points).triangles;
		var t = [];
		for (var i = 0; i < d.length; i++) {
		t.push(points[d[i]]);
		}
		return t;
		};
		Polygonal.prototype.elevate = function (points, height) {
		var simplex = new open_simplex_noise_1.default(this.seed);
		for (var i = 0; i < points.length; i++) {
		points[i][2] = ((simplex.noise2D(points[i][0], points[i][1]) + 1) / 2) * height;
		}
		return points;
		};
		Polygonal.prototype.getLightSource = function () {
		return [
		this.canvas.width / 2,
		this.canvas.height / 2,
		this.canvas.width
		];
		};
		Polygonal.prototype.getComplexity = function (seed) {
		return Math.floor(this.canvas.width * this.canvas.height / seed);
		};
		Polygonal.prototype.getRandomArbitrary = function (max, min) {
		return Math.random() * (max - min) + min;
		};
		Polygonal.prototype.getCenteroid = function (a, b, c) {
		return [
		(a[0] + b[0] + c[0]) / 3,
		(a[1] + b[1] + c[1]) / 3
		];
		};
		Polygonal.prototype.getMousePosition = function (e) {
		var rect = this.canvas.getBoundingClientRect();
		return [e.clientX, e.clientY];
		};
		Polygonal.prototype.onMouseMove = function (e) {
		var pos = this.getMousePosition(e);
		this.light = [
		(pos[0] / this.canvas.width) * this.light[2],
		(pos[1] / this.canvas.height) * this.light[2],
		this.light[2]
		];
		};
		return Polygonal;
		}(CanvasEffect_1.default));
		exports.default = Polygonal;

214

lib/Polygonal/Triangle.js

		@@ -1,111 +0,107 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var validate = require("../CanvasEffect/validate");
		// math equations: Dan Avila <daniel.avila@yale.edu>
		// light intesity: https://stackoverflow.com/a/31682068/4616986

		var Triangle = function () {
		function Triangle(ctx, light, a, b, c) {
		_classCallCheck(this, Triangle);

		this.ctx = ctx;
		this.light = light;
		this.a = a;
		this.b = b;
		this.c = c;
		this.debug = false;
		this.color = [255, 255, 255, 1];
		this.shade = this.color;
		}

		_createClass(Triangle, [{
		key: 'init',
		value: function init(config) {
		this.color = validate.color(config.color) ? config.color : this.color;
		this.debug = validate.boolean(config.debug) ? config.debug : this.debug;
		this.shader();
		}
		}, {
		key: 'update',
		value: function update(light) {
		this.light = light;
		this.shader();
		}
		}, {
		key: 'render',
		value: function render() {
		this.ctx.fillStyle = 'rgba(' + this.shade[0] + ',' + this.shade[1] + ',' + this.shade[2] + ',' + this.shade[3] + ')';
		this.ctx.strokeStyle = 'rgba(' + this.shade[0] + ',' + this.shade[1] + ',' + this.shade[2] + ',' + this.shade[3] + ')';
		this.ctx.strokeStyle = 'black';
		this.ctx.beginPath();
		this.ctx.moveTo(this.a[0], this.a[1]);
		this.ctx.lineTo(this.b[0], this.b[1]);
		this.ctx.lineTo(this.c[0], this.c[1]);
		this.ctx.fill();
		this.ctx.stroke();
		if (this.debug) {
		this.ctx.font = '12px monospace';
		this.ctx.fillStyle = 'green';
		var c = this.getCenteroid();
		this.ctx.fillText(parseFloat(this.test).toFixed(2), c[0], c[1]);
		}
		}
		}, {
		key: 'shader',
		value: function shader() {
		var v1 = this.vector(this.a, this.b);
		var v2 = this.vector(this.a, this.c);
		var n = this.cross(v1, v2);
		var un = this.normalize(n);
		var l = this.vector(this.a, this.light);
		var ul = this.normalize(l);
		var dp = this.dotProduct(un, ul);
		var intensity = (dp + 1) / 2;
		this.shade = [parseInt(this.color[0] * intensity), parseInt(this.color[1] * intensity), parseInt(this.color[2] * intensity), this.color[3]];
		this.test = intensity;
		}
		}, {
		key: 'vector',
		value: function vector(p1, p2) {
		return [p2[0] - p1[0], p2[1] - p1[1], p2[2] - p1[2]];
		}
		}, {
		key: 'cross',
		value: function cross(v1, v2) {
		return [v1[1] * v2[2] - v1[2] * v2[1], v1[2] * v2[0] - v1[0] * v2[2], v1[0] * v2[1] - v1[1] * v2[0]];
		}
		}, {
		key: 'normalize',
		value: function normalize(v) {
		var m = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
		return [v[0] / m, v[1] / m, v[2] / m];
		}
		}, {
		key: 'dotProduct',
		value: function dotProduct(v1, v2) {
		return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2];
		}
		}, {
		key: 'getCenteroid',
		value: function getCenteroid() {
		return [(this.a[0] + this.b[0] + this.c[0]) / 3, (this.a[1] + this.b[1] + this.c[1]) / 3];
		}
		}]);

		return Triangle;
		}();

		exports.default = Triangle;
		var Triangle = /** @class */ (function () {
		function Triangle(ctx, light, a, b, c) {
		this.ctx = ctx;
		this.light = light;
		this.a = a;
		this.b = b;
		this.c = c;
		this.color = [255, 255, 255, 1];
		this.hue = this.color;
		this.max = 0.5;
		this.stroke = {};
		}
		Triangle.prototype.init = function (config) {
		this.color = validate.color(config.color) ? config.color : this.color;
		if (validate.number(config.max)) {
		if (config.max >= 0 && config.max <= 1) {
		this.max = config.max;
		}
		}
		if (config.stroke) {
		if (validate.color(config.stroke.color)) {
		this.stroke.color = config.stroke.color;
		}
		if (validate.number(config.stroke.width)) {
		this.stroke.width = config.stroke.width;
		}
		}
		};
		Triangle.prototype.update = function (light) {
		this.light = light;
		this.shader();
		};
		Triangle.prototype.render = function () {
		this.ctx.fillStyle = "rgba(" + this.hue[0] + "," + this.hue[1] + "," + this.hue[2] + "," + this.hue[3] + ")";
		if (this.stroke.color) {
		this.ctx.strokeStyle = "rgba(" + this.stroke.color[0] + "," + this.stroke.color[1] + "," + this.stroke.color[2] + "," + this.stroke.color[3] + ")";
		if (this.stroke.width) {
		this.ctx.lineWidth = this.stroke.width;
		}
		}
		else {
		this.ctx.strokeStyle = "rgba(" + this.hue[0] + "," + this.hue[1] + "," + this.hue[2] + "," + this.hue[3] + ")";
		}
		this.ctx.beginPath();
		this.ctx.moveTo(this.a[0], this.a[1]);
		this.ctx.lineTo(this.b[0], this.b[1]);
		this.ctx.lineTo(this.c[0], this.c[1]);
		this.ctx.fill();
		this.ctx.stroke();
		};
		Triangle.prototype.shader = function () {
		var v1 = this.vector(this.a, this.b);
		var v2 = this.vector(this.a, this.c);
		var n = this.cross(v1, v2);
		var un = this.normalize(n);
		var l = this.vector(this.a, this.light);
		var ul = this.normalize(l);
		var dp = this.dotProduct(un, ul);
		var power = 1 - (dp + 1) / 2;
		this.hue = this.shade(this.color, this.getIntensity(power, this.max));
		};
		Triangle.prototype.vector = function (p1, p2) {
		return [
		p2[0] - p1[0],
		p2[1] - p1[1],
		p2[2] - p1[2]
		];
		};
		Triangle.prototype.cross = function (v1, v2) {
		return [
		(v1[1] * v2[2]) - (v1[2] * v2[1]),
		(v1[2] * v2[0]) - (v1[0] * v2[2]),
		(v1[0] * v2[1]) - (v1[1] * v2[0])
		];
		};
		Triangle.prototype.normalize = function (v) {
		var m = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
		return [v[0] / m, v[1] / m, v[2] / m];
		};
		Triangle.prototype.shade = function (color, i) {
		return [
		Math.floor(color[0] * i),
		Math.floor(color[1] * i),
		Math.floor(color[2] * i),
		color[3]
		];
		};
		Triangle.prototype.getIntensity = function (power, max) {
		return 1 - max + max * power;
		};
		Triangle.prototype.dotProduct = function (v1, v2) {
		return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2];
		};
		Triangle.prototype.getCenteroid = function () {
		return [
		(this.a[0] + this.b[0] + this.c[0]) / 3,
		(this.a[1] + this.b[1] + this.c[1]) / 3
		];
		};
		return Triangle;
		}());
		exports.default = Triangle;

23

package.json

		{
		"name": "canvas-effects",
		"description": "modular canvas visualizations",
		"version": "0.1.4",
		"main": "lib/index.js",
		"version": "0.1.5",
		"main": "./lib/index.js",
		"types": "./lib/index.d.ts",
		"scripts": {
		"start": "./node_modules/.bin/webpack-dev-server",
		"build": "babel src --out-dir lib"
		"build": "rm -r ./lib && ./node_modules/.bin/tsc"
		},
		@@ -21,7 +22,5 @@ "repository": {
		"devDependencies": {
		"babel-cli": "^6.18.0",
		"babel-core": "^6.21.0",
		"babel-loader": "^6.2.10",
		"babel-preset-es2015": "^6.18.0",
		"babel-register": "^6.18.0",
		"awesome-typescript-loader": "^3.2.3",
		"source-map-loader": "^0.2.3",
		"typescript": "^2.5.3",
		"webpack": "^1.14.0",
		@@ -31,7 +30,7 @@ "webpack-dev-server": "^1.16.2"
		"dependencies": {
		"color": "^1.0.3",
		"faster-delaunay": "^1.0.0",
		"ismobilejs": "^0.4.1",
		"three": "^0.87.1"
		"@types/delaunator": "^1.0.0",
		"delaunator": "^1.0.4",
		"fast-simplex-noise": "^3.2.0",
		"open-simplex-noise": "^1.4.0"
		}
		}

38

README.md

		# canvas-effects WIP
		[![npm version](https://badge.fury.io/js/canvas-effects.svg)](https://badge.fury.io/js/canvas-effects)

		A Javascript library of canvas visualizations.
		A Javascript library of canvas visualizations. Written in Typescript.

		@@ -183,16 +183,30 @@ ## Getting Started

		debug
		mouse

		Allows developer to view the height (z value) of each vertex.
		If true, the position of the light source will move with relation to the mouse pointer.

		Defaults to red (255,0,0) text and there's currently no way to change it with the config.
		`mouse: <Boolean> // Default: true`

		`debug: <Boolean> // Default: false`
		max

		mouse
		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.

		If true, the position of the light source will move with relation to the mouse pointer.
		`max: <Number> // Default: 0.5`

		`mouse: <Boolean> // Default: true`
		#### stroke

		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

		Sets the color (r, g, b, a) of the stroke.

		`color: <Number>[4] // Default: undefined`

		width

		Sets the width of the stroke.

		`width: <Number> // Default: undefined`

		### Example
		@@ -209,4 +223,8 @@
		color: [255, 255, 255, 0.5],
		debug: false,
		power: 1000
		mouse: true,
		max: 0.5,
		stroke: {
		color: [0,0,0,1],
		width: 0
		}
		});
		@@ -213,0 +231,0 @@ ```

.babelrc

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes