Merge pull request #9 from lawwrr/extend-onDraw-api

Extend onDraw API

README.md

@@ -7,7 +7,8 @@ Draws cute animated canvas constellations.
   <img src="http://i.imgur.com/gLCMGoi.png">
 </p>
 
-## 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 |
+| <br><br>🏃‍💨 |  |  |
+| **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 |
+| <br><br>👩‍🎨 |  |  |
+| **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.

package.json

@@ -1,40 +1,51 @@
 {
   "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": "[email protected]"
+  },
   "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",
     "worker-loader": "^0.7.1",
     "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"
   }
 }

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();

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,49 +32,49 @@ 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();
 				ctx.closePath();
 			}
 		}
 
+		/*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);
 
 	}
 

src/worker/puppis.js

@@ -229,7 +229,7 @@ self.onmessage = function(ev) {
 				self,
 				'updateComplete',
 				{
-					nodes: nodeRenderList,
+					stars: nodeRenderList,
 					lines: shipRenderList
 				}
 			)

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()