ocgears / omnifilter Goto Github PK
View Code? Open in Web Editor NEWAn image processing library designed on the theory of parallel processing to apply filters to photos extremely quickly and efficiently.
License: MIT License
An image processing library designed on the theory of parallel processing to apply filters to photos extremely quickly and efficiently.
License: MIT License
From spring notes:
Worker.filter.sepia = function(pix){
console.log('Sepia enhancement');
for (var i = 0, n = pix.length; i < n; i += 4){
pix[i] = pix[i] * 1.07;
pix[i+1] = pix[i+1] * .74;
pix[i+2] = pix[i+2] * .43;
}
};
After the image is transformed, it would be good to have a place for it to go out in the internet.
This issue is to help design a way to modularize c++ code in Omnifilter. At present it is in the root directory, and called in a non-modular way in the server routes. There should be a directory for the c++, and perhaps a different one for the OpenCL kernels.
The present Omnifilter can only handle small images. This issue is to find the problem and fix it.
We should have a way to turn on a public page for a user to show the internet their transformed images.
Create a responsive design for Android, and design a set of manual tests to check for execution.
The present Omnifilter only understand jpg files, and this issue is to look into getting others enabled.
We should use aria tags to improve the UX of omnifilter for those that need assistance.
At the moment there are no posted guidelines on the front / landing page for what is needed. If there is an error, the error is not shown, which does not help. There should be a feedback section for the user.
This issue is to find where it makes the most sense to have the FB OAuth system hook in.
Omnifilter should reduce the buffer usage and number of format changes. The transformation is slowed by the number of times the whole pixel data has to be reformatted and put into a new buffer. This also uses a multiple of the needed memory, and has been the source of errors.
This issue will help organize ideas and approaches for this topic.
Write a transform function to make the image seem old-tyme-y. I have seen examples of this where the effect was most strong on the edges, and less in the center.
The file picker can be set to only allow for files of a certain type. This should be done as a first level of error checking.
The current background image is too large, and therefore too slow, for the Heroku deployment. I think that a smaller version can be loaded first as a placeholder, and then swapped for the high resolution one, once the download is complete. A fade in on css should make the transition less jarring. See http://omnifilter-client.herokuapp.com/ for my example.
From: https://processing.org/tutorials/pixels/ :
PImage img;
int w = 80;
// It's possible to perform a convolution
// the image with different matrices
float[][] matrix = { { -1, -1, -1 },
{ -1, 9, -1 },
{ -1, -1, -1 } };
void setup() {
size(200, 200);
frameRate(30);
img = loadImage("sunflower.jpg");
}
void draw() {
// We're only going to process a portion of the image
// so let's set the whole image as the background first
image(img,0,0);
// Where is the small rectangle we will process
int xstart = constrain(mouseX-w/2,0,img.width);
int ystart = constrain(mouseY-w/2,0,img.height);
int xend = constrain(mouseX+w/2,0,img.width);
int yend = constrain(mouseY+w/2,0,img.height);
int matrixsize = 3;
loadPixels();
// Begin our loop for every pixel
for (int x = xstart; x < xend; x++) {
for (int y = ystart; y < yend; y++ ) {
// Each pixel location (x,y) gets passed into a function called convolution()
// which returns a new color value to be displayed.
color c = convolution(x,y,matrix,matrixsize,img);
int loc = x + y*img.width;
pixels[loc] = c;
}
}
updatePixels();
stroke(0);
noFill();
rect(xstart,ystart,w,w);
}
color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img) {
float rtotal = 0.0;
float gtotal = 0.0;
float btotal = 0.0;
int offset = matrixsize / 2;
// Loop through convolution matrix
for (int i = 0; i < matrixsize; i++){
for (int j= 0; j < matrixsize; j++){
// What pixel are we testing
int xloc = x+i-offset;
int yloc = y+j-offset;
int loc = xloc + img.width*yloc;
// Make sure we have not walked off the edge of the pixel array
loc = constrain(loc,0,img.pixels.length-1);
// Calculate the convolution
// We sum all the neighboring pixels multiplied by the values in the convolution matrix.
rtotal += (red(img.pixels[loc]) * matrix[i][j]);
gtotal += (green(img.pixels[loc]) * matrix[i][j]);
btotal += (blue(img.pixels[loc]) * matrix[i][j]);
}
}
// Make sure RGB is within range
rtotal = constrain(rtotal,0,255);
gtotal = constrain(gtotal,0,255);
btotal = constrain(btotal,0,255);
// Return the resulting color
return color(rtotal,gtotal,btotal);
}
As Omnifilter is improved, the language to communicate to users should show that upgrade.
Write grayscale function. From the spring notes:
// grayscale
Worker.filter.grayscale = function(pix){
console.log('Grayscale enhancement');
for (var i = 0, n = pix.length; i < n; i += 4){
// calculated from NTSC
var grayscale = pix[i] * .29 + pix[i+1] * .58 + pix[i+2] * .11;
pix[i] = grayscale;
pix[i+1] = grayscale;
pix[i+2] = grayscale;
};
};
Set up responsive design for iOS platforms, and design a set of manual tests to check for execution.
Write a function to create sharp B&W image from the original.
This issue is to create a test for multiple users running at once. This is to provide more test coverage of a normal usage pattern. The test should have the ability to adjust the number of simultaneous users.
Having the most recent photo at top will help the user see the update.
Omnifilter should try Google Analytics to gain insight into use patterns and engagements.
Find logic for setting up OpenCL with optimized dimensions and choice for GPU / CPU. There are options for how to divide the work in OpenCL. I think there are ways to program sets of functions to target CPU for some tasks, and GPU for others.
This issue is to start getting a matrix of browsers and tests together to check behavior across platforms and browser types. Let's focus on modern / latest versions at this time, and especially and explicitly ignore IE6-7-8 (as those likely need a whole specific and special version).
Write a transform function to mirror the image.
There are options for the TravisCI system to run client side tests. This issue is to help track getting that set up.
The present tests are just for a single operation. This issue is for getting a test setup for a series of operations to check the ability of Omnifilter to keep running.
This issue is to investigate the image data type of OpenCL. I have read posts on stackoverflow that seem to indicate there is a data structure that is a 2d image type. That would seem to have advantages, and should be explored.
This is a catchall issue for putting together ideas for improving the user experience.
We discussed setting a limit on the number of photos stored. This issue is to find what the way to do that is, and to determine what the limit should be.
There are a number of tests that could be improved with additional factors being checked.
Create a responsive design for Kindle. I recall that there are unusual sized screen formats for Kindle. Also create a manual test plan for checking on a Kindle.
Get a way to pre-compile kernel code, to speed the running of the transformation. There are possible resources here:
https://www.fixstars.com/en/opencl/book/OpenCLProgrammingBook/online-offline-compilation/
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.