Dynamic Circuit

A dynamic background for your site!

Usage

Create a canvas element and style it like so:

Then, import the script and initialize it with your canvas:

To use as a background, set the canvas's style to look like this:

Options

init() takes an optional second parameter that can customize its behavior. Here are the default values:

Here are some more details on what each property does:

Setting this to a low number can save considerable processing power on webpages with lots of scrollable overflow

Property	Description
debugGrid	Display a visualization of the search algorithm and the underlying grid
gridBoxSize	The target size for each box in the grid (in pixels)
circleDiameter	The size of the start and end circles of each line (in pixels)
initialNumberOfLines	The number of lines to draw on when init is called
linesPerSecond	The number of lines to draw per second
maxAttempts	The number of times the path finding algorithm should attempt finding a valid path before failing
strokeWidth	The width of the lines (in pixels)
lengthPerSecond	The average speed the lines should travel at
backgroundColor	Specifies the background color the canvas will be on (used to allow the solid circles to fade in)
color	Sets the color the circuit will be drawn in
shrink	To get more detailed drawings, the canvas is created this many times larger than needed, and then shrunk down this many times Due to quirks with canvases, this is the only way to increase resolution
offscreenCalculationBoxes	Specifies how far off screen the search algorithm can travel to make a path (in grid boxes)
parent	Specifies the parent div the canvas is positioned relative to (defaults to the html element)