/Constellation-js

Minimal visual of interconnecting points done purely in JavaScript and HTML Canvas

Primary LanguageJavaScriptMIT LicenseMIT

stable 1.0.6

Constellation js

Original design and development by Victor Ivanov, with additional functionality and documentation by Michael Hemingway.

constellation demo

Constellation.js features a responsive canvas in html, with a set of dot objects that bounce around with constrollable spawn parameters, and once in proximity to one another, these dots are connected by lines.

LIVE DEMO.

Usage

Load constellation.min.js in your document and initialize constellation to your canvas.

Constellation.setup({
  canvas: document.getElementById('canvas'),
  lineDistance: 100,
  dotnum: 160,
  interactive: true,
	strokeColor: 'rgb(120,120,120)',
	dotColor: 'rgb(220,220,220)'
});
Constellation.start();

The canvas will be automatically sized to its parent size.

Changelog

Version 1.0.6

  • Corrected misleading documentation. Thanks @Ragekit!
  • Added colors! One can now pass dotColor and strokeColor as parameters in rgb. Documentation has been updated to reflect this change.
  • This version does not work on mobile.

Version 1.0.5

  • Made it into a neat little module! Now with 100% more options.

Version 1.0.3

  • Fixed and perfected the mouse hover effect, added in logic to walk the mouse around when not active.

Version 1.0.2

  • Added strict statement & encapsulated the entire code in dom listener event and closure.
  • Fixed fitToContainer(); method from earlier implementation which needlesly took a canvas argument.

Notes

Version 1.0.6

Last updated October 17th, 2016