Canvas Dots

Particular based on canvas and HTML 5

Moleculas

Random moves of particles, count of dots and connection distance selected by smart algorithm depend from count of dots and square of block.
Working on most browser (include mobile devices) without braking.
Particles leave from mouse cursor.
You can load magnet dots array, and particles will leave from it.
In this example magnet dots set behind the text canvas.loadMagnetDots(array);, seems nice, are you agree?

Shapes

Available now!
You can load array of dots to class, and choose what need to build
You have callback function, when shape created you can call function to build next shape
You also can "destroy" the shape by mouse. Try it!

Bubbles

Motion like bubbles in soda water :)
You can select way to move particles: random, up, down, left, right.
Diameter of point depend from connections

Snow

Motion like snow :)
You can select color, and choose if need fill dots or not

Particles

You can choose the character of reflect, by physics law, or random

Lines

Make circle invisible with setDotsColor([0,0,0,0]).
Great effect

Available options

options.speed = 1; int value; 0:inf.

The boundaries of speed correction on reflection

options.sizeMultiplier = 0.5;float value; 0:inf.

Size multiplier (if sizeDependConnections is true)

options.showDirectionVectorboolean value

options.showConnections = true;boolean value

options.sizeDependConnections = true;boolean value

options.magnetPowerDelimiter = 10;int value; 0:inf.

“Magnet power” of cursor (if mouseReaction is true)

options.mouseReaction = true;boolean value

options.randomBounceSides = true;boolean value

Turn true if need random reflection, false - to reflect by physics law

options.fillCircles = true;boolean value

options.moveDirection = 'random';string value (up, down, left, right, random)

options.dotsColor = [255,255,255,1];array value

RGBA color of dots

options.linesColor = [255,255,255];array value

RGB color of lines

Available functions

setSpeed​(speed)

setSizeDependConnections​(sizeDependConnections)

setSizeMultiplier​(sizeMultiplier)

setShowDirectionVector​(showDirectionVector)

setShowConnections​(showConnections)

setMouseReaction​(mouseReaction)

setRandomBounceSides​(randomBounceSides)

setMoveDirection​(moveDirection)

setFillCircles​(fillCircles)

setDotsColor​(dotsColor)

setLinesColor​(linesColor)

loadMagnetDots​(dots)

dots = [{x:0,y:0},{x:100,y:100},...]

stopAnimation​()

Stop move

startAnimation​()

Start move (started automatically when initialized)

loadSpecificArray​(id, array)

Load arrays to memory. Id need to build shape

setSpecificArray​(id, callback)

Build shape from loaded, call callback function when shape built

destroytSpecificArrays​()

Destroy shape. (Particles continue move)

setSpecificArrayOffsetX​()

Set offset of shape from left side of block

setSpecificArrayOffsetY​()

Set offset of shape from top side of block

Example:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Cavnas Dots connections</title>
    </head>
    <body>
        <div class="canvas-block" style="height:100px;">
            <canvas id="myCanvas" style="position: absolute;"></canvas>
        </div>
        <script src="jquery.js"></script>
        <script src="script.js"></script>
        <script src="canvasdots.js"></script>
    </body>
</html>
        

script.js

var canvas;
$(document).ready(function(){
    canvas = $('#myCanvas').canvaDots({
        sizeDependConnections: false,
        randomBounceSides: false,
        dotsColor:[0,0,0,1],
        linesColor:[0,0,0]
    });

    // ==== EXAMPLE CALL METHODS ====
    canvas.stopAnimation(); //Stop animation
    canvas.startAnimation(); //Start animation
});
        

Code of second canvas:

Array of letter "C"

Array of letter "D"

Array of "Like"

How to load array to my canvas?

How to get array of dots?

You can buy this item here
© All rights reserved 2016