New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@gush/candybar

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gush/candybar - npm Package Compare versions

Comparing version 0.0.0-alpha3 to 0.0.0-alpha30

.flowconfig
.travis.yml
docs/docs.md
yarn-error.log

638

dist/index.js
'use strict';
/**
* Gets a random float between a given min and max number.
*/
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
/**
* Gets a random integer between a given min and max number.
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
* Gets the linear interpretation given a start, end, and the current amount (0–1)
*/
function lerp(start, end, amount) {
return (1 - amount) * start + amount * end;
}
/**
* Determines if two axis-aligned boxes intersect using AABB.
*/
function doBoxesIntersect(a, b) {
if (a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.h + a.y > b.y) {
return true;
}
return false;
}
/**
* Scales a value given a target range and current range.
*/
function scaleBetween(initialVal, minAllow, maxAllow, min, max) {
// scaleBetween(250, -1, 1, 0, 500) => 0
return (maxAllow - minAllow) * (initialVal - min) / (max - min) + minAllow;
}
/**
* Cycles through a total amount and current value.
*/
function cycle(value, total) {
return (value % total + total) % total;
}
/**
* Clamps a number between a given min and max range.
*/
function clamp(number, min, max) {
return Math.max(min, Math.min(number, max));
}
var utils = /*#__PURE__*/Object.freeze({
getRandomFloat: getRandomFloat,
getRandomInt: getRandomInt,
lerp: lerp,
doBoxesIntersect: doBoxesIntersect,
scaleBetween: scaleBetween,
cycle: cycle,
clamp: clamp
});
var classCallCheck = function (instance, Constructor) {

@@ -99,90 +162,2 @@ if (!(instance instanceof Constructor)) {

//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Entity
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Entity = function Entity() {
var _this = this;
classCallCheck(this, Entity);
this.dpr = window.devicePixelRatio || 1;
this.toValue = function (value) {
return value * _this.dpr;
};
this.draw = function () {};
this.update = function () {};
};
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Background
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Background = function (_Entity) {
inherits(Background, _Entity);
function Background() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, Background);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Background.__proto__ || Object.getPrototypeOf(Background)).call.apply(_ref, [this].concat(args))), _this), _this.draw = function (context) {
_this.drawGradient(context);
_this.drawText(context);
}, _temp), possibleConstructorReturn(_this, _ret);
}
createClass(Background, [{
key: 'drawText',
value: function drawText(_ref2) {
var ctx = _ref2.ctx,
canvas = _ref2.canvas;
var ms = Math.max(canvas.width, canvas.height);
var size = ms / 15;
var copy = 'Canvas Starter';
var x = canvas.width / 2;
var y = canvas.height / 2 + size / 3;
ctx.font = '700 italic ' + size + 'px futura, sans-serif';
ctx.textAlign = 'center';
ctx.fillStyle = '#fff';
ctx.fillText(copy, x, y);
}
}, {
key: 'drawGradient',
value: function drawGradient(_ref3) {
var ctx = _ref3.ctx,
canvas = _ref3.canvas,
bounds = _ref3.bounds;
var offset = this.toValue(20);
var gradientBounds = bounds.offsetInner(offset);
var gradient = ctx.createLinearGradient.apply(ctx, toConsumableArray(gradientBounds.params));
gradient.addColorStop(0, '#4286f4');
gradient.addColorStop(1, '#5b3dd3');
ctx.fillStyle = gradient;
ctx.fillRect.apply(ctx, toConsumableArray(gradientBounds.params));
}
}]);
return Background;
}(Entity);
function lerp(start, end, amount) {
return (1 - amount) * start + amount * end;
}
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Point
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Point = function () {

@@ -204,3 +179,3 @@ function Point(x, y) {

value: function delta(point) {
return [this.x - point.x, this.y - point.y];
return [point.x - this.x, point.y - this.y];
}

@@ -210,4 +185,7 @@ }, {

value: function distance(point) {
var dx = point.x - this.x;
var dy = point.y - this.y;
var _delta = this.delta(point),
_delta2 = slicedToArray(_delta, 2),
dx = _delta2[0],
dy = _delta2[1];
return Math.sqrt(dx * dx + dy * dy);

@@ -237,9 +215,2 @@ }

}, {
key: 'applyVelocity',
value: function applyVelocity(velocity) {
this.x += velocity.vx;
this.y += velocity.vy;
return this;
}
}, {
key: 'angleRadians',

@@ -286,6 +257,2 @@ value: function angleRadians(point) {

//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Bounds
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Bounds = function () {

@@ -299,5 +266,5 @@ function Bounds(x, y, w, h) {

this.h = h;
var hw = w / 2;
var hh = h / 2;
this.center = new Point(hw, hh);
this.hw = w / 2;
this.hh = h / 2;
this.center = new Point(this.hw, this.hh);
this.position = new Point(x, y);

@@ -307,2 +274,25 @@ }

createClass(Bounds, [{
key: 'move',
value: function move(x, y) {
this.x += x;
this.y += y;
this.center.move(x, y);
this.position.move(x, y);
return this;
}
}, {
key: 'moveTo',
value: function moveTo(x, y) {
this.x = x;
this.y = y;
this.center.moveTo(x + this.hw, y + this.hh);
this.position.moveTo(x, y);
return this;
}
}, {
key: 'intersectsWith',
value: function intersectsWith(bounds) {
return doBoxesIntersect(this, bounds);
}
}, {
key: 'offsetOuter',

@@ -338,46 +328,17 @@ value: function offsetOuter(offset) {

//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Cursor
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Cursor = function (_Entity) {
inherits(Cursor, _Entity);
function Cursor(radius) {
classCallCheck(this, Cursor);
var _this = possibleConstructorReturn(this, (Cursor.__proto__ || Object.getPrototypeOf(Cursor)).call(this));
_this.draw = function (_ref) {
var ctx = _ref.ctx,
pointer = _ref.pointer;
ctx.strokeStyle = _this.strokeStyle;
ctx.lineWidth = _this.lineWidth;
ctx.beginPath();
ctx.arc(pointer.position.x, pointer.position.y, _this.radius, 0, _this.pi2, true);
ctx.closePath();
ctx.stroke();
};
_this.radius = _this.toValue(radius);
_this.pi2 = Math.PI * 2;
_this.lineWidth = _this.toValue(2);
_this.strokeStyle = '#fff';
return _this;
}
return Cursor;
}(Entity);
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Pointer
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Pointer = function () {
function Pointer() {
function Pointer(_ref) {
var containerRect = _ref.containerRect,
scrollPosition = _ref.scrollPosition;
classCallCheck(this, Pointer);
// cached getBoundingRect call
this.containerRect = containerRect;
// cached position from when the rect is got
this.scrollPosition = scrollPosition;
this.dpr = window.devicePixelRatio || 1;
this.position = new Point(0, 0);
this.delta;
this.lastPosition = null;
this.position = new Point(null, null);
this.addListeners();

@@ -387,2 +348,7 @@ }

createClass(Pointer, [{
key: 'delta',
value: function delta() {
return this.position.delta(this.lastPosition);
}
}, {
key: 'addListeners',

@@ -394,12 +360,57 @@ value: function addListeners() {

window.addEventListener(event, function (e) {
// move previous point
var _position = _this.position,
px = _position.x,
py = _position.y;
// disable the demo modifier if it's been added
if (_this.modifier) {
_this.modifier = null;
}
// gets touch if avail else normal mouse event
var x = null;
var y = null;
if (touch) {
e.preventDefault();
var x = e.targetTouches[0].clientX * _this.dpr;
var y = e.targetTouches[0].clientY * _this.dpr;
_this.position.moveTo(x, y);
x = e.targetTouches[0].clientX * _this.dpr;
y = e.targetTouches[0].clientY * _this.dpr;
} else {
var _x = e.clientX * _this.dpr;
var _y = e.clientY * _this.dpr;
_this.position.moveTo(_x, _y);
x = e.clientX * _this.dpr;
y = e.clientY * _this.dpr;
}
// set new last position
if (!_this.lastPosition) {
_this.lastPosition = new Point(x, y);
} else {
_this.lastPosition.moveTo(px, py);
}
// apply offsets if the pointer is in a container
if (_this.containerRect && _this.scrollPosition) {
var _containerRect = _this.containerRect,
offX = _containerRect.left,
offY = _containerRect.top;
var _scrollPosition = _this.scrollPosition,
scrollX = _scrollPosition.scrollX,
scrollY = _scrollPosition.scrollY;
// account for current and cached scroll positions
var sx = window.pageXOffset - scrollX;
var sy = window.pageYOffset - scrollY;
// apply element offset from viewport
x = x - offX * _this.dpr;
y = y - offY * _this.dpr;
// apply page scroll offset
x = x + sx * _this.dpr;
y = y + sy * _this.dpr;
}
// set the final positon
_this.position.moveTo(x, y);
}, false);

@@ -412,6 +423,316 @@ });

//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡/
// Velocity
//*‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡‡*/
var Canvas = function () {
function Canvas(_ref) {
var _this = this;
var canvas = _ref.canvas,
container = _ref.container,
_ref$entities = _ref.entities,
entities = _ref$entities === undefined ? [] : _ref$entities,
hasPointer = _ref.hasPointer;
classCallCheck(this, Canvas);
this.addEntity = function (newEntity) {
_this.entities = [].concat(toConsumableArray(_this.entities), [newEntity]);
// call setup since this is new
newEntity.setup && newEntity.setup(_this);
return _this.entities.length - 1;
};
this.render = function () {
// Draw and Update items here.
_this.entities.forEach(function (_ref2) {
var draw = _ref2.draw,
update = _ref2.update;
draw && draw(_this);
update && update(_this);
});
++_this.tick;
!_this.paused && window.requestAnimationFrame(_this.render);
};
this.canvas = canvas;
this.container = container;
this.hasPointer = hasPointer;
this.dpr = window.devicePixelRatio || 1;
this.ctx = canvas.getContext('2d');
this.ctx.scale(this.dpr, this.dpr);
// tick counter
this.tick = 0;
// entities to be drawn on the canvas
this.entities = entities;
// setup and run
this.setCanvasSize();
this.setContainerRect();
this.setPointer();
this.setupListeners();
this.setupEntities();
this.render();
}
createClass(Canvas, [{
key: 'setupListeners',
value: function setupListeners() {
var _this2 = this;
window.addEventListener('resize', function (event) {
_this2.setCanvasSize();
_this2.setPointer();
_this2.setContainerRect();
_this2.resizeEntities(event);
});
}
}, {
key: 'setContainerRect',
value: function setContainerRect() {
if (!this.container) return;
this.containerRect = this.container.getBoundingClientRect();
}
}, {
key: 'setPointer',
value: function setPointer() {
// track mouse/touch movement
var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
this.pointer = this.hasPointer && new Pointer({
containerRect: this.containerRect,
scrollPosition: {
scrollX: scrollX,
scrollY: scrollY
}
});
}
}, {
key: 'setCanvasSize',
value: function setCanvasSize() {
var _window = window,
w = _window.innerWidth,
h = _window.innerHeight;
// sized to the container if available
if (this.container) {
w = this.container.clientWidth;
h = this.container.clientHeight;
}
// otherwise, fullscreen
var w2 = w * this.dpr;
var h2 = h * this.dpr;
this.canvas.width = w2;
this.canvas.height = h2;
this.canvas.style.width = w + 'px';
this.canvas.style.height = h + 'px';
this.canvas.style.position = 'absolute';
this.canvas.style.top = 0;
this.canvas.style.left = 0;
this.bounds = new Bounds(0, 0, w2, h2);
}
}, {
key: 'setupEntities',
value: function setupEntities() {
var _this3 = this;
this.entities.forEach(function (_ref3) {
var setup = _ref3.setup;
setup && setup(_this3);
});
}
}, {
key: 'resizeEntities',
value: function resizeEntities(event) {
var _this4 = this;
this.entities.forEach(function (_ref4) {
var resize = _ref4.resize;
resize && resize(_this4, event);
});
}
}, {
key: 'removeEntity',
value: function removeEntity(deleteIndex) {
this.entities = this.entities.filter(function (el, i) {
return i !== deleteIndex;
});
return this.entities;
}
}, {
key: 'removeDead',
value: function removeDead() {
this.entities = this.entities.filter(function (_ref5) {
var _ref5$dead = _ref5.dead,
dead = _ref5$dead === undefined ? false : _ref5$dead;
return !dead;
});
}
}, {
key: 'stop',
value: function stop() {
this.paused = true;
}
}, {
key: 'start',
value: function start() {
this.paused = false;
this.render();
}
}, {
key: 'clearCanvas',
value: function clearCanvas(_ref6) {
var ctx = _ref6.ctx,
bounds = _ref6.bounds;
ctx.clearRect.apply(ctx, toConsumableArray(bounds.params));
}
// Main loop
}]);
return Canvas;
}();
var Entity = function Entity() {
var _this = this;
classCallCheck(this, Entity);
this.dpr = window.devicePixelRatio || 1;
this.toValue = function (value) {
return value * _this.dpr;
};
};
var PointPhysics = function (_Point) {
inherits(PointPhysics, _Point);
function PointPhysics(_ref) {
var x = _ref.x,
y = _ref.y,
mass = _ref.mass,
isFixed = _ref.isFixed,
_ref$pointerStrength = _ref.pointerStrength,
pointerStrength = _ref$pointerStrength === undefined ? 0.25 : _ref$pointerStrength,
_ref$pointerRadius = _ref.pointerRadius,
pointerRadius = _ref$pointerRadius === undefined ? 100 : _ref$pointerRadius;
classCallCheck(this, PointPhysics);
var _this = possibleConstructorReturn(this, (PointPhysics.__proto__ || Object.getPrototypeOf(PointPhysics)).call(this, x, y));
_this.update = function (_ref2) {
var pointer = _ref2.pointer,
tick = _ref2.tick;
if (_this.isFixed) return;
if (_this.pointerRadius && _this.pointerStrength) {
_this.applyForceFromMouse(pointer);
}
_this.solveVelocity();
};
_this.vx = 0; // velocity x
_this.vy = 0; // velocity y
_this.fx = 0; // force x
_this.fy = 0; // force y
_this.mass = mass;
_this.isFixed = isFixed;
var DPR = devicePixelRatio || 1;
_this.pointerRadius = pointerRadius * DPR;
_this.pointerStrength = pointerStrength; // 0 - 1
return _this;
}
createClass(PointPhysics, [{
key: 'applyForce',
value: function applyForce(x, y) {
this.fx += x;
this.fy += y;
}
}, {
key: 'applyForceFromMouse',
value: function applyForceFromMouse(pointer) {
var distance = this.distance(pointer.position);
if (distance < this.pointerRadius) {
var _pointer$delta = pointer.delta(),
_pointer$delta2 = slicedToArray(_pointer$delta, 2),
dx = _pointer$delta2[0],
dy = _pointer$delta2[1];
var power = (1 - distance / this.pointerRadius) * this.pointerStrength * -1;
this.applyForce(dx * power, dy * power);
}
}
}, {
key: 'solveVelocity',
value: function solveVelocity() {
if (this.fx === 0 && this.fy === 0) return;
// acceleration = force / mass;
var ax = this.fx / this.mass;
var ay = this.fy / this.mass;
// velocity + acceleration
this.vx += ax;
this.vy += ay;
this.x += this.vx;
this.y += this.vy;
// reset any applied forces
this.fx = 0;
this.fy = 0;
}
}]);
return PointPhysics;
}(Point);
var Segment = function () {
function Segment(p1, p2) {
classCallCheck(this, Segment);
this.p1 = p1;
this.p2 = p2;
// alias
this.a = this.p1;
this.b = this.p2;
//
this.points = [this.p1, this.p2];
var tl = new Point(Math.min(p1.x, p2.x), Math.min(p1.y, p2.y));
var br = new Point(Math.max(p1.x, p2.x), Math.max(p1.y, p2.y));
var _tl$delta = tl.delta(br),
_tl$delta2 = slicedToArray(_tl$delta, 2),
dx = _tl$delta2[0],
dy = _tl$delta2[1];
this.bounds = new Bounds(tl.x, tl.y, dx, dy);
}
createClass(Segment, [{
key: 'move',
value: function move() {
var _p, _p2, _bounds;
this.p1 = (_p = this.p1).move.apply(_p, arguments);
this.p2 = (_p2 = this.p2).move.apply(_p2, arguments);
(_bounds = this.bounds).move.apply(_bounds, arguments);
}
}]);
return Segment;
}();
var Velocity = function () {

@@ -466,12 +787,13 @@ function Velocity(vx, vy) {

var index = {
Background: Background,
Bounds: Bounds,
Canvas: Background,
Cursor: Cursor,
Canvas: Canvas,
Entity: Entity,
Point: Point,
PointPhysics: PointPhysics,
Pointer: Pointer,
Velocity: Velocity
Segment: Segment,
Velocity: Velocity,
utils: utils
};
module.exports = index;

24

package.json
{
"name": "@gush/candybar",
"version": "0.0.0-alpha3",
"description": "",
"main": "src/index.js",
"version": "0.0.0-alpha30",
"description": "🍫",
"main": "dist/index.js",
"scripts": {
"start": "",
"build": "rollup -c --dir dist",
"test": "NODE_ENV='test' jest",
"test:watch": "NODE_ENV='test' jest --watch",
"build": "npm run test && NODE_ENV='production' rollup -c --dir dist",
"docs": "documentation build src/index.js -o docs/docs.md -f md",
"prepublishOnly": "npm run build"

@@ -13,3 +16,7 @@ },

"license": "ISC",
"dependencies": {
"jest": {
"verbose": true
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",

@@ -20,7 +27,10 @@ "babel-plugin-external-helpers": "^6.22.0",

"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"documentation": "8.1.0",
"flow-bin": "^0.78.0",
"jest": "^23.5.0",
"rollup": "^0.63.5",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-node-resolve": "^3.3.0"
},
"devDependencies": {}
}
}

86

README.md

@@ -1,3 +0,85 @@

# Candybar 🍫
# Candybar 🍫 [![Build Status](https://travis-ci.org/gushers/candybar.svg?branch=master)](https://travis-ci.org/gushers/candybar)
Starter for building things with `<canvas>`. Uses parcel to bundle and transpile code.
A simple `<canvas>` rendering engine and collection of classes and utils. And by "engine" I mean about as advanced as a broken scooter 🛴
🚨 **This is an alpha release**
_Really, don't use this thing for anything yet._
## Getting started
Install it, duh.
```
yarn add @gush/candybar
```
Then create a canvas.
```javascript
import { Canvas } from '@gush/candybar';
const canvas = new Canvas({
canvas: document.getElementById('canvas'),
});
```
This will create a beautiful blank canvas. 🙌🏻
## Canvas options
Canvas classes can be created with a few options:
- `canvas`
- `container`
- `hasPointer`
- `entities`
```javascript
new Canvas({
// This is the required HTML element that the Canvas class will render to.
canvas: document.getElementById('canvas'),
// Container is the element that the canvas should be fit within,
// if this is not provided it's assumed this is a full screen canvas
container: document.getElementById('container'),
// Indicates if the canvas should capture mouse/touch pointer events.
hasPointer: true,
// Entities are objects that will be renedered by the Canvas engine.
entities: [...things],
});
```
## Entities
The engine will loop through each entity and call a couple methods to "render" the entity. First a `draw()` method is called where you should do any drawing using the HTML canvas API. Then an `update()` method is called which should be used to update any properties based on the engine.
```javascript
class MyThing {
constructor() {
this.x = 0;
this.y = 0;
}
setup = ({ canvas }) => {
// setup will be called once before the first draw and is provided the class context
this.w = canvas.width / 10;
};
draw = ({ ctx }) => {
// draw with canvas API through the provided context
ctx.fillRect(this.x, this.y, 100, 100);
};
update = ({ pointer }) => {
// update the rect position based on pointer position
const { x, y } = this.pointer.position;
this.x = x;
this.y = y;
};
resize = (context, event) => {
// handle resize events.
this.w = context.canvas.width / 10;
};
}
```
src/index.js
src/modules/Background.js
src/modules/Bounds.js
src/modules/Canvas.js
src/modules/Cursor.js
src/modules/Entity.js
src/modules/Point.js
src/modules/Pointer.js
src/modules/Velocity.js
src/utils/index.js
.babelrc

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc