1. Rodrigo di Lorenzo Lopes
  2. Image Analyzer

Commits

Rodrigo Lorenzo  committed 643a3be

exemplo de cluster de imagens

  • Participants
  • Parent commits 5e044b6
  • Branches master

Comments (0)

Files changed (3)

File example.html

View file
 <body>
   
 <div id="initial_image">
-  <h3>64 colors reduction (Image Magick)</h3>
+  <h3>Original vs 32 colors (Image Magick)</h3>
     <img src="eyes.jpg" style="height: 300px;"/>  
     <img src="eyes.gif" style="height: 300px; float: left"/>
 </div>
 
 <div id="64 colors histogram" style="clear:both">
-  <h3>Color histogram</h3>
-  <div class="color_block" style="background:#c3cfb1; width:212px; "></div>
-  <div class="color_block" style="background:#d3ddc2; width:161px; "></div>
-  <div class="color_block" style="background:#f0f1e9; width:99px; "></div>
-  <div class="color_block" style="background:#d9dcc1; width:96px; "></div>
-  <div class="color_block" style="background:#aec3a1; width:91px; "></div>
-  <div class="color_block" style="background:#e9ebd9; width:88px; "></div>
-  <div class="color_block" style="background:#b2bb92; width:81px; "></div>
-  <div class="color_block" style="background:#e4e4be; width:69px; "></div>
-  <div class="color_block" style="background:#e5ead7; width:64px; "></div>
-  <div class="color_block" style="background:#c7cba3; width:57px; "></div>
-  <div class="color_block" style="background:#224535; width:54px; "></div>
-  <div class="color_block" style="background:#2e3e2f; width:52px; "></div>
-  <div class="color_block" style="background:#315440; width:52px; "></div>
-  <div class="color_block" style="background:#bfdec5; width:50px; "></div>
-  <div class="color_block" style="background:#3e4e39; width:45px; "></div>
-  <div class="color_block" style="background:#40654a; width:45px; "></div>
-  <div class="color_block" style="background:#4f7757; width:40px; "></div>
-  <div class="color_block" style="background:#5e8864; width:37px; "></div>
-  <div class="color_block" style="background:#92936b; width:33px; "></div>
-  <div class="color_block" style="background:#353229; width:32px; "></div>
-  <div class="color_block" style="background:#757351; width:30px; "></div>
-  <div class="color_block" style="background:#d5d3d7; width:29px; "></div>
-  <div class="color_block" style="background:#a1b083; width:29px; "></div>
-  <div class="color_block" style="background:#8fb694; width:29px; "></div>
-  <div class="color_block" style="background:#54503d; width:28px; "></div>
-  <div class="color_block" style="background:#4a6735; width:28px; "></div>
-  <div class="color_block" style="background:#6f9972; width:27px; "></div>
-  <div class="color_block" style="background:#7fa882; width:27px; "></div>
-  <div class="color_block" style="background:#edf3e7; width:26px; "></div>
-  <div class="color_block" style="background:#16362c; width:26px; "></div>
-  <div class="color_block" style="background:#9db48f; width:26px; "></div>
-  <div class="color_block" style="background:#9fc6aa; width:25px; "></div>
-  <div class="color_block" style="background:#709f65; width:24px; "></div>
-  <div class="color_block" style="background:#aed6bf; width:20px; "></div>
-  <div class="color_block" style="background:#222e22; width:18px; "></div>
-  <div class="color_block" style="background:#4d6044; width:18px; "></div>
-  <div class="color_block" style="background:#9bdfc2; width:17px; "></div>
-  <div class="color_block" style="background:#819262; width:17px; "></div>
-  <div class="color_block" style="background:#8fa272; width:17px; "></div>
-  <div class="color_block" style="background:#8da47e; width:17px; "></div>
-  <div class="color_block" style="background:#667; width:17px; "></div>
-  <div class="color_block" style="background:#504f50; width:16px; "></div>
-  <div class="color_block" style="background:#5d7150; width:16px; "></div>
-  <div class="color_block" style="background:#7c936c; width:15px; "></div>
-  <div class="color_block" style="background:#68814f; width:15px; "></div>
-  <div class="color_block" style="background:#6c825c; width:12px; "></div>
-  <div class="color_block" style="background:#91312; width:12px; "></div>
-  <div class="color_block" style="background:#feb; width:10px; "></div>
-  <div class="color_block" style="background:#69b4a1; width:9px; "></div>
-  <div class="color_block" style="background:#66a784; width:9px; "></div>
-  <div class="color_block" style="background:#141c14; width:8px; "></div>
-  <div class="color_block" style="background:#2f7967; width:8px; "></div>
-  <div class="color_block" style="background:#80c3a7; width:6px; "></div>
-  <div class="color_block" style="background:#282628; width:6px; "></div>
-  <div class="color_block" style="background:#3a815c; width:5px; "></div>
-  <div class="color_block" style="background:#a9e2d6; width:5px; "></div>
-  <div class="color_block" style="background:#c4e30; width:5px; "></div>
+  <h3>64 colors reduction (Image Magick) - histogram</h3>
+  <div class="color_block" style="background:#d3ddc2; width:113px; "></div>
+  <div class="color_block" style="background:#c0d0b1; width:109px; "></div>
+  <div class="color_block" style="background:#f0f1e9; width:69px; "></div>
+  <div class="color_block" style="background:#d9dcc1; width:67px; "></div>
+  <div class="color_block" style="background:#aec3a1; width:64px; "></div>
+  <div class="color_block" style="background:#e9ebd9; width:61px; "></div>
+  <div class="color_block" style="background:#e4e4be; width:48px; "></div>
+  <div class="color_block" style="background:#e5ead7; width:45px; "></div>
+  <div class="color_block" style="background:#c7cba3; width:39px; "></div>
+  <div class="color_block" style="background:#cbceb1; width:39px; "></div>
+  <div class="color_block" style="background:#224535; width:38px; "></div>
+  <div class="color_block" style="background:#2e3e2f; width:36px; "></div>
+  <div class="color_block" style="background:#315440; width:36px; "></div>
+  <div class="color_block" style="background:#b2be92; width:36px; "></div>
+  <div class="color_block" style="background:#bfdec5; width:35px; "></div>
+  <div class="color_block" style="background:#3e4e39; width:32px; "></div>
+  <div class="color_block" style="background:#40654a; width:32px; "></div>
+  <div class="color_block" style="background:#4f7757; width:28px; "></div>
+  <div class="color_block" style="background:#5e8864; width:26px; "></div>
+  <div class="color_block" style="background:#92936b; width:23px; "></div>
+  <div class="color_block" style="background:#353229; width:22px; "></div>
+  <div class="color_block" style="background:#757351; width:21px; "></div>
+  <div class="color_block" style="background:#d5d3d7; width:20px; "></div>
+  <div class="color_block" style="background:#b2b591; width:20px; "></div>
+  <div class="color_block" style="background:#8fb694; width:20px; "></div>
+  <div class="color_block" style="background:#a1b083; width:20px; "></div>
+  <div class="color_block" style="background:#54503d; width:19px; "></div>
+  <div class="color_block" style="background:#4a6735; width:19px; "></div>
+  <div class="color_block" style="background:#6f9972; width:19px; "></div>
+  <div class="color_block" style="background:#7fa882; width:19px; "></div>
+  <div class="color_block" style="background:#edf3e7; width:18px; "></div>
+  <div class="color_block" style="background:#9db48f; width:18px; "></div>
+  <div class="color_block" style="background:#9fc6aa; width:18px; "></div>
+  <div class="color_block" style="background:#709f65; width:16px; "></div>
+  <div class="color_block" style="background:#16362d; width:16px; "></div>
+  <div class="color_block" style="background:#aed6bf; width:14px; "></div>
+  <div class="color_block" style="background:#222e22; width:12px; "></div>
+  <div class="color_block" style="background:#4d6044; width:12px; "></div>
+  <div class="color_block" style="background:#9bdfc2; width:12px; "></div>
+  <div class="color_block" style="background:#819262; width:12px; "></div>
+  <div class="color_block" style="background:#8fa272; width:12px; "></div>
+  <div class="color_block" style="background:#8da47e; width:12px; "></div>
+  <div class="color_block" style="background:#504f50; width:11px; "></div>
+  <div class="color_block" style="background:#5d7150; width:11px; "></div>
+  <div class="color_block" style="background:#7c936c; width:10px; "></div>
+  <div class="color_block" style="background:#68814f; width:10px; "></div>
+  <div class="color_block" style="background:#667; width:10px; "></div>
+  <div class="color_block" style="background:#6c825c; width:9px; "></div>
+  <div class="color_block" style="background:#91312; width:8px; "></div>
+  <div class="color_block" style="background:#feb; width:7px; "></div>
+  <div class="color_block" style="background:#69b4a1; width:6px; "></div>
+  <div class="color_block" style="background:#66a784; width:6px; "></div>
+  <div class="color_block" style="background:#141c14; width:6px; "></div>
+  <div class="color_block" style="background:#2f7967; width:5px; "></div>
+  <div class="color_block" style="background:#80c3a7; width:4px; "></div>
+  <div class="color_block" style="background:#282628; width:4px; "></div>
+  <div class="color_block" style="background:#3a815c; width:3px; "></div>
+  <div class="color_block" style="background:#a9e2d6; width:3px; "></div>
+  <div class="color_block" style="background:#c4e30; width:3px; "></div>
+  <div class="color_block" style="background:#153727; width:2px; "></div>
+  <div class="color_block" style="background:#5a6; width:1px; "></div>
   <div class="color_block" style="background:#1d9863; width:1px; "></div>
-  <div class="color_block" style="background:#49c593; width:1px; "></div>
-  <div class="color_block" style="background:#22967c; width:1px; "></div>
+  <div class="color_block" style="background:#49c593; width:0px; "></div>
+  <div class="color_block" style="background:#22967c; width:0px; "></div>
+  <div class="color_block" style="background:#000; width:0px; "></div>
 </div>
 
 <div id="cluster_40" style="clear:both">
-  <h3>Group by clustering - Weighted Euclidean Distance max = 40</h3>
-  <div class="color_block" style="background:#d8ddc3; width:253px; "></div>
-  <div class="color_block" style="background:#ebeee0; width:198px; "></div>
-  <div class="color_block" style="background:#c4ceae; width:191px; "></div>
-  <div class="color_block" style="background:#aec09c; width:140px; "></div>
-  <div class="color_block" style="background:#244031; width:94px; "></div>
-  <div class="color_block" style="background:#37513d; width:69px; "></div>
-  <div class="color_block" style="background:#466542; width:65px; "></div>
-  <div class="color_block" style="background:#99b38d; width:60px; "></div>
-  <div class="color_block" style="background:#badcc3; width:50px; "></div>
-  <div class="color_block" style="background:#899369; width:47px; "></div>
-  <div class="color_block" style="background:#87a57c; width:44px; "></div>
-  <div class="color_block" style="background:#707a53; width:41px; "></div>
+  <h3>Group by clustering - Weighted Euclidean Distance max = 12</h3>
+  <div class="color_block" style="background:#d8dec1; width:229px; "></div>
+  <div class="color_block" style="background:#ebeee0; width:195px; "></div>
+  <div class="color_block" style="background:#c4ceae; width:188px; "></div>
+  <div class="color_block" style="background:#b0bf9a; width:120px; "></div>
+  <div class="color_block" style="background:#284232; width:75px; "></div>
+  <div class="color_block" style="background:#37513d; width:68px; "></div>
+  <div class="color_block" style="background:#899369; width:46px; "></div>
+  <div class="color_block" style="background:#446448; width:44px; "></div>
+  <div class="color_block" style="background:#87a57c; width:43px; "></div>
   <div class="color_block" style="background:#2e2f27; width:40px; "></div>
-  <div class="color_block" style="background:#537555; width:40px; "></div>
+  <div class="color_block" style="background:#537555; width:39px; "></div>
+  <div class="color_block" style="background:#9fb289; width:38px; "></div>
   <div class="color_block" style="background:#6f9c6c; width:36px; "></div>
-  <div class="color_block" style="background:#bfd; width:34px; "></div>
+  <div class="color_block" style="background:#bfdec5; width:35px; "></div>
   <div class="color_block" style="background:#535044; width:31px; "></div>
   <div class="color_block" style="background:#5e8864; width:26px; "></div>
-  <div class="color_block" style="background:#9ee0c7; width:16px; "></div>
+  <div class="color_block" style="background:#e1410; width:22px; "></div>
+  <div class="color_block" style="background:#757351; width:21px; "></div>
+  <div class="color_block" style="background:#d5d3d7; width:20px; "></div>
+  <div class="color_block" style="background:#8fb694; width:20px; "></div>
+  <div class="color_block" style="background:#4a6735; width:19px; "></div>
+  <div class="color_block" style="background:#6a8155; width:19px; "></div>
+  <div class="color_block" style="background:#16362c; width:18px; "></div>
+  <div class="color_block" style="background:#9fc6aa; width:18px; "></div>
+  <div class="color_block" style="background:#aed6bf; width:14px; "></div>
+  <div class="color_block" style="background:#9bdfc2; width:12px; "></div>
+  <div class="color_block" style="background:#677; width:11px; "></div>
   <div class="color_block" style="background:#347c62; width:9px; "></div>
   <div class="color_block" style="background:#69b4a1; width:6px; "></div>
   <div class="color_block" style="background:#66a784; width:6px; "></div>
   <div class="color_block" style="background:#80c3a7; width:4px; "></div>
+  <div class="color_block" style="background:#a9e2d6; width:3px; "></div>
   <div class="color_block" style="background:#c4e30; width:3px; "></div>
   <div class="color_block" style="background:#1d9863; width:1px; "></div>
   <div class="color_block" style="background:#49c593; width:0px; "></div>
   <div class="color_block" style="background:#22967c; width:0px; "></div>
 </div>
+
+<div id="cluster_40" style="clear:both">
+  <h3>32 colors reduction (Image Magick) - Histogram</h3>
+  <div class="color_block" style="background:#c9d7b9; width:228px; "></div>
+  <div class="color_block" style="background:#d7dabe; width:160px; "></div>
+  <div class="color_block" style="background:#a7be9b; width:158px; "></div>
+  <div class="color_block" style="background:#eaecdd; width:124px; "></div>
+  <div class="color_block" style="background:#e5ead7; width:94px; "></div>
+  <div class="color_block" style="background:#3f5841; width:88px; "></div>
+  <div class="color_block" style="background:#7f9e75; width:79px; "></div>
+  <div class="color_block" style="background:#5d7d58; width:79px; "></div>
+  <div class="color_block" style="background:#283e2f; width:64px; "></div>
+  <div class="color_block" style="background:#b2b591; width:57px; "></div>
+  <div class="color_block" style="background:#92936b; width:39px; "></div>
+  <div class="color_block" style="background:#d5d3d7; width:35px; "></div>
+  <div class="color_block" style="background:#54503d; width:31px; "></div>
+  <div class="color_block" style="background:#757351; width:30px; "></div>
+  <div class="color_block" style="background:#353229; width:29px; "></div>
+  <div class="color_block" style="background:#16362d; width:24px; "></div>
+  <div class="color_block" style="background:#c4e30; width:21px; "></div>
+  <div class="color_block" style="background:#504f50; width:18px; "></div>
+  <div class="color_block" style="background:#66a784; width:17px; "></div>
+  <div class="color_block" style="background:#a9e2d6; width:13px; "></div>
+  <div class="color_block" style="background:#f15f; width:13px; "></div>
+  <div class="color_block" style="background:#2f7a68; width:12px; "></div>
+  <div class="color_block" style="background:#3a815c; width:12px; "></div>
+  <div class="color_block" style="background:#9bdfc2; width:12px; "></div>
+  <div class="color_block" style="background:#69b4a1; width:10px; "></div>
+  <div class="color_block" style="background:#667; width:9px; "></div>
+  <div class="color_block" style="background:#91312; width:8px; "></div>
+  <div class="color_block" style="background:#feb; width:6px; "></div>
+  <div class="color_block" style="background:#80c3a7; width:6px; "></div>
+  <div class="color_block" style="background:#282628; width:3px; "></div>
+  <div class="color_block" style="background:#49c593; width:2px; "></div>
+  <div class="color_block" style="background:#1d9863; width:2px; "></div>
+  <div class="color_block" style="background:#000; width:0px; "></div>
 </body>
 </html>

File eyes.gif

Added
New image

File src/ImageAnalyzer.java

View file
 import javax.imageio.ImageIO;
 
 public class ImageAnalyzer {
-    private static final int DISTANCE = 40;
+    private static final int DISTANCE = 12;
     private static final int MAX_LEVELS = 8;
-    private static final int range = 12;
+    private static final int range = 1;
     
     static class Pair {
         public Pair(Color color2, int weight) {
     public static void main(String[] args) throws IOException {
         ImageAnalyzer analyzer = new ImageAnalyzer();
         Map<Color, Pair> map = analyzer.getHistogram("eyes.gif");
-//        Map<Color, Pair> map = analyzer.getHistogram("analucia.jpg");
         File file = new File("output.html");
         bufferedWriter = new BufferedWriter(new FileWriter(file));
         bufferedWriter.write("<html>\n<head>\n<style type=\"text/css\">\n.color_block {height: 100px; border-style:solid; border-width:1px; float: left; margin: 5px}\n</style>\n</head>\n");
         double weight = 0;
         for (Pair colour : coloursList) {
             weight += colour.weight;
-            if (++i > 20)
-                break;
         }
         i = 0;
         for (Pair colour : coloursList) {
         float deltaG = q[1]- p[1];
         float deltaB = q[2]- p[2];
         float redmedian =  (q[0] + p[0])/2;
-        return (float) Math.sqrt((2 + redmedian/256)* deltaR * deltaR  + 4 *  deltaG * deltaG + (2 + (255- redmedian)/256)* deltaB * deltaB);
+        return (float) Math.sqrt(((2 + redmedian/256)* deltaR * deltaR  + 4 *  deltaG * deltaG + (2 + (255- redmedian)/256)* deltaB * deltaB)/7);
     }
 
     private static float[] createVector(float[] p, float[] q) {