Search code examples
colorsprocessingstroke

How do I change the outline color (stroke) of my shape after drawing it?


I'm coding in Processing for the first time (previously familiar with Java) and I'm trying to make a grid of triangles where when I click one, it changes the fill and stroke to a different color. The fill is changing but the stroke remains the default color. Here is my code:

void setup() {
  size(800, 600); // size of canvas
  triangles = new ArrayList<TriangleClass>();  // Create an empty ArrayList

  int L = 50; // length of triangle side
  double halfStep = L * Math.sqrt(3);

  // all the code about making the grid
} 

void draw() {
  background(0);
  TriangleClass myCurrentTriangle;

  for (int i = 0; i < triangles.size(); i++) {
    // get object from ArrayList
    myCurrentTriangle = triangles.get(i);
    myCurrentTriangle.display();
  } 
} 

void mouseClicked () {
  TriangleClass myCurrentTriangle ;
  for (int i=0; i < triangles.size(); i++) {
    // get object from ArrayList
    myCurrentTriangle = triangles.get(i);
    myCurrentTriangle.mouseOver();
  }
}

class TriangleClass {
  double x1, y1, x2, y2, x3, y3;    // points
  color fill; // fill color
  color stroke; // stroke color
  float mouseSensorX, mouseSensorY;// check point for dist to mouse

  // constructor
  TriangleClass(
    //  ...
    stroke = color(174, 208, 234);
    fill = color(249, 249, 249);
    mouseSensorX = (float) (x1+x2+x3 )/ 3;
    mouseSensorY = (float) (y1+y2+y3 )/ 3;
  }  

  void mouseOver() {
    if (dist(mouseX, mouseY, mouseSensorX, mouseSensorY) < 17) {
      if (fill == color(249, 249, 249)) {
        stroke = color(251, 84, 84);
        fill = color(251,84,84);
      // ... repeated for other colors
    }
  } 

  void display() {
    // show triangle
    stroke(stroke);
    fill(fill);
    triangle((float) x1, (float) y1, (float) x2, (float) y2, (float) x3, (float) y3);
  } 
} 
// =====================================================================

Solution

  • I believe the problem is the stroke weight. All you need to do it have this line of code at the end of your setup function:

    strokeWeight(3);
    

    The larger the number, the larger the outline.