Merge pull request #1 from lawwrr/canvas

Switch over to canvas

.gitignore

@@ -7,3 +7,5 @@ test/screenshots/*
 !test/screenshots/.gitexists
 
 .DS_store
+
+npm-debug.log

README.md

@@ -1,16 +1,14 @@
 # constellation
-Draws cute moving svg constellations. 
+Draws cute moving canvas constellations.
 
 <p align="center">
   <img src="http://i.imgur.com/gLCMGoi.png">
 </p>
 
-🚨 this is kinda broken still no tests or anything i'm uploading it so i don't fall asleep 🚨
-
 ## Usage (es6/webpack)
 Grab the code from here or npm
 
-    npm install constellation-svg --save
+    npm install constellation-canvas --save
 
     #or#
 
@@ -19,48 +17,78 @@ Grab the code from here or npm
 
 Then just import it and feed it some parameters. It will create a random svg if it can't find any.
 
-    const Constellation = require('constellation-svg');
-         /*↖️ hehe it's a double const */
+    const Constellation = require('constellation-canvas');
+         /*↖️ hehe it's a double const*/
 
     let constellation = Constellation({
-      /*size of the canvas*/
       size:[500,800],
-      /*svg element to draw the constellation in, if omitted a new one will be made*/
-      element: document.querySelector('svg'),
-      /*size of the stars*/
-      nodeSize: 2,
-      /*space between stars and their lines*/
-      nodePadding: 0,
-      /*total number of stars*/
+      canvas: document.querySelector('canvas'),
       nodesTotal: 30,
-      /*total number of lines*/
       shipsTotal: 60,
-      /*how reactive to the mouse cursor stars are*/
-      fuzzyness: 50,
+      style: {
+        starSize: 4,
+        starPadding: 5
+        lineSize: 2
+      }
+
     });
-
-`Constellation` will return a promise, on completion it will let you access `$constellation` with the Snap element, `filter`, to create new snap filters and `repaint()` that will theme your constellation however you want
-
-    constellation.then((constellationThings)=>{
-      const filter = constellationThings.$constellation.filter(constellationThings.filter.shadow(0, 2, 5, '#000', .1));
-      constellationThings.repaint({
-        line: {
-          stroke: '#333',
-          strokeWidth: 2,
-          opacity: .75
-        },
-        star: {
-          fill: '#333',
-        },
-        lineGroup: {},
-        starGroup: {
-          filter: filter
+
+
+### Parameters
+
+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 |
+| **nodesTotal** | Total number of nodes |
+| **shipsTotal** | Total number of relationships between nodes |
+| **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 |
+
+
+### Advanced
+
+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({
+        size:[500,800],
+        canvas: document.querySelector('canvas'),
+        onDraw: {
+          afterStar: (ctx,node,style) => {
+            ctx.beginPath();
+            ctx.arc(
+              node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI
+            );
+            ctx.globalCompositeOperation = 'destination-over';
+            ctx.fillStyle = 'rgba(0,0,0,0)';
+            ctx.shadowColor = '#999';
+            ctx.shadowBlur = 20;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 15;
+            ctx.closePath();
+            ctx.fill();
+          }
         }
-      });
-    })
+    });
+
+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
+
+There are some extra advanced properties too
 
 
 ## Usage (legacy)
 Consider migrating your codebase
 
-Otherwise, grab the [latest release](https://github.com/thenextweb/indexdotco-js/releases) and drop it in as a scrpt tag. `window.constellation` will appear BUT you also need to grab a copy of [snapsvg](https://github.com/adobe-webplatform/Snap.svg/) and load it before
+Otherwise, grab the [latest release](https://github.com/thenextweb/indexdotco-js/releases) and drop it in as a script tag. `window.constellation` will appear.

gulpfile.js

@@ -11,18 +11,15 @@ var webpackModule = {
 		{
 			test: /\.css$/, loader: "raw"
 		},
-		{
-			test: require.resolve('snapsvg'),
-			loader: 'imports-loader?this=>window,fix=>module.exports=0'
-		},
 		{
 			test: /\.mustache$/, loader: "raw"
 		},
 		{
 			test: /.js?$/,
 			loader: 'babel-loader',
 			query: {
-				presets: ['es2015']
+				presets: ['es2015'],
+				plugins: ["transform-object-assign"]
 			}
 		}
 	]
@@ -57,6 +54,9 @@ gulp.task('default', function() {
 				libraryTarget: 'umd'
 			},
 			plugins: [
+				new webpack.webpack.ProvidePlugin({
+					Promise: 'es6-promise-promise'
+				}),
 				new WrapperPlugin({
 					header: '/* constellation – dev */',
 					footer: "if(window.constellation && typeof window.constellation === 'function'){window.constellation = window.constellation()}"
@@ -78,10 +78,10 @@ gulp.task('make', function() {
 				library: 'constellation',
 				libraryTarget: 'umd'
 			},
-			externals: {
-				'snapsvg' : 'Snap'
-			},
 			plugins: [
+				new webpack.webpack.ProvidePlugin({
+					Promise: 'es6-promise-promise'
+				}),
 				new WrapperPlugin({
 				  header: '/* constellation – https://github.com/lawwrr/constellation */',
 				  footer: "if(window.constellation && typeof window.constellation === 'function'){window.constellation = window.constellation()}"

package.json

@@ -1,7 +1,8 @@
 {
-  "name": "constelation-svg",
+  "name": "constelation-canvas",
   "version": "1.0.0",
-  "description": "draws cute moving svg constellations",
+  "description": "draws cute moving canvas constellations",
+
   "main": "src/app.js",
   "scripts": {
     "gulp": "./node_modules/.bin/gulp",
@@ -13,7 +14,7 @@
     "type": "git",
     "url": "https://github.com/lawwrr/constellation"
   },
-  "author": "Lau gonzalez",
+  "author": "Laura mayhem",
   "license": "GPL-3.0",
   "dependencies": {
     "babel-core": "^6.11.4",
@@ -26,15 +27,14 @@
     "gulp-github-release": "^1.2.0",
     "gulp-mocha-phantomjs": "^0.12.0",
     "gulp-uglify": "^1.5.4",
-    "imports-loader": "^0.7.0",
-    "json-loader": "^0.5.4",
     "mocha": "^2.5.3",
     "mocha-phantomjs": "^4.1.0",
-    "mustache": "^2.2.1",
     "raw-loader": "^0.5.1",
-    "snapsvg": "^0.5.1",
     "webpack": "^1.13.1",
     "webpack-stream": "^3.2.0",
     "wrapper-webpack-plugin": "0.1.11"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-object-assign": "^6.22.0"
   }
 }