Permalink
Browse files

Adding sharpen, emboss filters. Version bump to 0.3

  • Loading branch information...
1 parent e2f7185 commit eed28405a268e24b2be33ed5110afec9543d15df @mezzoblue committed Sep 20, 2010
Showing with 784 additions and 436 deletions.
  1. +106 −86 common.js
  2. +22 −1 demo/index.html
  3. +169 −159 demo/script/paintbrush.js
  4. +14 −1 demo/script/playground.js
  5. +44 −2 demo/usage.html
  6. +429 −187 paintbrush.js
View
192 common.js
@@ -129,97 +129,117 @@ function gaussianBlur(img, pixels, amount) {
var width4 = width << 2;
var height = img.height;
- var data = pixels.data;
-
- // compute coefficients as a function of amount
- var q;
- if (amount < 0.0) {
- amount = 0.0;
- }
- if (amount >= 2.5) {
- q = 0.98711 * amount - 0.96330;
- } else if (amount >= 0.5) {
- q = 3.97156 - 4.14554 * Math.sqrt(1.0 - 0.26891 * amount);
- } else {
- q = 2 * amount * (3.97156 - 4.14554 * Math.sqrt(1.0 - 0.26891 * 0.5));
- }
-
- //compute b0, b1, b2, and b3
- var qq = q * q;
- var qqq = qq * q;
- var b0 = 1.57825 + (2.44413 * q) + (1.4281 * qq ) + (0.422205 * qqq);
- var b1 = ((2.44413 * q) + (2.85619 * qq) + (1.26661 * qqq)) / b0;
- var b2 = (-((1.4281 * qq) + (1.26661 * qqq))) / b0;
- var b3 = (0.422205 * qqq) / b0;
- var bigB = 1.0 - (b1 + b2 + b3);
-
- // horizontal
- for (var c = 0; c < 3; c++) {
- for (var y = 0; y < height; y++) {
- // forward
- var index = y * width4 + c;
- var indexLast = y * width4 + ((width - 1) << 2) + c;
- var pixel = data[index];
- var ppixel = pixel;
- var pppixel = ppixel;
- var ppppixel = pppixel;
- for (; index <= indexLast; index += 4) {
- pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
- data[index] = pixel;
- ppppixel = pppixel;
- pppixel = ppixel;
+ if (pixels) {
+ var data = pixels.data;
+
+ // compute coefficients as a function of amount
+ var q;
+ if (amount < 0.0) {
+ amount = 0.0;
+ }
+ if (amount >= 2.5) {
+ q = 0.98711 * amount - 0.96330;
+ } else if (amount >= 0.5) {
+ q = 3.97156 - 4.14554 * Math.sqrt(1.0 - 0.26891 * amount);
+ } else {
+ q = 2 * amount * (3.97156 - 4.14554 * Math.sqrt(1.0 - 0.26891 * 0.5));
+ }
+
+ //compute b0, b1, b2, and b3
+ var qq = q * q;
+ var qqq = qq * q;
+ var b0 = 1.57825 + (2.44413 * q) + (1.4281 * qq ) + (0.422205 * qqq);
+ var b1 = ((2.44413 * q) + (2.85619 * qq) + (1.26661 * qqq)) / b0;
+ var b2 = (-((1.4281 * qq) + (1.26661 * qqq))) / b0;
+ var b3 = (0.422205 * qqq) / b0;
+ var bigB = 1.0 - (b1 + b2 + b3);
+
+ // horizontal
+ for (var c = 0; c < 3; c++) {
+ for (var y = 0; y < height; y++) {
+ // forward
+ var index = y * width4 + c;
+ var indexLast = y * width4 + ((width - 1) << 2) + c;
+ var pixel = data[index];
+ var ppixel = pixel;
+ var pppixel = ppixel;
+ var ppppixel = pppixel;
+ for (; index <= indexLast; index += 4) {
+ pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
+ data[index] = pixel;
+ ppppixel = pppixel;
+ pppixel = ppixel;
+ ppixel = pixel;
+ }
+ // backward
+ index = y * width4 + ((width - 1) << 2) + c;
+ indexLast = y * width4 + c;
+ pixel = data[index];
ppixel = pixel;
- }
- // backward
- index = y * width4 + ((width - 1) << 2) + c;
- indexLast = y * width4 + c;
- pixel = data[index];
- ppixel = pixel;
- pppixel = ppixel;
- ppppixel = pppixel;
- for (; index >= indexLast; index -= 4) {
- pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
- data[index] = pixel;
- ppppixel = pppixel;
pppixel = ppixel;
- ppixel = pixel;
+ ppppixel = pppixel;
+ for (; index >= indexLast; index -= 4) {
+ pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
+ data[index] = pixel;
+ ppppixel = pppixel;
+ pppixel = ppixel;
+ ppixel = pixel;
+ }
}
}
- }
-
- // vertical
- for (var c = 0; c < 3; c++) {
- for (var x = 0; x < width; x++) {
- // forward
- var index = (x << 2) + c;
- var indexLast = (height - 1) * width4 + (x << 2) + c;
- var pixel = data[index];
- var ppixel = pixel;
- var pppixel = ppixel;
- var ppppixel = pppixel;
- for (; index <= indexLast; index += width4) {
- pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
- data[index] = pixel;
- ppppixel = pppixel;
- pppixel = ppixel;
+
+ // vertical
+ for (var c = 0; c < 3; c++) {
+ for (var x = 0; x < width; x++) {
+ // forward
+ var index = (x << 2) + c;
+ var indexLast = (height - 1) * width4 + (x << 2) + c;
+ var pixel = data[index];
+ var ppixel = pixel;
+ var pppixel = ppixel;
+ var ppppixel = pppixel;
+ for (; index <= indexLast; index += width4) {
+ pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
+ data[index] = pixel;
+ ppppixel = pppixel;
+ pppixel = ppixel;
+ ppixel = pixel;
+ }
+ // backward
+ index = (height - 1) * width4 + (x << 2) + c;
+ indexLast = (x << 2) + c;
+ pixel = data[index];
ppixel = pixel;
- }
- // backward
- index = (height - 1) * width4 + (x << 2) + c;
- indexLast = (x << 2) + c;
- pixel = data[index];
- ppixel = pixel;
- pppixel = ppixel;
- ppppixel = pppixel;
- for (; index >= indexLast; index -= width4) {
- pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
- data[index] = pixel;
- ppppixel = pppixel;
pppixel = ppixel;
- ppixel = pixel;
+ ppppixel = pppixel;
+ for (; index >= indexLast; index -= width4) {
+ pixel = bigB * data[index] + b1 * ppixel + b2 * pppixel + b3 * ppppixel;
+ data[index] = pixel;
+ ppppixel = pppixel;
+ pppixel = ppixel;
+ ppixel = pixel;
+ }
}
- }
- }
-
- return(pixels);
+ }
+
+ return(pixels);
+ }
+}
+
+
+// remove a specific class from an element
+// from http://www.openjs.com/scripts/dom/class_manipulation.php
+function removeClass(obj, cls) {
+ if (hasClass(obj, cls)) {
+ var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+ obj.className = obj.className.replace(reg, ' ');
+ }
+}
+function addClass(obj, cls) {
+ if (!this.hasClass(obj, cls)) {
+ obj.className += " " + cls;
+ }
+}
+function hasClass(obj, cls) {
+ return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
View
@@ -51,13 +51,27 @@
</label>
</div>
+ <div class="controls" id="controls-emboss">
+ <label>
+ Amount:
+ <input type="range" name="data-pb-emboss-amount" min="0" max="1" step="0.01" value="0.2">
+ </label>
+ </div>
+
<div class="controls" id="controls-greyscale">
<label>
Opacity:
<input type="range" name="data-pb-greyscale-opacity" min="0" max="1" step="0.01" value="1">
</label>
</div>
+ <div class="controls" id="controls-matrix">
+ <label>
+ Amount:
+ <input type="range" name="data-pb-matrix-amount" min="0" max="1" step="0.01" value="0.2">
+ </label>
+ </div>
+
<div class="controls" id="controls-mosaic">
<label>
Opacity:
@@ -99,6 +113,13 @@
</label>
</div>
+ <div class="controls" id="controls-sharpen">
+ <label>
+ Amount:
+ <input type="range" name="data-pb-sharpen-amount" min="0" max="1" step="0.01" value="0.2">
+ </label>
+ </div>
+
<div class="controls" id="controls-tint">
<label>
Colour:
@@ -120,7 +141,7 @@
<section id="description">
<aside>
<a href="http://github.com/mezzoblue/PaintbrushJS/zipball/master">Download Now</a>
- <p>PaintbrushJS v0.2</p>
+ <p>PaintbrushJS v0.3</p>
</aside>
<p>PaintbrushJS is a lightweight browser-based image processing library built with Javascript and canvas. All photos by <a href="http://www.flickr.com/photos/mezzoblue/sets/72057594064508706/">Dave Shea</a>.</p>
Oops, something went wrong.

0 comments on commit eed2840

Please sign in to comment.