/*
 * @name Array and Object
 * @description An array is a list of data, and an Object is a
 * list of colors. Each piece of data in an array is identified
 * by an index number representing its position in the array. 
 */
/*
  PixelArt
  Array map for paint a pixel art
*/

var grid = 16;    // Width of grid

var w = 20;       // Width of rect
var h = 20;       // Height of rect
var colors = {    // Object Colors
    1: '#000000', // Black
    2: '#ed225d', // P5Color
    3: '#ff829f', // LightP5Color
    4: '#b40067', // ShadowP5Color
    5: '#5b6468', // Grey
    6: '#5b6468', // LightGrey
    7: '#323436'  // DarkGrey
  };
var pixelArt = [  // Array Map
  0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,
  0,0,0,0,0,1,3,3,2,2,1,0,0,0,0,0,
  0,0,0,0,1,2,3,3,2,2,2,1,0,0,0,0,
  0,0,0,0,1,2,2,2,2,2,2,1,0,0,0,0,
  0,0,0,0,1,2,2,2,2,2,4,1,0,0,0,0,
  0,0,0,0,1,2,2,2,2,4,4,1,0,0,0,0,
  0,0,0,0,0,1,2,2,4,4,1,0,0,0,0,0,
  0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,
  0,0,0,0,0,0,0,7,7,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,7,7,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,7,7,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,7,7,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,7,7,0,0,0,0,0,0,0,
  0,0,0,0,6,5,5,5,5,5,5,5,0,0,0,0,
  0,0,0,5,1,1,1,1,1,1,1,1,1,0,0,0
];

function setup() {
  createCanvas(400,400);
}


function draw() {
  var posX = 40;    // X possition
  var posY = 40;    // Y possition
  background('#0098e1');
  
 
  strokeWeight(0);


  for ( var i=0; i <= pixelArt.length; i++ ) {
      posX = posX + w;
      
      if( i % grid === 0 ) {
        posX = 40;
        posY = posY + h;
      }
      
      if( pixelArt[i] > 0 ){
        fill( colors[pixelArt[i]] );
        rect(posX, posY, w, h);
      }
  }

  var posXGrid = 0;
  var posYGrid = 0;

  strokeWeight(1);
  stroke(255,30);
  
  for ( var i=0; i < height; i = i+h ) {
    
    for ( var j=0; j < width; j = j+w ) {
      fill(0,random(0,25));
      rect(posXGrid,posYGrid,w,h);
      posXGrid = posXGrid + w;
    }
    
    posXGrid = 0;
    posYGrid = posYGrid + h;
  }

}