pixelArt

let r=100,g=100,b=100;
function setup() {
  createCanvas(400, 400);
  strokeWeight(0.2);
  textSize(16);
  makeButton();
  noStroke();
  background(10,100,200)
}

function draw() {
  fill(r,g,b);
  if (mouseIsPressed){
    rect(mouseX-mouseX%10,mouseY-mouseY%10,10,10)
  } 
}

function makeButton(){
  rSlider = createSlider(0, 255, r, 1);
  rSlider.position(20, 420);
  rSlider.size(400,20);
  gSlider = createSlider(0, 255, g, 1);
  gSlider.position(20, 470);
  gSlider.size(400,20);
  bSlider = createSlider(0, 255, b, 1);
  bSlider.position(20, 520);
  bSlider.size(400,20);
  valueDisp1 = createP();
  valueDisp1.position(20, 390);
  valueDisp1.html("Red =  " + r);
  valueDisp2 = createP();
  valueDisp2.position(20, 440);
  valueDisp2.html("Green = " + g) ; 
  valueDisp3 = createP();
  valueDisp3.position(20, 490);
  valueDisp3.html("Blue =" + b) ; 
  rSlider.input(sliderChange1);
  gSlider.input(sliderChange2);
  bSlider.input(sliderChange3);
  colorSet();
  
}
function sliderChange1(){
    r = rSlider.value();
    valueDisp1.html("Red =  " + r)
    
    colorSet()
  } 
function sliderChange2(){
    g = gSlider.value();
    valueDisp2.html("Green = " + g)
  colorSet()
  }
function sliderChange3(){
    b = bSlider.value();
 
    valueDisp3.html("Blue =" + b)
   colorSet()
  }

function colorSet(){
  c = color(r,g,b)
  
document.body.style.backgroundColor = c;
}