Mixing
Simplifying Colors on Canvas
My end goal is to have two version of an image, the first is the basic default image, but the second should be a simplified version of the first, using only basic colors.
I would like to change all the ranges of red for example to (255, 0, 0). I have tried manually adding in ranges of red but just for that one color there were about 20 different statements. I would like to know how anyone would go around doing this. I have looked into color quantization and that seems pretty relevant and useful.
Here is an example of what I would like to do:
Any help would be appreciated.
javascript colors rgb
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
add a comment |
My end goal is to have two version of an image, the first is the basic default image, but the second should be a simplified version of the first, using only basic colors.
I would like to change all the ranges of red for example to (255, 0, 0). I have tried manually adding in ranges of red but just for that one color there were about 20 different statements. I would like to know how anyone would go around doing this. I have looked into color quantization and that seems pretty relevant and useful.
Here is an example of what I would like to do:
Any help would be appreciated.
javascript colors rgb
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
Look up colour quantisation.
– Amadan
Nov 21 '18 at 5:28
Show some attempts so that we may be able to help
– Ahmad
Nov 21 '18 at 5:31
add a comment |
My end goal is to have two version of an image, the first is the basic default image, but the second should be a simplified version of the first, using only basic colors.
I would like to change all the ranges of red for example to (255, 0, 0). I have tried manually adding in ranges of red but just for that one color there were about 20 different statements. I would like to know how anyone would go around doing this. I have looked into color quantization and that seems pretty relevant and useful.
Here is an example of what I would like to do:
Any help would be appreciated.
javascript colors rgb
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
My end goal is to have two version of an image, the first is the basic default image, but the second should be a simplified version of the first, using only basic colors.
I would like to change all the ranges of red for example to (255, 0, 0). I have tried manually adding in ranges of red but just for that one color there were about 20 different statements. I would like to know how anyone would go around doing this. I have looked into color quantization and that seems pretty relevant and useful.
Here is an example of what I would like to do:
Any help would be appreciated.
javascript colors rgb
javascript colors rgb
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
edited Nov 21 '18 at 15:53
Drew Snow
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
asked Nov 21 '18 at 5:27
Drew SnowDrew Snow
647
647
Look up colour quantisation.
– Amadan
Nov 21 '18 at 5:28
Show some attempts so that we may be able to help
– Ahmad
Nov 21 '18 at 5:31
add a comment |
Look up colour quantisation.
– Amadan
Nov 21 '18 at 5:28
Show some attempts so that we may be able to help
– Ahmad
Nov 21 '18 at 5:31
Look up colour quantisation.
– Amadan
Nov 21 '18 at 5:28
Look up colour quantisation.
– Amadan
Nov 21 '18 at 5:28
Show some attempts so that we may be able to help
– Ahmad
Nov 21 '18 at 5:31
Show some attempts so that we may be able to help
– Ahmad
Nov 21 '18 at 5:31
add a comment |
1 Answer
1
active
oldest
votes
I believe that I have found a suitable answer to my question.
I have solved my question by calculating the 'color distance' of each pixel. I then loop over my default colors and compared the distance for each of them. I then check which 'distance' is the lowest. The color that is the closest to my default color is the closest match.
The equation that I used to calculate the color distance was the following:
Math.sqrt( Math.pow((r1 - r2), 2) + Math.pow((g1 - g2), 2) + Math.pow((b1 - b2), 2));
- Thanks to Amadan for the tip about color quantization.
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405735%2fsimplifying-colors-on-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe that I have found a suitable answer to my question.
I have solved my question by calculating the 'color distance' of each pixel. I then loop over my default colors and compared the distance for each of them. I then check which 'distance' is the lowest. The color that is the closest to my default color is the closest match.
The equation that I used to calculate the color distance was the following:
Math.sqrt( Math.pow((r1 - r2), 2) + Math.pow((g1 - g2), 2) + Math.pow((b1 - b2), 2));
- Thanks to Amadan for the tip about color quantization.
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
add a comment |
I believe that I have found a suitable answer to my question.
I have solved my question by calculating the 'color distance' of each pixel. I then loop over my default colors and compared the distance for each of them. I then check which 'distance' is the lowest. The color that is the closest to my default color is the closest match.
The equation that I used to calculate the color distance was the following:
Math.sqrt( Math.pow((r1 - r2), 2) + Math.pow((g1 - g2), 2) + Math.pow((b1 - b2), 2));
- Thanks to Amadan for the tip about color quantization.
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
add a comment |
I believe that I have found a suitable answer to my question.
I have solved my question by calculating the 'color distance' of each pixel. I then loop over my default colors and compared the distance for each of them. I then check which 'distance' is the lowest. The color that is the closest to my default color is the closest match.
The equation that I used to calculate the color distance was the following:
Math.sqrt( Math.pow((r1 - r2), 2) + Math.pow((g1 - g2), 2) + Math.pow((b1 - b2), 2));
- Thanks to Amadan for the tip about color quantization.
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
I believe that I have found a suitable answer to my question.
I have solved my question by calculating the 'color distance' of each pixel. I then loop over my default colors and compared the distance for each of them. I then check which 'distance' is the lowest. The color that is the closest to my default color is the closest match.
The equation that I used to calculate the color distance was the following:
Math.sqrt( Math.pow((r1 - r2), 2) + Math.pow((g1 - g2), 2) + Math.pow((b1 - b2), 2));
- Thanks to Amadan for the tip about color quantization.
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
answered Nov 21 '18 at 17:14
Drew SnowDrew Snow
647
647
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405735%2fsimplifying-colors-on-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Look up colour quantisation.
– Amadan
Nov 21 '18 at 5:28
Show some attempts so that we may be able to help
– Ahmad
Nov 21 '18 at 5:31