evelynhathaway / pixel-sort Goto Github PK
View Code? Open in Web Editor NEW๐ผ๏ธ๐ Web app to liven your photos with a glitch effect
Home Page: https://pixel-sort.evelyn.dev
License: MIT License
๐ผ๏ธ๐ Web app to liven your photos with a glitch effect
Home Page: https://pixel-sort.evelyn.dev
License: MIT License
Need to add debouncing or cancellation of the previous sorting computation when a new value is selected
The performance for sorting is already a challenge, so a cached/memoized function is a must. The sorting should only update when its own layer has changed, or the layer before it (of course recursive up the layer list).
Instead of pushing pixels repeatedly, I wonder if this would be faster: only track an index for the duration of an interval, and then once it no longer matches, push a slice that represents the interval.
Currently each call to the sorting function triggers making intervals even if the thresholds has not changed since the last run
Along the direction, we can split the workload of sorting. As long as no intervals are split, sorting results can be combined at the end.
This can be done by, if sorting vertically, take a certain amount of vertical strips and send that to another worker. Or potentially, just send intervals if the intervals can performantly be made in one worker in less time than it takes to serialize the entire image data into pieces.
A full upload modal launched within the sort page could also work (original goal), but maybe simpler is better here
Maybe it would be cool to see images melt by slowly decreasing the threshold, or maybe see them sort themselves in a gentle rain effect.
There are a couple of webm frontend only solutions so switching together PNGs into an APNG isn't required.
https://github.com/Vanilagy/webm-muxer
https://github.com/thenickdude/webm-writer-js
Could be difficult since every image is different. Maybe we can determine the range of lightness from the image and add a threshold for a portion of this?
Sorting can already be selective with thresholds. However, this relies on the user being able to find similar values in the subject that should have the glitch effect applied to.
Outside of thresholds, the user would have to isolate the subject in a photo editing program, sort that, and composite it with the original in a photo editing program again. This is probably ideal for someone that is using this seriously, but right now this app is just for playing around with, which makes this limitation annoying.
This will require a raster editing brush and eraser, and some method of enabling this mode.
Using the hard alpha of the mask canvas, the opaque pixels from the masked can serve as a lookup table for making a copy of the image data once, and then the copy of the image data can be sorted from then on out. I don't want to forget to make sure that we only copy the image data once for each selection for performance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.