Help with stroke(); command

itsstoiven

I have this code right now, and I want to have both the stroke commands be layered together. I specifically want the black stroke layered on top of the grey stroke, but I can't seem to figure out what to do. Any tips?

boolean mouseInRed;
boolean mouseInGreen;
boolean mouseInBlue;
boolean redOn = false;
boolean greenOn = false;
boolean blueOn = false;
int r = 255;
int g = 255;
int b = 255;

void setup() {
  size(500, 500);
  background(0);
  strokeWeight(12);
  stroke(125);
  rectMode(CENTER);
}
void draw() {

  if (redOn) {  
    background(r, 0, 0);
    stroke(0);
    strokeWeight(2);

  }
  else if (greenOn) {
    background(0,g,0);
  }
  else if (blueOn) {
    background(0,0,b);
  }
  else {
    background(0);
  }

    fill(255, 0, 0);
    rect(100,250,100,100); //red square

    fill(0, 255, 0);         
    rect(250,250,100,100); //green square

    fill(0, 0, 255);
    rect(400, 250, 100, 100); //blue square
}  
  void mousePressed() {
   mouseInRed = (mouseX > 50 && mouseX < 150)
             && (mouseY > 200 && mouseY < 300);
   if (mouseInRed) redOn = !redOn;

   mouseInGreen = (mouseX > 200) && (mouseX < 300) 
               && (mouseY > 200) && (mouseY < 300);
   if (mouseInGreen) greenOn = !greenOn;

   mouseInBlue = (mouseX > 350 && mouseX < 450)
              && (mouseY > 200 && mouseY < 300);
   if (mouseInBlue) blueOn = !blueOn;

  }

_vk

I can see only a black call to stroke (both in setup() ans draw()) Can't see no gray stroke... what do you need exactly? Anyway to have a stroke over another you will need something like this:

rectMode(CENTER);
fill(234,134,34);
strokeWeight(5);
stroke(0);
rect(50,50,50,50);
noFill();
strokeWeight(1);
stroke(200);
rect(50,50,50,50);

itsstoiven

Sorry, I re-edited it and maybe I wasn't clear enough. When I click a square, I want there to be a black stroke layered on top of the grey stroke.

_vk

Here... I ended changing some stuff more than the stroke. :-.P I think a lot can be improved yet... Maybe you want one click also to deactivate others colours. Cause of the drawing order, if you activate green and then activate red without deactivating green, red will cover green... that will remain active. So if you deactivate red It will not go to black status, instead it will go green active status. Maybe a switch() and objects...

boolean redOn = false;
boolean greenOn = false;
boolean blueOn = false;

color r = color(255, 0, 0);
color g = color(0, 255, 0);
color b = color(0, 0, 255);
color blk = color(0);
color bg = blk;

float thin = 2;
float thick = 12;

float rx = 100, ry = 250;
float gx = 250, gy = 250;
float bx = 400, by = 250;
float side = 100;


void setup() {
  size(500, 500);
  background(0);

  rectMode(CENTER);
}
void draw() {
  background(bg);

  squares();

  if (redOn) {  
    bg = r;
    drawStroke(rx, ry, r);
  }
  else if (greenOn) {
    bg = g;
    drawStroke(gx, gy, g);
  }
  else if (blueOn) {
    bg = b;
    drawStroke(bx, by, b);
  }
  else {
    bg = blk;
  }
}  



void squares() {
  strokeWeight(thick);
  stroke(125);

  fill(255, 0, 0);
  rect(rx, ry, side, side); //red square

    fill(0, 255, 0);         
  rect(gx, gy, side, side); //green square

    fill(0, 0, 255);
  rect(bx, by, side, side); //blue square
}



void drawStroke(float x, float y, color c ) {
  stroke(c);
  strokeWeight(thin);
  noFill();
  rect(x, y, side, side);
}

void mousePressed() {

  if ((mouseX > 50 && mouseX < 150)
    && (mouseY > 200 && mouseY < 300)) redOn = !redOn;

  if ((mouseX > 200) && (mouseX < 300) 
    && (mouseY > 200) && (mouseY < 300)) greenOn = !greenOn;

  if ((mouseX > 350 && mouseX < 450)
    && (mouseY > 200 && mouseY < 300)) blueOn = !blueOn;
}