From 3810a93fd146f37ef3445022d316f8a4e3758830 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Gonz=C3=A1lez?= Date: Thu, 9 Feb 2017 14:17:38 +0100 Subject: [PATCH 1/3] cleaner naming --- src/app.js | 172 ++++++++++++++++++++++--------------------- src/worker/puppis.js | 12 +-- 2 files changed, 94 insertions(+), 90 deletions(-) diff --git a/src/app.js b/src/app.js index ec530fa..0b32b1b 100644 --- a/src/app.js +++ b/src/app.js @@ -1,15 +1,23 @@ import Canvas from 'class/Canvas'; +import Puppis from 'worker-loader?inline!./worker/puppis.js'; + import text from 'lib/text'; -const Puppis = require("worker-loader?inline!./worker/puppis.js"); -const styleDefaults = { - starSize: 4, - starPadding: 5, - starColor: '#000', - lineColor: 'rgba(0,0,0,.5)', - lineSize: 2 -}; +const defaults = { + style: { + starSize: 4, + starPadding: 5, + starColor: '#000', + lineColor: 'rgba(0,0,0,.5)', + lineSize: 2 + }, + speed: { + active: .125, + passive: .075 + } +} + const constellation = function ({ size = [400,400], @@ -21,25 +29,16 @@ const constellation = function ({ padding = [0,0], scale = 2, style = {}, - speed = { - active: .125, - passive: .075 - }, + speed = {}, onDraw = {} } = {}) { - /*add to defaults*/ if(padding[0] === 0 && padding[1] === 0) padding = [fuzziness,fuzziness] - style = Object.assign({}, styleDefaults, style); - + style = Object.assign({}, defaults.style, style); + speed = Object.assign({}, defaults.speed, speed); - /*set up parameters*/ - let jiggles = true; - let lastMouse = [0,0]; - - /*send all the important bits to worker*/ const puppis = new Puppis(); text.send( puppis, @@ -55,74 +54,79 @@ const constellation = function ({ } ); - return new Promise((resolve,reject)=>{ - 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`; - canvas.style.height = `${size[1]}px`; - canvas.getContext('2d').scale(scale,scale); - - canvas.addEventListener('mousemove',(ev)=>{ - var x = ev.pageX - canvas.getBoundingClientRect().left + document.documentElement.scrollLeft; - var y = ev.pageY - canvas.getBoundingClientRect().top + document.documentElement.scrollTop; - jiggles = false; - lastMouse = [x,y]; - }); - canvas.addEventListener('mouseout',(ev)=>{ - jiggles = true; - }); - - const canvasDrawer = new Canvas(canvas,{ - style: style, - onDraw: onDraw - }); - - const repaint = () => { - text.send( - puppis, - 'requestUpdate', - { - lastMouse: lastMouse, - jiggles: jiggles - } - ) - } - - puppis.addEventListener('message', (msg)=>{ - text.is( - msg,'updateComplete', - (payload) => { - requestAnimationFrame(()=>{ - canvasDrawer.draw({ - stars: payload.stars, - lines: payload.lines - }); - repaint(); - }) - } - ) - }); - - repaint(); - - resolve({ - $constellation: canvas - }); - - }; + const onDOMReady = () => { + + let isJiggling = true; + let pointerPosition = [0,0]; + + if(!canvas) { + canvas = document.createElement('canvas'); + document.body.appendChild(canv); + } + + 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); + + canvas.addEventListener('mousemove',(ev)=>{ + var x = ev.pageX - canvas.getBoundingClientRect().left + document.documentElement.scrollLeft; + var y = ev.pageY - canvas.getBoundingClientRect().top + document.documentElement.scrollTop; + isJiggling = false; + pointerPosition = [x,y]; + }); + canvas.addEventListener('mouseout',(ev)=>{ + isJiggling = true; + }); + + const canvasDrawer = new Canvas(canvas,{ + style: style, + onDraw: onDraw + }); + + const repaint = () => { + text.send( + puppis, + 'requestUpdate', + { + pointerPosition: pointerPosition, + isJiggling: isJiggling + } + ) + } + + puppis.addEventListener('message', (msg)=>{ + text.is( + msg,'updateComplete', + (payload) => { + requestAnimationFrame(()=>{ + canvasDrawer.draw({ + stars: payload.stars, + lines: payload.lines + }); + repaint(); + }) + } + ) + }); + + repaint(); + + resolve({ + $constellation: canvas + }); + + }; + + + return new Promise((resolve,reject)=>{ if (/comp|inter|loaded/.test(document.readyState)){ - start(); + onDOMReady(); } else { - window.document.addEventListener('DOMContentLoaded',start); + window.document.addEventListener('DOMContentLoaded',onDOMReady); } }); diff --git a/src/worker/puppis.js b/src/worker/puppis.js index 5532ce8..de7dcd4 100644 --- a/src/worker/puppis.js +++ b/src/worker/puppis.js @@ -3,7 +3,7 @@ import text from 'lib/text'; let speed, starCount, lineCount, padding, size, style, fuzziness; let nodes, ships; -let jiggles,lastMouse; +let isJiggling,pointerPosition; let chunks = []; let connectedNodes = []; @@ -67,13 +67,13 @@ const makeCoordinateList = (...coords) => { const repositionNodes = () => { - let x = lastMouse[0]; - let y = lastMouse[1]; + let x = pointerPosition[0]; + let y = pointerPosition[1]; let localSpeed = speed.active; nodeRenderList.map((node)=>{ - if(jiggles) { + if(isJiggling) { localSpeed = speed.passive; x = node.original[0] + node._jiggle[0], y = node.original[1] + node._jiggle[1] @@ -222,8 +222,8 @@ self.onmessage = function(ev) { createThings(); break; case 'requestUpdate' : - jiggles = ev.data.payload.jiggles; - lastMouse = ev.data.payload.lastMouse; + isJiggling = ev.data.payload.isJiggling; + pointerPosition = ev.data.payload.pointerPosition; repositionNodes(); text.send( self, From 1e06797af63b1884d367cb7f335159ac106b5497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Gonz=C3=A1lez?= Date: Thu, 9 Feb 2017 14:17:54 +0100 Subject: [PATCH 2/3] up version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a20d118..8196ac2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "constelation-canvas", "description": "draws cute animated canvas constellations", - "version": "1.3.1", + "version": "1.3.2", "author": "Laura mayhem", "bugs": { "url": "https://github.com/lawwrr/constellation/issues", From aeb2602c24598ea1143637453f8fd01942879730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Gonz=C3=A1lez?= Date: Thu, 9 Feb 2017 14:29:17 +0100 Subject: [PATCH 3/3] fixed the promise callback --- src/app.js | 8 ++++---- test/test.js | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app.js b/src/app.js index 0b32b1b..5b7f1a5 100644 --- a/src/app.js +++ b/src/app.js @@ -55,14 +55,14 @@ const constellation = function ({ ); - const onDOMReady = () => { + const onDOMReady = (resolve,reject) => { let isJiggling = true; let pointerPosition = [0,0]; if(!canvas) { canvas = document.createElement('canvas'); - document.body.appendChild(canv); + document.body.appendChild(canvas); } canvas.setAttribute('width',size[0]*scale); @@ -124,9 +124,9 @@ const constellation = function ({ return new Promise((resolve,reject)=>{ if (/comp|inter|loaded/.test(document.readyState)){ - onDOMReady(); + onDOMReady(resolve,reject); } else { - window.document.addEventListener('DOMContentLoaded',onDOMReady); + window.document.addEventListener('DOMContentLoaded',()=>onDOMReady(resolve,reject)); } }); diff --git a/test/test.js b/test/test.js index 703f42b..54c1532 100644 --- a/test/test.js +++ b/test/test.js @@ -6,7 +6,8 @@ describe('Initialization', function() { }); describe('Rendering', function() { - this.timeout(10000); + this.timeout(1000); + it('should render a constellation', function(done) { var constellationInstance = window.constellation({ size:[window.innerWidth,window.innerHeight],