constellation-canvas

Draws cute animated canvas constellations.

See it in action here!

Usage (webpack+babel)

Grab the code from here or npm

npm install constellation-canvas --save

#or#

git checkout [email protected]:thenextweb/constellation.git
npm install

Then just import it and feed it some parameters. There's a full list below.

import Constellation from 'constellation-canvas';

const ellation = new Constellation({
    size:[500,800],
    canvas: document.querySelector('canvas'),
    starCount: 30,
    lineCount: 60,
    style: {
        starSize: 4,
        starPadding: 5
        lineSize: 2
    }

});

Usage (browser)

Grab the latest release and drop it in as a script tag. window.constellation will appear

Parameters

All of them are optional but you might want to change some

| Name | Type | Description | | --- | --- | --- | | size | array [x,y] | Pixel size for the canvas | | padding | array [x,y] | Space between the canvas edges and the stars, it can be negative to make a full background | | canvas | DOM element | The canvas element to draw in. Will be created if it doesn't exist | | starCount | number | Total number of stars to draw | | lineCount | number | Total number of lines drawn between stars | | 🏃‍💨 | | | | speed | object | Speed options | | speed.active | number | Speed when the mouse is moving the stars | | speed.passive | number | Speed when the stars are jiggling by themselves | | 👩‍🎨 | | | | style | object | Style options | | style.starSize | number | Size of the stars | | style.starColor | string | Color of the stars | | style.starPadding | number | Space between stars and lines | | style.lineColor | string | Color of the lines | | style.lineSize | number | Size (line weight) of the lines |

Drawing things yourself

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,style,star) => {
            ctx.fillStyle = 'rgba(0,0,0,0)';
            ctx.beginPath();
                ctx.arc(
                    node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI
                );
                ctx.globalCompositeOperation = 'destination-over';
                ctx.shadowColor = '#999';
                ctx.shadowBlur = 20;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 15;
                ctx.fill();
            ctx.closePath();
            ctx.fillStyle = style.starColor;
        }
    }
});

You can see how these plug in at src/class/Canvas.js for yourself to better understand what's happening but here's a quick reference.

| Callback | Description | | --- | --- | | star(ctx,style,star) | overrides star drawing. star contains the coordinates for the star to be drawn | | afterStar(ctx,style,star) | takes place after the default star drawing. star contains the coordinates for the star that was drawn | | line(ctx,style,line) | overrides line drawing. line contains the coordinates for the line to be drawn | | afterLine(ctx,style,line) | takes place after the default line drawing. line contains the coordinates for the line that was drawn | | afterFrame(ctx,style,objects) | takes place after drawing a full frame. objects contains all coordinates for stars & lines |

For afterStar & afterLine you have to reset all fillStyles and whatnot or otherwise they'll carry over into the built-in drawing code. Good news is that for performance reasons you'll probably want to avoid afterStar & afterLine anyway and instead provide a full drawing solution or plug into afterFrame.

Advanced

There are some extra advanced properties too! fuzziness for controlling how reactive to the mouse stars are and scale, for drawing the canvas at a different resolution (it's @2x by default). Check out the code (i mean it's like 5? files total) to see how they work.

ALSO!! should you ever need it, Constellation will return a promise containing $constellation, the canvas DOM object after everything there has been done.

const constellation = Constellation({
    /*blah*/
});

constellation.then(function(data){
    console.log(data.$constellation);
})