pixelart.js

var msg = "Values: ";
var rd = 0;//values you want to change
var grn = 0;
var blu = 0;
var col = 1;//represents red, green or blue 1,2,3
var dir = 5;
var colArr = [];
var colObj = {r:255,g:255,b:255};
var gridSize = 16;
  var x = 10;
  var y = 50;
  var w = 20;
var pixelArt =[{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:80,g:10,b:5},{r:80,g:10,b:5},{r:80,g:10,b:5},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:5,g:0,b:0},{r:235,g:220,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:80,g:10,b:5},{r:235,g:220,b:0},{r:80,g:10,b:5},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:5,g:0,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:80,g:10,b:5},{r:235,g:220,b:0},{r:80,g:10,b:5},{r:80,g:10,b:5},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:5,g:0,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:80,g:10,b:5},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:5,g:0,b:0},{r:5,g:0,b:0},{r:5,g:0,b:0},{r:5,g:0,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:235,g:220,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:0,g:0,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:0,g:0,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:0,g:0,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:0,g:0,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:0,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:255,g:0,b:0},{r:0,g:0,b:255},{r:255,g:255,b:0},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:255,g:255,b:0},{r:0,g:0,b:255},{r:255,g:0,b:0},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:255,g:225,b:0},{r:255,g:225,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:0,g:0,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:255,g:255,b:255},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:100,g:55,b:0},{r:255,g:255,b:255},{r:255,g:255,b:255}];

function setup() {
  createCanvas(400, 400);
  setArray();
    msg = "red: " + rd  + " green: " + grn + " blue: " + blu;

  //colArr = pixelArt;
  
}

function draw() {
  background(220);
  fill(0);
  text(msg, 10,10);
  fill(rd,grn,blu);//so you know what the current color is
  rect(200,0,20,20);
   x = 10;
   y = 50;
   w = 20;
  
  for(var i=1; i<(gridSize * gridSize) + 1;i++){
    fill(colArr[i-1].r,colArr[i-1].g,colArr[i-1].b);
    rect(x,y,w,w);
    x+=w;
    if(i%gridSize==0){
       x = 10;
       y +=w;
    }
    
  }//end of for
 
  
}

function keyPressed(){
 //You will want to code here and ************************
  //probably a good idea to call a function
  //where most of your code will reside
  
  
  
  //NO NEED TO EDIT BELOW*****************
  
  if(keyCode==80){
   var prn = "var pixelArt =[";
    for(var i=1; i<(gridSize * gridSize) + 1;i++){
       prn += "{r:"+colArr[i-1].r+",g:"+colArr[i-1].g+",b:"+colArr[i-1].b+"},";
    }
   prn += "];";
    print(prn);
                 
  }
  /*
  if(keyCode==80){
   var prn = "int[] pr ={";
    for(var i=1; i<(gridSize * gridSize) + 1;i++){
       prn += colArr[i-1].r+",";
    }
   prn += "};";
    print(prn);
    
     prn = "int[] pg ={";
    for(var i=1; i<(gridSize * gridSize) + 1;i++){
       prn += colArr[i-1].g+",";
    }
   prn += "};";
    print(prn);
    
      prn = "int[] pb ={";
    for(var i=1; i<(gridSize * gridSize) + 1;i++){
       prn += colArr[i-1].b+",";
    }
   prn += "};";
    print(prn);
  
                 
  }//end of clicked 80
  */
 
}//end of keypressed

function setArray(){
  for(var i=0; i<gridSize * gridSize;i++){
      colArr.push(colObj);
  }
  
}

function mousePressed(){
   var xx = 10;
   var yy = 50;
   var ww = 20;
  if(mouseX>xx && mouseX<xx + (ww*gridSize) && mouseY>yy && mouseY<yy + (ww*gridSize)){
    var xSpot = Math.floor((mouseX-xx)/ww);
    var ySpot = Math.floor((mouseY-yy)/ww);
    var spot = (ySpot * gridSize) + xSpot;
    colArr[spot] = {r:rd,g:grn,b:blu}; 
  }
  
}