Skip to content

Instantly share code, notes, and snippets.

@gkoberger
Created March 14, 2011 19:25
Show Gist options
  • Save gkoberger/869700 to your computer and use it in GitHub Desktop.
Save gkoberger/869700 to your computer and use it in GitHub Desktop.
Extract colors from the Firefox logo
<!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>
@gkoberger
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment