Constellation Sketcher

A small library that animates the drawing of constellations. Originally designed to be a nice thing to watch while waiting on a long-running task (i.e. more than just a spinner).

A React component is available: github, npm

Live demo

Static screenshot:

Description

Constellation Sketcher can render constellations either immediately or as an animation, drawing lines from star to star. Animated drawing starts at a randomly-selected star and draws lines to all connected stars, then to all stars connected to those stars, etc... Accurate background stars are included, and all stars flicker!

I learned while building this that there is simply no canonical source for what the constellations look like (that is, which stars to connect to which, and even which stars are included at all!). Constellation Sketcher uses the traditional Western constellations as provided in Stellarium. The exact positions and magnitudes of stars are drawn from the catalog produced by ESA's Hipparcos mission.

The minified library weighs in at about 110 kb, most of which is stellar data.

Installation

npm i constellation-sketcher

The installed library can be accessed via

const ConstellationSketcher = require('constellation-sketcher');

or

import * as ConstellationSketcher from 'constellation-sketcher';

Alternatively, you can include the JS bundle file directly in a script tag:

<script src="https://unpkg.com/constellation-sketcher@^1.0.0/dist/constellation_sketcher.bundle.js"></script>

Use

When started, Constellation Sketcher looks for a <canvas> element with id="constellation-sketcher", the size of which can be set through its width and height attributes. (Note that Constellation Sketcher works best with a 1:1 aspect ratio. Different aspect ratios will effectively crop the view on both sides of the constellation.) Constellation Sketcher supports drawing to only one canvas at a time.

Drawing can be started via either of two functions:

• ConstellationSketcher.sketch() will draw one constellation.

• ConstellationSketcher.slideshow() will draw constellations one after the other, with a short pause in between. The slideshow will start with the currently-configured constellation and select random constellations after.

All drawing, including lines and stellar twinkle, can be canceled via ConstellationSketcher.stop(). ConstellationSketcher's state can be reset with ConstellationSketcher.reset()---useful if the <canvas> element is removed and later replaced.

A list of valid constellation names can be accessed via ConstellationSketcher.constellationNames.

Selecting Constellations

Constellation Sketcher can display a specific constellation on demand, or it can display randomly-selected constellations. This is configured through the functions

• ConstellationSketcher.setConstellation(constellation): Sets the name of the constellation that will be drawn next.

• ConstellationSketcher.chooseRandomConstellation(): Randomly selects the next constellation to be drawn.

• ConstellationSketcher.getConstellation(): Returns the name of the currently shown constellation.

• ConstellationSketcher.getNextConstellation(): Returns the name of the next constellation to be shown, as set via setConstellation() or chooseRandomConstellation(), or null if no future constellation is configured. (During slideshows, future constellations are set automatically.)

When randomly choosing constellations, different weights can be assigned to each of four constellation categories, which have been chosen based on the judgment of this northern-hemisphere author. Category membership is listed at the bottom of this README. The categories are:

• Popular: well-known constellations. Default weight: 2

• Striking: constellations that generally are large, have a more complex shape, and/or include a high density of background stars within the view. Default weight: 2

• Small: very simple constellations, generally only one or two lines. Default weight: 0

• Medium: constellations that are neither small nor striking. Default weight: 1

The latter three categories are mutually-exclusive, but popular constellations are each included in one of the other three groups. A constellation's weight during selection is the largest of the weights assigned to the categories it is a member of. Weights can be set through the following functions, each of which accepts a numeric weight.

• ConstellationSketcher.setSelectionWeightPopular(weight)

• ConstellationSketcher.setSelectionWeightStriking(weight)

• ConstellationSketcher.setSelectionWeightMedium(weight)

• ConstellationSketcher.setSelectionWeightSmall(weight)

• ConstellationSketcher.setSelectionWeightsAll(weight): Assigns the given weight to all categories.

Additionally, arrays of the constellations included in each category are accessible via ConstellationSketcher.categories, e.g. ConstellationSketcher.categories.popular.

Configuration

Constellation Sketcher can be configured through a set of functions. Each configuration function returns ConstellationSketcher so that calls can be chained (e.g. ConstellationSketcher.setSelectionWeightsAll(1).chooseRandomConstellation().setAnimated(false).sketch()). Configuration values are only guaranteed to affect future calls to sketch() or slideshow() and may but are not guaranteed to affect any animations currently in progress.

• ConstellationSketcher.setAnimated(animated): Accepts a boolean. If true, constellations are drawn as an animation. If false, they are drawn immediately upon the start of drawing. The default is true.

• ConstellationSketcher.setDrawLines(drawLines): Accepts a boolean. If false, lines are not drawn, only stars. The default is true.

• ConstellationSketcher.setTwinkle(twinkle): Accepts a boolean. If true, stars twinkle. The default is true.

• ConstellationSketcher.setTwinkleAmplitude(twinkleAmplitude): Accepts a number which multiplies the amount stars change in magnitude when flickering. The default is 1.

• ConstellationSketcher.setTwinkleTimescale(twinkleTimescale): Accepts a number of milliseconds. This is the time between updates to the twinkle-based changes in stellar magnitude. The default is 70.

• ConstellationSketcher.setSizeScale(sizeScale): Accepts a number which multiplies the widths of the stars that are drawn. The default is 1.

• ConstellationSketcher.setSpeedScale(speedScale): Accepts a number which multiplies the speed at which lines grow during animation. The default is 1.

• ConstellationSketcher.setSlideshowDwellTime(dwellTime): Accepts a number of milliseconds. This is the length of the pause during slideshows between the end of drawing one constellation and the beginning of drawing the next. The default is 4000.

• setCrossFade(doCrossFade, crossFadeTime): Accepts up to two arguments. The first is a boolean setting whether or not Constellation Sketcher will fade between constellations. The second, if provided, sets the duration of the fade in milliseconds. The default values are true and 750.

• setFadeIn(doFadeIn, fadeInTime): Accepts up to two arguments. The first is a boolean setting whether or not Constellation Sketcher will fade in from transparency before drawing its first constellation. The second, if provided, sets the duration of the fade in milliseconds. The default values are false and 750.

• ConstellationSketcher.setDrawBeginCallback(drawBeginCallback): Accepts a function which is called at the beginning of drawing a constellation. The callback function is provided as arguments a CanvasRenderingContext2D for drawing to the canvas and the name of the current constellation.

• ConstellationSketcher.setDrawFrameCompleteCallback(drawFrameCompleteCallback): Accepts a function which is called at the end of drawing each frame. The callback function is provided as arguments a CanvasRenderingContext2D for drawing to the canvas, a boolean indicating whether the whole canvas was cleared and redrawn this frame, and the name of the current constellation.

• ConstellationSketcher.setDrawCompleteCallback(drawCompleteCallback): Accepts a function which is called at the end of drawing a constellation. The callback function is provided as arguments a CanvasRenderingContext2D for drawing to the canvas and the name of the current constellation.

Constellation Categories

These categories are described in the "Selecting Constellations" section above.

Popular				(19 total)
Andromeda	Aquarius	Aquila	Cancer	Canis Major
Capricornus	Cassiopeia	Centaurus	Cygnus	Draco
Gemini	Hydra	Orion	Pegasus	Sagittarius
Scorpius	Taurus	Ursa Major	Ursa Minor

Striking				(22 total)
Aquarius	Canis Major	Carina	Centaurus	Cetus
Cygnus	Draco	Eridanus	Hercules	Hydra
Lupus	Monoceros	Orion	Pegasus	Phoenix
Pisces	Sagittarius	Scorpius	Serpens	Taurus
Ursa Major	Virgo

Medium				(39 total)
Andromeda	Aquila	Ara	Aries	Auriga
Bootes	Camelopardalis	Cancer	Capricornus	Cassiopeia
Cepheus	Columba	Corona Australis	Corona Borealis	Corvus
Crater	Crux	Delphinus	Dorado	Gemini
Grus	Hydrus	Lacerta	Leo	Leo Minor
Lepus	Libra	Lynx	Lyra	Ophiuchus
Pavo	Perseus	Piscis Austrinus	Puppis	Sculptor
Scutum	Ursa Minor	Vela	Volans

Small				(27 total)
Antlia	Apus	Caelum	Canes Venatici	Canis Minor
Chamaeleon	Circinus	Coma Berenices	Equuleus	Fornax
Horologium	Indus	Mensa	Microscopium	Musca
Norma	Octans	Pictor	Pyxis	Reticulum
Sagitta	Sextans	Telescopium	Triangulum	Triangulum Australe
Tucana	Vulpecula