Skip to content

Latest commit

 

History

History
123 lines (88 loc) · 4.72 KB

README.md

File metadata and controls

123 lines (88 loc) · 4.72 KB
Raw

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);
})