cleanEdge
a pixel art upscaling algorithm for clean rotations
mode:
rotation
scaling
upload image
(or drop/paste a file below!)
example images
1
2
3
4
5
6
angle
scale
toggle
(cleanEdge)
slopes
highest color
line width
download rotated
cleanEdge is a pixel art upscaling algorithm designed for rotating sprites. Its goal is to improve the jumbled pixels and broken lines and edges that result from basic nearest neighbor rotation.
The way this works is by upscaling the art in a way that prioritizes those lines and edges.
While cleanEdge is designed primarily for sprite rotations, I've taken care to ensure the results when scaling also look nice. You can switch between these two results at the top.
Click and drag or scroll on the frame to rotate/scale the image, or enter the values manually.
Tips:
option descriptions:
This version of cleanEdge is in the form of a shader, you can find the source code here!
This web tool runs entirely in the browser, it does not send any information to a server. you can get the source code for this page here, you can run and use it locally!
All of this is MIT licensed, feel free to use it for any of your projects :) (credit is appreciated! but not required)
And if you do use it, I'd love to see it! Feel free to ping me on twitter or bluesky!
❤ - torcado
While cleanEdge is designed primarily for sprite rotations, I've taken care to ensure the results when scaling also look nice. You can switch between these two results at the top.
Click and drag or scroll on the frame to rotate/scale the image, or enter the values manually.
Tips:
- Hold Shift while scrolling to make fine adjustments.
- Hold Control while rotating to snap to 15 degree increments, or while scaling to snap to whole numbers.
- Use middle-click to pan the image in scaling mode.
- Ctrl+c and ctrl+v to copy and paste the image.
option descriptions:
- toggle: enables/disables the algorithm to compare results to basic nearest neighbor rotation/scaling.
-
highest color: the color used in overlap priority calculations. E.g. if highest color is pure white, brighter colors (those closer to white) will overlap darker colors when applicable.
If your art has outlines, matching this setting to that color usually provides better results. - line width: how far each pixel's color will spread into its neighbors, where applicable. A value of ≈ 0.707 will make slopes line up along the diagonal (effectively cancelling out the influence of highest color)
- slopes: in scale mode, toggles 2:1 grade slopes between pixels. If disabled, only 45 degree angles will be used. (this is always enabled in rotation mode)
This version of cleanEdge is in the form of a shader, you can find the source code here!
This web tool runs entirely in the browser, it does not send any information to a server. you can get the source code for this page here, you can run and use it locally!
All of this is MIT licensed, feel free to use it for any of your projects :) (credit is appreciated! but not required)
And if you do use it, I'd love to see it! Feel free to ping me on twitter or bluesky!
❤ - torcado