Skip to content

Instantly share code, notes, and snippets.

@benzittlau

benzittlau/blur.html

Created September 23, 2011 17:39
Show Gist options
  • Save benzittlau/1237968 to your computer and use it in GitHub Desktop.
Save benzittlau/1237968 to your computer and use it in GitHub Desktop.
Download ZIP
Ben's amazing bluring script
Raw
blur.html
<html>
<head>
<title> Ben's amazing bluring script </title>
</head>
<h1> Ben's amazing bluring script </h1>
<button id="reset">Reset</button>
<button id="blur">Blur</button>
<span id="paint_white" class="selected">Paint White</span>
<span id="paint_black">Paint Black</span>
<span id="paint_toggle">Paint Toggle</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
initialize_image();
var paintColor = "white"
$("#reset").click(function(){
initialize_image();
})
$("#blur").click(function(){
blur_image();
})
$("#paint_white").click(function() {
$("span").removeClass("selected");
$(this).addClass("selected");
paintColor = "white"
})
$("#paint_black").click(function() {
$("span").removeClass("selected");
$(this).addClass("selected");
paintColor = "black"
})
$("#paint_toggle").click(function() {
$("span").removeClass("selected");
$(this).addClass("selected");
paintColor = "toggle"
})
$("td").click(function() {
if (paintColor == "toggle") {
if ($(this).css("background-color") == "rgb(255, 255, 255)") {
$(this).css("background-color", "black");
} else {
$(this).css("background-color", "white");
}
} else {
$(this).css("background-color", paintColor);
}
})
})
function initialize_image(){
$("table").each(function() {
$("tr",this).each(function(row_index){
$("td", this).each(function(column_index, element){
if (row_index > 5) {
value = 255
}else {
value = 0
}
$(element).html("<span style='width:0px;'></span>");
set_greyscale(element,value );
})
})
})
}
function blur_image(){
var image_map=new Array(12)
for (i=0; i <12; i++)
image_map[i]=new Array(12)
//Build the image map array
$("table").each(function() {
$("tr",this).each(function(row_index){
$("td", this).each(function(column_index, element){
image_map[column_index + 1][row_index + 1] = get_greyscale(element);
})
})
})
//Pad the image array
for (i=1; i <11; i++) {
image_map[0][i] = image_map[1][i]
}
for (i=1; i <11; i++) {
image_map[11][i] = image_map[10][i]
}
for (i=1; i <11; i++) {
image_map[i][0] = image_map[i][1]
}
for (i=1; i <11; i++) {
image_map[i][11] = image_map[i][10]
}
image_map[0][0] = (image_map[0][1] + image_map[1][0]) / 2;
image_map[0][11] = (image_map[0][10] + image_map[1][11]) / 2;
image_map[11][0] = (image_map[10][0] + image_map[11][1]) / 2;
image_map[11][11] = (image_map[11][10] + image_map[10][11]) / 2;
console.log(image_map)
//assign the blurred values
$("table").each(function() {
$("tr",this).each(function(row_index){
$("td", this).each(function(column_index, element){
x = column_index + 1
y = row_index + 1
new_val = Math.round((image_map[x][y] + image_map[x][y-1] + image_map[x][y+1] + image_map[x-1][y] + image_map[x-1][y-1] + image_map[x-1][y+1] + image_map[x+1][y] + image_map[x+1][y-1] + image_map[x+1][y+1])/9);
console.log("x:" + x + " y:" + y + " val:" + new_val)
set_greyscale(element, new_val);
})
})
})
}
function get_greyscale(element) {
rgb = $(element).css("background-color");
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return ((parseInt(rgb[1]) + parseInt(rgb[2]) + parseInt(rgb[3]))/3);
}
function set_greyscale(element, value) {
$(element).css("background-color", "rgb(" + value + "," + value + "," + value + ")");
}
</script>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width:20px;
height:20px;
background-color:white;
border: 1px solid gray;
padding: 0px;
}
span.selected {
color: white;
background-color: black;
}
</style>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment