Permalink
Browse files

Adding new Mosaic filter

  • Loading branch information...
1 parent a5fc344 commit 948eac4e151df2d3dbe2d0b1a13b2fde74b4eaa8 @mezzoblue committed Aug 29, 2010
Showing with 90 additions and 9 deletions.
  1. +29 −0 demo/index.html
  2. +17 −7 demo/script/paintbrush-0.2.js
  3. +29 −0 demo/timed.html
  4. +15 −2 paintbrush-0.2.js
View
@@ -60,6 +60,12 @@
<figcaption>Posterize, default (img)</figcaption>
</figure>
</li>
+ <li>
+ <figure>
+ <img src="images/240-lighthouse.jpg" class="filter-mosaic" width="240" height="160" alt="Point Atkinson Lighthouse">
+ <figcaption>Mosaic, default (img)</figcaption>
+ </figure>
+ </li>
</ul>
@@ -111,8 +117,16 @@
<p>Posterize: Amount 10 (CSS Background)</p>
</div>
</li>
+ <li>
+ <div class="bee filter-mosaic"
+ data-pb-mosaic-size="10"
+ data-pb-mosaic-amount="0.5">
+ <p>Mosaic: Amount 0.5, Size 10 (CSS Background)</p>
+ </div>
+ </li>
</ul>
+
<ul class="odd">
<li>
<figure>
@@ -174,8 +188,17 @@
<figcaption>Posterize: Amount 3 (img)</figcaption>
</figure>
</li>
+ <li>
+ <figure>
+ <img src="images/240-road.jpg" class="filter-mosaic"
+ data-pb-mosaic-size="3"
+ width="240" height="160" alt="West Coast roads, New Zealand">
+ <figcaption>Mosaic: Size 3 (img)</figcaption>
+ </figure>
+ </li>
</ul>
+
<ul class="odd">
<li>
<div class="stones">
@@ -224,6 +247,12 @@
<p>Posterize: Amount 8 (CSS Background)</p>
</div>
</li>
+ <li>
+ <div class="stones filter-mosaic"
+ data-pb-mosaic-size="15">
+ <p>Mosaic: Size 15 (CSS Background)</p>
+ </div>
+ </li>
</ul>
@@ -28,6 +28,7 @@ addLoadEvent(function() {
// you can add or remove lines here, depending on which filters you're using.
addFilter("filter-blur");
addFilter("filter-greyscale");
+ addFilter("filter-mosaic");
addFilter("filter-noise");
addFilter("filter-posterize");
addFilter("filter-sepia");
@@ -99,14 +100,14 @@ function addFilter(filterType) {
// the main loop through every pixel to apply effects
// (data is per-byte, and there are 4 bytes per pixel, so lets only loop through each pixel and save a few cycles)
- for (var i = 0, data = pixels.data, length = data.length; i < length / 4; i++) {
- var index = i * 4;
+ for (var i = 0, data = pixels.data, length = data.length; i < length >> 2; i++) {
+ var index = i << 2;
// get each colour value of current pixel
var thisPixel = {r: data[index], g: data[index + 1], b: data[index + 2]};
// the biggie: if we're here, let's get some filter action happening
- pixels = applyFilters(filterType, params, pixels, index, thisPixel, dest);
+ pixels = applyFilters(filterType, params, img, pixels, index, thisPixel, dest);
}
// redraw the pixel data back to the working buffer
@@ -162,6 +163,8 @@ function addFilter(filterType) {
var params = {
"blurAmount" : 1, // 0 and higher
"greyscaleAmount" : 1, // between 0 and 1
+ "mosaicAmount" : 1, // between 0 and 1
+ "mosaicSize" : 5, // 1 and higher
"noiseAmount" : 30, // 0 and higher
"noiseType" : "mono", // mono or color
"posterizeAmount" : 5, // 0 - 255, though 0 and 1 are relatively useless
@@ -217,9 +220,6 @@ function addFilter(filterType) {
// AND YET, if I simply catch the exception, the filters render anyway and all is well.
// there must be a reason for this, I just don't know what it is yet.
//
- // we also seem to get to this point when attempting to apply multiple filters on the same image
- // (specifically: noise before anything else, if it goes after, all is well?!)
- //
// console.log("exception: " + err);
}
}
@@ -255,7 +255,7 @@ function addFilter(filterType) {
// the function that actually manipulates the pixels
- function applyFilters(filterType, params, pixels, index, thisPixel, dest) {
+ function applyFilters(filterType, params, img, pixels, index, thisPixel, dest) {
// speed up access
var data = pixels.data, val;
@@ -271,6 +271,16 @@ function addFilter(filterType) {
findColorDifference(params.greyscaleAmount, val, thisPixel.b));
break;
+ case "filter-mosaic":
+ var stepX = ((index >> 2) % params.mosaicSize) << 2;
+ var stepY = (Math.floor(((index >> 2) / img.width)) % params.mosaicSize) << 2;
+ var pos = index - stepX - img.width * stepY;
+ data = setRGB(data, index,
+ findColorDifference(params.mosaicAmount, data[pos], thisPixel.r),
+ findColorDifference(params.mosaicAmount, data[pos + 1], thisPixel.g),
+ findColorDifference(params.mosaicAmount, data[pos + 2], thisPixel.b));
+ break;
+
case "filter-noise":
val = noise(params.noiseAmount);
View
@@ -61,6 +61,12 @@
<figcaption>Posterize, default (img)</figcaption>
</figure>
</li>
+ <li>
+ <figure>
+ <img src="images/240-lighthouse.jpg" class="filter-mosaic" width="240" height="160" alt="Point Atkinson Lighthouse">
+ <figcaption>Mosaic, default (img)</figcaption>
+ </figure>
+ </li>
</ul>
@@ -112,8 +118,16 @@
<p>Posterize: Amount 10 (CSS Background)</p>
</div>
</li>
+ <li>
+ <div class="bee filter-mosaic"
+ data-pb-mosaic-size="10"
+ data-pb-mosaic-amount="0.5">
+ <p>Mosaic: Amount 0.5, Size 10 (CSS Background)</p>
+ </div>
+ </li>
</ul>
+
<ul class="odd">
<li>
<figure>
@@ -175,8 +189,17 @@
<figcaption>Posterize: Amount 3 (img)</figcaption>
</figure>
</li>
+ <li>
+ <figure>
+ <img src="images/240-road.jpg" class="filter-mosaic"
+ data-pb-mosaic-size="3"
+ width="240" height="160" alt="West Coast roads, New Zealand">
+ <figcaption>Mosaic: Size 3 (img)</figcaption>
+ </figure>
+ </li>
</ul>
+
<ul class="odd">
<li>
<div class="stones">
@@ -225,6 +248,12 @@
<p>Posterize: Amount 8 (CSS Background)</p>
</div>
</li>
+ <li>
+ <div class="stones filter-mosaic"
+ data-pb-mosaic-size="15">
+ <p>Mosaic: Size 15 (CSS Background)</p>
+ </div>
+ </li>
</ul>
View
@@ -22,6 +22,7 @@ addLoadEvent(function() {
// you can add or remove lines here, depending on which filters you're using.
addFilter("filter-blur");
addFilter("filter-greyscale");
+ addFilter("filter-mosaic");
addFilter("filter-noise");
addFilter("filter-posterize");
addFilter("filter-sepia");
@@ -94,7 +95,7 @@ function addFilter(filterType) {
var thisPixel = {r: data[index], g: data[index + 1], b: data[index + 2]};
// the biggie: if we're here, let's get some filter action happening
- pixels = applyFilters(filterType, params, pixels, index, thisPixel, dest);
+ pixels = applyFilters(filterType, params, img, pixels, index, thisPixel, dest);
}
// redraw the pixel data back to the working buffer
@@ -150,6 +151,8 @@ function addFilter(filterType) {
var params = {
"blurAmount" : 1, // 0 and higher
"greyscaleAmount" : 1, // between 0 and 1
+ "mosaicAmount" : 1, // between 0 and 1
+ "mosaicSize" : 5, // 1 and higher
"noiseAmount" : 30, // 0 and higher
"noiseType" : "mono", // mono or color
"posterizeAmount" : 5, // 0 - 255, though 0 and 1 are relatively useless
@@ -243,7 +246,7 @@ function addFilter(filterType) {
// the function that actually manipulates the pixels
- function applyFilters(filterType, params, pixels, index, thisPixel, dest) {
+ function applyFilters(filterType, params, img, pixels, index, thisPixel, dest) {
// speed up access
var data = pixels.data, val;
@@ -259,6 +262,16 @@ function addFilter(filterType) {
findColorDifference(params.greyscaleAmount, val, thisPixel.b));
break;
+ case "filter-mosaic":
+ var stepX = ((index >> 2) % params.mosaicSize) << 2;
+ var stepY = (Math.floor(((index >> 2) / img.width)) % params.mosaicSize) << 2;
+ var pos = index - stepX - img.width * stepY;
+ data = setRGB(data, index,
+ findColorDifference(params.mosaicAmount, data[pos], thisPixel.r),
+ findColorDifference(params.mosaicAmount, data[pos + 1], thisPixel.g),
+ findColorDifference(params.mosaicAmount, data[pos + 2], thisPixel.b));
+ break;
+
case "filter-noise":
val = noise(params.noiseAmount);

0 comments on commit 948eac4

Please sign in to comment.