diff --git a/README.md b/README.md
index c7caffa..53c40de 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,8 @@ Draws cute animated canvas constellations.
-## Usage (es6/webpack)
+
+## Usage (webpack+babel)
Grab the code from here or npm
npm install constellation-canvas --save
@@ -36,30 +37,34 @@ Then just import it and feed it some parameters. There's a full list below.
});
-### Parameters
+## Usage (browser)
+Grab the [latest release](https://github.com/lawwrr/constellation/releases) and drop it in as a script tag. `window.constellation` will appear
-All of them except `canvas` are optional
-| Name | Description |
-| --- | --- |
-| **size** (array[x,y]) | Size of the canvas |
-| **padding** (array[x,y]) | space between the canvas edges and the stars, can be negative |
-| **canvas** (DOM element) | Canvas element to draw in |
-| **starCount** | Total number of stars |
-| **lineCount** | Total number of lines drawn between stars |
-| **speed** (object) | Object with speed options for the stars. |
-| **speed.active** | Speed when the mouse is moving the stars. |
-| **speed.passive** | Speed when the stars are jiggling. |
-| **style** (object) | Object with style options |
-| **style.starSize** | Size of the stars |
-| **style.starColor** | Color of the stars |
-| **style.starPadding** | Space between stars and lines |
-| **style.lineColor** | Color of the lines |
-| **style.lineSize** | Size of the lines |
+## Parameters
+All of them are optional but you might want to change some
+| Name | Type | Description |
+| --- | --- | --- |
+| **size** | `array [x,y]` | Pixel size for the canvas |
+| **padding** | `array [x,y]` | Space between the canvas edges and the stars, it can be negative to make a full background |
+| **canvas** | `DOM element` | The canvas element to draw in. Will be created if it doesn't exist |
+| **starCount** | `number` | Total number of stars to draw |
+| **lineCount** | `number` | Total number of lines drawn between stars |
+|
🏃💨 | | |
+| **speed** | `object` | Speed options |
+| **speed.active** | `number` | Speed when the mouse is moving the stars |
+| **speed.passive** | `number` | Speed when the stars are jiggling by themselves |
+|
👩🎨 | | |
+| **style** | `object` | Style options |
+| **style.starSize** | `number` | Size of the stars |
+| **style.starColor** | `string` | Color of the stars |
+| **style.starPadding** | `number` | Space between stars and lines |
+| **style.lineColor** | `string` | Color of the lines |
+| **style.lineSize** | `number` | Size (line weight) of the lines |
-### Advanced
+## Drawing things yourself
For further customization you can also pass an `onDraw` parameter with a number of callbacks. These will allow you to take over the drawing process of the canvas.
let constellation = Constellation({
@@ -83,6 +88,19 @@ For further customization you can also pass an `onDraw` parameter with a number
}
});
+You can see how these plug together at `src/class/Canvas.js` but here's a quick chart
+
+| Callback | Description |
+| --- | --- |
+| **star**(ctx,style,star) | overrides star drawing. `star` contains the coordinates for the star to be drawn |
+| **afterStar**(ctx,style,star) | takes place after the default star drawing. `star` contains the coordinates for the star that was drawn |
+| **line**(ctx,style,line) | overrides line drawing. `line` contains the coordinates for the line to be drawn |
+| **afterLine**(ctx,style,line) | takes place after the default line drawing. `line` contains the coordinates for the line that was drawn |
+| **afterFrame**(ctx,style,objects) | takes place after drawing a full frame. `objects` contains all coordinates for stars & lines |
+
+
+### Advanced
+
Available callbacks are `star`,`afterStar`,`line`,`afterLine`,`afterFrame`.
`star` & `line` will completely override the default drawing stage while `afterStar`,`afterLine` & `afterFrame` take place after their drawing is complete
@@ -98,9 +116,3 @@ ALSO!! should you ever need it, `Constellation` will return a promise containing
constellationInstance.then(function(data){
console.log(data.$constellation);
})
-
-
-## Usage (legacy)
-Consider migrating your codebase
-
-Otherwise, grab the [latest release](https://github.com/lawwrr/constellation/releases) and drop it in as a script tag. `window.constellation` will appear.
diff --git a/package.json b/package.json
index 954d841..8f29cfa 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,23 @@
{
"name": "constelation-canvas",
- "version": "1.2.2",
- "description": "draws cute moving canvas constellations",
- "main": "src/app.js",
- "scripts": {
- "gulp": "./node_modules/.bin/gulp",
- "install": "gulp make",
- "test": "gulp test",
- "release": "npm publish && npm install && gulp release"
- },
- "repository": {
- "type": "git",
- "url": "https://github.com/lawwrr/constellation"
- },
+ "description": "draws cute animated canvas constellations",
+ "version": "1.3.0",
"author": "Laura mayhem",
- "license": "GPL-3.0",
+ "bugs": {
+ "url": "https://github.com/lawwrr/constellation/issues",
+ "email": "lawr@lauragonzalez.cc"
+ },
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
+ "babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.9.0",
"document-ready-promise": "^3.0.1",
"es6-promise": "^4.0.5",
"es6-promise-promise": "1.0.0",
"gulp": "^3.9.1",
- "gulp-github-release": "^1.2.0",
"gulp-mocha-phantomjs": "^0.12.0",
"gulp-uglify": "^1.5.4",
- "mocha": "^2.5.3",
- "mocha-phantomjs": "^4.1.0",
"raw-loader": "^0.5.1",
"webpack": "^1.13.1",
"webpack-stream": "^3.2.0",
@@ -35,6 +25,27 @@
"wrapper-webpack-plugin": "0.1.11"
},
"devDependencies": {
- "babel-plugin-transform-object-assign": "^6.22.0"
+ "gulp-github-release": "^1.2.0",
+ "mocha": "^2.5.3",
+ "mocha-phantomjs": "^4.1.0"
+ },
+ "homepage": "https://lawwrr.github.io/constellation/",
+ "keywords": [
+ "canvas",
+ "es6",
+ "frontend",
+ "javascript"
+ ],
+ "license": "GPL-3.0",
+ "main": "src/app.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/lawwrr/constellation"
+ },
+ "scripts": {
+ "gulp": "./node_modules/.bin/gulp",
+ "install": "gulp make",
+ "release": "npm publish && npm install && gulp release",
+ "test": "gulp test"
}
}
diff --git a/src/app.js b/src/app.js
index ac1137b..ec530fa 100644
--- a/src/app.js
+++ b/src/app.js
@@ -30,7 +30,6 @@ const constellation = function ({
/*add to defaults*/
- if(!canvas) throw 'Please specify a target canvas';
if(padding[0] === 0 && padding[1] === 0) padding = [fuzziness,fuzziness]
style = Object.assign({}, styleDefaults, style);
@@ -60,6 +59,11 @@ const constellation = function ({
let start = () => {
+ if(!canvas) {
+ canvas = document.createElement('canvas');
+ document.body.appendChild(canvas);
+ }
+
canvas.setAttribute('width',size[0]*scale);
canvas.setAttribute('height',size[1]*scale);
canvas.style.width = `${size[0]}px`;
@@ -98,7 +102,7 @@ const constellation = function ({
(payload) => {
requestAnimationFrame(()=>{
canvasDrawer.draw({
- nodes: payload.nodes,
+ stars: payload.stars,
lines: payload.lines
});
repaint();
diff --git a/src/class/Canvas.js b/src/class/Canvas.js
index 44c7487..1ff1f20 100644
--- a/src/class/Canvas.js
+++ b/src/class/Canvas.js
@@ -22,6 +22,7 @@ export default class Canvas {
/*lines*/
ctx.lineWidth = style.lineSize;
ctx.strokeStyle = style.lineColor;
+ ctx.globalCompositeOperation = 'source-over';
for (let i = 0, len = objects.lines.length; i < len; i++) {
let line = objects.lines[i]
if(onDraw.line) {
@@ -31,22 +32,21 @@ export default class Canvas {
ctx.beginPath();
ctx.moveTo(line.pos[0],line.pos[1]);
ctx.lineTo(line.pos[2],line.pos[3]);
- ctx.globalCompositeOperation = 'source-over';
ctx.stroke();
ctx.closePath();
}
if(onDraw.afterLine) onDraw.afterLine(ctx,style,line);
}
- /*stars*/
- ctx.fillStyle = '#f0f';
+ /*star padding*/
if(style.starPadding > 0) {
+ ctx.fillStyle = '#f0f';
ctx.globalCompositeOperation = 'destination-out';
- for (let i = 0, len = objects.nodes.length; i < len; i++) {
- let node = objects.nodes[i]
+ for (let i = 0, len = objects.stars.length; i < len; i++) {
+ let star = objects.stars[i]
ctx.beginPath();
ctx.arc(
- node.pos[0], node.pos[1],
+ star.pos[0], star.pos[1],
(style.starSize + style.starPadding),
0, 2 * Math.PI);
ctx.fill();
@@ -54,26 +54,27 @@ export default class Canvas {
}
}
+ /*stars*/
ctx.fillStyle = style.starColor;
- for (let i = 0, len = objects.nodes.length; i < len; i++) {
- let node = objects.nodes[i]
+ ctx.globalCompositeOperation = 'source-over';
+ for (let i = 0, len = objects.stars.length; i < len; i++) {
+ let star = objects.stars[i]
if(onDraw.star) {
- onDraw.star(ctx,style,node);
+ onDraw.star(ctx,style,star);
}
else {
ctx.beginPath();
ctx.arc(
- node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI
+ star.pos[0], star.pos[1], style.starSize,0, 2 * Math.PI
);
- ctx.globalCompositeOperation = 'source-over';
ctx.fill();
ctx.closePath();
}
- if(onDraw.afterStar) onDraw.afterStar(ctx,style,node);
+ if(onDraw.afterStar) onDraw.afterStar(ctx,style,star);
};
ctx.closePath();
- if(onDraw.afterFrame) onDraw.afterFrame(ctx,style);
+ if(onDraw.afterFrame) onDraw.afterFrame(ctx,style,objects);
}
diff --git a/src/worker/puppis.js b/src/worker/puppis.js
index d133e7f..5532ce8 100644
--- a/src/worker/puppis.js
+++ b/src/worker/puppis.js
@@ -229,7 +229,7 @@ self.onmessage = function(ev) {
self,
'updateComplete',
{
- nodes: nodeRenderList,
+ stars: nodeRenderList,
lines: shipRenderList
}
)
diff --git a/test/test.js b/test/test.js
index 4bd217d..84181ae 100644
--- a/test/test.js
+++ b/test/test.js
@@ -11,11 +11,9 @@ describe('Rendering', function() {
var constellationInstance = window.constellation({
size:[window.innerWidth,window.innerHeight],
canvas: document.querySelector('canvas'),
- nodeSize: 2,
padding: [100,100],
starCount: 100,
lineCount: 400,
- fuzziness: 100,
style: {
starColor: '#fff',
lineColor: 'rgba(255,255,255,.5)',
@@ -28,6 +26,21 @@ describe('Rendering', function() {
done();
})
});
+ it('should make a canvas, then render a constellation', function(done) {
+ var constellationInstance = window.constellation({
+ size:[window.innerWidth,100],
+ padding: [100,100],
+ starCount: 10,
+ lineCount: 10,
+ style: {
+ starColor: '#f0f',
+ }
+ });
+ constellationInstance.then(function(){
+ done();
+ })
+ });
+
after(function(){
if (window.callPhantom) {
var date = new Date()