Fire JS Bin - The-Mesmerizer

letters  = {
'a' : [0,0,0,224,240,496,496,440,920,1020,1020,2044,1550,3598,3590,0],
'b' : [0,0,0,2032,4080,3120,3120,3888,4080,8176,7216,6192,7216,8176,4080,0],
'c' : [0,0,0,4064,8176,7224,6200,24,24,24,24,6168,7224,8176,4064,0],
'd' : [0,0,0,2040,4088,3608,7192,7192,6168,7192,7192,7192,3608,4088,2040,0],
'e' : [0,0,0,8176,8176,48,48,48,4080,4080,48,48,48,8176,8176,0],
'f' : [0,0,0,4080,4080,48,48,48,2032,2032,48,48,48,48,48,0],
'g' : [0,0,0,4064,8176,14392,14392,24,24,15896,15896,12344,14392,16368,16352,0],
'h' : [0,0,0,6192,6192,6192,6192,6192,8176,8176,6192,6192,6192,6192,6192,0],
'i' : [0,0,0,384,384,384,384,384,384,384,384,384,384,384,384,0],
'j' : [0,0,0,3072,3072,3072,3072,3072,3072,3072,3072,3168,3680,4064,2016,0],
'k' : [0,0,0,3608,1816,920,984,504,248,504,952,1944,1816,3608,7704,0],
'l' : [0,0,0,48,48,48,48,48,48,48,48,48,48,4080,4080,0],
'm' : [0,0,0,14392,14392,15480,15480,15480,16120,14040,14040,14296,14296,13208,13208,0],
'n' : [0,0,0,6256,6256,6384,6384,6640,7088,7088,7984,7728,7728,7216,7216,0],
'o' : [0,0,0,4064,8176,14392,14392,12312,12312,12312,12312,14392,14392,8176,4064,0],
'p' : [0,0,0,4080,8176,7216,6192,7216,7728,4080,1008,48,48,48,48,0],
'q' : [0,0,0,2032,4088,7196,7196,6156,6156,6156,6156,7964,7964,8184,16368,6144],
'r' : [0,0,0,4088,4088,3096,3096,3864,4088,2040,3608,3608,3096,3096,7192,0],
's' : [0,0,0,1008,2040,3608,3608,248,1016,2016,3840,3612,3612,2040,2032,0],
't' : [0,0,0,8176,8176,768,768,768,768,768,768,768,768,768,768,0],
'u' : [0,0,0,6192,6192,6192,6192,6192,6192,6192,6192,6192,7280,8176,4064,0],
'v' : [0,0,0,7180,7196,3100,3608,1592,1840,1904,880,992,992,480,448,0],
'w' : [0,0,0,25027,29127,29671,29670,13158,13166,16254,7804,7740,7740,7740,3096,0],
'x' : [0,0,0,3612,3640,1904,1008,992,448,480,992,1904,1848,3644,7196,0],
'y' : [0,0,0,3598,3612,1852,952,1008,496,224,192,192,192,192,192,0],
'z' : [0,0,0,8160,8160,7168,3584,1792,1920,896,448,224,240,8176,8176,0],
'!' : [0,0,0,384,384,384,384,384,384,384,384,384,0,384,384,0],
'@' : [0,0,0,8160,16376,30780,28636,61422,60534,52790,58934,58934,30518,32766,16382,28],
'짙' : [0,0,0,4032,4064,3168,96,96,496,496,96,96,112,4080,4080,0],
'$' : [0,128,992,2032,3760,3760,176,496,2016,3968,3712,3248,3760,2032,2016,128],
'%' : [0,0,0,3196,3836,1772,2028,1020,1020,16304,32704,30400,30432,32352,15920,0],
'^' : [0,0,0,448,960,992,1888,1648,0,0,0,0,0,0,0,0],
'&' : [0,0,0,992,1008,880,1008,992,496,3576,4024,3864,3864,8184,8176,0],
'*' : [0,0,0,192,1008,1008,480,480,320,0,0,0,0,0,0,0],
'(' : [0,0,0,768,896,384,448,192,192,192,192,192,192,192,448,384],
')' : [0,0,0,224,192,448,384,896,896,896,768,896,896,896,384,448],
'_' : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
'+' : [0,0,0,0,0,384,384,384,4080,4080,384,384,384,0,0,0],
'}' : [0,0,0,480,480,448,384,384,896,896,896,384,384,384,384,448],
'{' : [0,0,0,896,896,384,384,448,448,224,224,448,448,384,384,384],
'|' : [0,0,0,384,384,384,384,384,384,384,384,384,384,384,384,384],
'"' : [0,0,0,1728,1728,1728,1728,0,0,0,0,0,0,0,0,0],
':' : [0,0,0,0,0,0,384,384,0,0,0,0,0,384,384,0],
'?' : [0,0,0,2016,4080,3632,3632,3584,1792,1920,896,384,384,384,384,0],
'>' : [0,0,0,0,0,112,496,2016,3840,3840,2016,496,112,0,0,0],
'<' : [0,0,0,0,0,3584,3968,992,240,240,1008,3968,3584,0,0,0],
'~' : [0,0,0,4080,4080,1552,0,0,0,0,0,0,0,0,0,0],
'1' : [0,0,0,3072,3840,3968,3456,3072,3072,3072,3072,3072,3072,3072,3072,0],
'2' : [0,0,0,2016,4080,3696,3120,3584,3840,1920,960,480,240,4080,4080,0],
'3' : [0,0,0,992,2032,1584,1552,1920,1984,3968,3584,3120,3632,2032,2016,0],
'4' : [0,0,0,1792,1792,1920,1984,1728,1760,1648,1584,4080,4080,1536,1536,0],
'5' : [0,0,0,2032,2032,48,48,2032,2032,3632,3584,3632,3632,2032,992,0],
'6' : [0,0,0,2016,2032,3696,48,2032,2032,3632,3632,3632,3696,2032,2016,0],
'7' : [0,0,0,4064,4064,3072,3584,1536,1792,1792,768,896,384,384,448,0],
'8' : [0,0,0,2016,2032,1648,1648,2032,992,2032,3696,3632,3632,4080,2016,0],
'9' : [0,0,0,992,2032,3632,3632,3632,4080,4064,4032,3632,1584,2032,992,0],
'0' : [0,0,0,992,2032,3696,3632,3632,3120,3120,3632,3632,3696,2032,992,0],
'-' : [0,0,0,0,0,0,0,0,0,0,960,960,0,0,0,0],
'=' : [0,0,0,0,0,0,4080,4080,0,0,4080,4080,0,0,0,0],
']' : [0,0,0,480,480,384,384,384,384,384,384,384,384,384,384,384],
'[' : [0,0,0,960,960,192,192,192,192,192,192,192,192,192,192,192],
'\\' : [0,0,0,96,96,96,224,192,192,192,384,384,384,896,768,0],
'\'' : [0,0,0,384,384,384,384,0,0,0,0,0,0,0,0,0],
';' : [0,0,0,0,0,0,384,384,0,0,0,0,0,384,384,384],
'/' : [0,0,0,768,896,384,384,384,192,192,192,224,96,96,96,0],
'.' : [0,0,0,0,0,0,0,0,0,0,0,0,0,384,384,0],
',' : [0,0,0,0,0,0,0,0,0,0,0,0,0,896,896,896],
'`' : [0,0,0,224,448,384,0,0,0,0,0,0,0,0,0,0]
};

$(document).ready(function(){

pixelCanvas = $('#pixelCanvas');
  canvasContext = document.getElementById('pixelCanvas').getContext('2d');
  row = new Array;
  blocks = new Array;
  blocksSequence = new Array;
  targetColour = new Colour(255, 0, 0);
  colToUse = new Colour(222, 222, 222);
  baseColour = new Colour( 20, 20, 20 );
  spirals = Array();
  lastX = -1; // Last hit coords
  lastY = -1;
  colourMode = true;
  animators = Array();
  message = '';
  originX = 350;
  originY = 350;

grid = new Grid;
  grid.init();

pixelCanvas.mousemove( function(e) {

var x = e.pageX - this.offsetLeft - 102;
      var y = e.pageY - this.offsetTop - 102;

x = Math.floor( x / grid.totalBlockWidth );
      y = Math.floor( y / grid.totalBlockWidth );

// Check we're not out of bounds
      if (x > (grid.cols - 1) || y > (grid.rows -1)) return;
      if (x < 0 || y < 0) return;
      
      if ( lastX != x || lastY != y ){
        grid.blocks[y][x].hit();
        lastX = x;
        lastY = y;
      }  
  });

pixelCanvas.click(function(e) {

var x = e.pageX - this.offsetLeft - 102;
      var y = e.pageY - this.offsetTop - 102;

x = Math.floor( x / grid.totalBlockWidth );
      y = Math.floor( y / grid.totalBlockWidth );

// Check we're not out of bounds
      if (x > (grid.cols - 1) || y > (grid.rows -1)) return;
      if (x < 0 || y < 0) return;

if (x==0 && y==0) { // If you click the top left, it starts a spiral
       spiral = new Spiral;
      }
      else if (x== (grid.cols - 1)  && y==(grid.rows - 1)) { // bottom right adds multiple
        autoAdd( 50 );
      }
      else if (x==0 && y==15) { // bottom left changes colour mode
        colourMode = (colourMode == true) ? false : true;
      }
      else if (x== (grid.cols - 1)  && y== 0) { // top right rotates grid
        gridRotate = 0.2;
      }
      else   grid.blocks[y][x].hit();
  });
  
  
  $(document).keypress( function(e) {
  // press return to play the message
  if (e.which == 13 && message != '')  {
    messageAnimation = new StartMessage(message);
    animators.push(messageAnimation);
    message = '';
    return;
  }

// Other letters go into the queue
  // Ensure any previous messages are stopped
  if (typeof messageAnimation != 'undefined') {
    messageAnimation.stop();
    delete messageAnimation;
  }

renderLetter(String.fromCharCode(e.which));
  message += String.fromCharCode(e.which);
  
})

animators.push(new StartMessage('mesmerizer!'));
  t = setInterval('tick()', 30);

});

function autoAdd( num) {
  for (index = 0; index < num; index ++) {

blockNum = rand( grid.blocksSequence.length );
    grid.blocksSequence[blockNum].hit();
  }
}

function tick() {

if (typeof gridRotate == 'undefined') gridRotate = 0;
  canvasContext.clearRect(0, 0, 700, 700);
  canvasContext.save();
    canvasContext.translate( 350, 350  );
    if (gridRotate > 0) { 
      canvasContext.rotate( ( Math.PI / 180 ) * gridRotate );
      gridRotate += 0.2;
      if (gridRotate > 360) gridRotate = 0;
    }

for (block = 0; block < grid.blocksSequence.length; block ++) {
     grid.blocksSequence[block].magic();
     grid.blocksSequence[block].draw();
   }
   canvasContext.restore();
}

function averageColours(col1, col2) {
  //return {r: Math.round((col1.r + col2.r) / 2), g: Math.round((col1.g + col2.g) / 2), b: Math.round((col1.b + col2.b) / 2)};
  newCol = new Colour;
  if (col1.r < col2.r) newCol.r = col1.r + 1;
  else if (col1.r > col2.r) newCol.r = col1.r -1;
  else newCol.r = col1.r;

if (col1.g < col2.g) newCol.g = col1.g + 1;
  else if (col1.g > col2.g) newCol.g = col1.g -1;
  else newCol.g = col1.g;

if (col1.b < col2.b) newCol.b = col1.b + 1;
  else if (col1.b > col2.b) newCol.b = col1.b -1;
  else newCol.b = col1.b;

return newCol;
}

function rand ( n )
{
  return ( Math.floor ( Math.random ( ) * n) );
}

function Block( context, x, y, grid ) {

this.neighbours = Array();
  this.colour = getColour();
  this.nextColour = this.colour;
  this.ink = 0;
  this.lastSizeDiff = 0;
  this.x = x;
  this.y = y;
  this.ctx = context;
  this.rotate = 0;
  this.grid = grid;
  this.xPixels = x * grid.totalBlockWidth;
  this.yPixels = y * grid.totalBlockWidth;

this.setNeighbours = function( neighbours ) {
    this.neighbours = neighbours;
  }
  
  this.setColour = function( newCol ) {
    this.colour.r = newCol.r;
    this.colour.g = newCol.g;
    this.colour.b = newCol.b;
  }

this.magic = function() {

this.setColour(this.nextColour);

// Work out which neighbour has the most ink
    var bestNeighbour = this.neighbours[0];
    for (index = 1; index < this.neighbours.length; index ++) {
      if ( this.neighbours[index].ink > bestNeighbour.ink ) bestNeighbour = this.neighbours[index];
    }

// Only do something if the best neighbour has more ink than me
    if (bestNeighbour.ink > this.ink && bestNeighbour.ink > 1) {
      this.setColour(averageColours( this.colour, bestNeighbour.colour )) ;
      this.ink = Math.round(bestNeighbour.ink * 0.7) ;
      bestNeighbour.ink = bestNeighbour.ink - Math.round(this.ink / 50);
      if (bestNeighbour.ink < 0) bestNeighbour.ink = 0;
    }  
    else if (this.ink > 0) this.ink --;

// If the ink is 0, return to white
    if (this.ink == 0) this.setColour(averageColours( this.colour, baseColour));

// Change the size of the el
    sizeDiff = Math.round( 15 * (this.ink / this.grid.maxInk) );
    this.lastSizeDiff = sizeDiff;
  }

this.draw = function() {

var ctx = this.ctx;

borderColour = new Colour(this.colour.r, this.colour.g, this.colour.b);
    borderColour.add(20);
    
    ctx.fillStyle = this.colour.toRgba( 1 );
    ctx.strokeStyle = 'rgba(255,255,255, 0.2)';

ctx.save();

ctx.translate( (this.xPixels) + this.grid.halfBlockWidth -248, (this.yPixels) + this.grid.halfBlockWidth -248 );
    if (this.rotate > 0) ctx.rotate( ( Math.PI / 180 ) * this.rotate );
    ctx.fillRect ( -this.grid.halfBlockWidth, -this.grid.halfBlockWidth, this.grid.blockWidth , this.grid.blockWidth );
  //ctx.fillRect ( -15, -15, 30 , 30 );

sizeDiff = Math.round( (Math.floor( this.grid.blockWidth / 2 )) * (this.ink / this.grid.maxInk) );

ctx.lineWidth = sizeDiff;

if (sizeDiff > 0) ctx.strokeRect ( -this.grid.halfBlockWidth + (sizeDiff / 2), -this.grid.halfBlockWidth + (sizeDiff / 2), this.grid.blockWidth - (sizeDiff), this.grid.blockWidth - (sizeDiff) );
    if (this.rotate > 0)   this.rotate += 10;
    if (this.rotate > 90) this.rotate = 0;
    ctx.restore();

}

this.hit = function() {
    this.setColour(getColour());
    this.ink = 200;
    this.rotate = 1;
  }

}

function Colour( r, g, b ) {
  this.r = r;
  this.g = g;
  this.b = b;

this.add = function( num ) {
    this.r += num;
    this.g += num;
    this.b += num;
    if (this.r > 255) r = 255;
    if (this.g > 255) g = 255;
    if (this.b > 255) b = 255;
  }

this.toRgba = function( alpha ) {
    return 'rgba(' + this.r + ', ' + this.g + ', ' + this.b + ', ' + alpha + ')';
  }
}

function Spiral() {
  this.x = 0;
  this.y = 0;
  this.direction = 0;
  this.timer = null;
  this.upperLimitX = 15;
  this.upperLimitY = 15;
  this.lowerLimitX = 0;
  this.lowerLimitY = 1;

this.tick = function() {
        if (this.x == 7 && this.y == 8) {
      this.x = 0;
      this.y = 0;
      this.upperLimitX = 15;
      this.upperLimitY = 15;
      this.lowerLimitX = 0;
      this.lowerLimitY = 1;
      this.direction = 0;
    }

grid.blocks[this.y][this.x].hit();

if (this.direction == 0) {
      this.x++;
      if (this.x > this.upperLimitX) {
        this.direction = 1;
        this.x = this.upperLimitX;
        this.upperLimitX --;
      }
    }

if (this.direction == 1) {
      this.y++;
      if (this.y > this.upperLimitY) {
        this.direction = 2;
        this.y = this.upperLimitY;
        this.upperLimitY --;
      }
    }

if (this.direction == 2) {
      this.x--;
      if (this.x < this.lowerLimitX) {
        this.direction = 3;
        this.x = this.lowerLimitX;
        this.lowerLimitX ++;
      }
    }

if (this.direction == 3) {
      this.y--;
      if (this.y < this.lowerLimitY) {
        this.direction = 0;
        this.y = this.lowerLimitY;
        this.lowerLimitY ++;
      }
    }
  }

this.stop = function() {
    clearInterval(this.timer);
  }

var self= this;
  this.timer = setInterval( function() {self.tick();}, 50);

}

function getColour() {
  if (colourMode) {
      if (colToUse.r == targetColour.r && colToUse.g == targetColour.g && colToUse.b == targetColour.b) targetColour = new Colour(rand(255), rand(255),rand(255));
      colToUse = averageColours( colToUse, targetColour );
    }
    else colToUse = new Colour(rand(255), rand(255),rand(255));
    return colToUse;
}

function StartMessage(message) {
  this.msgIndex = 0;
  this.timer = null;
  
  if (typeof message == 'undefined') this.message = $('#message').val().toLowerCase();
  else this.message = message;

var self = this;

this.timer = setInterval(function() {self.tick();}, 300);

this.tick = function() {
    
    if (this.message[this.msgIndex] != ' ') {
      renderLetter(this.message[this.msgIndex]);
    }
    this.msgIndex++;

if (this.msgIndex >= this.message.length) clearInterval(this.timer);
  }

this.stop = function() {
    clearInterval(this.timer);
  }
}

function Grid() {
  this.rows = 16;
  this.cols = 16;
  this.blockWidth = 30;
  this.blockSpacing = 1;
  this.maxInk = 200;
  this.blocks = Array();
  this.blocksSequence = Array();
  var canvasContext = document.getElementById('pixelCanvas').getContext('2d');

// Do some maths to speed up the calculations later
  this.totalBlockWidth = this.blockWidth + this.blockSpacing;
  this.halfBlockWidth = Math.floor( this.totalBlockWidth / 2 );

this.init = function() {
    // initialise the blocks
    for (rows = 0; rows < this.rows; rows ++) {
      row = new Array;
      for (cols = 0; cols < this.cols; cols ++ ) {
        row[cols] = new Block( canvasContext, cols, rows, this );
      }
      this.blocks[rows] = row;
    }

// Loop through all the blocks and assign neighbours
    for (rows = 0; rows < this.rows; rows ++) {
      for (cols = 0; cols < this.cols; cols ++ ) {
        neighbours = Array();
        if (cols < (this.cols - 2)) {
          neighbours.push( this.blocks[rows][cols + 1] );
        }
        if (rows < (this.rows - 2)) {
          neighbours.push( this.blocks[rows + 1][cols]  );
        }
        if (cols > 0) {
          neighbours.push( this.blocks[rows][cols - 1]  );
        }
        if (rows > 0) {
          neighbours.push( this.blocks[rows - 1][cols] );
        }
        this.blocks[rows][cols].setNeighbours( neighbours );
        this.blocksSequence.push( this.blocks[rows][cols] );
      }
    }
  }

}