gkoberger · March 14, 2011 19:25 · gkoberger · Mar 14, 2011
diff --git a/firefox.html b/firefox.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Extract colors from the Firefox logo</title>
  <style>
    body {
      margin: 70px 0 0;
    }
    #form {
      padding: 10px;
      color: #fff;
      font-family: Verdana;
      background-color: #333;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
      -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
    }

    #form form {
      margin: 0;
    }

  </style>
 </head>

 <body id="home">
  <div id="form">
    <form>
      <label for="start_x">Start (x):</label> <input type="text" id="start_x" size="3" value="590">
      <label for="start_y">Start (y):</label> <input type="text" id="start_y" size="3" value="550">
      <label for="radius">Radius:</label> <input type="text" id="radius" size="3" value="80">%
      <label for="points">Points</label> <input type="text" id="points" size="3" value="360">
      <input type="submit" value="Generate">
    </form>
  </div>

  <ul id="output"></ul>
  <div id="image"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

  <script>
    $('#form').submit(function(){
        /* Clear everything */
        $('#output, #image').empty();

        /* Set up the image */
        var image = new Image();
        image.src = "firefox.png";

        /* Wait for it to load */
        image.onload = function() {
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;

            $('#image').append(canvas);

            var ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);

            var points = getPoints($('#start_x').val(), $('#start_y').val(), (canvas.width / 2) * ($('#radius').val() / 100), $('#points').val()),
                imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            $.each(points, function(i, point) {
              var color = getColor(imageData, point[0], point[1]);
              $('#output').append("<li style='background-color:" + color + "'>" + color + "</li>");
            });

            ctx.putImageData(imageData, 0, 0);
        }

        return false;
    });

    /* get the color */
    function getColor(imageData, x, y) {
        var x = Math.round(x);
        var y = Math.round(y);
        var index = (y*imageData.width + x) * 4;
        var red = imageData.data[index];
        var green = imageData.data[index + 1];
        var blue = imageData.data[index + 2];
        var alpha = imageData.data[index + 3];

        /* Add border around the pixel */
        for(var x2 = -1; x2 <= 1; x2++) {
          for(var y2 = -1; y2 <= 1; y2++) {
            if(!(x2 == 0 && y2 == 0)) {
              var index_new = ((y+y2)*imageData.width + x+x2) * 4;
              imageData.data[index_new] = 255;
              imageData.data[index_new + 1] = 255;
              imageData.data[index_new + 2] = 255;
              imageData.data[index_new + 3] = alpha;
            }
          }
        }

        return "rgb(" + red + ", " + green + ", " + blue + ");";
    }

    function getPoints( start_x, start_y, radius, amount ) {
        start_x = parseInt(start_x);
        start_y = parseInt(start_y);

        var alpha = Math.PI * 2 / parseInt(amount);
        var points = [];

        for(var i=0; i < amount; i++ ) {
            var theta = alpha * i,
                p = [start_x + Math.cos( theta ) * radius,  start_y + Math.sin( theta ) * radius];
            points[i] = p;
        }

        return points;
    }

    /* Resources:
     * http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
     */
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Extract colors from the Firefox logo</title>
	<style>
	body {
	margin: 70px 0 0;
	}
	#form {
	padding: 10px;
	color: #fff;
	font-family: Verdana;
	background-color: #333;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
	}

	#form form {
	margin: 0;
	}

	</style>
	</head>

	<body id="home">
	<div id="form">
	<form>
	<label for="start_x">Start (x):</label> <input type="text" id="start_x" size="3" value="590">
	<label for="start_y">Start (y):</label> <input type="text" id="start_y" size="3" value="550">
	<label for="radius">Radius:</label> <input type="text" id="radius" size="3" value="80">%
	<label for="points">Points</label> <input type="text" id="points" size="3" value="360">
	<input type="submit" value="Generate">
	</form>
	</div>

	<ul id="output"></ul>
	<div id="image"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

	<script>
	$('#form').submit(function(){
	/* Clear everything */
	$('#output, #image').empty();

	/* Set up the image */
	var image = new Image();
	image.src = "firefox.png";

	/* Wait for it to load */
	image.onload = function() {
	var canvas = document.createElement('canvas');
	canvas.width = image.width;
	canvas.height = image.height;

	$('#image').append(canvas);

	var ctx = canvas.getContext('2d');
	ctx.drawImage(image, 0, 0);

	var points = getPoints($('#start_x').val(), $('#start_y').val(), (canvas.width / 2) * ($('#radius').val() / 100), $('#points').val()),
	imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

	$.each(points, function(i, point) {
	var color = getColor(imageData, point[0], point[1]);
	$('#output').append("<li style='background-color:" + color + "'>" + color + "</li>");
	});

	ctx.putImageData(imageData, 0, 0);
	}

	return false;
	});

	/* get the color */
	function getColor(imageData, x, y) {
	var x = Math.round(x);
	var y = Math.round(y);
	var index = (yimageData.width + x) 4;
	var red = imageData.data[index];
	var green = imageData.data[index + 1];
	var blue = imageData.data[index + 2];
	var alpha = imageData.data[index + 3];

	/* Add border around the pixel */
	for(var x2 = -1; x2 <= 1; x2++) {
	for(var y2 = -1; y2 <= 1; y2++) {
	if(!(x2 == 0 && y2 == 0)) {
	var index_new = ((y+y2)imageData.width + x+x2) 4;
	imageData.data[index_new] = 255;
	imageData.data[index_new + 1] = 255;
	imageData.data[index_new + 2] = 255;
	imageData.data[index_new + 3] = alpha;
	}
	}
	}

	return "rgb(" + red + ", " + green + ", " + blue + ");";
	}

	function getPoints( start_x, start_y, radius, amount ) {
	start_x = parseInt(start_x);
	start_y = parseInt(start_y);

	var alpha = Math.PI * 2 / parseInt(amount);
	var points = [];

	for(var i=0; i < amount; i++ ) {
	var theta = alpha * i,
	p = [start_x + Math.cos( theta ) * radius, start_y + Math.sin( theta ) * radius];
	points[i] = p;
	}

	return points;
	}

	/* Resources:
	* http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
	*/
	</script>
	</body>
	</html>