RGB Blender

var line_r = {
  xs: 100,
  xe: 300,
  y: 250
};
var line_g = {
  xs: 100,
  xe: 300,
  y: 300
};
var line_b = {
  xs: 100,
  xe: 300,
  y: 350
};
var line_a = {
  xs: 100,
  xe: 300,
  y: 200
};

var box_r = {
  x: 200,
  y: 250,
  xs: 15,
  ys: 10
};
var box_g = {
  x: 200,
  y: 300,
  xs: 15,
  ys: 10
};
var box_b = {
  x: 200,
  y: 350,
  xs: 15,
  ys: 10
};
var box_a = {
  x: 300,
  y: 200,
  xs: 15,
  ys: 10
};

var selected = {
  r: false,
  g: false,
  b: false,
  a: false
};

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

function draw() {
    background(150);
    var r = map(box_r.x, line_r.xs, line_r.xe, 0, 255);
    var g = map(box_g.x, line_g.xs, line_g.xe, 0, 255);
    var b = map(box_b.x, line_b.xs, line_b.xe, 0, 255);
    var a = map(box_a.x, line_a.xs, line_a.xe, 0, 255);

    noStroke();
    fill(0, 0, 0, 100);
    rect(100+5, 100+5, 50, 25)

    //Picture
    noStroke();
    fill(0, 0, 0, 100);
    rect(200+5, 100+5, 150, 150);
    fill(150);
    rect(200, 100, 150, 150);
    fill(r, g, b, a);
    stroke(255);
    rect(200, 100, 150, 150);
    fill(255);

    //RGB Box
    //Red
    noStroke();
    fill(0, 0, 0, 100);
    rect(300+5, 50+5, 50, 25)
    stroke(255);
    fill(255, 0, 0);
    rect(300, 50, 50, 25);

    //Green
    noStroke();
    fill(0, 0, 0, 100);
    rect(300+5, 100+5, 50, 25)
    stroke(255);
    fill(0, 255, 0);
    rect(300, 100, 50, 25);

    //Blue
    noStroke();
    fill(0, 0, 0, 100);
    rect(300+5, 150+5, 50, 25)
    stroke(255);
    fill(0, 0, 255);
    rect(300, 150, 50, 25);

    //Alpha
    stroke(255);
    fill(0);
    rect(100, 100, 50, 25);


    fill(255);
    stroke(0);
    textSize(14);
    //Red
    text("R:", 278, 55);
    text(int(r),295, 55);
    //Green
    text("G:", 278, 105);
    text(int(g),295, 105);
    //Blue
    text("B:", 278, 155);
    text(int(b),295, 155);
    //Alpha
    text("A:", 78, 105);
    text(int(a),95, 105);

    //Alpha Slider
    line(line_a.xs, line_a.y, line_a.xe, line_a.y);
    if (mouseX >= box_a.x-box_a.xs/2 && mouseX <= box_a.x+box_a.xs/2 && mouseY >= box_a.y-box_a.ys/2 && mouseY <= box_a.y+box_a.ys/2 || selected.a) {
      fill(200);
    } else {
      fill(255);
    }
    rect(box_a.x, box_a.y, box_a.xs, box_a.ys);
    //Red Slider
    line(line_r.xs, line_r.y, line_r.xe, line_r.y);
    //Shadow
    fill(0, 0, 0, 100);
    noStroke();
    rect(box_r.x+2, box_r.y+2, box_r.xs, box_r.ys);
    stroke(0);
    if (mouseX >= box_r.x-box_r.xs/2 && mouseX <= box_r.x+box_r.xs/2 && mouseY >= box_r.y-box_r.ys/2 && mouseY <= box_r.y+box_r.ys/2 || selected.r) {
      fill(200, 0, 0);
    } else {
      fill(255, 0, 0);
    }
    rect(box_r.x, box_r.y, box_r.xs, box_r.ys);

    //Green Slider
    line(line_g.xs, line_g.y, line_g.xe, line_g.y);
    //Shadow
    fill(0, 0, 0, 100);
    noStroke();
    rect(box_g.x+2, box_g.y+2, box_g.xs, box_g.ys);
    stroke(0);
    if (mouseX >= box_g.x-box_g.xs/2 && mouseX <= box_g.x+box_g.xs/2 && mouseY >= box_g.y-box_g.ys/2 && mouseY <= box_g.y+box_g.ys/2 || selected.g) {
      fill(0, 200, 0);
    } else {
      fill(0, 255, 0);
    }
    rect(box_g.x, box_g.y, box_g.xs, box_g.ys);

    //Blue Slider
    line(line_b.xs, line_b.y, line_b.xe, line_b.y);
    //Shadow
    fill(0, 0, 0, 100);
    noStroke();
    rect(box_b.x+2, box_b.y+2, box_b.xs, box_b.ys);
    stroke(0);
    if (mouseX >= box_b.x-box_b.xs/2 && mouseX <= box_b.x+box_b.xs/2 && mouseY >= box_b.y-box_b.ys/2 && mouseY <= box_b.y+box_b.ys/2 || selected.b) {
      fill(0, 0, 200);
    } else {
      fill(0, 0, 255);
    }
    rect(box_b.x, box_b.y, box_b.xs, box_b.ys);
    fill(255);

    if (mouseX < line_r.xs && selected.r) {
      box_r.x = line_r.xs;
    }
    if (mouseX > line_r.xe && selected.r) {
      box_r.x = line_r.xe;
    }
    if (mouseX < line_g.xs && selected.g) {
      box_g.x = line_g.xs;
    }
    if (mouseX > line_g.xe && selected.g) {
      box_g.x = line_g.xe;
    }
    if (mouseX < line_b.xs && selected.b) {
      box_b.x = line_b.xs;
    }
    if (mouseX > line_b.xe && selected.b) {
      box_b.x = line_b.xe;
    }
    if (mouseX < line_a.xs && selected.a) {
      box_a.x = line_a.xs;
    }
    if (mouseX > line_a.xe && selected.a) {
      box_a.x = line_a.xe;
    }
}

function mouseDragged() {
  if (selected.r && box_r.x >= line_r.xs) {
    if (mouseX >= line_r.xs && mouseX <= line_r.xe) {
      box_r.x = mouseX;
    }
  }
  if (selected.g && box_g.x >= line_g.xs) {
    if (mouseX >= line_g.xs && mouseX <= line_g.xe) {
      box_g.x = mouseX;
    }
  }
  if (selected.b && box_b.x >= line_b.xs) {
    if (mouseX >= line_b.xs && mouseX <= line_b.xe) {
      box_b.x = mouseX;
    }
  }
  if (selected.a && box_a.x >= line_a.xs) {
    if (mouseX >= line_a.xs && mouseX <= line_a.xe) {
      box_a.x = mouseX;
    }
  }
}

function mousePressed() {
  if (mouseX >= box_r.x-box_r.xs/2 && mouseX <= box_r.x+box_r.xs/2 && mouseY >= box_r.y-box_r.ys/2 && mouseY <= box_r.y+box_r.ys/2) {
    selected.r = true;
  }
  if (mouseX >= box_g.x-box_g.xs/2 && mouseX <= box_g.x+box_g.xs/2 && mouseY >= box_g.y-box_g.ys/2 && mouseY <= box_g.y+box_g.ys/2) {
    selected.g = true;
  }
  if (mouseX >= box_b.x-box_b.xs/2 && mouseX <= box_b.x+box_b.xs/2 && mouseY >= box_b.y-box_b.ys/2 && mouseY <= box_b.y+box_b.ys/2) {
    selected.b = true;
  }
  if (mouseX >= box_a.x-box_a.xs/2 && mouseX <= box_a.x+box_a.xs/2 && mouseY >= box_a.y-box_a.ys/2 && mouseY <= box_a.y+box_a.ys/2) {
    selected.a = true;
  }
}

function mouseReleased() {
  selected.r = false;
  selected.g = false;
  selected.b = false;
  selected.a = false;
}