- +

getAverageRGB()

+
+

getDominantColor()

+

createAreaBasedPalette()

@@ -39,11 +42,14 @@
- +

getAverageRGB()

+
+

getDominantColor()

+

createAreaBasedPalette()

@@ -54,11 +60,14 @@
- +

getAverageRGB()

+
+

getDominantColor()

+

createAreaBasedPalette()

@@ -74,6 +83,9 @@

getAverageRGB()

+
+

getDominantColor()

+

createAreaBasedPalette()

@@ -89,6 +101,9 @@

getAverageRGB()

+
+

getDominantColor()

+

createAreaBasedPalette()

@@ -104,6 +119,9 @@

getAverageRGB()

+
+

getDominantColor()

+

createAreaBasedPalette()

diff --git a/js/app.js b/js/app.js index d978f82..7ee147c 100644 --- a/js/app.js +++ b/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'), - swatchEl; + var imageSection = $(this).closest('.imageSection'); - swatchEl = $('
', { + var swatchEl = $('
', { 'class': 'swatch' }).css('background-color','rgba('+averageRGB.r+','+averageRGB.g+ ','+averageRGB.b+', 1)'); - + imageSection.find('.averageRGB').append(swatchEl); + swatchEl = $('
', { + '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){ diff --git a/js/functions.js b/js/functions.js index fd2345e..0115f73 100644 --- a/js/functions.js +++ b/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; - rgb.r += pixels[i]; - rgb.g += pixels[i+1]; - rgb.b += pixels[i+2]; + // if pixel is mostly opaque + if(pixels[i+3] > 125){ + ++count; + 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); diff --git a/sass/app.sass b/sass/app.sass index dc39c6d..c5ddba4 100644 --- a/sass/app.sass +++ b/sass/app.sass @@ -1,8 +1,7 @@ @import "base" body - background: #222 - color: #fff + color: #444 font-family: 'lucida grande', sans-serif line-height: 1.625em padding: 40px