From 30fc8dbe668fe3601bc0c42718d3b92c35d8f568 Mon Sep 17 00:00:00 2001
From: Alan Hogan <contact@alanhogan.com>
Date: Tue, 30 Aug 2011 22:28:14 -0700
Subject: [PATCH 1/5] Introduce monochromatic noise generation & add
 documentation, credit to readme.

---
 License.md | 13 ++++++++++++-
 ReadMe.md  |  4 +++-
 noisy.js   | 20 +++++++++++++++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/License.md b/License.md
index 882a7fb..8d0a50b 100644
--- a/License.md
+++ b/License.md
@@ -1,6 +1,8 @@
-jQuery-Noise Plugin Originally Written By the Forrst Users @dhotson & @ajcates.
+jQuery-Noise Plugin Originally Written By the Forrst Users @dhotson & @ajcates. 
 ===============================================================================
 
+Monochromatic option contributed by Alan Hogan.
+
 Authors:
 --------
 
@@ -26,6 +28,15 @@ Authors:
 	- Tumblr
 	:	http://ajcates.tumblr.com
 	
+@alanhogan
+:	"Alan Hogan"
+	- Email
+	:	contact@alanhogan.com
+	- Twitter
+	:	@alanhogan
+	- Web
+	:	http://alanhogan.com/
+	
 
 License:
 --------
diff --git a/ReadMe.md b/ReadMe.md
index 1b3ab9d..a9f573a 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -1,6 +1,6 @@
 jQuery-Noise Plugin
 ===================
-Written By the [Forrst](http://forrst.com) Users [@dhotson](http://forrst.com/people/dhotson) & [@ajcates](http://forrest.com/people/ajcates).
+Written By the [Forrst](http://forrst.com) Users [@dhotson](http://forrst.com/people/dhotson) & [@ajcates](http://forrest.com/people/ajcates); contributor: [Alan Hogan](http://alanhogan.com/)
 ----------------------------------------------------------------------------------------------------------------------------------------------
 
 This plugin will insert a semi transparent noise image into your elements `background-images`. The image is generated using canvas then exported out with `toDataURL()`.
@@ -23,6 +23,8 @@ Parameters:
 :	Takes a number between .0 and 1 and draws out the noise at that opacity.
 - color
 :	Used for tinting the noise a certain color. Takes a string formatted like "rgb(255,255,255)" or a function that returns a string like that. By default this returns the items current `background-color`.
+- monochromatic
+:	Whether the generated noise should be monochromatic (`true`) or not. If `false`, the red, green, and blue channels are randomized independently. Default: `false`.
 - amount
 :	A number usually around 70 that adds some brightness to the colors so they aren't all dark.
 - width
diff --git a/noisy.js b/noisy.js
index 66429e0..f00b62c 100644
--- a/noisy.js
+++ b/noisy.js
@@ -6,9 +6,25 @@
 					opacity : .05,
 					width : 20,
 					amount : 70,
+					monochromatic : false,
 					color: function() {
 						return this.caller.css("background-color");
 					},
+					randCtr: 1,
+					lastRand: 0.0,
+					rand: function() {
+					  if (this.monochromatic) {
+					    this.randCtr--; 
+  					  if (!this.randCtr) {
+					      this.randCtr += 3;
+					      return (this.lastRand = Math.random());
+  					  } else {
+  					    return this.lastRand;
+  					  }
+					  } else {
+					    return Math.random();
+					  }
+					},
 					bringNoise : function() {
 						var x, y,
 			            	canvas = $("<canvas>", {width: this.width, height:this.width })[0],
@@ -18,7 +34,9 @@
 						for (x=0; x<canvas.width; x += 1) {
 							for (y=0; y<canvas.height; y += 1) {
 								ctx.fillStyle = "rgba(" + [
-									Math.floor(Math.random() * r + this.amount), Math.floor(Math.random() * g + this.amount), Math.floor(Math.random() * b + this.amount),
+									Math.floor(this.rand() * r + this.amount), 
+									Math.floor(this.rand() * g + this.amount), 
+									Math.floor(this.rand() * b + this.amount),
 									this.opacity
 								].join(",") + ")";
 								ctx.fillRect(x, y, 1, 1);

From 03ccd9106c50b92758d03d5e3f11b6f353db40a8 Mon Sep 17 00:00:00 2001
From: Alan Hogan <contact@alanhogan.com>
Date: Wed, 31 Aug 2011 02:00:47 -0700
Subject: [PATCH 2/5] Demo

---
 ReadMe.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ReadMe.md b/ReadMe.md
index a9f573a..a4502c2 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -5,6 +5,11 @@ Written By the [Forrst](http://forrst.com) Users [@dhotson](http://forrst.com/pe
 
 This plugin will insert a semi transparent noise image into your elements `background-images`. The image is generated using canvas then exported out with `toDataURL()`.
 
+Demo:
+-----
+
+There is a [demo on jsFiddle here](http://jsfiddle.net/aYQFD/). 
+
 How to use:
 -----------
 

From d1cc606c5811d6a309781dd3744c4ac3052ac8b2 Mon Sep 17 00:00:00 2001
From: ajcates <aj@ajcates.com>
Date: Fri, 10 Feb 2012 22:43:41 -0800
Subject: [PATCH 3/5] Made a Demo.html file

---
 Demo.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 Demo.html

diff --git a/Demo.html b/Demo.html
new file mode 100644
index 0000000..f6c0c48
--- /dev/null
+++ b/Demo.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>jQuery Noisy Plugin Demo</title>
+	<meta name="description" content="A demo of the noisy jQuery plugin.">
+	<style type="text/css" media="screen">
+		.noise {
+			width: 250px;
+			height: 250px;
+			background: #999;
+			margin: 12px;
+			float: left;
+			padding: 12px;
+		}
+		code {
+			white-space: pre;
+		}
+		footer {
+			clear: both;
+		}
+	</style>
+</head>
+<body>
+	<header>
+		<h1>jQuery Noisy Plugin Demo</h1>
+		<h3><a href="https://github.com/ajcates/jQuery-Noise">Fork on github</a> and <a href="http://forrst.com/posts/Improved_jQuery_Noise_Plugin-7Nk">like on Forrst</a>.</h3>
+	</header>
+	<div role="main">
+		<div id="default" class="noise">
+			<code>$("#default").noisy();</code>
+		</div>
+		<div id="opacity" class="noise">
+			<code>$("#opacity").noisy({
+	opacity : .1
+});</code>
+		</div>
+		<div id="color" class="noise">
+			<code>$("#color").noisy({
+	color : 'rgb(250, 20, 20)'
+});</code>
+		</div>
+		<div id="monochromatic" class="noise">
+			<code>$("#monochromatic").noisy({
+	monochromatic : true
+});</code>
+		</div>
+		<div id="amount" class="noise">
+			<code>$("#amount").noisy({
+	amount : 120
+});</code>
+		</div>
+		<div id="multiple" class="noise">
+			<code>$("#multiple").noisy({
+	opacity : .3,
+	color: 'rgb(40, 200, 40)',
+	monochromatic: false,
+	amount: 100
+});</code>
+		</div>
+	</div>
+	<footer>
+		<p>Created by: <a href="http://ajcates.com">ajcates</a>, <a href="http://dhotson.tumblr.com/">dhouston</a>, &amp; <a href="http://alanhogan.com/">alanhogan</a>. MIT Licensed, see <a href="License.md">License.md</a> for more info.</p>
+	</footer>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="noisy.js"></script>
+	<script>
+		$(function() {
+			$("#default").noisy();
+			$("#opacity").noisy({
+				opacity : .1
+			});
+			$("#color").noisy({
+				color : 'rgb(250, 20, 20)'
+			});
+			$("#monochromatic").noisy({
+				monochromatic : true
+			});
+			$("#amount").noisy({
+				amount : 140
+			});
+			$("#multiple").noisy({
+				opacity : .3,
+				color: 'rgb(40, 200, 40)',
+				monochromatic: false,
+				amount: 100
+			});
+		})
+	</script>
+</body>
+</html>
\ No newline at end of file

From 7a3a46d3dedfbf022dbb3fe5d637f317d2485fd4 Mon Sep 17 00:00:00 2001
From: ajcates <aj@ajcates.com>
Date: Fri, 10 Feb 2012 22:45:12 -0800
Subject: [PATCH 4/5] changed the amount property to brightness

---
 Demo.html | 14 +++++++-------
 ReadMe.md |  2 +-
 noisy.js  |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/Demo.html b/Demo.html
index f6c0c48..42d9190 100644
--- a/Demo.html
+++ b/Demo.html
@@ -46,9 +46,9 @@ <h3><a href="https://github.com/ajcates/jQuery-Noise">Fork on github</a> and <a
 	monochromatic : true
 });</code>
 		</div>
-		<div id="amount" class="noise">
-			<code>$("#amount").noisy({
-	amount : 120
+		<div id="brightness" class="noise">
+			<code>$("#brightness").noisy({
+	brightness : 120
 });</code>
 		</div>
 		<div id="multiple" class="noise">
@@ -56,7 +56,7 @@ <h3><a href="https://github.com/ajcates/jQuery-Noise">Fork on github</a> and <a
 	opacity : .3,
 	color: 'rgb(40, 200, 40)',
 	monochromatic: false,
-	amount: 100
+	brightness: 100
 });</code>
 		</div>
 	</div>
@@ -77,14 +77,14 @@ <h3><a href="https://github.com/ajcates/jQuery-Noise">Fork on github</a> and <a
 			$("#monochromatic").noisy({
 				monochromatic : true
 			});
-			$("#amount").noisy({
-				amount : 140
+			$("#brightness").noisy({
+				brightness : 140
 			});
 			$("#multiple").noisy({
 				opacity : .3,
 				color: 'rgb(40, 200, 40)',
 				monochromatic: false,
-				amount: 100
+				brightness: 100
 			});
 		})
 	</script>
diff --git a/ReadMe.md b/ReadMe.md
index a4502c2..23f981b 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -30,7 +30,7 @@ Parameters:
 :	Used for tinting the noise a certain color. Takes a string formatted like "rgb(255,255,255)" or a function that returns a string like that. By default this returns the items current `background-color`.
 - monochromatic
 :	Whether the generated noise should be monochromatic (`true`) or not. If `false`, the red, green, and blue channels are randomized independently. Default: `false`.
-- amount
+- brightness
 :	A number usually around 70 that adds some brightness to the colors so they aren't all dark.
 - width
 :	How wide you want the `background-image` tile set at. If your noise looks to uniform make this number bigger.
diff --git a/noisy.js b/noisy.js
index f00b62c..3943de6 100644
--- a/noisy.js
+++ b/noisy.js
@@ -5,7 +5,7 @@
 				noiseMaker : $.extend({
 					opacity : .05,
 					width : 20,
-					amount : 70,
+					brightness : 70,
 					monochromatic : false,
 					color: function() {
 						return this.caller.css("background-color");
@@ -34,9 +34,9 @@
 						for (x=0; x<canvas.width; x += 1) {
 							for (y=0; y<canvas.height; y += 1) {
 								ctx.fillStyle = "rgba(" + [
-									Math.floor(this.rand() * r + this.amount), 
-									Math.floor(this.rand() * g + this.amount), 
-									Math.floor(this.rand() * b + this.amount),
+									Math.floor(this.rand() * r + this.brightness), 
+									Math.floor(this.rand() * g + this.brightness), 
+									Math.floor(this.rand() * b + this.brightness),
 									this.opacity
 								].join(",") + ")";
 								ctx.fillRect(x, y, 1, 1);

From e979b87867214de3278c9d53a81b23232de1cc32 Mon Sep 17 00:00:00 2001
From: ajcates <aj@ajcates.com>
Date: Fri, 10 Feb 2012 23:56:32 -0800
Subject: [PATCH 5/5] switched the way monochromatic works, also fixed the
 orange tinting bug

---
 Demo.html | 11 +++++----
 ReadMe.md |  2 +-
 noisy.js  | 71 +++++++++++++++++++++++++++++--------------------------
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/Demo.html b/Demo.html
index 42d9190..c2ad5f0 100644
--- a/Demo.html
+++ b/Demo.html
@@ -7,9 +7,9 @@
 	<meta name="description" content="A demo of the noisy jQuery plugin.">
 	<style type="text/css" media="screen">
 		.noise {
-			width: 250px;
+			width: 300px;
 			height: 250px;
-			background: #999;
+			background-color: #999;
 			margin: 12px;
 			float: left;
 			padding: 12px;
@@ -33,7 +33,7 @@ <h3><a href="https://github.com/ajcates/jQuery-Noise">Fork on github</a> and <a
 		</div>
 		<div id="opacity" class="noise">
 			<code>$("#opacity").noisy({
-	opacity : .1
+	opacity : .5
 });</code>
 		</div>
 		<div id="color" class="noise">
@@ -61,15 +61,16 @@ <h3><a href="https://github.com/ajcates/jQuery-Noise">Fork on github</a> and <a
 		</div>
 	</div>
 	<footer>
-		<p>Created by: <a href="http://ajcates.com">ajcates</a>, <a href="http://dhotson.tumblr.com/">dhouston</a>, &amp; <a href="http://alanhogan.com/">alanhogan</a>. MIT Licensed, see <a href="License.md">License.md</a> for more info.</p>
+		<p>Created by: <a href="http://ajcates.com">ajcates</a>, <a href="http://dhotson.tumblr.com/">dhouston</a>, &amp; <a href="http://alanhogan.com/">alanhogan</a>. MIT Licensed please see <a href="License.md">License.md</a> for more info.</p>
 	</footer>
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 	<script src="noisy.js"></script>
 	<script>
 		$(function() {
+			console.log($("#default")[0].style.backgroundColor);
 			$("#default").noisy();
 			$("#opacity").noisy({
-				opacity : .1
+				opacity : .5
 			});
 			$("#color").noisy({
 				color : 'rgb(250, 20, 20)'
diff --git a/ReadMe.md b/ReadMe.md
index 23f981b..bbde80e 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -8,7 +8,7 @@ This plugin will insert a semi transparent noise image into your elements `backg
 Demo:
 -----
 
-There is a [demo on jsFiddle here](http://jsfiddle.net/aYQFD/). 
+There is a Demo.html file provided as well as a [demo on jsFiddle here](http://jsfiddle.net/aYQFD/).
 
 How to use:
 -----------
diff --git a/noisy.js b/noisy.js
index 3943de6..a07b781 100644
--- a/noisy.js
+++ b/noisy.js
@@ -3,53 +3,58 @@
 		noisy : function(params) {
 			return $.extend({
 				noiseMaker : $.extend({
-					opacity : .05,
+					opacity : .1,
 					width : 20,
 					brightness : 70,
 					monochromatic : false,
 					color: function() {
 						return this.caller.css("background-color");
 					},
-					randCtr: 1,
-					lastRand: 0.0,
-					rand: function() {
-					  if (this.monochromatic) {
-					    this.randCtr--; 
-  					  if (!this.randCtr) {
-					      this.randCtr += 3;
-					      return (this.lastRand = Math.random());
-  					  } else {
-  					    return this.lastRand;
-  					  }
-					  } else {
-					    return Math.random();
-					  }
-					},
 					bringNoise : function() {
 						var x, y,
 			            	canvas = $("<canvas>", {width: this.width, height:this.width })[0],
 			            	ctx = canvas.getContext("2d"),
-			            	colorArr = (typeof(this.color) == "function" ?  this.color() : this.color).split(","),
-			            	r = colorArr[0].replace("rgb(","").trim(), g = colorArr[1].trim(), b = colorArr[2].replace(")","").trim();
-						for (x=0; x<canvas.width; x += 1) {
-							for (y=0; y<canvas.height; y += 1) {
-								ctx.fillStyle = "rgba(" + [
-									Math.floor(this.rand() * r + this.brightness), 
-									Math.floor(this.rand() * g + this.brightness), 
-									Math.floor(this.rand() * b + this.brightness),
-									this.opacity
-								].join(",") + ")";
-								ctx.fillRect(x, y, 1, 1);
-							}
-			            }
+			            	colorArr = ($.isFunction(this.color) ?  this.color() : this.color).replace(/(rgb\(|rgba\(|\))/gi, "").split(",").map($.trim),
+			            	r = colorArr[0], g = colorArr[1], b = colorArr[2];
+			            	console.log(colorArr);
+			            if (this.monochromatic) {
+				         	for (x=0; x<canvas.width; x += 1) {
+				         	   	for (y=0; y<canvas.height; y += 1) {
+					         	   	rand = Math.random();
+				         	   		ctx.fillStyle = "rgba(" + [
+				         	   			Math.floor(rand * r + this.brightness), 
+				         	   			Math.floor(rand * g + this.brightness), 
+				         	   			Math.floor(rand * b + this.brightness),
+				         	   			this.opacity
+				         	   		].join(",") + ")";
+				         	   		ctx.fillRect(x, y, 1, 1);
+				         	   	}
+				         	}   
+				        } else {
+					        for (x=0; x<canvas.width; x += 1) {
+						        for (y=0; y<canvas.height; y += 1) {
+						        	ctx.fillStyle = "rgba(" + [
+						        		Math.floor(Math.random() * r + this.brightness), 
+						        		Math.floor(Math.random() * g + this.brightness), 
+						        		Math.floor(Math.random() * b + this.brightness),
+						        		this.opacity
+						        	].join(",") + ")";
+						        	ctx.fillRect(x, y, 1, 1);
+						        }
+						    }
+				        }
 			            return canvas.toDataURL("image/png");
 					},
 					go : function(caller) {
 						this.caller = caller;
-			            var noise = this.bringNoise();
-			            return caller.css("background-image", function(i, val) {
-			            	return "url("+noise+")" + ", " + val;
-			            });
+						if("HTMLCanvasElement" in window) {
+							var noise = this.bringNoise();
+							return caller.css("background-image", function(i, val) {
+								return "url("+noise+")" + ", " + val;
+							});
+						} else {
+							return caller.css("background-image");
+						}
 					}
 				}, params)
 			}).noiseMaker.go(this);