Permalink
Browse files

New Posterize filter; fixed noise; full multiple filter support; and …

…a version bump, to 0.2
  • Loading branch information...
1 parent e8f1495 commit 49bf94062ac5e268e5ff5e0e19eca1d6555c9c6e @mezzoblue committed Aug 24, 2010
View
@@ -5,7 +5,7 @@
<meta charset="utf-8" />
<script type="text/javascript" src="script/common.js"></script>
- <script type="text/javascript" src="script/paintbrush-0.1.js"></script>
+ <script type="text/javascript" src="script/paintbrush-0.2.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
@@ -37,7 +37,7 @@
<li>
<figure>
<img src="images/240-lighthouse.jpg" class="filter-tint" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Tint filter, default (img)</figcaption>
+ <figcaption>Tint, default (img)</figcaption>
</figure>
</li>
<li>
@@ -52,7 +52,15 @@
<figcaption>Noise, default (img)</figcaption>
</figure>
</li>
- </ul>
+ </ul>
+ <ul>
+ <li>
+ <figure>
+ <img src="images/240-lighthouse.jpg" class="filter-posterize" width="240" height="160" alt="Point Atkinson Lighthouse">
+ <figcaption>Posterize, default (img)</figcaption>
+ </figure>
+ </li>
+ </ul>
<ul class="odd">
@@ -79,7 +87,7 @@
<div class="bee filter-tint"
data-pb-tint-amount="0.2"
data-pb-tint-color="#f0c">
- <p>Tint filter: Amount 0.2, Color #FF00CC (CSS Background)</p>
+ <p>Tint: Amount 0.2, Color #FF00CC (CSS Background)</p>
</div>
</li>
<li>
@@ -95,7 +103,15 @@
<p>Noise: Amount 30, Type monochrome (CSS Background)</p>
</div>
</li>
- </ul>
+ </ul>
+ <ul>
+ <li>
+ <div class="bee filter-posterize"
+ data-pb-posterize-amount="10">
+ <p>Posterize: Amount 10 (CSS Background)</p>
+ </div>
+ </li>
+ </ul>
<ul class="odd">
<li>
@@ -128,7 +144,7 @@
data-pb-tint-amount="0.5"
data-pb-tint-color="#009900"
width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Tint filter: Amount 0.5, Color #090 (img)</figcaption>
+ <figcaption>Tint: Amount 0.5, Color #090 (img)</figcaption>
</figure>
</li>
<li>
@@ -148,7 +164,17 @@
<figcaption>Noise: Amount 200, Type color (img)</figcaption>
</figure>
</li>
- </ul>
+ </ul>
+ <ul>
+ <li>
+ <figure>
+ <img src="images/240-road.jpg" class="filter-posterize"
+ data-pb-posterize-amount="3"
+ width="240" height="160" alt="West Coast roads, New Zealand">
+ <figcaption>Posterize: Amount 3 (img)</figcaption>
+ </figure>
+ </li>
+ </ul>
<ul class="odd">
<li>
@@ -174,7 +200,7 @@
<div class="stones filter-tint"
data-pb-tint-amount="0.4"
data-pb-tint-color="#06F">
- <p>Tint filter: Amount 0.4, Color #06F (CSS Background)</p>
+ <p>Tint: Amount 0.4, Color #06F (CSS Background)</p>
</div>
</li>
<li>
@@ -191,6 +217,14 @@
</div>
</li>
</ul>
+ <ul>
+ <li>
+ <div class="stones filter-posterize"
+ data-pb-posterize-amount="8">
+ <p>Posterize: Amount 8 (CSS Background)</p>
+ </div>
+ </li>
+ </ul>
<p id="copyright">&copy; Copyright 2010, Dave Shea. <a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS lives on GitHub.</a> <a href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed.</a></p>
@@ -1,6 +1,6 @@
// --------------------------------------------------
//
-// paintbrush.js, v0.1
+// paintbrush.js, v0.2
// A browser-based image processing library for HTML5 canvas
// Developed by Dave Shea, http://www.mezzoblue.com/
//
@@ -28,12 +28,10 @@ addLoadEvent(function() {
// you can add or remove lines here, depending on which filters you're using.
addFilter("filter-blur");
addFilter("filter-greyscale");
+ addFilter("filter-noise");
+ addFilter("filter-posterize");
addFilter("filter-sepia");
addFilter("filter-tint");
-
- // if noise comes last, it seems all combinations work. if it doesn't, others fail. I don't get why.
- // (try placing this above the others and check the torture test; sepia, tint and greyscale fail.)
- addFilter("filter-noise");
}
// only use this if you're going to time the script, otherwise you can safely delete the next three lines
@@ -98,7 +96,6 @@ function addFilter(filterType) {
dest = {r: ((src & 0xFF0000) >> 16), g: ((src & 0x00FF00) >> 8), b: (src & 0x0000FF)};
}
-
// 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)
@@ -167,6 +164,7 @@ function addFilter(filterType) {
"greyscaleAmount" : 1, // between 0 and 1
"noiseAmount" : 30, // 0 and higher
"noiseType" : "mono", // mono or color
+ "posterizeAmount" : 5, // 0 - 255, though 0 and 1 are relatively useless
"sepiaAmount" : 1, // between 0 and 1
"tintAmount" : 0.3, // between 0 and 1
"tintColor" : "#FFF" // any hex color
@@ -187,6 +185,10 @@ function addFilter(filterType) {
// O Canada, I got your back. (And UK, AU, NZ, IE, etc.)
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.posterizeAmount;
+ params['posterizeValues'] = 255 / (params.posterizeAmount - 1);
+
return(params);
}
@@ -271,40 +273,60 @@ function addFilter(filterType) {
case "filter-noise":
val = noise(params.noiseAmount);
+
if ((params.noiseType == "mono") || (params.noiseType == "monochrome")) {
data = setRGB(data, index,
- thisPixel.r + val,
- thisPixel.g + val,
- thisPixel.b + val);
+ checkRGBBoundary(thisPixel.r + val),
+ checkRGBBoundary(thisPixel.g + val),
+ checkRGBBoundary(thisPixel.b + val));
} else {
data = setRGB(data, index,
- thisPixel.r + noise(params.noiseAmount),
- thisPixel.g + noise(params.noiseAmount),
- thisPixel.b + noise(params.noiseAmount));
+ checkRGBBoundary(thisPixel.r + noise(params.noiseAmount)),
+ checkRGBBoundary(thisPixel.g + noise(params.noiseAmount)),
+ checkRGBBoundary(thisPixel.b + noise(params.noiseAmount)));
}
break;
-
- case "filter-tint":
+
+ case "filter-posterize":
data = setRGB(data, index,
- findColorDifference(params.tintAmount, dest.r, thisPixel.r),
- findColorDifference(params.tintAmount, dest.g, thisPixel.g),
- findColorDifference(params.tintAmount, dest.b, thisPixel.b));
+ parseInt(params.posterizeValues * parseInt(thisPixel.r / params.posterizeAreas)),
+ parseInt(params.posterizeValues * parseInt(thisPixel.g / params.posterizeAreas)),
+ parseInt(params.posterizeValues * parseInt(thisPixel.b / params.posterizeAreas)));
break;
-
+
case "filter-sepia":
data = setRGB(data, index,
findColorDifference(params.sepiaAmount, (thisPixel.r * 0.393) + (thisPixel.g * 0.769) + (thisPixel.b * 0.189), thisPixel.r),
findColorDifference(params.sepiaAmount, (thisPixel.r * 0.349) + (thisPixel.g * 0.686) + (thisPixel.b * 0.168), thisPixel.g),
findColorDifference(params.sepiaAmount, (thisPixel.r * 0.272) + (thisPixel.g * 0.534) + (thisPixel.b * 0.131), thisPixel.b));
break;
+
+ case "filter-tint":
+ data = setRGB(data, index,
+ findColorDifference(params.tintAmount, dest.r, thisPixel.r),
+ findColorDifference(params.tintAmount, dest.g, thisPixel.g),
+ findColorDifference(params.tintAmount, dest.b, thisPixel.b));
+ break;
+
}
return(pixels);
}
// calculate random noise. different every time!
function noise(noiseValue) {
- return Math.floor((Math.random() * noiseValue / 2) - noiseValue / 2);
+ return Math.floor(noiseValue / 2 - (Math.random() * noiseValue));
+ }
+
+ // ensure an RGB value isn't negative / over 255
+ function checkRGBBoundary(val) {
+ if (val < 0) {
+ return 0;
+ } else if (val > 255) {
+ return 255;
+ } else {
+ return val;
+ }
}
}
View
@@ -6,7 +6,7 @@
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/timing.js"></script>
- <script type="text/javascript" src="script/paintbrush-0.1.js"></script>
+ <script type="text/javascript" src="script/paintbrush-0.2.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
@@ -54,6 +54,14 @@
</figure>
</li>
</ul>
+ <ul>
+ <li>
+ <figure>
+ <img src="images/240-lighthouse.jpg" class="filter-posterize" width="240" height="160" alt="Point Atkinson Lighthouse">
+ <figcaption>Posterize, default (img)</figcaption>
+ </figure>
+ </li>
+ </ul>
<ul class="odd">
@@ -96,7 +104,15 @@
<p>Noise: Amount 30, Type monochrome (CSS Background)</p>
</div>
</li>
- </ul>
+ </ul>
+ <ul>
+ <li>
+ <div class="bee filter-posterize"
+ data-pb-posterize-amount="10">
+ <p>Posterize: Amount 10 (CSS Background)</p>
+ </div>
+ </li>
+ </ul>
<ul class="odd">
<li>
@@ -150,6 +166,16 @@
</figure>
</li>
</ul>
+ <ul>
+ <li>
+ <figure>
+ <img src="images/240-road.jpg" class="filter-posterize"
+ data-pb-posterize-amount="3"
+ width="240" height="160" alt="West Coast roads, New Zealand">
+ <figcaption>Posterize: Amount 3 (img)</figcaption>
+ </figure>
+ </li>
+ </ul>
<ul class="odd">
<li>
@@ -192,6 +218,14 @@
</div>
</li>
</ul>
+ <ul>
+ <li>
+ <div class="stones filter-posterize"
+ data-pb-posterize-amount="8">
+ <p>Posterize: Amount 8 (CSS Background)</p>
+ </div>
+ </li>
+ </ul>
<p id="copyright">&copy; Copyright 2010, Dave Shea. <a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS lives on GitHub.</a> <a href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed.</a></p>
View
@@ -6,7 +6,7 @@
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/timing.js"></script>
- <script type="text/javascript" src="script/paintbrush-0.1.js"></script>
+ <script type="text/javascript" src="script/paintbrush-0.2.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Oops, something went wrong.

0 comments on commit 49bf940

Please sign in to comment.