piskel/js/utils/PixelUtils.js

(function () {
  var ns = $.namespace("pskl");

  ns.PixelUtils = {

    getRectanglePixels : function (x0, y0, x1, y1) {
      var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
      var pixels = [];

      for(var x = rectangle.x0; x <= rectangle.x1; x++) {
        for(var y = rectangle.y0; y <= rectangle.y1; y++) {
          pixels.push({"col": x, "row": y});
        }
      }
      
      return pixels;      
    },

    getBoundRectanglePixels : function (x0, y0, x1, y1) {
      var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
      var pixels = [];
      // Creating horizontal sides of the rectangle:
      for(var x = rectangle.x0; x <= rectangle.x1; x++) {
        pixels.push({"col": x, "row": rectangle.y0});
        pixels.push({"col": x, "row": rectangle.y1});
      }

      // Creating vertical sides of the rectangle:
      for(var y = rectangle.y0; y <= rectangle.y1; y++) {
        pixels.push({"col": rectangle.x0, "row": y});
        pixels.push({"col": rectangle.x1, "row": y});
      }
      
      return pixels;  
    },

    /**
     * Return an object of ordered rectangle coordinate.
     * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner 
     * @private
     */
    getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
      return {
        x0 : Math.min(x0, x1), 
        y0 : Math.min(y0, y1),
        x1 : Math.max(x0, x1), 
        y1 : Math.max(y0, y1),
      };
    },

    /**
     * Return the list of pixels that would have been filled by a paintbucket tool applied 
     * on pixel at coordinate (x,y).
     * This function is not altering the Frame object argument. 
     *
     * @param frame pskl.model.Frame The frame target in which we want to paintbucket
     * @param col number Column coordinate in the frame 
     * @param row number Row coordinate in the frame 
     *
     * @return an array of the pixel coordinates paint with the replacement color
     */
    getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
      // To get the list of connected (eg the same color) pixels, we will use the paintbucket algorithm
      // in a fake cloned frame. The returned pixels by the paintbucket algo are the painted pixels
      // and are as well connected.
      var fakeFrame = frame.clone(); // We just want to
      var fakeFillColor = "sdfsdfsdf"; // A fake color that will never match a real color.
      var paintedPixels = this.paintSimilarConnectedPixelsFromFrame(fakeFrame, col, row, fakeFillColor);

      return paintedPixels;
    },

    /**
     * Apply the paintbucket tool in a frame at the (col, row) initial position
     * with the replacement color.
     * 
     * @param frame pskl.model.Frame The frame target in which we want to paintbucket
     * @param col number Column coordinate in the frame 
     * @param row number Row coordinate in the frame 
     * @param replacementColor string Hexadecimal color used to fill the area
     *
     * @return an array of the pixel coordinates paint with the replacement color
     */
    paintSimilarConnectedPixelsFromFrame: function(frame, col, row, replacementColor) {
      /**
       *  Queue linear Flood-fill (node, target-color, replacement-color):
       *   1. Set Q to the empty queue.
       *   2. If the color of node is not equal to target-color, return.
       *   3. Add node to Q.
       *   4. For each element n of Q:
       *   5.     If the color of n is equal to target-color:
       *   6.         Set w and e equal to n.
       *   7.         Move w to the west until the color of the node to the west of w no longer matches target-color.
       *   8.         Move e to the east until the color of the node to the east of e no longer matches target-color.
       *   9.         Set the color of nodes between w and e to replacement-color.
       *  10.         For each node n between w and e:
       *  11.             If the color of the node to the north of n is target-color, add that node to Q.
       *  12.             If the color of the node to the south of n is target-color, add that node to Q.
       *  13. Continue looping until Q is exhausted.
       *  14. Return.
       */
      var paintedPixels = [];
      var queue = [];
      var dy = [-1, 0, 1, 0];
      var dx = [0, 1, 0, -1];
      var targetColor;
      try {
        targetColor = frame.getPixel(col, row);
      } catch(e) {
        // Frame out of bound exception.
      }
      
      if(targetColor == replacementColor) {
        return;
      }
      

      queue.push({"col": col, "row": row});
      var loopCount = 0;
      var cellCount = frame.getWidth() * frame.getHeight();
      while(queue.length > 0) {
        loopCount ++;

        var currentItem = queue.pop();
        frame.setPixel(currentItem.col, currentItem.row, replacementColor);
        paintedPixels.push({"col": currentItem.col, "row": currentItem.row });

        for (var i = 0; i < 4; i++) {
          var nextCol = currentItem.col + dx[i];
          var nextRow = currentItem.row + dy[i];
          try {
            if (frame.containsPixel(nextCol, nextRow)  && frame.getPixel(nextCol, nextRow) == targetColor) {
              queue.push({"col": nextCol, "row": nextRow });
            }
          } catch(e) {
            // Frame out of bound exception.
          }
        }

        // Security loop breaker:
        if(loopCount > 10 * cellCount) {
          console.log("loop breaker called");
          break;          
        }
      }
      return paintedPixels;
    },

    /**
     * Calculate and return the maximal DPI to display a picture in a given container.
     *
     * @param container jQueryObject Container where the picture should be displayed
     * @param number pictureHeight height in pixels of the picture to display
     * @param number pictureWidth width in pixels of the picture to display
     * @return number maximal dpi
     */
    calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
      return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
    },

    /**
     * Calculate and return the maximal DPI to display a picture for a given height and width.
     *
     * @param height number Height available to display the picture
     * @param width number Width available to display the picture
     * @param number pictureHeight height in pixels of the picture to display
     * @param number pictureWidth width in pixels of the picture to display
     * @return number maximal dpi
     */
    calculateDPI : function (height, width, pictureHeight, pictureWidth) {
      var heightBoundDpi = Math.floor(height / pictureHeight),
        widthBoundDpi = Math.floor(width / pictureWidth);

      return Math.min(heightBoundDpi, widthBoundDpi);
    },
  };
})();