Skip to content
Browse files

Reverting back to the more verbose filter parameter syntax, multiple …

…filters won't work otherwise
  • Loading branch information...
1 parent 490a908 commit 0ddf2c265a21babd0ce366830fea173369c745c4 Dave Shea committed Sep 6, 2010
Showing with 83 additions and 100 deletions.
  1. +21 −21 demo/index.html
  2. +9 −9 demo/playground.html
  3. +33 −26 demo/script/paintbrush-0.2.js
  4. +0 −24 demo/script/playground.js
  5. +19 −19 demo/timed.html
  6. +1 −1 demo/torture-test.html
View
42 demo/index.html
@@ -83,34 +83,34 @@
</li>
<li>
<div class="bee filter-sepia"
- data-pb-opacity="0.5">
+ data-pb-sepia-opacity="0.5">
<p>Sepia tone: Opacity 0.5 (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-greyscale"
- data-pb-opacity="0.5">
+ data-pb-greyscale-opacity="0.5">
<p>Greyscale: Opacity 0.5 (CSS Background)</p>
</div>
</li>
</ul>
<ul>
<li>
<div class="bee filter-tint"
- data-pb-opacity="0.2"
+ data-pb-tint-opacity="0.2"
data-pb-tint-color="#f0c">
<p>Tint: Opacity 0.2, Color #FF00CC (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-blur"
- data-pb-amount="3">
+ data-pb-blur-amount="3">
<p>Blur: Amount 3 (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-noise"
- data-pb-amount="30"
+ data-pb-noise-amount="30"
data-pb-noise-type="monochrome">
<p>Noise: Amount 30, Type monochrome (CSS Background)</p>
</div>
@@ -119,15 +119,15 @@
<ul>
<li>
<div class="bee filter-posterize"
- data-pb-amount="10"
- data-pb-opacity="0.8">
+ data-pb-posterize-amount="10"
+ data-pb-posterize-opacity="0.8">
<p>Posterize: Amount 10, Opacity 0.8 (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-mosaic"
data-pb-mosaic-size="10"
- data-pb-opacity="0.5">
+ data-pb-mosaic-opacity="0.5">
<p>Mosaic: Opacity 0.5, Size 10 (CSS Background)</p>
</div>
</li>
@@ -149,15 +149,15 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-sepia"
- data-pb-opacity="0.7"
+ data-pb-sepia-opacity="0.7"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Sepia tone: Opacity 0.7 (img)</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/240/road.jpg" class="filter-greyscale"
- data-pb-opacity="0.8"
+ data-pb-greyscale-opacity="0.8"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Greyscale: Opacity 0.8 (img)</figcaption>
</figure>
@@ -167,7 +167,7 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-tint"
- data-pb-opacity="0.5"
+ data-pb-tint-opacity="0.5"
data-pb-tint-color="#009900"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Tint: Opacity 0.5, Color #090 (img)</figcaption>
@@ -176,15 +176,15 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-blur"
- data-pb-amount="0.4"
+ data-pb-blur-amount="0.4"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Blur: Amount 0.4 (img)</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/240/road.jpg" class="filter-noise"
- data-pb-amount="200"
+ data-pb-noise-amount="200"
data-pb-noise-type="colour"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Noise: Amount 200, Type color (img)</figcaption>
@@ -195,8 +195,8 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-posterize"
- data-pb-amount="3"
- data-pb-opacity="0.5"
+ data-pb-posterize-amount="3"
+ data-pb-posterize-opacity="0.5"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Posterize: Amount 3, Opacity 0.5 (img)</figcaption>
</figure>
@@ -227,34 +227,34 @@
</li>
<li>
<div class="stones filter-sepia"
- data-pb-opacity="2">
+ data-pb-sepia-opacity="2">
<p>Sepia tone: Opacity 2 (CSS Background)</p>
</div>
</li>
<li>
<div class="stones filter-greyscale"
- data-pb-opacity="-2">
+ data-pb-greyscale-opacity="-2">
<p>Greyscale: Opacity -2 (saturation hack) (CSS Background)</p>
</div>
</li>
</ul>
<ul>
<li>
<div class="stones filter-tint"
- data-pb-opacity="0.4"
+ data-pb-tint-opacity="0.4"
data-pb-tint-color="#06F">
<p>Tint: Opacity 0.4, Color #06F (CSS Background)</p>
</div>
</li>
<li>
<div class="stones filter-blur"
- data-pb-amount="10">
+ data-pb-blur-amount="10">
<p>Blur: Amount 10 (CSS Background)</p>
</div>
</li>
<li>
<div class="stones filter-noise"
- data-pb-amount="150"
+ data-pb-noise-amount="150"
data-pb-noise-type="mono">
<p>Noise: Amount 150, Type mono (CSS Background)</p>
</div>
@@ -263,7 +263,7 @@
<ul>
<li>
<div class="stones filter-posterize"
- data-pb-amount="8">
+ data-pb-posterize-amount="8">
<p>Posterize: Amount 8 (CSS Background)</p>
</div>
</li>
View
18 demo/playground.html
@@ -47,21 +47,21 @@
<div class="controls" id="controls-blur">
<label>
Amount:
- <input type="range" name="data-pb-amount" min="0" max="10" step="0.05" value="0">
+ <input type="range" name="data-pb-blur-amount" min="0" max="10" step="0.05" value="0">
</label>
</div>
<div class="controls" id="controls-greyscale">
<label>
Opacity:
- <input type="range" name="data-pb-opacity" min="0" max="1" step="0.01" value="1">
+ <input type="range" name="data-pb-greyscale-opacity" min="0" max="1" step="0.01" value="1">
</label>
</div>
<div class="controls" id="controls-mosaic">
<label>
Opacity:
- <input type="range" name="data-pb-opacity" min="0" max="1" step="0.01" value="1">
+ <input type="range" name="data-pb-mosaic-opacity" min="0" max="1" step="0.01" value="1">
</label>
<label>
Size:
@@ -72,7 +72,7 @@
<div class="controls" id="controls-noise">
<label>
Amount:
- <input type="range" name="data-pb-amount" min="0" max="100" step="1" value="30">
+ <input type="range" name="data-pb-noise-amount" min="0" max="100" step="1" value="30">
</label>
<label>
Type:
@@ -84,29 +84,29 @@
<div class="controls" id="controls-posterize">
<label>
Amount:
- <input type="range" name="data-pb-amount" min="2" max="100" step="1" value="5">
+ <input type="range" name="data-pb-posterize-amount" min="2" max="100" step="1" value="5">
</label>
<label>
Opacity:
- <input type="range" name="data-pb-opacity" min="0" max="1" step="0.01" value="1">
+ <input type="range" name="data-pb-posterize-opacity" min="0" max="1" step="0.01" value="1">
</label>
</div>
<div class="controls" id="controls-sepia">
<label>
Opacity:
- <input type="range" name="data-pb-opacity" min="0" max="1" step="0.01" value="0.5">
+ <input type="range" name="data-pb-sepia-opacity" min="0" max="1" step="0.01" value="0.5">
</label>
</div>
<div class="controls" id="controls-tint">
<label>
Colour:
- <input type="text" name="data-pb-tint-color" value="FF0000">
+ <input type="text" name="data-pb-tint-color" value="#FF0000">
</label>
<label>
Opacity:
- <input type="range" name="data-pb-opacity" min="0" max="1" step="0.01" value="0.5">
+ <input type="range" name="data-pb-tint-opacity" min="0" max="1" step="0.01" value="0.5">
</label>
</div>
View
59 demo/script/paintbrush-0.2.js
@@ -103,7 +103,7 @@ function addFilter(filterType, buffer, c) {
//
// blur and matrix filters have to exist outside the main loop
if (filterType == "filter-blur") {
- pixels = gaussianBlur(img, pixels, params.amount);
+ pixels = gaussianBlur(img, pixels, params.blurAmount);
}
if (filterType == "filter-matrix") {
pixels = applyMatrix(img, pixels, params);
@@ -152,12 +152,17 @@ function addFilter(filterType, buffer, c) {
// create the params object and set some default parameters up front
var params = {
- "opacity" : 1, // 0 and higher
- "amount" : 1, // 0 and higher
-
+ "blurAmount" : 1, // 0 and higher
+ "greyscaleOpacity" : 1, // between 0 and 1
+ "mosaicOpacity" : 1, // between 0 and 1
"mosaicSize" : 5, // 1 and higher
+ "noiseAmount" : 30, // 0 and higher
"noiseType" : "mono", // mono or color
- "tintColor" : "#00F", // any hex color
+ "posterizeAmount" : 5, // 0 - 255, though 0 and 1 are relatively useless
+ "posterizeOpacity" : 1, // between 0 and 1
+ "sepiaOpacity" : 1, // between 0 and 1
+ "tintColor" : "#FFF", // any hex color
+ "tintOpacity" : 0.3, // between 0 and 1
"matrixAmount" : 0.2 // between 0 and 1
};
@@ -178,8 +183,8 @@ function addFilter(filterType, buffer, c) {
params['tintColor'] = ref.getAttribute("data-pb-tint-colour") || params['tintColor'];
// Posterize requires a couple more generated values, lets keep them out of the loop
- params['posterizeAreas'] = 256 / params.amount;
- params['posterizeValues'] = 255 / (params.amount - 1);
+ params['posterizeAreas'] = 256 / params.posterizeAmount;
+ params['posterizeValues'] = 255 / (params.posterizeAmount - 1);
return(params);
}
@@ -254,13 +259,15 @@ function addFilter(filterType, buffer, c) {
case "filter-greyscale":
val = (thisPixel.r * 0.21) + (thisPixel.g * 0.71) + (thisPixel.b * 0.07);
data = setRGB(data, index,
- findColorDifference(params.opacity, val, thisPixel.r),
- findColorDifference(params.opacity, val, thisPixel.g),
- findColorDifference(params.opacity, val, thisPixel.b));
+ findColorDifference(params.greyscaleOpacity, val, thisPixel.r),
+ findColorDifference(params.greyscaleOpacity, val, thisPixel.g),
+ findColorDifference(params.greyscaleOpacity, val, thisPixel.b));
break;
case "filter-mosaic":
/*
+ // faster, but buggy, hence the expansion below as I figure this out
+
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;
@@ -277,13 +284,13 @@ function addFilter(filterType, buffer, c) {
data = setRGB(data, index,
- findColorDifference(params.opacity, data[pos], thisPixel.r),
- findColorDifference(params.opacity, data[pos + 1], thisPixel.g),
- findColorDifference(params.opacity, data[pos + 2], thisPixel.b));
+ findColorDifference(params.mosaicOpacity, data[pos], thisPixel.r),
+ findColorDifference(params.mosaicOpacity, data[pos + 1], thisPixel.g),
+ findColorDifference(params.mosaicOpacity, data[pos + 2], thisPixel.b));
break;
case "filter-noise":
- val = noise(params.amount);
+ val = noise(params.noiseAmount);
if ((params.noiseType == "mono") || (params.noiseType == "monochrome")) {
data = setRGB(data, index,
@@ -292,31 +299,31 @@ function addFilter(filterType, buffer, c) {
checkRGBBoundary(thisPixel.b + val));
} else {
data = setRGB(data, index,
- checkRGBBoundary(thisPixel.r + noise(params.amount)),
- checkRGBBoundary(thisPixel.g + noise(params.amount)),
- checkRGBBoundary(thisPixel.b + noise(params.amount)));
+ checkRGBBoundary(thisPixel.r + noise(params.noiseAmount)),
+ checkRGBBoundary(thisPixel.g + noise(params.noiseAmount)),
+ checkRGBBoundary(thisPixel.b + noise(params.noiseAmount)));
}
break;
case "filter-posterize":
data = setRGB(data, index,
- findColorDifference(params.opacity, parseInt(params.posterizeValues * parseInt(thisPixel.r / params.posterizeAreas)), thisPixel.r),
- findColorDifference(params.opacity, parseInt(params.posterizeValues * parseInt(thisPixel.g / params.posterizeAreas)), thisPixel.g),
- findColorDifference(params.opacity, parseInt(params.posterizeValues * parseInt(thisPixel.b / params.posterizeAreas)), thisPixel.b));
+ findColorDifference(params.posterizeOpacity, parseInt(params.posterizeValues * parseInt(thisPixel.r / params.posterizeAreas)), thisPixel.r),
+ findColorDifference(params.posterizeOpacity, parseInt(params.posterizeValues * parseInt(thisPixel.g / params.posterizeAreas)), thisPixel.g),
+ findColorDifference(params.posterizeOpacity, parseInt(params.posterizeValues * parseInt(thisPixel.b / params.posterizeAreas)), thisPixel.b));
break;
case "filter-sepia":
data = setRGB(data, index,
- findColorDifference(params.opacity, (thisPixel.r * 0.393) + (thisPixel.g * 0.769) + (thisPixel.b * 0.189), thisPixel.r),
- findColorDifference(params.opacity, (thisPixel.r * 0.349) + (thisPixel.g * 0.686) + (thisPixel.b * 0.168), thisPixel.g),
- findColorDifference(params.opacity, (thisPixel.r * 0.272) + (thisPixel.g * 0.534) + (thisPixel.b * 0.131), thisPixel.b));
+ findColorDifference(params.sepiaOpacity, (thisPixel.r * 0.393) + (thisPixel.g * 0.769) + (thisPixel.b * 0.189), thisPixel.r),
+ findColorDifference(params.sepiaOpacity, (thisPixel.r * 0.349) + (thisPixel.g * 0.686) + (thisPixel.b * 0.168), thisPixel.g),
+ findColorDifference(params.sepiaOpacity, (thisPixel.r * 0.272) + (thisPixel.g * 0.534) + (thisPixel.b * 0.131), thisPixel.b));
break;
case "filter-tint":
data = setRGB(data, index,
- findColorDifference(params.opacity, dest.r, thisPixel.r),
- findColorDifference(params.opacity, dest.g, thisPixel.g),
- findColorDifference(params.opacity, dest.b, thisPixel.b));
+ findColorDifference(params.tintOpacity, dest.r, thisPixel.r),
+ findColorDifference(params.tintOpacity, dest.g, thisPixel.g),
+ findColorDifference(params.tintOpacity, dest.b, thisPixel.b));
break;
View
24 demo/script/playground.js
@@ -15,30 +15,6 @@
-
-/*
-
-
-SCRATCH LIST
-
-
-- destroy current original when changing between images / filters
- -- check
-
-
-- kill filter class in HTML, re-add dynamically, update between filter switches
- -- sorta, needs work (toggle doesn't update, apply button)
-
-
-- after any processFilters call, add the img src to the parent as css background image
-
-
-
-
-*/
-
-
-
// filter master control object
var filterControl = {
"filters" : [
View
38 demo/timed.html
@@ -78,34 +78,34 @@
</li>
<li>
<div class="bee filter-sepia"
- data-pb-opacity="0.5">
+ data-pb-sepia-opacity="0.5">
<p>Sepia tone: Opacity 0.5 (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-greyscale"
- data-pb-opacity="0.5">
+ data-pb-greyscale-opacity="0.5">
<p>Greyscale: Opacity 0.5 (CSS Background)</p>
</div>
</li>
</ul>
<ul>
<li>
<div class="bee filter-tint"
- data-pb-opacity="0.2"
+ data-pb-tint-opacity="0.2"
data-pb-tint-color="#f0c">
<p>Tint: Opacity 0.2, Color #FF00CC (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-blur"
- data-pb-amount="3">
+ data-pb-blur-amount="3">
<p>Blur: Amount 3 (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-noise"
- data-pb-amount="30"
+ data-pb-blur-amount="30"
data-pb-noise-type="monochrome">
<p>Noise: Amount 30, Type monochrome (CSS Background)</p>
</div>
@@ -114,15 +114,15 @@
<ul>
<li>
<div class="bee filter-posterize"
- data-pb-amount="10"
- data-pb-opacity="0.8">
+ data-pb-posterize-amount="10"
+ data-pb-posterize-opacity="0.8">
<p>Posterize: Amount 10, Opacity 0.8 (CSS Background)</p>
</div>
</li>
<li>
<div class="bee filter-mosaic"
data-pb-mosaic-size="10"
- data-pb-opacity="0.5">
+ data-pb-mosaic-opacity="0.5">
<p>Mosaic: Opacity 0.5, Size 10 (CSS Background)</p>
</div>
</li>
@@ -139,15 +139,15 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-sepia"
- data-pb-opacity="0.7"
+ data-pb-sepia-opacity="0.7"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Sepia tone: Opacity 0.7 (img)</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/240/road.jpg" class="filter-greyscale"
- data-pb-opacity="0.8"
+ data-pb-greyscale-opacity="0.8"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Greyscale: Opacity 0.8 (img)</figcaption>
</figure>
@@ -157,7 +157,7 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-tint"
- data-pb-opacity="0.5"
+ data-pb-tint-opacity="0.5"
data-pb-tint-color="#009900"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Tint: Opacity 0.5, Color #090 (img)</figcaption>
@@ -166,15 +166,15 @@
<li>
<figure>
<img src="images/240/road.jpg" class="filter-blur"
- data-pb-amount="0.4"
+ data-pb-blur-amount="0.4"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Blur: Amount 0.4 (img)</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/240/road.jpg" class="filter-noise"
- data-pb-amount="200"
+ data-pb-noise-amount="200"
data-pb-noise-type="colour"
width="240" height="160" alt="West Coast roads, New Zealand">
<figcaption>Noise: Amount 200, Type color (img)</figcaption>
@@ -210,34 +210,34 @@
</li>
<li>
<div class="stones filter-sepia"
- data-pb-opacity="2">
+ data-pb-sepia-opacity="2">
<p>Sepia tone: Opacity 2 (CSS Background)</p>
</div>
</li>
<li>
<div class="stones filter-greyscale"
- data-pb-opacity="-2">
+ data-pb-greyscale-opacity="-2">
<p>Greyscale: Opacity -2 (saturation hack) (CSS Background)</p>
</div>
</li>
</ul>
<ul>
<li>
<div class="stones filter-tint"
- data-pb-opacity="0.4"
+ data-pb-tint-opacity="0.4"
data-pb-tint-color="#06F">
<p>Tint: Opacity 0.4, Color #06F (CSS Background)</p>
</div>
</li>
<li>
<div class="stones filter-blur"
- data-pb-amount="10">
+ data-pb-blur-amount="10">
<p>Blur: Amount 10 (CSS Background)</p>
</div>
</li>
<li>
<div class="stones filter-noise"
- data-pb-amount="150"
+ data-pb-noise-amount="150"
data-pb-noise-type="mono">
<p>Noise: Amount 150, Type mono (CSS Background)</p>
</div>
@@ -246,7 +246,7 @@
<ul>
<li>
<div class="stones filter-posterize"
- data-pb-amount="8">
+ data-pb-posterize-amount="8">
<p>Posterize: Amount 8 (CSS Background)</p>
</div>
</li>
View
2 demo/torture-test.html
@@ -212,7 +212,7 @@
<li>
<figure>
<img src="images/1024/sign.jpg" width="240" height="160" class="filter-tint" data-pb-tint-amount="0.5" data-pb-tint-colour="#009900" alt="torture">
- <figcaption>1024x683 squished + blur</figcaption>
+ <figcaption>1024x683 squished + tint</figcaption>
</figure>
</li>
<li>

0 comments on commit 0ddf2c2

Please sign in to comment.
Something went wrong with that request. Please try again.