https://github.com/javierbyte/visual-center

Tool to better align logos in the center of a container.
https://github.com/javierbyte/visual-center

art design design-tool frontend javascript pixel tool visual-center

Last synced: 25 days ago
JSON representation

Tool to better align logos in the center of a container.

• Host: GitHub
• URL: https://github.com/javierbyte/visual-center
• Owner: javierbyte
• License: bsd-3-clause
• Created: 2016-05-12T06:51:39.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2024-03-01T02:04:40.000Z (8 months ago)
• Last Synced: 2024-10-01T17:04:09.193Z (about 1 month ago)
• Topics: art, design, design-tool, frontend, javascript, pixel, tool, visual-center
• Language: JavaScript
• Homepage: https://javier.xyz/visual-center
• Size: 8.28 MB
• Stars: 1,422
• Watchers: 25
• Forks: 47
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - visual-center

README

        
# [Visual Center](https://javier.xyz/visual-center/)

Tool that will find the visual center of your images / logos.

[![visual-center](public/javier-xyz-visual-center.jpg)](https://javier.xyz/visual-center/)

## How it works.

It calculates a visual weight value for every pixel on the image: the square

root of the difference between that pixel and the background color. And then the

algorithm tries to balance that weight in all directions.

Why the square root?

http://spectrum.ieee.org/podcast/biomedical/bionics/does-the-brain-work-logarithmically

## Programmatic Usage.

```

npm install visual-center --save

```

```js

const getVisualCenter = require('visual-center')

getVisualCenter(, function(err, result) {

  /*

    results in an object with the data as:

      {

        visualTop: 

        visualLeft: 

        bgColor: 

        width: 

        height: 

      }

  */

})

```

## License

BSD-3-Clause License