Light

javierbyte / visual-center Goto Github PK

View Code? Open in Web Editor NEW

1.4K 26.0 47.0 8.47 MB

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

Home Page: https://javier.xyz/visual-center

License: BSD 3-Clause "New" or "Revised" License

HTML 19.00% JavaScript 68.20% CSS 8.46% TypeScript 4.34%

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

visual-center's Introduction

Visual Center

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

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

const getVisualCenter = require('visual-center')

getVisualCenter(<imgSrc>, function(err, result) {
  /*
    results in an object with the data as:
      {
        visualTop: <Visual center for Y axis, from 0 to 1>
        visualLeft: <Visual center for X axis, from 0 to 1>
        bgColor: <The background color that we detected>
        width: <The width of the image>
        height: <The height of the image>
      }
  */
})

License

BSD-3-Clause License

visual-center's People

Contributors

Stargazers

Watchers

visual-center's Issues

Sketch plugin would be dope ;)

This is an awesome tool, would be really useful as a sketch plugin.

Is the Medium article available?

This link https://medium.com/@lukejonesme/optical-adjustment-b55492a1165c is returning a 410 error code; it looks like this has been deleted. Besides looking in an internet archive, do you know if this article is currently hosted somewhere?

Please add license

There is no license declaration I can see which tells me what permission I have in using this source code. In many jurisdictions, it means I have no permission. Please add a license declaration to clear up any ambiguity about the permissions of users of your software.

Perhaps add this post for more background information

I remember readint his a while ago, I think it helps understand why the visual center makes sense: https://medium.com/@lukejonesme/optical-adjustment-b55492a1165c

Provide some fanfare if the image you provide is perfectly centered

Currently, if you're image is perfectly centered, it will display "The center is at 50% - 50%
You can visual center this image if you" and obviously provides no instructions of how much to adjust it.

So, the text should be replaced with "Congrats! Your image is perfectly centered!" It will make the user feel a bit more like a hero after they've repeatedly adjusted and uploaded an image to test :)

Is it a typo? logaritmic or logarithmic?

Please add a way to save the centered image

Transform is incorrect

https://github.com/javierbyte/visual-center/blob/gh-pages/src/App.js#L186

translatey(${(0.5 - resultTop) * 100}%)

Seems like your demos transform doesn't match the recommendation and should be:

translatey(${toPercent(resultTop * .50 - .25)}%)

Saving the centered image.

Would be awesome if one was able to save the re-centered image.

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.