Added greyscale filter.

LawnGnome · Jan 16, 2010 · d3620e2 · d3620e2
1 parent b9af438
commit d3620e2
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 3 deletions.
diff --git a/Makefile b/Makefile
@@ -12,7 +12,7 @@ lint:	dist/cine.js
 dist:
 	test -d dist || mkdir dist
 
-dist/cine.js:	src/cinejs.js src/util.js src/Player.js src/filters/BrightnessContrast.js src/filters/ColourLevel.js src/filters/GaussianBlur.js src/filters/Invert.js src/filters/Posterise.js | dist
+dist/cine.js:	src/cinejs.js src/util.js src/Player.js src/filters/BrightnessContrast.js src/filters/ColourLevel.js src/filters/GaussianBlur.js src/filters/Greyscale.js src/filters/Invert.js src/filters/Posterise.js | dist
 	cat $^ > $@
 
 dist/cine.js.gz:	dist/cine.js

diff --git a/src/filters/Greyscale.js b/src/filters/Greyscale.js
@@ -0,0 +1,51 @@
+/* Copyright © 2009-2010 Adam Harvey
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+/**
+ * Constructs a greyscale filter.
+ *
+ * @class A greyscale filter.
+ */
+cinejs.filters.Greyscale = function () {
+};
+
+/**
+ * The processing function for the greyscale filter.
+ *
+ * @param {ImageData} frame
+ * @param {HTMLCanvasElement} canvas
+ */
+cinejs.filters.Greyscale.prototype.processFrame = function (frame, canvas) {
+	for (var i = 0; i < frame.data.length; i += 4) {
+		// Using the algorithm used in libgd.
+		var value = (0.299 * frame.data[i + 0]) + (0.587 * frame.data[i + 1]) + (0.114 * frame.data[i + 2]);
+		frame.data[i + 0] = value;
+		frame.data[i + 1] = value;
+		frame.data[i + 2] = value;
+	}
+};
+
+
+cinejs.filters.Grayscale = cinejs.filters.Greyscale;
+
+
+// vim: set cin noet ts=8 sw=8:
diff --git a/test/Greyscale.html b/test/Greyscale.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>Greyscale filter test</title>
+		<link rel="stylesheet" type="text/css" href="test.css" />
+		<script type="text/javascript" src="../dist/cine.js"></script>
+		<script type="text/javascript" src="test.js"></script>
+		<script type="text/javascript" src="Greyscale.js"></script>
+	</head>
+	<body>
+		<h1>Greyscale filter test</h1>
+
+		<div id="source-container">
+			<h2>Source</h2>
+
+			<video id="source" width="320" height="240">
+				<source src="test.ogv" type="video/ogg" />
+				<source src="test.mp4" type="video/mp4" />
+			</video>
+		</div>
+
+		<div id="intermediate-container">
+			<h2>Intermediate</h2>
+
+			<canvas id="intermediate" width="320" height="240" />
+		</div>
+
+		<div id="destination-container">
+			<h2>Destination</h2>
+
+			<canvas id="destination" width="320" height="240" />
+		</div>
+
+		<a id="play" href="#">Play!</a>
+
+		<span id="fps">?? FPS</span>
+	</body>
+</html>
diff --git a/test/Greyscale.js b/test/Greyscale.js
@@ -0,0 +1,28 @@
+/* Copyright © 2009-2010 Adam Harvey
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+window.onload = function () {
+	cinejs.test(new cinejs.filters.Greyscale());
+};
+
+
+// vim: set cin noet ts=8 sw=8:
diff --git a/test/Stack.css b/test/Stack.css
@@ -71,8 +71,8 @@ h2 {
 #filters {
 	position: absolute;
 	margin: 0;
-	padding: 1.2em 0 0 0;
-	top: 2.6em;
+	padding: 0.7em 0 0 0;
+	top: 3.1em;
 	bottom: 50%;
 	right: 0;
 	width: 25%;

diff --git a/test/Stack.html b/test/Stack.html
@@ -37,6 +37,7 @@ <h2>Available Filters</h2>
 				<li><a href="#" id="BrightnessContrast">Brightness and Contrast</a></li>
 				<li><a href="#" id="ColourLevel">Colour Level</a></li>
 				<li><a href="#" id="GaussianBlur">Gaussian Blur</a></li>
+				<li><a href="#" id="Greyscale">Greyscale</a></li>
 				<li><a href="#" id="Invert">Invert Colours</a></li>
 				<li><a href="#" id="Posterise">Posterise</a></li>
 			</ul>

diff --git a/test/Stack.js b/test/Stack.js
@@ -83,6 +83,13 @@ var addPosterise = function () {
 };
 
 
+var addGreyscale = function () {
+	addFilter("Greyscale Colours", new cinejs.filters.Greyscale());
+
+	return false;
+};
+
+
 var addInvert = function () {
 	addFilter("Invert Colours", new cinejs.filters.Invert());
 
@@ -210,6 +217,7 @@ window.onload = function () {
 	document.getElementById("BrightnessContrast").onclick = function () { showOverlay("BrightnessContrast-options"); return false; };
 	document.getElementById("ColourLevel").onclick = function () { showOverlay("ColourLevel-options"); return false; };
 	document.getElementById("GaussianBlur").onclick = function () { showOverlay("GaussianBlur-options"); return false; };
+	document.getElementById("Greyscale").onclick = addGreyscale;
 	document.getElementById("Invert").onclick = addInvert;
 	document.getElementById("Posterise").onclick = function () { showOverlay("Posterise-options"); return false; };