wow shit it worked

thenextweb · Feb 8, 2017 · f229484 · f229484
1 parent c43939d
commit f229484
Show file tree

Hide file tree

Showing 8 changed files with 288 additions and 224 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,11 +1,11 @@
 node_modules/*
 
+npm-debug.log
+
 dist/*
 !dist/.gitexists
 
 test/screenshots/*
 !test/screenshots/.gitexists
 
 .DS_store
-
-npm-debug.log
diff --git a/docs/index.html b/docs/index.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
 		<title>Constellation</title>
 		<link rel="stylesheet" href="css.css" />
-		<script src="https://github.com/lawwrr/constellation/releases/download/v1.0.0/constellation.min.js"></script>
+		<script src="https://github.com/lawwrr/constellation/releases/download/v1.1.0/constellation.min.js"></script>
 	</head>
 	<body>
 		<div class="ct">
@@ -22,7 +22,7 @@ <h1>Constellation</h1>
 				padding: [-100,-100],
 				nodesTotal: 100,
 				shipsTotal: 400,
-				fuzzyness: 100,
+				fuzziness: 100,
 				style: {
 					starColor: '#fff',
 					lineColor: 'rgba(255,255,255,.5)',

diff --git a/gulpfile.js b/gulpfile.js
@@ -58,8 +58,7 @@ gulp.task('default', function() {
 					Promise: 'es6-promise-promise'
 				}),
 				new WrapperPlugin({
-					header: '/* constellation – dev */',
-					footer: "if(window.constellation && typeof window.constellation === 'function'){window.constellation = window.constellation()}"
+					header: '/* ✨ constellation ✨ – dev – https://github.com/lawwrr/constellation  */'
 				})
 			],
 			module: webpackModule,
@@ -83,8 +82,7 @@ gulp.task('make', function() {
 					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()}"
+				  header: '/* ✨ constellation ✨ – https://github.com/lawwrr/constellation */'
 				})
 			],
 			module: webpackModule,

diff --git a/package.json b/package.json
@@ -1,8 +1,7 @@
 {
   "name": "constelation-canvas",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "draws cute moving canvas constellations",
-
   "main": "src/app.js",
   "scripts": {
     "gulp": "./node_modules/.bin/gulp",
@@ -32,6 +31,7 @@
     "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": {

diff --git a/src/app.js b/src/app.js
@@ -1,10 +1,12 @@
+const Puppis = require("worker-loader?inline!./puppis.js");
+
 const constellation = function ({
 	size = [400,400],
 	element = undefined,
 	canvas = undefined,
 	nodesTotal = 30,
 	shipsTotal = 70,
-	fuzzyness = 100,
+	fuzziness = 100,
 	padding = [0,0],
 	scale = 2,
 	style = {},
@@ -15,8 +17,10 @@ const constellation = function ({
 	onDraw = {}
 } = {}) {
 
+	const puppis = new Puppis();
+
 	if(padding[0] === 0 && padding[1] === 0) {
-		padding = [fuzzyness,fuzzyness]
+		padding = [fuzziness,fuzziness]
 	}
 
 	const styleDefaults = {
@@ -29,25 +33,26 @@ const constellation = function ({
 
 	style = Object.assign({}, styleDefaults, style);
 
-	let chunks = [];
-	let connectedNodes = [];
-	let renderSize = size;
-	let shipOrderedList = {
-		start: {},
-		end: {}
-	};
-	let nodeOrderedList = {};
-
-	let nodeRenderList = [];
-	let shipRenderList = [];
-
 	let jiggles = true;
 	let lastMouse = [0,0];
 
+	puppis.postMessage({
+		body: 'sendParameters',
+		payload: {
+			speed: speed,
+			nodesTotal: nodesTotal,
+			shipsTotal: shipsTotal,
+			padding: padding,
+			size: size,
+			style: style,
+			fuzziness: fuzziness
+		}
+	});
+
 	const drawCanvas = (canvas,objects) => {
 
 		const ctx = canvas.getContext('2d');
-		ctx.clearRect(0, 0, renderSize[0],renderSize[1]);
+		ctx.clearRect(0, 0, size[0],size[1]);
 
 		/*lines*/
 		objects.lines.map((line)=>{
@@ -104,115 +109,14 @@ const constellation = function ({
 
 	}
 
-	const random = (arr) => {
-		return arr[Math.floor(Math.random() * arr.length)];
-	}
-
-	const makeNode = (tries=500) => {
-		let makeDimension = (coord) => {
-			let localrenderSize = (coord==='x')?renderSize[0]:renderSize[1];
-			let localPadding = (coord==='x')?padding[0]:padding[1];
-			return Math.ceil(
-				Math.random()*(localrenderSize - localPadding*2) + localPadding
-			);
-		}
-		let node = [makeDimension('x'),makeDimension('y')];
-		let chunk = JSON.stringify([
-			Math.ceil(node[0]/renderSize[0]*(renderSize[0]/style.starSize/10)),
-			Math.ceil(node[1]/renderSize[1]*(renderSize[1]/style.starSize/10))
-		]);
-		if(tries > 0 && chunks.indexOf(chunk) >= 0) {
-			return makeNode(tries-1);
-		}
-		else {
-			chunks.push(chunk);
-			return node;
-		}
-	}
-
-	const makeShip = (faves,force=false) => {
-		let start,end;
-
-		start = random(nodes);
-		end = start.closest[random([0,1,2,3,4,5,6,7,8])];
-
-		if(!force && connectedNodes.indexOf(start) > 0) {
-			return makeShip(faves);
-		}
-		if(!force && connectedNodes.indexOf(end) > 0) {
-			return makeShip(faves);
-		}
-
-		connectedNodes.push(JSON.stringify(start.pos));
-		connectedNodes.push(JSON.stringify(end.pos));
-
-		return start.pos.concat(end.pos);
-	};
-
-	const makeCoordinateList = (...coords) => {
-		return {
-			pos: [...coords],
-			original: [...coords]
-		};
-	}
-
-	let nodes = (() => {
-		let nodes = [];
-		for(let i = 0;i < nodesTotal;i++) {
-			nodes.push({
-				pos: makeNode()
-			});
-		}
-		nodes.map((node)=>{
-			let distances = [];
-			nodes.map((subnode)=>{
-				let localDistance =
-					Math.sqrt(
-						Math.pow(node.pos[0]-subnode.pos[0],2)
-						+
-						Math.pow(node.pos[1]-subnode.pos[1],2)
-					);
-				if(localDistance < 0) localDistance = localDistance*-1;
-				if(localDistance !== 0)  {
-					distances.push({
-						distance: localDistance,
-						node: {
-							pos: [
-								subnode.pos[0],subnode.pos[1]
-							]
-						}
-					});
-				}
-			})
-			distances.sort((a,b)=>{
-				return a.distance - b.distance
-			});
-			let closest = [];
-			distances.map((distance)=>{
-				closest.push(distance.node);
-			})
-			node.closest = closest;
-		});
-		return nodes;
-	})()
-
-	let ships = (() => {
-		let ships = [];
-		let faves = [0,1,2];
-		for(let i = 0;i < shipsTotal;i++) {
-			ships.push(makeShip(faves));
-		}
-		return ships;
-	})();
-
 	return new Promise((resolve,reject)=>{
 		let start = () => {
 
 			if(canvas) {
-				canvas.setAttribute('width',renderSize[0]*scale);
-				canvas.setAttribute('height',renderSize[1]*scale);
-				canvas.style.width = `${renderSize[0]}px`;
-				canvas.style.height = `${renderSize[1]}px`;
+				canvas.setAttribute('width',size[0]*scale);
+				canvas.setAttribute('height',size[1]*scale);
+				canvas.style.width = `${size[0]}px`;
+				canvas.style.height = `${size[1]}px`;
 				canvas.getContext('2d').scale(scale,scale);
 			} else {
 				throw 'Please specify a target canvas';
@@ -228,99 +132,24 @@ const constellation = function ({
 				jiggles = true;
 			});
 
-			nodes.map((originalNode)=>{
-
-				let node = makeCoordinateList(...originalNode.pos);
-				let posAsString = JSON.stringify([node.pos[0],node.pos[1]]);
-
-				nodeRenderList.push(node);
-
-				node._previousTransform = [0,0];
-				node._jiggle = [Math.random()*20 - 10,Math.random()*20 - 10];
-				setInterval(()=>{
-					node._jiggle = [Math.random()*20 - 10,Math.random()*20 - 10];
-				},5000);
-
-				const calculate = (callback) =>{
-
-					let x = lastMouse[0];
-					let y = lastMouse[1];
-					let localSpeed = speed.active;
-
-					if(jiggles) {
-						localSpeed = speed.passive;
-						x = node.original[0] + node._jiggle[0],
-						y = node.original[1] + node._jiggle[1]
-					}
-
-					if(
-						(x > node.original[0] - fuzzyness*1.1 && x < node.original[0] + fuzzyness*1.1)
-						&&
-						(y > node.original[1] - fuzzyness*1.1 && y < node.original[1] + fuzzyness*1.1)
-					)
-					{
-						let fromCenter = [
-							node.original[0]-x,
-							node.original[1]-y
-						];
-
-						let displacement = [];
-
-						if(fromCenter[0] > 0) {
-							displacement[0] = node._previousTransform[0] + localSpeed - (node._previousTransform[0]/fuzzyness)*localSpeed
-						}
-						else {
-							displacement[0] = node._previousTransform[0] - localSpeed + (node._previousTransform[0]*-1/fuzzyness)*localSpeed
-						}
-						if(fromCenter[1] > 0) {
-							displacement[1]= node._previousTransform[1] + localSpeed - (node._previousTransform[1]/fuzzyness)*localSpeed
-						}
-						else {
-							displacement[1] = node._previousTransform[1] - localSpeed + (node._previousTransform[1]*-1/fuzzyness)*localSpeed
-						}
-
-						node._previousTransform = displacement;
-
-						node.pos[0] = node.original[0] + node._previousTransform[0];
-						node.pos[1] = node.original[1] + node._previousTransform[1];
-
-						if(shipOrderedList.end[posAsString]) {
-							for (var i = 0, len = shipOrderedList.end[posAsString].length; i < len; i++) {
-								let line = shipOrderedList.end[posAsString][i];
-								line.pos[2] = line.original[2]+node._previousTransform[0];
-								line.pos[3] = line.original[3]+node._previousTransform[1];
-							}
-						}
-						if(shipOrderedList.start[posAsString]) {
-							for (var i = 0, len = shipOrderedList.start[posAsString].length; i < len; i++) {
-								let line = shipOrderedList.start[posAsString][i];
-								line.pos[0] = line.original[0]+node._previousTransform[0];
-								line.pos[1] = line.original[1]+node._previousTransform[1];
-							}
-						}
-					}
-
-					requestAnimationFrame(calculate)
-				};
-				calculate()
-				nodeOrderedList[posAsString] = node;
-			})
-
-			ships.map((ship)=>{
-				let startPos = JSON.stringify([ship[0],ship[1]]);
-				let endPos = JSON.stringify([ship[2],ship[3]]);
-				let line = new makeCoordinateList(...ship);
-				if(!shipOrderedList.start[startPos]) shipOrderedList.start[startPos] = [];
-				if(!shipOrderedList.end[endPos]) shipOrderedList.end[endPos] = [];
-				shipOrderedList.start[startPos].push(line);
-				shipOrderedList.end[endPos].push(line);
-				shipRenderList.push(line);
+			puppis.addEventListener('message', (msg)=>{
+				if(msg.data.body === 'updateComplete') {
+					requestAnimationFrame(()=>{
+						drawCanvas(canvas,{
+							nodes: msg.data.payload.nodes,
+							lines: msg.data.payload.lines
+						});
+					})
+				}
 			});
 
 			const repaint = () => {
-				drawCanvas(canvas,{
-					nodes: nodeRenderList,
-					lines: shipRenderList
+				puppis.postMessage({
+					body: 'requestUpdate',
+					payload: {
+						lastMouse: lastMouse,
+						jiggles: jiggles
+					}
 				});
 				requestAnimationFrame(repaint)
 			}
@@ -340,6 +169,4 @@ const constellation = function ({
 
 };
 
-module.exports = () => {
-	return constellation;
-};
+module.exports = constellation;
diff --git a/src/lib/random.js b/src/lib/random.js
@@ -0,0 +1,3 @@
+export default (arr) => {
+	return arr[Math.floor(Math.random() * arr.length)];
+}