PixelArt2.js

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}];
var msg = "Values: ";
let rSlider, gSlider, bSlider;
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;

function setup() {
  createCanvas(600, 400);
  setArray();
    msg = "red: " + rd  + " green: " + grn + " blue: " + blu;
   // create sliders
  rSlider = createSlider(0, 255, 0);
  rSlider.position(5, 10);
//add more sliders here.

//  colArr = pixelArt;
  
}

function draw() {
//add values here
  
  
  
  background(220);
   msg = "red: " + rd  + " green: " + grn + " blue: " + blu;
  fill(0);
  text(msg, 10,10);
  fill(rd,grn,blu);//so you know what the current color is
  rect(350,100,50,50);
   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(){
 
  
  
  
  //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);
                 
  }
  
}//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}; 
  }
  
}