Permalink
Browse files

Convolution matrix support: all systems go. Version bump to 0.3

  • Loading branch information...
1 parent 308e1d1 commit 443d550608ba15eb90b203aaa3b0a69de2ed3924 @mezzoblue committed Sep 20, 2010
Showing with 714 additions and 447 deletions.
  1. +106 −86 common.js
  2. +14 −0 demo/index.html
  3. +151 −167 demo/script/paintbrush.js
  4. +14 −7 demo/script/playground.js
  5. +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,6 +51,13 @@
</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:
@@ -106,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:
Oops, something went wrong.

0 comments on commit 443d550

Please sign in to comment.