PixelSLIDER.js

var msg = "Values: ";
let rSlider, gSlider, bSlider;
var rd = 0;
var grn = 0;
var blu = 0;
var col = 1;
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(window.innerWidth, 400);
  setArray();
  //colArr = pixelArt;
    // create sliders
  rSlider = createSlider(0, 255, 0);
  rSlider.position(2, 20);
  gSlider = createSlider(0, 255, 0);
  gSlider.position(134, 20);
  bSlider = createSlider(0, 255, 0);
  bSlider.position(265, 20);
  
}

function draw() {
  msg = "red: " + rd  + "          green: " + grn + "        blue: " + blu;
  rd = rSlider.value();
   grn = gSlider.value();
  blu = bSlider.value();
  background(220);
  fill(0);
  text(msg, 10,15);
  fill(rd,grn,blu);
  rect(350,50,30,30);
   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(){
  
  if(keyCode==38){//up
    dir = 5;
    changeCol();
    
  }
  
    if(keyCode==40){//down
     dir = -5;
      changeCol();
  }
  
    if(keyCode==39){//right
      col++;
      if(col>3){
       col=1; 
      }
    
  }
  
    if(keyCode==37){//left
      col--;
      if(col<0){
        col=3;
      }
    
  }
  
  /*
  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);
    alert(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 keypressed

function changeCol(){
  if(col==1){
    rd += dir;
    if(rd>255){
      rd = 0;
    }
    if(rd<0){
     rd = 255; 
    }
  }
  
  if(col==2){
    grn += dir;
    if(grn>255){
      grn = 0;
    }
    if(grn<0){
     grn = 255; 
    }
  }
  
  if(col==3){
    blu += dir;
    if(blu>255){
      blu = 0;
    }
    if(blu<0){
     blu = 255; 
    }
  }
  
  
  
  
}


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}; 
  }
  
}