added dominant color function

css/app.css

@@ -65,42 +65,41 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 
 /* line 3, ../sass/app.sass */
 body {
-  background: #222222;
+  color: #444444;
-  color: white;
   font-family: "lucida grande", sans-serif;
   line-height: 1.625em;
   padding: 40px;
 }
 
-/* line 10, ../sass/app.sass */
+/* line 9, ../sass/app.sass */
 h1 {
   font-size: 36px;
   margin-bottom: 0.5em;
 }
 
-/* line 17, ../sass/app.sass */
+/* line 16, ../sass/app.sass */
 .imageSection {
   overflow: hidden;
   *zoom: 1;
   margin-bottom: 40px;
 }
-/* line 20, ../sass/app.sass */
+/* line 19, ../sass/app.sass */
 .imageSection img {
   float: left;
   margin-right: 20px;
 }
-/* line 23, ../sass/app.sass */
+/* line 22, ../sass/app.sass */
 .imageSection .colors {
   width: 400px;
   float: left;
 }
-/* line 26, ../sass/app.sass */
+/* line 25, ../sass/app.sass */
 .imageSection .colors .function {
   overflow: hidden;
   *zoom: 1;
   margin-bottom: 10px;
 }
-/* line 29, ../sass/app.sass */
+/* line 28, ../sass/app.sass */
 .imageSection .colors .function .swatch {
   width: 40px;
   height: 20px;
@@ -109,7 +108,7 @@ h1 {
   float: left;
 }
 
-/* line 36, ../sass/app.sass */
+/* line 35, ../sass/app.sass */
 canvas {
   display: none;
 }

index.html

@@ -24,11 +24,14 @@
 	<div id="main" role="main">
 
     <div class="imageSection">
-      <img src="img/1.jpg" />
+      <img src="img/icon1.png" />
       <div class="colors">
         <div class="function averageRGB">
           <h3>getAverageRGB()</h3>
         </div>
+        <div class="function dominantColor">
+          <h3>getDominantColor()</h3>
+        </div>
         <div class="function areaBasedPalette">
           <h3>createAreaBasedPalette()</h3>
         </div>
@@ -39,11 +42,14 @@
     </div>
     
     <div class="imageSection">
-      <img src="img/2.jpg" />
+      <img src="img/icon2.gif" />
       <div class="colors">
         <div class="function averageRGB">
           <h3>getAverageRGB()</h3>
         </div>
+        <div class="function dominantColor">
+          <h3>getDominantColor()</h3>
+        </div>
         <div class="function areaBasedPalette">
           <h3>createAreaBasedPalette()</h3>
         </div>
@@ -54,11 +60,14 @@
     </div>
 
     <div class="imageSection">
-      <img src="img/3.jpg" />
+      <img src="img/icon3.png" />
       <div class="colors">
         <div class="function averageRGB">
           <h3>getAverageRGB()</h3>
         </div>
+        <div class="function dominantColor">
+          <h3>getDominantColor()</h3>
+        </div>
         <div class="function areaBasedPalette">
           <h3>createAreaBasedPalette()</h3>
         </div>
@@ -74,6 +83,9 @@
           <div class="function averageRGB">
             <h3>getAverageRGB()</h3>
           </div>
+          <div class="function dominantColor">
+            <h3>getDominantColor()</h3>
+          </div>
           <div class="function areaBasedPalette">
             <h3>createAreaBasedPalette()</h3>
           </div>
@@ -89,6 +101,9 @@
             <div class="function averageRGB">
               <h3>getAverageRGB()</h3>
             </div>
+            <div class="function dominantColor">
+              <h3>getDominantColor()</h3>
+            </div>
             <div class="function areaBasedPalette">
               <h3>createAreaBasedPalette()</h3>
             </div>
@@ -104,6 +119,9 @@
               <div class="function averageRGB">
                 <h3>getAverageRGB()</h3>
               </div>
+              <div class="function dominantColor">
+                <h3>getDominantColor()</h3>
+              </div>
               <div class="function areaBasedPalette">
                 <h3>createAreaBasedPalette()</h3>
               </div>

js/app.js

@@ -3,18 +3,25 @@ $(document).ready(function(){
 	$('img').each(function(index){
 
 		var averageRGB = getAverageRGB(this);
+		var dominantColor = getDominantColor(this);
 		var areaPalette = createAreaBasedPalette(this, 9);
 		var medianPalette = createMedianCutPalette(this, 10);
 
-		var imageSection = $(this).closest('.imageSection'),
+		var imageSection = $(this).closest('.imageSection');
-			swatchEl;
 		
-		swatchEl = $('<div>', {
+		var swatchEl = $('<div>', {
 			'class': 'swatch'
 		}).css('background-color','rgba('+averageRGB.r+','+averageRGB.g+ ','+averageRGB.b+', 1)');
-		
+
 		imageSection.find('.averageRGB').append(swatchEl);
 
+		swatchEl = $('<div>', {
+			'class': 'swatch'
+		}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
+
+		imageSection.find('.dominantColor').append(swatchEl);
+
+
 		var areaBasedPalette = imageSection.find('.areaBasedPalette');
 
 		$.each(areaPalette, function(index, value){

js/functions.js

@@ -18,10 +18,13 @@ function getAverageRGB(sourceImage) {
 	// Add all the red values together, repeat for blue and green.
 	// Last step, divide by the number of pixels checked to get average.
     while ( (i += sampleSize * 4) < pixelCount ) {
-        ++count;
+		// if pixel is mostly opaque
-        rgb.r += pixels[i];
+		if(pixels[i+3] > 125){
-        rgb.g += pixels[i+1];
+	        ++count;
-        rgb.b += pixels[i+2];
+			rgb.r += pixels[i];
+	        rgb.g += pixels[i+1];
+	        rgb.b += pixels[i+2];
+		}
     }
 
   	rgb.r = Math.floor(rgb.r/count);
@@ -33,6 +36,33 @@ function getAverageRGB(sourceImage) {
 
 
 
+function getDominantColor(sourceImage){
+
+	var palette = [];
+
+	// Create custom CanvasImage object
+	var image = new CanvasImage(sourceImage),
+		imageData = image.getImageData(),
+		pixels = imageData.data,
+		pixelCount = image.getPixelCount();
+		 
+		var pixelArray = [];
+
+		for (var i = 0; i < pixelCount; i++) {  
+			// If pixel is mostly opaque
+			if(pixels[i*4+3] >= 125){
+		   		pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			}
+		};
+		
+		var cmap = MMCQ.quantize(pixelArray, 5);
+		var newPalette = cmap.palette();
+
+		return {r: newPalette[0][0], g: newPalette[0][1], b: newPalette[0][2]};
+}
+
+
+
 function createAreaBasedPalette(sourceImage, colorCount){
 
 	var palette = [];
@@ -98,7 +128,10 @@ function createMedianCutPalette(sourceImage, colorCount){
 		var pixelArray = [];
 
 		for (var i = 0; i < pixelCount; i++) {  
-		    pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			// If pixel is mostly opaque
+			if(pixels[i*4+3] >= 125){
+		    	pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			}
 		};
 		
 		var cmap = MMCQ.quantize(pixelArray, colorCount);

sass/app.sass

@@ -1,8 +1,7 @@
 @import "base"
 
 body
-  background: #222
+  color: #444
-  color: #fff
   font-family: 'lucida grande', sans-serif
   line-height: 1.625em
   padding: 40px