Giter Club home page Giter Club logo

canvas-effects's Introduction

canvas-effects

A modular HTML Canvas library

DEMO (React)

npm version

Usage

import { Effect } from 'canvas-effects'

new Effect(HTMLCanvasElement, Config)

Config

These are the required properties.

width : number

height : number

Setting the width or height value to Infinity will fill the respective viewport.

const foo = new Effect(bar, {
	width: Infinity,
	height: 500
})

All config properties listed from this point on are optional.

Galileo

seed : number

Changes the amount of random points generated based on the size of the canvas. A smaller number will produce more points, resulting in lower performance.

Default: 5000

point : {Object}

color : [number, number, number, number]

RGBA value of point.

Default: [0, 0, 0, 1]

radius : number

Range tuple [max, min] of point radius.

Default: 2

velocity : number

Range tuple [max, min] of the velocity at which the vertices travel.

Default: 10

line : {Object}

color : [number, number, number, number]

RGBA value of line.

Default: [0, 0, 0, 1]

fade : boolean

If true, the lines will slowly disappear as they become larger.

Default: true

max : number

Length at which the lines disappear.

Default: 100

width : number

Sets the width of the line.

Default: 1

Delaunay

seed : number

Changes the amount of random points generated based on the sized of the canvas. A smaller number will produce more points, resulting in lower performance.

Default: 5000

color : [number, number, number, number]

ColorRGBA [r, g, b, a].

Default: [0, 0, 0, 1]

mouse : boolean

If true, the light source will move with the user's mouse.

Default: false

shade : number

A number from 0 to 1 representing the max shade value. If value is 1, then polygons will be completely black when hidden from the light source. If the value is 0, the light source will not affect the polygons at all.

Default: 0.5

stroke : {Object}

The stroke property is an object that allows the user to configure the strokes of the polygons. By default this property is not initialized and therefore the stroke is the same color as the polygon fill.

color : [number, number, number, number]

ColorRGBA [r, g, b, a] of the stroke.

Default: undefined

width : number

Sets the width of the stroke.

Default: undefined

Credits

Daniel Avila

License

MIT

canvas-effects's People

Contributors

micahco avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

unosonu mantou132

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.