Visual Center
Find the visual center of your images.
Original
Visual Center
Show guides
Use circle canvas
Rotation shadows
Click or drop your own image here
Calculating visual center...
Explanation
The original image has its bounding box centered in the container. This works for most images but when there is a heavy balance on one side the image can feel unbalanced. The visual center image has added padding so the weight of the pixels is distributed equally in both axis. This makes some images look more centered and rotate better.
How does it work?
This algorithm works by first assigning a color difference value to each pixel as the difference between its color and the detected background color. 0 is the same color, 1 is the most different color. The weight of each pixel is calculated as the square of the distance of this pixel to a given coordinate multiplied by its color difference value. The visual center is the coordinate where the total weight on each side of both axis is equal.
More experiments
- Brutalita, Grid based font editor and font. Create fonts in the browser and export OpenType files.
- Morphin, Create animated CSS transitions. Add sprites and get the code ready to paste in your site.
- Droste Creator, Create recursive images with the droste effect.
- Sombras.app, Create art with shadows. Draw shadows and get 3D objects that project them..
- Cohesive Colors, Tool that can help you to create cohesive color palettes.
Made by Javier Bórquez. Online since 2016.