Add paint bucket module #556
Conversation
|
I am not sure that is this the desired result, screenshot of the output:
Please have a look! |
|
Yes, I will do that! |
|
@tech4GT I have made the required changes. Please have a look! Screenshot : |
|
@Mridul97 maybe sliders for rgb values will be better? |
|
Yes, we can do that but I think many times users have exact rgb values of the color they want and may just want to copy it! |
|
@Mridul97 you are right on that one. I also have another suggestion can you add an optional alpha value? |
|
@harshkhandeparkar yes I will do that! Thanks! |
|
I have made the changes. Please have a look!
|
|
I have rebased the branch! Please have a look! |
|
Oh cool! But i'm not sure if the module is working properly - does it fill any polygon? Like this?
Maybe it just needs to be configured correctly? But this is very exciting -- thank you !!!! |
|
Oh! got it, I will fix this. Thanks! |
|
@jywarren How a user will specify a polygon using x, y coordinates of starting pixel to begin filling at and a color to fill with. I mean like in the above flower pic if a user enters starting pixel, how to decide when to stop filling? |
|
I believe this is known as the "threshold" -- the simplest form would just
fill only pixels that neighbor and have identical color, but a "threshold"
implementation (we could do in follow-up) would allow filling into similar
colors, as determined by the threshold (usually expressed as a percentage!)
…On Fri, Jan 4, 2019 at 12:42 PM Mridul97 ***@***.***> wrote:
@jywarren <https://github.com/jywarren> How a user will specify a polygon
using x, y coordinates of starting pixel to begin filling at and a color to
fill with. I mean like in the above flower pic if a user enters starting
pixel, how would we know when to stop filling?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#556 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJxZbrBpabZ97Mrvi58e7RB1oswVWks5u_5JTgaJpZM4ZhMXX>
.
|
|
Oh! got it. Thanks! |
|
@jywarren Please have a look! Original Image :- Output Image :- It is not filling it completely maybe we have to apply threshold that you talked about above! 😄 |
|
ah interesting! Can you try a crisper image maybe that has no anti-aliasing?
…On Tue, Jan 15, 2019 at 5:07 PM Mridul97 ***@***.***> wrote:
@jywarren <https://github.com/jywarren> Please have a look!
Original Image :-
[image: untitled]
<https://user-images.githubusercontent.com/21158457/51212927-c0cff900-193f-11e9-8de8-8a69edaf29dd.jpg>
Output Image :-
[image: ss_42]
<https://user-images.githubusercontent.com/21158457/51212950-d34a3280-193f-11e9-9792-e73cd628df8b.jpg>
It is not filling it completely maybe we have to apply threshold that you
talked about above! 😄
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#556 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ_cwLlZ1o0G-a7b-bCuwta8GaJHdks5vDlELgaJpZM4ZhMXX>
.
|
|
@jywarren It seems to work similarly on aliasing and anti-aliasing images. The left image is with aliasing and right one is with anti-aliasing. Please have a look!
|
|
Hm, that's a great demonstration, thanks! But it looks like it is not really filling all the way. I wonder why? Compare to my comment above: #556 (comment) |
package.json
Outdated
| @@ -29,6 +29,7 @@ | |||
| "data-uri-to-buffer": "^2.0.0", | |||
| "downloadjs": "^1.4.7", | |||
| "fisheyegl": "^0.1.2", | |||
| "flood-fill": "^0.1.1", | |||
There was a problem hiding this comment.
Hmm, interesting -- if we're including in the module here, why is the pretty complex code required below? Did the module not end up working for this?
There was a problem hiding this comment.
No, The module didn't work for this, it looks like the module works only for black and white images.
|
Maybe we can add tollerance instead of using if (pixels.get('same params', 0) > (r*(1 - tolerance/100)) && pixels.get('same params', 0) < (r*(1 + tolerance/100))){
}Tollerance can be a percentage we can set by experimentation? |
Nice! I think this is same as 'Threshold' that @jywarren talked about above, maybe we can start by keeping it 5%? |
|
I think testing it at 5% will be good. Also making a new function for testing that might be good. function isSimilarPixel(tolerance, other_params){
return bool;
} |
Yes, I was also thinking to do that! Thanks! |
|
After adding threshold of 5%, @jywarren Please have a look!
|
|
🎉🎉🎉🎉🎉🎉
Amazing. Is this ready to merge?
…On Fri, Jan 18, 2019, 12:59 PM Mridul97 ***@***.*** wrote:
After adding threshold of 5%, @jywarren <https://github.com/jywarren>
Please have a look!
[image: ss_46]
<https://user-images.githubusercontent.com/21158457/51404239-d7ad6000-1b78-11e9-9f4c-23612a630fa4.jpg>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#556 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ2LibAmSJ-q3HnhMPI2kdF7ZWqECks5vEgtzgaJpZM4ZhMXX>
.
|
|
@jywarren Yes, I will rebase the branch then It is ready to be merged! :) |
|
@Mridul97 this is amazing! But does this work with other images maybe with a bit more noise? |
I would love to test it, do you have any such image on which we can try this out? Thanks! |
|
I don't know if this is a good example
Can the module fill in one of those polygons? |
|
Also what will happen if there is a dot in between?
|
|
I got these results!
|
The second one looka awesome but what happened to the first? Its pretty messy. Maybe the tolerance has to be set dynamically? Maybe we can do that in a followup? |
|
Sounds good! any idea how will we set tolerance dynamically maybe take from the user? |
|
I don't really know but maybe we can somehow average the noise in lets say a rectangle around the starting pixel? |
|
Maybe get the sum of r,g,b,a values of each pixel in the rectangle and average it and subtract the sum of r,g,b,a value of starting pixel. This seems really overkill though 😅😅 |
|
Even I don't really know what would be right approach for this, lets think upon it on a follow-up PR! Thanks! |
|
@jywarren I have rebased the branch! :) |
|
Or maybe the fastest way would be to subtract the r,g,b,a values of starting pixel from r,g,b,a values of the pixel adjacent to it and get a percentage for each value(i.e. r,g,b,a) then average that percentage? This might give us inconsistent and inaccurate results though. |
But adjacent pixel could be same also, should we really keep the tolerance depending upon an adjacent pixel? Lets wait to hear @jywarren thoughts on this! :) |
Ya, thats why I said that it may be inconsistent. Lets hear it from @jywarren |
| function isSimilar(currx, curry){ | ||
| if (pixels.get(currx, curry, 0) > r*(1 - tolerance/100) && pixels.get(currx, curry, 0) < r*(1 + tolerance/100) && | ||
| pixels.get(currx, curry, 1) > g*(1 - tolerance/100) && pixels.get(currx, curry, 1) < g*(1 + tolerance/100) && | ||
| pixels.get(currx, curry, 2) > b*(1 - tolerance/100) && pixels.get(currx, curry, 2) < b*(1 + tolerance/100) && |
There was a problem hiding this comment.
Also maybe you can assign 1-tolerance/100 and 1+tolerance/100 to different vars?
There was a problem hiding this comment.
I have made the changes. Thanks!
|
Many graphics programs like Photoshop just have a default 5-15% tolerance,
but have it user-settable. I think we could expose one more user input and
use it as a parameter?
…On Fri, Jan 18, 2019 at 2:20 PM Mridul97 ***@***.***> wrote:
Or maybe the fastest way would be to subtract the r,g,b,a values of
starting pixel from r,g,b,a values of the pixel adjacent to it and get a
percentage for each value(i.e. r,g,b,a) then average that percentage? This
might give us inconsistent and inaccurate results though.
But adjacent pixel could be same also, should we really keep the tolerance
depending upon an adjacent pixel? Lets wait to hear what @jywarren
<https://github.com/jywarren> has to say on this!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#556 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ1jS44ZdqKIaAwM-UdhurSEuY19Wks5vEh5qgaJpZM4ZhMXX>
.
|
Mridul97
force-pushed
the
paint-bucket
branch
from
c920ef2
to
09a0b4c
Compare
|
@jywarren I have added tolerance as an user input, Please have a look!
|
|
This looks fantastic. I'd like to request two follow up issues be opened: one to make the threshold range from 0-100, and another to propose an input type called something like "pixel" which prompts the user to click on the image and returns an xy coordinate. What do you think? We could use a crosshairs icon on a button and have a label like "Paint bucket starting point: click to select a pixel" |
|
Great work on this! It might be an interesting one to write a "looks-like" test for too - a circle before and after filling could make a good comparison! |
|
@jywarren Sounds great! An improved UI will allow the user to use the module more efficiently as it is difficult for the user to enter the coordinates of the desired pixel! Sorry, actually didn't quite understand the "looks-like" test, could you please elaborate. Thanks! |
Fixes #541
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
rake test@publiclab/reviewersfor help, in a comment belowIf tests do fail, click on the red
Xto learn why by reading the logs.Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
Thanks!