Permalink
Browse files

Modularised code

  • Loading branch information...
1 parent 1c207ac commit 4983d3137dfb73b7ccde37f2f5807c393ce366f5 @timkim committed Jul 10, 2012
Showing with 7 additions and 219 deletions.
  1. +7 −219 index.html
View
@@ -1,234 +1,22 @@
<!DOCTYPE html>
<html>
<head>
+ <script src="mrpalette.js" type="text/javascript"></script>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
- var theCanvas;
- var ctx;
-
- var medianCanvas;
- var medianCtx;
-
- var colourCanvas;
- var colourCtx;
-
- var imageData;
- var imageOut;
- var colourData;
-
function onBodyLoad(){
- // draw images
- theCanvas = document.getElementById('theCanvas');
- ctx = theCanvas.getContext('2d');
-
- medianCanvas = document.getElementById('medianCanvas');
- medianCtx = medianCanvas.getContext('2d');
-
- colourCanvas = document.getElementById('colourCanvas');
- colourCtx = colourCanvas.getContext('2d');
-
- // take the image and use a scaled down version so we loop through less pixels
- theCanvas.width = document.images[0].width;
- theCanvas.height = document.images[0].height;
- ctx.drawImage(document.images[0],0,0,theCanvas.width, theCanvas.height);
- imageData = ctx.getImageData(0,0,document.images[0].width, document.images[0].height);
-
-
-
- medianCanvas.width = theCanvas.width;
- medianCanvas.height = theCanvas.height;
- imageOut = medianCtx.createImageData(medianCanvas.width, medianCanvas.height);
- medianFilter(imageData, imageOut, 5);
- medianFilter(imageOut, imageOut, 5);
-
- medianCtx.putImageData(imageOut,0,0);
-
-
- // sort it and spit it out
- colourCanvas.width = medianCanvas.width;
- colourCanvas.height = medianCanvas.height;
-
- imageData = medianCtx.getImageData(0,0,medianCanvas.width, medianCanvas.height);
- colourData = generateColourPalette(imageData, 50);
-
- colourData.sort(function(a,b){return b.count-a.count});
-
- outputColourPalette(colourData, 6);
- }
-
- //30% of the red value, 59% of the green value, and 11% blue
- var medianFilter = function(imgIn, imgOut, windowSize){
- var colourHistogram = [];
-
- var edgeX = Math.floor(windowSize/2);
- var edgeY = Math.floor(windowSize/2);
-
- //var width = imgIn.width-windowSize, height = imgIn.height-windowSize;
- var width = imgIn.width, height = imgIn.height;
- for(var i=0;i<width;i++){
- for(var j=0;j<height;j++){
-
- colourHistogram = [];
- var radius = Math.floor(windowSize/2);
- var offsetWidth = width - (i+windowSize);
- var offsetHeight = height - (j+windowSize);
- var windowLeft = 0;
- var windowTop = 0;
-
- for(var k=0;k<windowSize;k++){
- for(var l=0;l<windowSize;l++){
-
- // change the windowBox's coords when we get close to the edge
- // make sure to never go pass the edge of the image
-
- if(offsetWidth < 0 ){
- windowLeft = k + i + offsetWidth;
- }else{
- windowLeft = k + i;
- }
-
- if(offsetHeight < 0){
- windowTop = j + l + offsetHeight
- }else{
- windowTop = j + l;
- }
-
- if(windowLeft - radius > 0) {
- windowLeft -= radius;
- }else{
- windowLeft = 0;
- }
-
- if(windowTop - radius > 0){
- windowTop -= radius;
- }else{
- windowTop = 0;
- }
-
- var index = (windowLeft+windowTop*width)*4;
- // hope that intensity corresponds to the colour in the image closely enough
- // to generate a good pallette
- var imageRed = imgIn.data[index];
- var imageGreen = imgIn.data[index+1];
- var imageBlue = imgIn.data[index+2];
- var intensity = imageRed*0.3 + imageGreen*.59 + imageBlue*0.1;
- colourHistogram.push({
- intensity:intensity,
- red: imageRed,
- green:imageGreen,
- blue:imageBlue
- });
- }
- }
-
- var imageOutIndex = (i+j*width)*4;
-
- colourHistogram.sort(function(a,b){return a.intensity-b.intensity});
- var medianColour = colourHistogram[Math.floor(colourHistogram.length/2)];
- imgOut.data[imageOutIndex] = medianColour.red;
- imgOut.data[imageOutIndex+1] = medianColour.green;
- imgOut.data[imageOutIndex+2] = medianColour.blue;
- imgOut.data[imageOutIndex+3] = 255;
- }
- }
- }
-
- var generateColourPalette = function(img, threshold){
- var colourOut = [];
- var currentThreshold = 0;
- var similar = false;
-
- var width = img.width, height = img.height;
- for(var i=0;i<width;i++){
- for(var j=0;j<height;j++){
- var index = (i+j*width)*4;
- var imageRed = img.data[index];
- var imageGreen = img.data[index+1];
- var imageBlue = img.data[index+2];
-
- if(colourOut.length==0){
- colourOut.push({
- red:imageRed,
- green:imageGreen,
- blue:imageBlue,
- count: 1
- });
- }else{
- similar = false;
- //30% of the red value, 59% of the green value, and 11% blue
- for(var k=0;k<colourOut.length;k++){
- currentThreshold = 0;
- // is there a better way to do this?
- // I feel like I could be losing some info by just adding like this
-
- currentThreshold += Math.abs((colourOut[k].red-imageRed)*0.3);
- currentThreshold += Math.abs((colourOut[k].green-imageGreen)*0.59);
- currentThreshold += Math.abs((colourOut[k].blue-imageBlue)*0.3);
-
- // another similiar colour found
- // average out the colours
- if(currentThreshold<threshold){
- similar = true;
- colourOut.red = Math.floor((colourOut[k].red+imageRed)/2);
- colourOut.green = Math.floor((colourOut[k].green+imageGreen)/2);
- colourOut.blue = Math.floor((colourOut[k].green+imageBlue)/2);
- colourOut[k].count += 1;
- }
-
- }
- if(!similar){
- colourOut.push({
- red:imageRed,
- green:imageGreen,
- blue:imageBlue,
- count: 1
- });
- }
- }
-
- }
- }
- return colourOut;
- }
-
-
- var outputColourPalette = function(colourIn, maxNumColours){
- colourCanvas.width = colourIn.length*25;
- for(var k=0;k<maxNumColours;k++){
- colourCtx.fillStyle = 'rgb(' + colourIn[k].red + ',' +
- colourIn[k].green + ',' + colourIn[k].blue+')';
- colourCtx.fillRect(k*25,0,25,25);
- }
- }
-
-
-/*
- function onDeviceReady()
- {
-
+ var myPalette = new MrPalette();
+ var myPic = document.getElementById('img1');
+ myPalette.generateColourPalette(myPic);
}
-
-*/
-
-
+
</script>
</head>
<body onload="onBodyLoad()">
- <img id="img1" src="flower2.png" style="display:none"/>
-
- <canvas id="theCanvas">
-
- </canvas>
-
- <canvas id="medianCanvas">
-
- </canvas>
- <br />
- <canvas id="colourCanvas">
-
- </canvas>
+ <img id="img1" src="seagull.jpg"/>
+
</body>
</html>

0 comments on commit 4983d31

Please sign in to comment.