style(filters): improve code style and start documentation using JSDoc (

#66)

lib/filters/blue.js

@@ -1,9 +1,15 @@
+/**
+ * Apply a blue filter to the image by setting red and green channels to 0.
+ * @param {ImageData} pixels - The pixel data of the image.
+ * @returns {ImageData} - The modified pixel data.
+ */
 const blue = function (pixels) {
-  let d = pixels.data
+  const data = pixels.data
 
-  for (let i = 0; i < d.length; i += 4) {
-    d[i] = 0
-    d[i + 1] = 0
+  // set red and green channels to 0
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = 0
+    data[i + 1] = 0
   }
 
   return pixels

lib/filters/gamma.js

@@ -1,14 +1,14 @@
 const gamma = function (pixels) {
-  let k_gamma = 1.3 
+  let k_gamma = 1.3
   var table = new Array(256)
   for (var i = table.length - 1; i >= 0; i--) {
-    table[i] = parseInt(((i/255.)**k_gamma)*255) 
+    table[i] = parseInt((i / 255) ** k_gamma * 255)
   }
-  
+
   for (let i = 0; i < pixels.data.length; i += 4) {
-    pixels.data[i]     = table[pixels.data[i]]
-    pixels.data[i + 1] = table[pixels.data[i+1]]
-    pixels.data[i + 2] = table[pixels.data[i+2]]
+    pixels.data[i] = table[pixels.data[i]]
+    pixels.data[i + 1] = table[pixels.data[i + 1]]
+    pixels.data[i + 2] = table[pixels.data[i + 2]]
   }
 
   return pixels

lib/filters/green.js

@@ -1,9 +1,15 @@
+/**
+ * Apply a green filter to the image by setting red and blue channels to 0.
+ * @param {ImageData} pixels - The pixel data of the image.
+ * @returns {ImageData} - The modified pixel data.
+ */
 const green = function (pixels) {
-  let d = pixels.data
+  const data = pixels.data
 
-  for (let i = 0; i < d.length; i += 4) {
-    d[i] = 0
-    d[i + 2] = 0
+  // set red and blue channels to 0
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = 0
+    data[i + 2] = 0
   }
 
   return pixels

lib/filters/noise.js

@@ -1,13 +1,13 @@
 const noise = function (pixels, amount = 0) {
   const level = amount * 255 * 0.1
-  let random;
+  let random
 
   for (let i = 0; i < pixels.data.length; i += 4) {
-    random = (0.5 - Math.random()) * level;
+    random = (0.5 - Math.random()) * level
 
-    pixels.data[i] += random;
-    pixels.data[i + 1] += random;
-    pixels.data[i + 2] += random;
+    pixels.data[i] += random
+    pixels.data[i + 1] += random
+    pixels.data[i + 2] += random
   }
 
   return pixels

lib/filters/red.js

@@ -1,10 +1,15 @@
+/**
+ * Apply a red filter to the image by setting green and blue channels to 0.
+ * @param {ImageData} pixels - The pixel data of the image.
+ * @returns {ImageData} - The modified pixel data.
+ */
 const red = function (pixels) {
-  let d = pixels.data
+  const data = pixels.data
 
-  for (let i = 0; i < d.length; i += 4) {
-    d[i] = d[i]
-    d[i + 1] = 0
-    d[i + 2] = 0
+  // set green and blue channels to 0
+  for (let i = 0; i < data.length; i += 4) {
+    data[i + 1] = 0
+    data[i + 2] = 0
   }
 
   return pixels

lib/filters/thresholding.js

@@ -1,12 +1,22 @@
+/**
+ * Apply thresholding to the pixel data of an image.
+ * @param {ImageData} pixels - The pixel data of the image.
+ * @param {number} [amount=128] - The threshold value.
+ * @returns {ImageData} - The modified pixel data.
+ */
 const thresholding = function (pixels, amount = 128) {
   for (let i = 0; i < pixels.data.length; i += 4) {
-    let r = pixels.data[i],
-      g = pixels.data[i + 1],
-      b = pixels.data[i + 2]
+    const r = pixels.data[i]
+    const g = pixels.data[i + 1]
+    const b = pixels.data[i + 2]
 
-    let v = 0.2126 * r + 0.7152 * g + 0.0722 * b
+    const v = 0.2126 * r + 0.7152 * g + 0.0722 * b
 
-    pixels.data[i] = pixels.data[i + 1] = pixels.data[i + 2] = v > amount ? 255 : 0
+    const newValue = v > amount ? 255 : 0
+
+    pixels.data[i] = newValue
+    pixels.data[i + 1] = newValue
+    pixels.data[i + 2] = newValue
   }
 
   return pixels

package.json

@@ -27,7 +27,7 @@
   "scripts": {
     "dev": "rollup -c -w",
     "demo": "yarn build; http-server",
-    "format": "prettier --write \"{,!(node_modules|dist|Gruntfile|docs)/**/}*.{js,json}\"",
+    "format": "prettier --write \"{,!(node_modules|dist|docs)/**/}*.{js,json}\"",
     "lint": "./node_modules/eslint/bin/eslint.js lib/**/*.js lib/*.js",
     "build": "rollup -c",
     "publish-latest": "yarn build; npm publish"