SquiggleCam/dist/imageAnalyzer.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 467);
/******/ })
/************************************************************************/
/******/ ({

/***/ 467:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(468);


/***/ }),

/***/ 468:
/***/ (function(module, exports) {

/**
 * imageAnalyzer Web Worker accepts image data and configuration parameters
 * and returns array of x,y coordinates to draw squiggles
 *
 * It analyzes pixels for their average brightness and if brightness is closer to 0 -> makes lines less
 *  squiggly, if closer to 255 -> more squiggly
 *
 * This script runs in a webWorker thread in order to speed up processing of the image and
 * to detach the processing from the UI updates
 *
 * Majority of the logic in this script is taken from https://github.com/gwygonik/SquiggleDraw for the following exceptions:
 * - I implemented contrast adjustment that can be helpful in certain light conditions
 * - I increased the processing speed by removing unnecessary assignments and moving variable
 *    declarations out of the processing loop
 */

self.addEventListener('message', function (e) {
  // Gather all necessary data from the main thread
  var config = e.data.config;
  var imagePixels = e.data.data;
  var width = e.data.config.WIDTH;
  var height = e.data.config.HEIGHT;

  // Create some defaults for squiggle-point array
  var squiggleData = [];
  var r = 5;
  var a = 0;
  var b = void 0;
  var z = void 0;
  var currentCoordinates = []; // create empty array for storing x,y coordinate pairs
  var currentVerticalPixelIndex = 0;
  var currentHorizontalPixelIndex = 0;
  var contrastFactor = 259 * (config.CONTRAST_ADJUSTMENT + 255) / (255 * (259 - config.CONTRAST_ADJUSTMENT)); // This was established through experiments
  var horizontalLineSpacing = Math.floor(height / config.LINE_COUNT); // Number of pixels to advance in vertical direction

  // Iterate line by line (top line to bottom line) in increments of horizontalLineSpacing
  for (var y = 0; y < height; y += horizontalLineSpacing) {
    a = 0;
    currentCoordinates = [];
    currentCoordinates.push([0, y]); // Start the line

    currentVerticalPixelIndex = y * width; // Because Image Pixel array is of length width * height,
    // starting pixel for each line will be this

    // Loop through pixels from left to right within the current line, advancing by increments of config.SPACING
    for (var x = 1; x < width; x += config.SPACING) {
      currentHorizontalPixelIndex = x + currentVerticalPixelIndex; // Get array position of current pixel

      // When there is contrast adjustment, the calculations of brightness values are a bit different
      if (config.CONTRAST_ADJUSTMENT !== 0) {
        // Determine how bright a pixel is, from 0 to 255 by summing three channels (R,G,B) multiplied by some coefficients
        b = 0.2125 * (contrastFactor * (imagePixels.data[4 * currentHorizontalPixelIndex] - 128) + 128 + config.BRIGHTNESS_ADJUSTMENT) + 0.7154 * (contrastFactor * (imagePixels.data[4 * (currentHorizontalPixelIndex + 1)] - 128) + 128 + config.BRIGHTNESS_ADJUSTMENT) + 0.0721 * (contrastFactor * (imagePixels.data[4 * (currentHorizontalPixelIndex + 2)] - 128) + 128 + config.BRIGHTNESS_ADJUSTMENT);
      } else {
        b = 0.2125 * (imagePixels.data[4 * currentHorizontalPixelIndex] + config.BRIGHTNESS_ADJUSTMENT) + 0.7154 * (imagePixels.data[4 * (currentHorizontalPixelIndex + 1)] + config.BRIGHTNESS_ADJUSTMENT) + 0.0721 * (imagePixels.data[4 * (currentHorizontalPixelIndex + 2)] + config.BRIGHTNESS_ADJUSTMENT);
      }

      b = Math.max(config.MIN_BRIGHTNESS, b); // Set minimum line curvature to value set by the user
      z = Math.max(config.MAX_BRIGHTNESS - b, 0); // Set maximum line curvature to value set by the user

      // The magic of the script, determines how high / low the squiggle goes
      r = config.AMPLITUDE * z / config.LINE_COUNT;

      a += z / config.FREQUENCY;
      currentCoordinates.push([x, y + Math.sin(a) * r]);
    }
    squiggleData.push(currentCoordinates);
  }
  self.postMessage(squiggleData);
}, false);

/***/ })

/******/ });