https://github.com/evelynhathaway/pixel-sort

🖼️📏 Web app to liven your photos with a glitch effect
https://github.com/evelynhathaway/pixel-sort

canvas glitch image-processing nextjs photos pixel-sorting progressive-web-app reactjs

Last synced: 12 months ago
JSON representation

🖼️📏 Web app to liven your photos with a glitch effect

• Host: GitHub
• URL: https://github.com/evelynhathaway/pixel-sort
• Owner: evelynhathaway
• License: mit
• Created: 2021-01-18T22:49:51.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-10-25T07:00:57.000Z (over 2 years ago)
• Last Synced: 2024-10-14T15:37:31.849Z (over 1 year ago)
• Topics: canvas, glitch, image-processing, nextjs, photos, pixel-sorting, progressive-web-app, reactjs
• Language: TypeScript
• Homepage: https://pixel-sort.evelyn.dev
• Size: 3.24 MB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          




# Pixel Sort

**Liven your photos with a glitch effect**

[![check status](https://badgen.net/github/checks/evelynhathaway/pixel-sort/main?icon=github)](https://github.com/evelynhathaway/pixel-sort/actions)

[![license: MIT](https://badgen.net/badge/license/MIT/blue)](/LICENSE)



## Description

Sort pixels in an image by certain the properties of each pixel to smear a nice glitch effect over your photos.

This pixel sorting project is an Next.js application with offscreen canvas support.

## Features

- Vertical and horizontal directions

- Sort by pixel properties

  - Hue

  - Saturation

  - Lightness

  - Red, Green, Blue, Alpha

  - RGB, RGBA Summation

- Offscreen canvas support

## Examples

![Seattle skyline at night with glitch effect](examples/sorted-seattle.jpg)

![Trees in a forest with glitch effect](examples/sorted-forest.png)

## Screenshots

| Light Mode                                                                           | Dark Mode                                                                          |

| ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |

| ![Screenshot of the homepage in light mode](.github/screenshot-home-light.png)       | ![Screenshot of the homepage in dark mode](.github/screenshot-home-dark.png)       |

| ![Photograph of a fox being sorted in light mode](.github/screenshot-sort-light.png) | ![Photograph of a fox being sorted in dark mode](.github/screenshot-sort-dark.png) |

## Usage

```bash

git clone git@github.com:evelynhathaway/pixel-sort.git

cd pixel-sort

npm clean-install

npm dev

```

## License

Copyright Evelyn Hathaway, [MIT License](/LICENSE)