Really Bad Image Format

RBIF.js

/* Challenge #1
 *
 * Color: represents an RGB color. Pass a hexadecimal string (RRGGBB format,
 * like CSS) to this constructor and get a Color object with integer r, g, and b
 * components
 */
function Color(rgb) {
  if (!(this instanceof Color)) return new Color(rgb);

  var parts = rgb.match(/([0-9a-f]{2})/gi);
  this.r = parseInt(parts[0], 16);
  this.g = parseInt(parts[1], 16);
  this.b = parseInt(parts[2], 16);
}

/*
 * Image:
 *  - width: width of the image
 *  - height: height of the image
 *  - pixels: an array of 'rrggbb' strings or Color objects representing pixel
 *    colors
 *
 *  (I make the assumption that pixels are in row-major order)
 */
function Image(width, height, pixels) {
  if (!(this instanceof Image)) return new Image(width, height, pixels);

  if (typeof width == 'object') {
    var img = width;
    width = img.width;
    height = img.height;
    pixels = img.data;
  }

  this.width = width;
  this.height = height;
  this.pixels = (pixels[0] instanceof Color)
    ? pixels.slice()
    : pixels.map(Color);
}

/* Challenge #2
 *
 * rotate: rotate the image 90 degrees cockwise
 */
Image.prototype.rotate = function() {
  // copy the existing pixel array
  var pixels = []

  for (var c=0; c<this.width; c++) {
    for (var r=this.height-1; r >= 0; r--) {
      pixels.push(this.pixels[r*this.width + c]);
    }
  }

  return new Image(this.height, this.width, pixels);
}

/* (Challenge #3)
 *
 * blend: blend 2 images by amount (1=all image2, .5=50% of each, 0=all image1);
 *
 * - assumes both images are the same size
 * - this blending is similar in effect to opengl's ONE_MINUS_ALPHA blending
 *   mode
 *
 * returns the resulting image
 */
Image.blend = function(image1, image2, amount) {
  var pixels = [];
  var size = image1.width * image1.height;
  var blender = new Blender(1 - amount, amount);

  for (var i=0; i<size; i++) {
    pixels.push(blender.blend(image1.pixels[i], image2.pixels[i]));
  }
  return new Image(image1.width, image1.height, pixels);
}

/*
 * Blender: blend and combine colors by some scaleing factors
 *
 * the Blender will scale each of the 2 given colors by amtX, and add the new
 * values to get the new color. If amt1 + amt2 = 1, this is equivalent to
 * opengl's ONE_MINUS_ALPHA blending mode
 */
function Blender(amt1, amt2) {
  this.amt1 = amt1;
  this.amt2 = amt2;
}

/*
 * return a new color by blending together the 2 colors given by some amount
 */
Blender.prototype.blend = function(color1, color2) {
  var ret = new Color('000000');
  ret.r = color1.r * this.amt1 + color2.r * this.amt2;
  ret.g = color1.g * this.amt1 + color2.g * this.amt2;
  ret.b = color1.b * this.amt1 + color2.b * this.amt2;
  return ret;
}

module.exports = {
  Image: Image,
  Color: Color,
  Blender: Blender
}

test.js

var RBIF = require("./RBIF.js")
  , Image = RBIF.Image

var image1 = {};
image1.width = 12;
image1.height = 12;
image1.data = [ 'ffffff', 'ffff8a', '898943', '4343cb', 'cacaf3', 'f3f3fb', 'fafbfb', 'fbfbf3', 'f3f3e8', 'e9e9f0', 'f1f1ff', 'ffffff', 'fffffe', 'fefe6e', '6e6e01', '000005', '030286', '8686e9', 'eaebd7', 'd6d7e0', 'dfdfec', 'ededf4', 'f5f5ff', 'ffffff', 'ffffff', 'ffffc0', 'bfbf31', '343573', '7b7da3', 'a7a8f0', 'f2f3e0', 'e9ebe1', 'ecede5', 'e6e7fc', 'fcfcff', 'ffffff', 'ffffff', 'ffff91', '8b8b97', 'a6a960', '959d9e', 'bec098', '9596bf', 'e1e5a3', 'c7cce6', 'e9eafb', 'fbfbff', 'ffffff', 'fffffa', 'fafaa7', 'a4a55d', '61639f', 'bdbd66', '767311', '1a1675', '84839d', 'b3b1e3', 'e5e5fb', 'fbfcfc', 'fcfcf9', 'fafad6', 'd8d8e1', 'e5e4d4', 'cdd1bc', '435b5d', '10253b', '182048', '0010a3', '233ff5', 'f0f4ee', 'f2f1e9', 'eaeafe', 'fefef3', 'f3f4ef', 'f0f0f3', 'f5f7d7', 'b5b8ca', '537297', '003499', '2545c4', '9fa4fb', 'fffff8', 'f9f9f7', 'f7f7ff', 'ffffff', 'fffff8', 'f8f8fb', 'fbfbd1', 'd8d743', '565116', '211ccc', 'dfd9ff', 'ffffaa', 'a9a9d7', 'd7d7ff', 'ffffff', 'ffffff', 'fffffe', 'fefec6', 'c7c712', '101000', '00001a', '1818cb', 'cbcbe4', 'e4e51c', '1b1bb2', 'b2b2ff', 'ffffff', 'ffffff', 'ffffff', 'ffff85', '85851a', '181873', '71716b', '6a6a79', '77773b', '393905', '0304b5', 'b5b5ff', 'fffffe', 'fefefd', 'fdfde8', 'e9ead4', 'd4d5ae', 'adaeff', 'ffffff', 'fffff9', 'f9f922', '202000', '00009f', '9f9fff', 'fffff6', 'f6f7e7', 'e9e9d9', 'dadbd9', 'dadbda', 'dcddc9', 'cbcdca', 'cbcdd4', 'd5d6a3', 'a3a391', '9091dc', 'dcdcf9', 'ffffff' ];

var image2 = {};
image2.width = 12;
image2.height = 12;
image2.data = [ 'ffffff', 'ffff8d', '8c8c44', '4444ca', 'c9caf3', 'f3f5fb', 'fbf6fb', 'fbf6fc', 'f8b4fc', 'f56afb', 'f7b4fe', 'ffffff', 'fffffe', 'fefe6f', '6d6d00', '000005', '040e8f', '8c3ffc', 'f75df0', 'e649f7', 'ef4dfd', 'f77ffc', 'fac2fe', 'ffffff', 'ffffff', 'ffffbe', 'bebe38', '343079', '7576b2', 'ab4cff', 'fa49fa', 'ef91fc', 'f28dfc', 'f359fd', 'fdf0ff', 'ffffff', 'ffffff', 'ffff8e', '8d93a5', '9d9491', '826dc2', 'bba69b', '9671dd', 'd5d3c7', 'bbbbf7', 'ef9ffd', 'fde1ff', 'ffffff', 'fffffd', 'fce6a9', 'a89069', '644bb2', 'b49b70', '726717', '1a1a7e', '8075ad', 'af8ceb', 'e89bfe', 'fde3fe', 'fdeefd', 'fbe9f3', 'e83efa', 'f241e0', 'd842a2', '56554d', '183231', '1a2a36', '002783', '2d55fc', 'f5adfe', 'fb8ffd', 'f66efe', 'fef9fb', 'f8bfff', 'f98dff', 'fe7cd3', 'b876ad', '596573', '0e5082', '2d58bc', '9f7dff', 'ff9aff', 'ffb0fc', 'fbcdff', 'ffffff', 'fffffd', 'fbd8ff', 'ffa4d4', 'd7884b', '54281b', '2015d8', 'e159ff', 'ff7bb0', 'ae4ad8', 'd8d0ff', 'ffffff', 'ffffff', 'ffffff', 'fed9ca', 'c98313', '121000', '00061c', '1911d8', 'd23beb', 'ea4821', '1f0cb2', 'b2b9ff', 'ffffff', 'fffffe', 'ffffff', 'ffbc8b', '89461b', '1a2776', '74736c', '6b6e80', '7e6d3e', '3c2806', '030ab5', 'b5b4ff', 'fffffe', 'fefefc', 'fcfefa', 'f471e7', 'df25b1', 'af76ff', 'ffffff', 'fffff6', 'f6fc24', '222700', '0000a1', 'a0a0ff', 'fffff7', 'f7f7e8', 'e9ede0', 'dec1e6', 'e294df', 'e0c1cb', 'cdd4cc', 'cecfd5', 'd6d7a3', 'a2a390', '8f90db', 'dbdcf9', 'ffffff' ];


// Challenge #1: Print out individual RGB pixel values
var img1 = new Image(image1);
var img2 = new Image(image2);
console.log("Image 1\n", img1, "\nImage 2:\n", img2);

// Challenge #2
var img3 = img1.rotate();

// Challenge #3
var img4 = Image.blend(img1, img2, 0.5);